Visualizing data using maps and           other tools             Mack Hardy       Director at Affinity Bridge         Pre...
Data Visualization as Story Telling       http://en.wikipedia.org/wiki/Data_driven_journalism
Steps of Data VisualizationAcquire : Obtain the dataParse : Provide some structure for the datas meaningFilter : Remove al...
Excel and Google Charts       Excel Charts       Google Charts
So many other ways to show data    http://www.visual-literacy.org/periodic_table/periodic_table.html
Maps
Story Telling with Geographic Maps   Vision Vancouver Delivers              Shale Gas Development in Fort Nelsonhttp://vot...
Composite layers on mapsIn our casebase map satellite imagestilestache provides the data layersfrom PostGIS via mapnikleaf...
Lot of Data on Geographic Maps
Meta Data Presentation from Tiles
Fusion Tables
Google Fusion Tables BuildExample of making Choropleth in Fusion Tables  https://github.com/affinitybridge/canada-provinci...
Fusion Tables as a Data Source  Chris Herwig from MapBox  http://mapbox.com/blog/mapbox-fusion-tables-drones/  http://hrwg...
Timeline of Eventshttp://livingunderdrones.org/timeline/
Fusion Tables - Larger Data Set  https://www.google.com/fusiontables/  DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTw...
CartogramsA map on which statistical information is shown in diagrammatic form.        http://dl.dropbox.com/u/48433/datav...
Scaling Canada by Area Population           http://bl.ocks.org/4687146
Cartogram of population vs    parliamentary seats        http://bl.ocks.org/4696122
Ecumene of Canadian Population           Source: Canadian Census
Contiguous Cartogram of 2012 US Results     Mark Newman, Department of Physics and Center for the Study of Complex Systems...
World Oil Reserveshttp://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html
Making our Visualization Interactive      D3                  Raphaelhttp://d3js.org     http://raphaeljs.com
Walmart Locations All Hexed Uphttp://indiemaps.github.com/hexbin-js/tests/walmart.html
Graffiti in Vancouver                http://bl.ocks.org/4711787http://vancouver.ca/your-government/open-data-catalogue.aspx
Density Map of Christchurch Quakes            http://bl.ocks.org/4668062
Hexbin Graph http://bl.ocks.org/4677419
Two aspects of dataset shown, plus geography                 http://bl.ocks.org/4710662
Earthquakes = Now with Timeline!           http://bl.ocks.org/4718717
Ethics & Open Data     Hugh Stimson   Geocology Research      @geocology
Guide to publishing data responsibly  How to know if you’re doing it right  Here are the main questions to ask yourself to...
Discussion & Questions          http://xkcd.com/523/    mack@affinitybridge.com    http://affinitybridge.com  @mackaffinit...
Fusion Tables                                          Linkshttp://www.visual-literacy.org/periodic_table/periodic_table.h...
Upcoming SlideShare
Loading in...5
×

Data Visualization and Mapping using Javascript

6,153

Published on

Published in: Technology

