5 ms·

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

69 points by callumprentice 10y ago

McKayDavis 10y ago
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/ http://nehe.gamedev.net/tutorial/arcball_rotation/19003/ edit: Love the animated transition between the plate carrée projection and sphere!
- callumprentice 10y ago
  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.
- callumprentice 10y ago
  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!
- noiv 10y ago
  Has the arcball been ported to JS/Three so one might feel handling?
simple10 10y ago
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!
- callumprentice 10y ago
  Great ideas - I'll add them to the list and work on them this week. Thank you!
- callumprentice 10y ago
  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!
  - gavinpc 10y ago
    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 https://news.ycombinator.com/item?id=12476945
    - callumprentice 10y ago
      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!
  - simple10 10y ago
    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.
gunn 10y ago
"Your graphics card does not seem to support WebGL". I've never failed to run WebGL before. Using chrome on mac.
- callumprentice 10y ago
  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?
  - gunn 10y ago
    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.
    - callumprentice 10y ago
      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.
nojvek 10y ago
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.
- callumprentice 10y ago
  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!
euyyn 10y ago
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?
- more_original 10y ago
  In 1998 there was one of the strongest El Nino events. https://en.wikipedia.org/wiki/1997%E2%80%9398_El_Ni%C3%B1o_event 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.
mgalka 10y ago
Cool map! Is that coded with Cesium?
- callumprentice 10y ago
  No although that's a really great SDK. It uses three.js and plain old JavaScript.
Annatar 10y ago
"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.
TeMPOraL 10y ago
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.
- thebeardedone 10y ago
  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?
  - phaemon 10y ago
    If you click the question mark it gives some details on the data. The temperatures are relative to a 1961-1990 average.

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/ http://nehe.gamedev.net/tutorial/arcball_rotation/19003/ edit: Love the animated transition between the plate carrée projection and sphere!

callumprentice 10y ago
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.
callumprentice 10y ago
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!
noiv 10y ago
Has the arcball been ported to JS/Three so one might feel handling?

simple10 10y ago

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!

callumprentice 10y ago
Great ideas - I'll add them to the list and work on them this week. Thank you!
callumprentice 10y ago
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!
- gavinpc 10y ago
  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 https://news.ycombinator.com/item?id=12476945
  - callumprentice 10y ago
    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!
- simple10 10y ago
  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.

gunn 10y ago

"Your graphics card does not seem to support WebGL". I've never failed to run WebGL before. Using chrome on mac.

callumprentice 10y ago
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?
- gunn 10y ago
  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.
  - callumprentice 10y ago
    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.

nojvek 10y ago

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.

callumprentice 10y ago
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!

euyyn 10y ago

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?

more_original 10y ago
In 1998 there was one of the strongest El Nino events. https://en.wikipedia.org/wiki/1997%E2%80%9398_El_Ni%C3%B1o_event 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.

mgalka 10y ago

Cool map! Is that coded with Cesium?

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

Annatar 10y ago

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

TeMPOraL 10y ago

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.

thebeardedone 10y ago
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?
- phaemon 10y ago
  If you click the question mark it gives some details on the data. The temperatures are relative to a 1961-1990 average.