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

1. Interactive Data
Visualization (with D3.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 Jeff Heer 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 Jeff Heer 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 Jeff Heer 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 Jeff Heer 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 by choosing visual
encodings”

10. Position on common scale
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 pie charts are (often) bad”
http://en.wikipedia.org/wiki/Pie_chart

12. Aka, “Why pie charts are (often) bad”
http://en.wikipedia.org/wiki/Pie_chart

13. “Filter out data to focus on relevant
items ”

14. Crossfilter airline data demo: http://square.github.com/crossfilter/
9

15. “Sort items to expose patterns”

16. http://www.nytimes.com/interactive/2012/09/14/us/how-the-chicago-public-school-district-compares.html

17. By me, adapting code of @mbostock’s: http://www.ghostweather.com/essays/talks/networkx/adjacency.html

18. “Select items to hightlight, filter, or
manipulate them”

19. by @jasondavies:
http://bl.ocks.org/1341281

20. NVD3: A higher level d3 library of chart types:
http://nvd3.com/ghpages/scatter.html

21. My Demo App

22. “Navigate to examine high level
patterns and low-level detail”
(the old “zoom / details on demand”)

23. http://dataviz.rennesmetropole.fr/quisommesnous/index-fr.php

24. 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

25. “Coordinate views for linked, multi-
dimensional exploration”

26. http://mbostock.github.com/d3/talk/20111116/iris-splom.html

27. http://woodchanges.com/

28. “Annotate patterns to document
findings”

29. “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

30. http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html

31. http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

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
• 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/

34. Join the local D3 meetup!
Next talk is Oct 22:
http://www.meetup.com/Boston-d3-js-User-Group/events/83944092/
28

35. lynn @
GhostWeather.com
Thanks!