Data-Driven Document BY SIMA MEHRI

Voronoi Diagram

Price changes price_range_lollipop

Uber Rides by Neighborhood

Time Series Visualization

Visualising Ministerial Lobbying in the UK lobbying-2010/#m10

D3.js  A JavaScript libraryJavaScript  for producing dynamic, interactive data visualizations data visualizations  in web browsers.web browsers  Uses SVG, HTML5, and CSS standards.SVGHTML5CSS  successor to Protovis Protovis  Allows great control over the final visual result

Creators:  Professor Jeff Heer,  Ph.D. student Mike Bostock, andMike Bostock  M.S. student Vadim Ogievetsky  Stanford University's Stanford Visualization Group Stanford University  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)InfoCaptor: Tableau like Drag and Drop D3 Chart Builder  Online editors (e.g. Bar chart code generator and online editor)Bar chart code generator and online editor  Interoperability (e.g. Plotting library for python based on d3,Plotting library for python based on d3 mpld3: d3 visualizations of matplotlib (python) plots mpld3: d3 visualizations of matplotlib (python) plots)  Reusable APIs (e.g. Scatter, Time Series, and Box Plots)Scatter, Time Series, and Box Plots

A closer look 

Thanks