• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interactive Data Visualization (with D3.js)
 

Interactive Data Visualization (with D3.js)

on

  • 10,008 views

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

Statistics

Views

Total Views
10,008
Views on SlideShare
9,843
Embed Views
165

Actions

Likes
19
Downloads
226
Comments
0

10 Embeds 165

http://www.scoop.it 131
https://twitter.com 18
http://www.pinterest.com 5
http://codefactory.kr 3
https://si0.twimg.com 2
http://tweetedtimes.com 2
http://www.slashdocs.com 1
http://www.docshut.com 1
http://twitter.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Interactive Data Visualization (with D3.js) Interactive Data Visualization (with D3.js) Presentation Transcript

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