Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interactive Data Visualization (with D3.js)

16,188 views

Published on

A short talk with examples of D3-based visualizations. (I'm @arnicas and live on http://www.ghostweather.com.)

  • Be the first to comment

Interactive Data Visualization (with D3.js)

  1. 1. Interactive DataVisualization (with D3.js) Lynn Cherny lynn@ghostweather.com @arnicas
  2. 2. Shneiderman’s Infovis mantra (1996)The Eyes Have It: A Task by Data Type Taxonomy for Information VisualizationsShneiderman, B. 1996 3
  3. 3. Shneiderman’s Infovis mantra (1996)Overview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandOverview first, zoom and filter, then details-on-demandThe Eyes Have It: A Task by Data Type Taxonomy for Information VisualizationsShneiderman, B. 1996 3
  4. 4. Updated with Jeff Heer in 2012Heer, J and B. Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations”http://queue.acm.org/detail.cfm?id=2146416
  5. 5. Updated with Jeff Heer in 2012Heer, J and B. Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations”http://queue.acm.org/detail.cfm?id=2146416
  6. 6. Updated with Jeff Heer in 2012Heer, J and B. Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations”http://queue.acm.org/detail.cfm?id=2146416
  7. 7. Updated with Jeff Heer in 2012Heer, J and B. Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations”http://queue.acm.org/detail.cfm?id=2146416
  8. 8. “Visualize data by choosing visual encodings”
  9. 9. Position on common scale Position on unaligned scale Accuracy of Judgments Length DirectionCleveland-McGill Hierarchy of Perception Angle Area Volume Genericness of Judgments Curvature ShadingImage from Alberto Cairo’s The Functional Art Saturation
  10. 10. Aka, “Why pie charts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
  11. 11. Aka, “Why pie charts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
  12. 12. “Filter out data to focus on relevant items ”
  13. 13. Crossfilter airline data demo: http://square.github.com/crossfilter/ 9
  14. 14. “Sort items to expose patterns”
  15. 15. http://www.nytimes.com/interactive/2012/09/14/us/how-the-chicago-public-school-district-compares.html
  16. 16. By me, adapting code of @mbostock’s: http://www.ghostweather.com/essays/talks/networkx/adjacency.html
  17. 17. “Select items to hightlight, filter, or manipulate them”
  18. 18. by @jasondavies:http://bl.ocks.org/1341281
  19. 19. NVD3: A higher level d3 library of chart types: http://nvd3.com/ghpages/scatter.html
  20. 20. My Demo App
  21. 21. “Navigate to examine high level patterns and low-level detail” (the old “zoom / details on demand”)
  22. 22. http://dataviz.rennesmetropole.fr/quisommesnous/index-fr.php
  23. 23. A few more zoom examples... Zoom/pan axis example: http:// bl.ocks.org/1182434 Some map zoom code examples: https://bl.ocks.org/1284044 http://bl.ocks.org/2206590 19
  24. 24. “Coordinate views for linked, multi- dimensional exploration”
  25. 25. http://mbostock.github.com/d3/talk/20111116/iris-splom.html
  26. 26. http://woodchanges.com/
  27. 27. “Annotate patterns to document findings”
  28. 28. “Annotate patterns to document findings”“What we don’t do: here’s a bunch of data, we hope you find something interesting in it.” -- paraphrase of Amanda Cox, NYT
  29. 29. http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html
  30. 30. http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
  31. 31. http://www.nytimes.com/interactive/2012/09/20/world/africa/the-attack-on-the-american- mission-in-benghazi-libya.html
  32. 32. Learning D3.js• The D3.js repo website has a tutorials list: https://github.com/ mbostock/d3/wiki/Tutorials• Short intro book by Mike Dewar: http://shop.oreilly.com/ product/0636920025429.do• Scott Murray’s forthcoming intro book and his tutorials: http:// alignedleft.com/tutorials/• Some great tutorials by Jim Vallandingham for more advanced folks, including how to make a NYT-style stepper and a bubble vis like the ones I showed: http://vallandingham.me/
  33. 33. Join the local D3 meetup! Next talk is Oct 22:http://www.meetup.com/Boston-d3-js-User-Group/events/83944092/ 28
  34. 34. lynn @GhostWeather.com Thanks!

×