1. Data-Driven Document BY SIMA MEHRI

2. Voronoi Diagram http://christophermanning.org/gists/1734663/

3. Price changes http://dimplejs.org/advanced_examples_viewer.html?id=advanced_ price_range_lollipop

4. Uber Rides by Neighborhood http://bost.ocks.org/mike/uberdata/

5. Time Series Visualization http://square.github.io/cubism/

6. Visualising Ministerial Lobbying in the UK http://www.refinedpractice.com/labs/visualizations/ministerial- lobbying-2010/#m10

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

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

9. 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");

10. Enter and exit  create new nodes for incoming data  remove outgoing nodes

11. Transitions  values for attributes and styles can be smoothly interpolated over a certain time.

12. Data-binding  For each element of data, D3 can create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events).

13. 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!!!

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

15. A closer look  https://github.com/mbostock/d3/wiki/Gallery

16. Thanks