data visualization and mapping using javascript
DESCRIPTION
TRANSCRIPT
![Page 1: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/1.jpg)
Visualizing data using maps and other tools
Mack Hardy Director at Affinity Bridge
Presented Feb 5th, 2013at NetTuesday Vancouver
![Page 2: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/2.jpg)
Data Visualization as Story Telling
http://en.wikipedia.org/wiki/Data_driven_journalism
![Page 3: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/3.jpg)
Steps of Data Visualization
Acquire : Obtain the dataParse : Provide some structure for the data's meaningFilter : Remove all but the data of interest.Mine : Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical context.Represent : Choose a basic visual model, such as a bar graph, list, or tree.Refine : Improve the basic representation to make it clearer and more visually engaging.Interact : Add methods for manipulating the data or controlling what features are visible.
O'reilly book "Vizualizing Data " by Ben Fry http://benfry.com/
![Page 4: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/4.jpg)
Excel Charts
Google Charts
Excel and Google Charts
![Page 5: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/5.jpg)
So many other ways to show data
http://www.visual-literacy.org/periodic_table/periodic_table.html
![Page 6: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/6.jpg)
Maps
![Page 7: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/7.jpg)
Story Telling with Geographic Maps
Vision Vancouver Delivers Shale Gas Development in Fort Nelson
Geography provides the context for the story we are telling
http://votevision.ca/issues/map http://lands.fnnation.ca/story/shale_gas
![Page 8: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/8.jpg)
Composite layers on maps
In our case
base map satellite images
tilestache provides the data layers from PostGIS via mapnik
leaflet map definition points to layers in the layer switcher
Image credit http://mike.teczno.com/notes/tilestache.html
![Page 9: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/9.jpg)
Lot of Data on Geographic Maps
![Page 10: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/10.jpg)
Meta Data Presentation from Tiles
![Page 11: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/11.jpg)
Fusion Tables
![Page 12: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/12.jpg)
Google Fusion Tables Build
Example of making Choropleth in Fusion Tables
https://github.com/affinitybridge/canada-provincial-population-choropleth
![Page 13: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/13.jpg)
Fusion Tables as a Data Source
http://mapbox.com/blog/mapbox-fusion-tables-drones/
Chris Herwig from MapBox
http://hrwgc.github.com/places/drones/#8.00/32.886/70.467
![Page 14: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/14.jpg)
Timeline of Events
http://livingunderdrones.org/timeline/
![Page 15: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/15.jpg)
Review Christchurch table, show larger data set, and map styles
Illustrate that grouping is difficult in prepfor hexbin example
Fusion Tables - Larger Data Set
https://www.google.com/fusiontables/DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTwCHKVwk#map:id=3
![Page 16: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/16.jpg)
Cartograms
http://dl.dropbox.com/u/48433/datavis/canada/cartogram/cartogram_v1.html
A map on which statistical information is shown in diagrammatic form.
![Page 17: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/17.jpg)
http://bl.ocks.org/4687146
Scaling Canada by Area Population
![Page 18: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/18.jpg)
http://bl.ocks.org/4696122
Cartogram of population vs parliamentary seats
![Page 19: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/19.jpg)
Source: Canadian Census
Ecumene of Canadian Population
![Page 20: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/20.jpg)
http://www-personal.umich.edu/~mejn/election/2012/
Mark Newman, Department of Physics and Center for the Study of Complex Systems, University of Michigan
Contiguous Cartogram of 2012 US Results
![Page 21: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/21.jpg)
http://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html
World Oil Reserves
![Page 22: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/22.jpg)
Raphael http://raphaeljs.com
Making our Visualization Interactive
D3 http://d3js.org
![Page 23: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/23.jpg)
Walmart Locations All Hexed Up
http://indiemaps.github.com/hexbin-js/tests/walmart.html
![Page 24: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/24.jpg)
Graffiti in Vancouver
http://vancouver.ca/your-government/open-data-catalogue.aspx
http://bl.ocks.org/4711787
![Page 25: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/25.jpg)
http://bl.ocks.org/4668062
Density Map of Christchurch Quakes
![Page 27: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/27.jpg)
http://bl.ocks.org/4710662
Two aspects of dataset shown, plus geography
![Page 28: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/28.jpg)
http://bl.ocks.org/4718717
Earthquakes = Now with Timeline!
![Page 29: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/29.jpg)
Ethics & Open Data
Hugh StimsonGeocology Research
@geocology
![Page 30: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/30.jpg)
http://geocology.ca/projects/net-tuesday/
Guide to publishing data responsibly
How to know if you’re doing it right
Here are the main questions to ask yourself to ensure you publish data responsibly.
1. Why publish this?Who could be harmed?
Is the data accurate?
Is it relevant to your story?
2. Why not publish this?
3. How best to publish this?What facets of the data are truly essential?
![Page 31: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/31.jpg)
Discussion & Questions
[email protected]://affinitybridge.com
@mackaffinity @affinitybridge
http://xkcd.com/523/
![Page 32: Data Visualization and Mapping using Javascript](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c68c9d4a795915558b4589/html5/thumbnails/32.jpg)
LinksFusion Tableshttp://www.visual-literacy.org/periodic_table/periodic_table.htmlhttp://votevision.ca/issues/map#creativity-jobs-and-financeshttp://lands.fnnation.ca/story/shale_gashttp://stage.rr.affinitybridge.com/http://stage.rr.affinitybridge.com/node/993#zoom=10&lat=48.9685&lng=-124.8322&layer=17http://hrwgc.github.com/places/drones/#9.00/32.6285/69.7405http://mapbox.com/blog/mapbox-fusion-tables-drones/http://livingunderdrones.org/timeline/https://www.google.com/fusiontables/DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTwCHKVwk#map:id=3
Cartogramshttp://bl.ocks.org/4687146http://bl.ocks.org/4696122http://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html
Hugh Stimson from Geocologyhttp://geocology.ca/projects/net-tuesday/http://thetyee.ca/News/2012/07/05/BCCarbonMapLessons/http://www.lohud.com/interactive/article/20121223/NEWS01/121221011/Map-Where-gun-permits-your-neighborhood-?gcheck=1http://www.poynter.org/how-tos/digital-strategies/199834/programmers-explain-how-to-turn-data-into-journalism-why-that-matters-after-gun-permit-data-publishing/http://www.theatlanticcities.com/neighborhoods/2012/07/how-dramatically-alter-british-columbias-carbon-footprint/2489/
D3 Hexbin and Exampleshttp://indiemaps.github.com/hexbin-js/tests/walmart.html
http://bl.ocks.org/4711787http://vancouver.ca/your-government/open-data-catalogue.aspx
http://bl.ocks.org/4668062http://bl.ocks.org/4677419http://bl.ocks.org/4710662http://bl.ocks.org/4718717