11 ms·
How We Built the GitHub Globe
- ChrisArchitect 6y agoSee also ENCOM Globe, tribute to Tron:Legacy https://www.robscanlon.com/encom-globe/ https://www.robscanlon.com/encom-globe/
- bluenose69 6y agoWow, very interesting. Although I'm on GH every day, I seldom look at the base GH page and so I would not have noticed this for a long time. Many thanks for posting this. The article is very interesting.
- lights0123 6y agoAnd you don't see any of this stuff when logged in.
- oneeyedpigeon 6y agoYou do, just go to https://github.com/home https://github.com/home
- chungy 6y agoIs that even linked anywhere? GGP isn't alone, I've literally never seen the Globe before either.
- dmix 6y agoIt's still almost brand new still, they launched a new homepage around Dec 14th, or maybe earlier.
- davidjnelson 6y agoTheir home page is really a work of art, just beautiful.
- rattray 6y agoWow, that's a really nice (and extraordinarily rich) landing page. One thing I hadn't known about before was Github Discussions (beta): https://github.com/home#home-community https://github.com/home#home-community
- wpietri 6y agoFWIW, this only works for me in Chrome, not Firefox.
- ffpip 6y agoWhat doesn't work? Link, page, CSS? Everything seems to work for me. Firefox latest stable release
- Normal_gaussian 6y agoI get a static image in firefox - https://github.githubassets.com/images/modules/site/home/globe-700.jpg https://github.githubassets.com/images/modules/site/home/glo... I get terribly jittery rendering in chrome (despite being on a powerful desktop that is doing nothing else).
- wpietri 6y agoLike Normal_gaussian, it was just a static image. Works for me now, though. No idea what changed.
- GrayShade 6y agoIt works for me on Firefox mobile (Fenix).
- gk1 6y agoLooks a lot like the globe on Stripe's homepage: https://stripe.com https://stripe.com They even had a post about it, too: https://stripe.com/blog/globe https://stripe.com/blog/globe
- kowlo 6y agoVery similar - and posted earlier! The GitHub one has some nicer effects.
- deleted 6y ago[deleted]
- elwell 6y agoDating further back, it might be even closer to this old "Chrome experiment" from about 10 years ago: https://github.com/dataarts/webgl-globe https://github.com/dataarts/webgl-globe
- ChuckMcM 6y agoPretty much. Basically the "show internet actions via the globe" has a pretty rich history. There was even an animated and projected globe in the lobby of the IBM research facility in San Jose. Still, given that the "form" is well established, it is always interesting to me at least to see how they chose to represent the data. When Blekko was running Bryn Dole had done a visualization based on this theme were query requests were highlighted as streams from their point of origin (more queries, taller stream as I recall).
- dmix 6y agoGood design ideas are always 'stolen'. As long as it's not exactly the same clone then it's fine. Github's is different enough and looks cool so I don't mind the similarity. And as others have commented there is plenty of other examples in the past of global activity maps.
- benatkin 6y ago
- gotem 6y agoCrazy impressive. A little bit misleading though.
- jessikat 6y agoA link to a repo of the actual code would be nice too for inspiration
- ddevault 6y agoAlternate titles: How we broke our home page on your web browser Why your fans turned on when you visited GitHub.com We collected and stored your personal information to make a tech demo (and shared that info with Google, Wordpress, and anyone who visits our home page) Disclaimer: I run a similar service to GitHub, though I am legitimately salty about crap like this.
- kowlo 6y agoGreat way to visualise the data. I wonder if it will work its way into any plotting libraries...
- kowlo 6y agoA link to something similar (but not the same) https://experiments.withgoogle.com/chrome/globe https://experiments.withgoogle.com/chrome/globe
- UnnoTed 6y agoNot useful, all it does is lag the page and increase the cpu usage to 40% when you have hardware acceleration turned off.
- framecowbird 6y agoAgree! They could have cached way more of this. A pre-rendered video would have had the same effect. A fun and impressive thing to build for sure, but its value isn't worth its complexity.
- bronson 6y agoYou can’t interact with a video.
- kevincox 6y agoTo be pedantic you can. They would have to ship the locations along side the video. Of course part of the art is that it is real time (ish). That may be harder to do with video. (But I guess it could be a live stream)
- sciurus 6y agoWow, thanks for this comment. It hadn't occurred to me that you could interact with it. Neat! I wonder if I'm just odd, or if people not realizing it's interactive is widespread.
- framecowbird 6y agoI just don't think the interaction is particularly valuable. I looked at the globe and hovered over one PR. Maybe I'm just not curious enough!
- modeless 6y agoI work on WebGL in Chrome and I am curious why you have hardware acceleration turned off.
- 6y ago
- Plaastix 6y agoThis is amazing! Is it just me or is the performance of Github's globe really bad on Firefox? The FPS is super low for me on Firefox but fine in Chrome.
- GraemeMeyer 6y agoPerformance is fine for me in Firefox, but it is using 3x the CPU of Edgeium, and more RAM, so I would guess the GPU acceleration isn't working in FF
- apocalyptic0n3 6y agoYeah, I'm getting a really low framerate in Firefox but it's perfectly smooth in Chrome.
- sciurus 6y agoI was pleasantly surprised that it's performing fine for me in firefox on a pixel 3a.
- recursive 6y agoIt looks smooth to me in FF.
- idnefju 6y agoYou probably have hw acceleration disabled
- willcodeforfoo 6y agoPretty clever using the timezone offset to approximate the user's location without using GeoIP. I hadn't noticed that but sure enough, my (approximate) location is in view first.
- iamtedd 6y agoEh. I'm in the southern hemisphere, and the Github Globe first appears in the middle of the Philippines Sea. They're just assuming everyone is in the northern hemisphere.
- nl 6y agoSame. I think the combination of timezone and language settings would work for the obviously problematic cases (eg, Australia vs Japan/China/Asia, and South vs North America. Africa is still a problem though.)
- bewuethr 6y agoThat shouldn't matter for the timezone, though, no?
- iamtedd 6y agoUsing the timezone was Github's way of easily getting the right orientation of the globe for the viewer's location. In my case (and I'm guessing everyone in the southern hemisphere) that doesn't work.
- BiosElement 6y agoAren't most globes oriented that way for display though? They copied the normal angle used for physical globes so it's instantly recognizable I suspect.
- mattmanser 6y agoWhoosh, that was his point entirely. Globes are Northern hemisphere biased because of the history of European colonialism.
- gabereiser 6y agoI watched the animation from Nat the CEO and what struck me as odd was the volume of which Brazil does “activity” at night. Clearly the USA is more active during the day, as is India and Europe. Brazil on the other hand is backwards. Anyone know why that would be? I’ve worked with Brazilians before during the day so that struck me as really peculiar.
- kyawzazaw 6y agoI think night schools and courses are quite popular there compared to other countries.
- ramenmeal 6y agoWow, hardware acceleration makes a big difference here. I'm on a recent top of the line macbook pro and it couldn't handle it without hardware acceleration turned on. I wonder if they can/should disable the feature if it's off?
- modeless 6y agoI am curious, why do you have hardware acceleration turned off? To answer your question, the failIfMajorPerformanceCaveat flag allows sites to turn off their hardware accelerated features when hardware acceleration is off.
- Isthatablackgsd 6y agoNot the person you are responding to. I can provide a reason why it is off. Some software behaved differently/weirdly with hardware acceleration and often it is recommended to disable it. I have hardware acceleration disabled in Excel because of scrolling graphic bug.
- modeless 6y agoI work on WebGL in Chrome. It's my job to fix bugs like these. I'm hoping to learn what specific bugs people are hitting.
- dharmab 6y agoIt's sometimes necessary on Linux due to bugs in out-of-tree drivers or desktop managers. A recent thread that turned out to be a lightdm bug: https://www.reddit.com/r/archlinux/comments/kl9map/cant_run_a_game_and_youtube_at_the_same_time/ https://www.reddit.com/r/archlinux/comments/kl9map/cant_run_...
- matsemann 6y agoMost people in my company had to turn it off in Chrome (or switch to Fx) because webpages became a mess on their MacBook. Think this is the issue (screenshot there representative of how it looks, at least) https://support.google.com/chrome/thread/35828402?hl=en https://support.google.com/chrome/thread/35828402?hl=en
- sprsimplestuff 6y agoShopify did something similar, I'm pretty sure, for Black Friday looks so cool
- awinter-py 6y agowhy is the octocat wearing a space helmet if there are plants growing below it? what happened on this planet to make the air unbreathable? Some kind of chernobyl event, possibly caused by the ICBMs in the globe image? What is the octocat standing on top of? Abandoned silo? Or live silo about to go hot?
- dharmab 6y agoPerhaps the Octocat is following interplanetary hygiene best practices during their visit to Earth from the Octoplanet. [1] 1: https://sma.nasa.gov/sma-disciplines/planetary-protection https://sma.nasa.gov/sma-disciplines/planetary-protection
- awinter-py 6y agooctocat prime directive is 'helmet stays on'
- a_t48 6y agoMaybe the plants are grown in a CO2 rich environment, so that extra O2 isn't wasted where it's not needed.
- jeffbee 6y agoAlt title: how we made yet another population density map, but this time using all of your CPU.
- xixixao 6y agoBased on the Satellite video it looks like the US is the only place on the planet coding more during the night than during the day.
- dmix 6y agoI'm not convinced of the performance, I heard my fans spin up when I first opened the new Github.com redesign a few weeks back and remember commenting on it to our developers ("how we destroyed your browsers performance" as a joke). It's still a heavy thing to add to any page IMO. Which shouldn't be downplayed. But it is very neat and I still like it.
- kevincox 6y agoPerformance != resource usage in this case. They optimized for hitting 60fps without any concern for the resources they were using as long as it fit in that budget I agree that using this amount of resources in the browsers of visitors shouldn't be taken lightly (they could be on battery for example).
- dmix 6y agoThat's a good point which I didn't consider when I read the top end of the blog post.
- mariust 6y agoohhhh well thank you it takes me a few seconds to login :d
- umaar 6y agoRelated: WebGL globe showing live Wikipedia edits https://umaar.com/globe/ https://umaar.com/globe/ I've also tried to visualise worldwide COVID data on that globe, however performance degrades making it completely unusable.
- Andrew_nenakhov 6y agoLooks very similar to https://globekit.co/ https://globekit.co/ I recall Stripe's globe was built using that.
- dpaint 6y agoI love an animated webgl globe as much as the next person but did no-one check scrolling on mobile? Maybe it's just me but it captures vertical scrolling preventing moving down the page. It's a common gotcha when embedding Google maps on mobile. Here's a mobile capture for reference https://files.catbox.moe/e965m9.mp4 https://files.catbox.moe/e965m9.mp4
- ylyn 6y agoWorks fine for me. Just don't try to scroll by tapping the globe.
- celsoazevedo 6y agoIsn't the bottom part of the display where people start scrolling though?
- EGreg 6y agoIf you want something like this on your site, here are the resources. As a company that built a rotating globe years ago to visualize our growing user base around the world using our apps, I wanted to share a link to the demo here. Being that we did this years before WebGL became available in all major browsers, we used canvas rendering and shapes of countries from open databases. It is supposed to work across all devices so try it whatever browser you are on now: https://qbix.com https://qbix.com Please scroll down to where the globe image appears and click/tap it. Feel free to switch countries and click around. I would love to hear your feedback. PS: We have open sourced all this stuff, so if anyone here wants to put a globe on their website, just load our Q.js from https://github.com/Qbix/Platform https://github.com/Qbix/Platform and then render the Q/globe tool and Places/countries selector tool with your own options. Unlike the GitHub globe, you can also have users click on countries in the globe to select them, and if you need you can pull in the flags, languages and all the other stuff per country.
- tomcam 6y agoThank you! Tested on an iPhone 5 and perf is fine! Mad props.
- deleted 6y ago[deleted]
- collectedview 6y agoWhen someone puts a video game in-front of me and asks me to turn it into an app, I will be searching for this article for hours.
- deleted 6y ago[deleted]
- just_steve_h 6y agoIt's funny that the marketing & design folks keep doing this (IBM in the 80s, Akamai in the 90s through today, and so on). It looks super cool and informs the viewer of very little. (Full disclosure: I ported a prototype version of my company's globe data viz in 2013 using Three.js - it's terrific! Those folks are the real heroes in this story.)