Show HN: A WebGL visualization to show how global temperature changed since 1850 | Hacker News Reader

Show HN: A WebGL visualization to show how global temperature changed since 1850

callumprentice.github.io

Nice, but the rotate controls are a way too sensitive and spin the globe too fast. I recommend you look into arcball rotation [1]. It's perfect for a globe.

[1] http://nehe.gamedev.net/tutorial/arcball_rotation/19003/

edit: Love the animated transition between the plate carrée projection and sphere!

I like the feel of that affordance and will experiment with it. Have to bathe my 5 year old princess now and read stories but I'll get to it later :) Thanks!

Good point - thanks. I get blind to things as I work on them. Astonishing how people find valid issues so quickly when you show it around a bit.

Has the arcball been ported to JS/Three so one might feel handling?

1998 looks like an inflection point. Before then, you'd see blues and reds; after that, it's mostly just red everywhere. What's up with that?

In 1998 there was one of the strongest El Nino events.

https://en.wikipedia.org/wiki/1997%E2%80%9398_El_Ni%C3%B1o_e...

Maybe this made for a sudden increase, rather than a more gradual one.

Great and very pretty!

Besides the rotation issue pointed out by 'McKayDavis, I'd also suggest adding some legends for data - maybe a constantly visible data range on the side, that would help mapping the different shades of blue/red to actual values, and also some popup when you hover or click on a particular tile of the globe/map.

Really cool and interesting visualization.

Since this is most likely a common chart for people looking at climate change and it may be explained by the parents feedback, I was wondering if anyone knew what shades are held in reference to? Are they being compared to the average temperature of the last century, average compared to 1849, or whether its sort of a running diff to the previous year?

If you click the question mark it gives some details on the data.

The temperatures are relative to a 1961-1990 average.

Love it! A few suggestions...

- Set your Fb app to production so people can share on Facebook; currently shows error about dev mode

- Maybe increase the transparency of the tiles; people often like to focus on their home country on a map; would make it easier

- Add help tooltips over the navigation so it's easier to tell what each button does

Thanks for creating this!

I made the changes you suggested - Facebook "add a share" button is a little hard to grok but I think I fixed it.

Thank you!

I love the fact that you made this really slick interactive 3D data visualization, but the Facebook share button is "a little hard to grok"!

Again, very well made. Really pleasant to play with, though troubling to see. One thing I wonder is how are the temperature differentials normalized? In other words, how are "full red" and "full blue" defined? The max and min of the recorded ranges? Overall, or for that section/year? Etc.

Also, are those stars random?

Also, see https://news.ycombinator.com/item?id=12476945

Thank you. I make a pass over the data, find the min/max values for cooler and warmer and then use that to scale the color from full intensity (largest changes) to least intensity (smallest change). Visually at least, it seems mostly to agree with what the clever climate scientists have made in static images. The range is calculated for the whole period so that comparing year to year should be valid.

I didn't even consider blocked cookies - I set that flag in local storage since it seemed important to show some instructions the first time you see it but not thereafter. I'll experiment a bit and see if I can work around that.

Edit: stars are just a bitmap wrapper around a large sphere.

Cheers!

Yeah, Facebook changes the interface so frequently that they break their own documentation and every blog post with screenshots every few months.

For other readers, when you create a new Facebook app (often done to create Fb share and login buttons), the app defaults to developer mode. You have to dig through settings and switch it to production mode or everyone else will get an error.

Great ideas - I'll add them to the list and work on them this week. Thank you!

Renders great on an iPhone. The zooming is a bit weird. You should look into locking the viewport. Once you get to a zoom level it's really hard to get out of it.

Thanks for the feedback. I tried adding a meta tag in the HTML header and that actually makes a lot of things look nice (large, easy to hit buttons for example) but disables pinch zoom.

Also hard to make everything fit - the UI components are all scaled up which is nice but they no longer fit.

Lots to investigate!

"Your graphics card does not seem to support WebGL".

I've never failed to run WebGL before. Using chrome on mac.

That's odd - same sort of configuration as me (Chrome 51 on a pretty old iMac)

Fairly recent version of Chrome I presume? Other WebGL apps still run ok?

Huh, actually other WebGL demos aren't working for me now.

I'm on chrome 53 and chrome://gpu/ says: "WebGL: Hardware accelerated" but canvas.getContext('webgl') returns null.

Anyway, I can run it nicely in firefox.

Interesting. I think Chrome blacklists some GPUs and drivers occasionally so maybe that's what happened. Glad it works ok on Firefox and thanks for the feedback.

"Waiting for syndication.twitter.com"

...and this is where I click the close button. No, you will not use me for racking up your whatever.

Cool map! Is that coded with Cesium?

No although that's a really great SDK. It uses three.js and plain old JavaScript.

Reply on news.ycombinator.com