data-driven document by sima mehri. voronoi diagram
TRANSCRIPT
![Page 1: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/1.jpg)
Data-Driven DocumentBY SIMA MEHRI
![Page 2: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/2.jpg)
Voronoi Diagram
http://christophermanning.org/gists/1734663/
![Page 3: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/3.jpg)
Price changes
http://dimplejs.org/advanced_examples_viewer.html?id=advanced_price_range_lollipop
![Page 4: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/4.jpg)
Uber Rides by Neighborhood
http://bost.ocks.org/mike/uberdata/
![Page 5: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/5.jpg)
Time Series Visualization
http://square.github.io/cubism/
![Page 6: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/6.jpg)
Visualising Ministerial Lobbying in the UK
http://www.refinedpractice.com/labs/visualizations/ministerial-lobbying-2010/#m10
![Page 7: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/7.jpg)
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
![Page 8: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/8.jpg)
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
![Page 9: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/9.jpg)
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");
![Page 10: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/10.jpg)
Enter and exit
create new nodes for incoming data
remove outgoing nodes
![Page 11: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/11.jpg)
Transitions
values for attributes and styles can be smoothly interpolated over a certain time.
![Page 12: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/12.jpg)
Data-binding
For each element of data, D3 can create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events).
![Page 13: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/13.jpg)
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!!!
![Page 14: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/14.jpg)
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)
![Page 15: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/15.jpg)
A closer look
https://github.com/mbostock/d3/wiki/Gallery
![Page 16: Data-Driven Document BY SIMA MEHRI. Voronoi Diagram](https://reader035.vdocuments.us/reader035/viewer/2022062409/5697bfdb1a28abf838cb0d21/html5/thumbnails/16.jpg)
Thanks