Download as KEY, PPTX
Uploaded byLynn Cherny
Interactive Data Visualization (with D3.js)
The document discusses interactive data visualization techniques using d3.js, referencing Shneiderman's visual analysis principles. It emphasizes a structured approach to visualizing data through methods such as filtering, sorting, and zooming, along with various examples and resources for learning d3.js. Additionally, it provides links to tools, tutorials, and community events for further engagement in data visualization practices.
Interactive Data Visualization (with D3.js)
- 1. Interactive Data Visualization (withD3.js) Lynn Cherny lynn@ghostweather.com @arnicas
- 3. Shneiderman’s Infovis mantra(1996) The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations Shneiderman, B. 1996 3
- 4. Shneiderman’s Infovis mantra(1996) Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand Overview first, zoom and filter, then details-on-demand The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations Shneiderman, B. 1996 3
- 5. Updated with JeffHeer in 2012 Heer, 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. Updated with JeffHeer in 2012 Heer, 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. Updated with JeffHeer in 2012 Heer, 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. Updated with JeffHeer in 2012 Heer, 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
- 9. “Visualize data bychoosing visual encodings”
- 10. Position on commonscale Position on unaligned scale Accuracy of Judgments Length Direction Cleveland-McGill Hierarchy of Perception Angle Area Volume Genericness of Judgments Curvature Shading Image from Alberto Cairo’s The Functional Art Saturation
- 11. Aka, “Why piecharts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
- 12. Aka, “Why piecharts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
- 13. “Filter out datato focus on relevant items ”
- 14. Crossfilter airline datademo: http://square.github.com/crossfilter/ 9
- 15. “Sort items toexpose patterns”
- 16.
- 17. By me, adaptingcode of @mbostock’s: http://www.ghostweather.com/essays/talks/networkx/adjacency.html
- 18. “Select items tohightlight, filter, or manipulate them”
- 19.
- 20. NVD3: A higherlevel d3 library of chart types: http://nvd3.com/ghpages/scatter.html
- 21.
- 22. “Navigate to examinehigh level patterns and low-level detail” (the old “zoom / details on demand”)
- 23.
- 24. A few morezoom 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
- 25. “Coordinate views forlinked, multi- dimensional exploration”
- 26.
- 27.
- 28. “Annotate patterns todocument findings”
- 29. “Annotate patterns todocument 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
- 30.
- 31.
- 32. http://www.nytimes.com/interactive/2012/09/20/world/africa/the-attack-on-the-american- mission-in-benghazi-libya.html
- 33. Learning D3.js • TheD3.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/
- 34. Join the localD3 meetup! Next talk is Oct 22: http://www.meetup.com/Boston-d3-js-User-Group/events/83944092/ 28
- 35. lynn @ GhostWeather.com Thanks!