Your SlideShare is downloading. ×
0
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
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)

11,400

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
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,400
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
317
Comments
0
Likes
28
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!

    ×