WingNews logo WingNews
top | item 25584720

How We Built the GitHub Globe

376 points| scalableUnicon | 5 years ago |github.blog

101 comments

order

gk1|5 years ago

Looks a lot like the globe on Stripe's homepage: https://stripe.com

They even had a post about it, too: https://stripe.com/blog/globe

dmix|5 years ago

Good 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.

ricardobeat|5 years ago

I've seen variations of these on basically every hackathon ever.

amelius|5 years ago

Perhaps it's just me but both seem to convey absolutely zero useful information ...

kowlo|5 years ago

Very similar - and posted earlier! The GitHub one has some nicer effects.

kevincox|5 years ago

I remember that Shopify used to have this as well for placed orders.

csbartus|5 years ago

Thanks! I knew I saw this globe somewhere else before. What a strange feeling ... a very strong deja vu, but mystery solved :)

willcodeforfoo|5 years ago

Pretty 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|5 years ago

Eh. 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.

zodiakzz|5 years ago

Clever but a bit lame given the fact that I guarantee your IP address is already analyzed from a bazillion angles (incl. GeoIP) way before it hits the frontend process. Not sure why they can't use that information.

bluenose69|5 years ago

Wow, 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|5 years ago

And you don't see any of this stuff when logged in.

dmix|5 years ago

I'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|5 years ago

Performance != 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).

EGreg|5 years ago

If 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

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 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|5 years ago

Thank you! Tested on an iPhone 5 and perf is fine! Mad props.

awinter-py|5 years ago

why 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?

a_t48|5 years ago

Maybe the plants are grown in a CO2 rich environment, so that extra O2 isn't wasted where it's not needed.

jeffbee|5 years ago

Alt title: how we made yet another population density map, but this time using all of your CPU.

wbobeirne|5 years ago

You'll actually find that the majority of the work for drawing this is happening on the GPU. I didn't even come close to maxing out my CPU with a stable 144fps.

just_steve_h|5 years ago

It'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.)

gabereiser|5 years ago

I 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|5 years ago

I think night schools and courses are quite popular there compared to other countries.

Plaastix|5 years ago

This 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|5 years ago

Performance 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|5 years ago

Yeah, I'm getting a really low framerate in Firefox but it's perfectly smooth in Chrome.

sciurus|5 years ago

I was pleasantly surprised that it's performing fine for me in firefox on a pixel 3a.

idnefju|5 years ago

You probably have hw acceleration disabled

recursive|5 years ago

It looks smooth to me in FF.

jessikat|5 years ago

A link to a repo of the actual code would be nice too for inspiration

ramenmeal|5 years ago

Wow, 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|5 years ago

I 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.

xixixao|5 years ago

Based 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.

umaar|5 years ago

Related: WebGL globe showing live Wikipedia edits https://umaar.com/globe/

I've also tried to visualise worldwide COVID data on that globe, however performance degrades making it completely unusable.

kowlo|5 years ago

Great way to visualise the data. I wonder if it will work its way into any plotting libraries...

sprsimplestuff|5 years ago

Shopify did something similar, I'm pretty sure, for Black Friday

looks so cool

collectedview|5 years ago

When 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.

UnnoTed|5 years ago

Not useful, all it does is lag the page and increase the cpu usage to 40% when you have hardware acceleration turned off.

modeless|5 years ago

I work on WebGL in Chrome and I am curious why you have hardware acceleration turned off.

framecowbird|5 years ago

Agree! 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.

defanor|5 years ago

AFAICT, hardware acceleration is enabled here (even tried to force-enable it in FF, on Linux), and the CPU load is still 55%.

dpaint|5 years ago

I 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

ylyn|5 years ago

Works fine for me. Just don't try to scroll by tapping the globe.

mariust|5 years ago

ohhhh well thank you it takes me a few seconds to login :d

gotem|5 years ago

Crazy impressive. A little bit misleading though.

tfsh|5 years ago

What's misleading?