d3_meetup_20120130.pdf

Transcript

1. D3 Geo Visualisations Oliver Nightingale @olivernn Wednesday, 30 January 13 - Introduction - Who I am - Where I work - What I'm going to talk about
2. Wednesday, 30 January 13 - Interest in visualisations - Several years interest - Information is beautiful - interesting, simple, expressions of data
3. http://canvas.fm Wednesday, 30 January 13 - Canvas.fm - visualises strength of audio frequency over time
4. Wednesday, 30 January 13 - A lot of custom code - not invented here syndrome - too long writing boilerplate code to get things working - less time focusing on the visualisation - how to express this data in a simple, interesting way - D3 first contact - examples on gh wiki - cool but hard to customize? - makoto introduction - useful utility functions http://www.flickr.com/photos/nationaalarchief/4193508328/in/photostream/
5. http://hint.fm/wind Wednesday, 30 January 13 - Wanting to use D3 - wind map inspiration - uk weather data
6. Wednesday, 30 January 13 - Met office data - freely available weather data - hourly observations - available for last 24 hours - I have 2 months worth
7. DEMO Wednesday, 30 January 13 - Demo - voronoi plot change colour - average temperature for the UK - actual for a particular location - skipping forward, backward - change url
8. Wednesday, 30 January 13 - Demo - voronoi plot change colour - average temperature for the UK - actual for a particular location - skipping forward, backward - change url
9. Wednesday, 30 January 13 - Drawing the Map - shape files - where to get them (Ordnance Survey) - formats (always wrong) - conversion tools - Mike Bostock article - draws map of UK - borrowed the same shape files for uk temp - links at the end
10. Projection d3.geo.albers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(6000) Wednesday, 30 January 13 - Projections - displaying points from the globe (spherical) on 2d - made trivially easy by d3 - projection types - albers, mecrator, etc
11. Wednesday, 30 January 13 - Voronoi - what they are - dividing space into regions - initial points are called seeds - a region per seed contains all points closer to that seed than any other - why they are cool - perfect for our example
12. Voronoi plot d3.geom.voronoi(lnglats) Wednesday, 30 January 13 - very simple to use - re-using the projection from the map
13. Voronoi plot cells.map(function (cell) { return ‘M’ + cell.join(‘L’) + ‘Z’ }) Wednesday, 30 January 13 cells is an array of x,y points that make up a path convert them into svg path definition strings
14. Clipping Wednesday, 30 January 13 - Voronoi clipping - cells extend to infinity at edge - methods for taming this - svg clip-path - d3 clip-rect - nothing…
15. Wednesday, 30 January 13 - Scales - most useful parts of D3 - they don't get enough attention - relatively good documentation - convert one value (number) to another (number, string, whatever)
16. Colour scale d3.scale.linear() .domain([-15, -3, 3, 15, 20, 30]) .range([ '#2b63d4', '#26d6d9', '#38c78e', '#94bd42', '#f2dd00', '#ff8700']) Wednesday, 30 January 13 - Colour Scales - explain the inputs and outputs - similar to CSS gradient colour stops - interpolating colours is hard by hand - Position Scales - same concept as colour scales - usage in the site
17. Questions • @olivernn • uk.temperature.at • github.com/olivernn/weather • bost.ocks.org/mike/map Wednesday, 30 January 13