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