Your SlideShare is downloading. ×
Interactive Data Visualization (with D3.js)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Interactive Data Visualization (with D3.js)

10,787
views

Published on

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

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


0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,787
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
293
Comments
0
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Ex\nMikes stuff?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Interactive DataVisualization (with D3.js) Lynn Cherny lynn@ghostweather.com @arnicas
    • 2. Shneiderman’s Infovis mantra (1996)The Eyes Have It: A Task by Data Type Taxonomy for Information VisualizationsShneiderman, B. 1996 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. 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. 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. 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. 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. “Visualize data by choosing visual encodings”
    • 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. Aka, “Why pie charts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
    • 11. Aka, “Why pie charts are (often) bad” http://en.wikipedia.org/wiki/Pie_chart
    • 12. “Filter out data to focus on relevant items ”
    • 13. Crossfilter airline data demo: http://square.github.com/crossfilter/ 9
    • 14. “Sort items to expose patterns”
    • 15. http://www.nytimes.com/interactive/2012/09/14/us/how-the-chicago-public-school-district-compares.html
    • 16. By me, adapting code of @mbostock’s: http://www.ghostweather.com/essays/talks/networkx/adjacency.html
    • 17. “Select items to hightlight, filter, or manipulate them”
    • 18. by @jasondavies:http://bl.ocks.org/1341281
    • 19. NVD3: A higher level d3 library of chart types: http://nvd3.com/ghpages/scatter.html
    • 20. My Demo App
    • 21. “Navigate to examine high level patterns and low-level detail” (the old “zoom / details on demand”)
    • 22. http://dataviz.rennesmetropole.fr/quisommesnous/index-fr.php
    • 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. “Coordinate views for linked, multi- dimensional exploration”
    • 25. http://mbostock.github.com/d3/talk/20111116/iris-splom.html
    • 26. http://woodchanges.com/
    • 27. “Annotate patterns to document findings”
    • 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. http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html
    • 30. http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
    • 31. http://www.nytimes.com/interactive/2012/09/20/world/africa/the-attack-on-the-american- mission-in-benghazi-libya.html
    • 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. Join the local D3 meetup! Next talk is Oct 22:http://www.meetup.com/Boston-d3-js-User-Group/events/83944092/ 28
    • 34. lynn @GhostWeather.com Thanks!