Post on 18-Jan-2016
Data-Driven DocumentBY SIMA MEHRI
Voronoi Diagram
http://christophermanning.org/gists/1734663/
Price changes
http://dimplejs.org/advanced_examples_viewer.html?id=advanced_price_range_lollipop
Uber Rides by Neighborhood
http://bost.ocks.org/mike/uberdata/
Time Series Visualization
http://square.github.io/cubism/
Visualising Ministerial Lobbying in the UK
http://www.refinedpractice.com/labs/visualizations/ministerial-lobbying-2010/#m10
D3.js
A JavaScript library
for producing dynamic, interactive data visualizations
in web browsers.
Uses SVG, HTML5, and CSS standards.
successor to Protovis
Allows great control over the final visual result
Creators:
Professor Jeff Heer,
Ph.D. student Mike Bostock, and
M.S. student Vadim Ogievetsky
Stanford University's Stanford Visualization Group
2009 Protovis
2011 D3
Selection
Javascript var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
D3 employs a declarative approach,
operating on arbitrary sets of nodes called selections.
d3.selectAll("p").style("color", "white");
Enter and exit
create new nodes for incoming data
remove outgoing nodes
Transitions
values for attributes and styles can be smoothly interpolated over a certain time.
Data-binding
For each element of data, D3 can create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events).
What to show?
Boxplot
Scatter plot
Bubble chart
Bullet chart
Line chart
Area chart
Pie chart
Map
Cord diagram
Time series
Word cloud
Hive plot
Progress component
Heat map
Game!!!
Additional resources
Libraries (e.g. dc.js, NVD3, Dimple, crossfilter, etc)
Products (e.g. InfoCaptor: Tableau like Drag and Drop D3 Chart Builder)
Online editors (e.g. Bar chart code generator and online editor)
Interoperability (e.g. Plotting library for python based on d3,
mpld3: d3 visualizations of matplotlib (python) plots)
Reusable APIs (e.g. Scatter, Time Series, and Box Plots)
A closer look
https://github.com/mbostock/d3/wiki/Gallery
Thanks