Data Visualization and Mapping using Javascript

  1. 1. Visualizing data using maps and other tools Mack Hardy Director at Affinity Bridge Presented Feb 5th, 2013 at NetTuesday Vancouver
  2. 2. Data Visualization as Story Telling http://en.wikipedia.org/wiki/Data_driven_journalism
  3. 3. Steps of Data VisualizationAcquire : Obtain the dataParse : Provide some structure for the datas meaningFilter : Remove all but the data of interest.Mine : Apply methods from statistics or data mining as a way to discernpatterns 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 morevisually engaging.Interact : Add methods for manipulating the data or controlling whatfeatures are visible. Oreilly book "Vizualizing Data " by Ben Fry http://benfry.com/
  4. 4. Excel and Google Charts Excel Charts Google Charts
  5. 5. So many other ways to show data http://www.visual-literacy.org/periodic_table/periodic_table.html
  6. 6. Maps
  7. 7. Story Telling with Geographic Maps Vision Vancouver Delivers Shale Gas Development in Fort Nelsonhttp://votevision.ca/issues/map http://lands.fnnation.ca/story/shale_gas Geography provides the context for the story we are telling
  8. 8. Composite layers on mapsIn our casebase map satellite imagestilestache provides the data layersfrom PostGIS via mapnikleaflet map definition points to layersin the layer switcher Image credit http://mike.teczno.com/notes/tilestache.html
  9. 9. Lot of Data on Geographic Maps
  10. 10. Meta Data Presentation from Tiles
  11. 11. Fusion Tables
  12. 12. Google Fusion Tables BuildExample of making Choropleth in Fusion Tables https://github.com/affinitybridge/canada-provincial-population-choropleth
  13. 13. Fusion Tables as a Data Source Chris Herwig from MapBox http://mapbox.com/blog/mapbox-fusion-tables-drones/ http://hrwgc.github.com/places/drones/#8.00/32.886/70.467
  14. 14. Timeline of Eventshttp://livingunderdrones.org/timeline/
  15. 15. Fusion Tables - Larger Data Set https://www.google.com/fusiontables/ DataSource?docid=1YHk08Ojrfdsn67tXq5-395UkSIDAuVgTwCHKVwk#map:id=3
  16. 16. CartogramsA map on which statistical information is shown in diagrammatic form. http://dl.dropbox.com/u/48433/datavis/canada/cartogram/cartogram_v1.html
  17. 17. Scaling Canada by Area Population http://bl.ocks.org/4687146
  18. 18. Cartogram of population vs parliamentary seats http://bl.ocks.org/4696122
  19. 19. Ecumene of Canadian Population Source: Canadian Census
  20. 20. Contiguous Cartogram of 2012 US Results Mark Newman, Department of Physics and Center for the Study of Complex Systems, University of Michigan http://www-personal.umich.edu/~mejn/election/2012/
  21. 21. World Oil Reserveshttp://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html
  22. 22. Making our Visualization Interactive D3 Raphaelhttp://d3js.org http://raphaeljs.com
  23. 23. Walmart Locations All Hexed Uphttp://indiemaps.github.com/hexbin-js/tests/walmart.html
  24. 24. Graffiti in Vancouver http://bl.ocks.org/4711787http://vancouver.ca/your-government/open-data-catalogue.aspx
  25. 25. Density Map of Christchurch Quakes http://bl.ocks.org/4668062
  26. 26. Hexbin Graph http://bl.ocks.org/4677419
  27. 27. Two aspects of dataset shown, plus geography http://bl.ocks.org/4710662
  28. 28. Earthquakes = Now with Timeline! http://bl.ocks.org/4718717
  29. 29. Ethics & Open Data Hugh Stimson Geocology Research @geocology
  30. 30. 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? http://geocology.ca/projects/net-tuesday/
  31. 31. Discussion & Questions http://xkcd.com/523/ mack@affinitybridge.com http://affinitybridge.com @mackaffinity @affinitybridge
  32. 32. Fusion Tables Linkshttp://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=3Cartogramshttp://bl.ocks.org/4687146 D3 Hexbin and Exampleshttp://bl.ocks.org/4696122 http://indiemaps.github.com/hexbin-js/tests/walmart.htmlhttp://wartard.blogspot.ca/2013/01/mali-french-go-to-desert.html http://bl.ocks.org/4711787 http://vancouver.ca/your-government/open-data-catalogue.aspx http://bl.ocks.org/4668062 http://bl.ocks.org/4677419Hugh Stimson from Geocology http://bl.ocks.org/4710662http://geocology.ca/projects/net-tuesday/ http://bl.ocks.org/4718717http://thetyee.ca/News/2012/07/05/BCCarbonMapLessons/http://www.lohud.com/interactive/article/20121223/NEWS01/121221011/Map-Where-gun-permits-your-neighborhood-?gcheck=http://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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×