D3.js

Short introduction to D3

Transcript

1. Data-Driven Documents with D3.js WTF - September 2013 lundi 7 octobre 13
2. Data-Driven Document Graphic / Data Visualization frameworks make a great deal of decisions to make the framework easy to use. lundi 7 octobre 13
3. The Ben Fry’s Data Visualization Process Acquire Obtain the data, whether from a file on a disk or a source over a network. Parse Provide some structure for the data's meaning, and order it into categories. Filter Remove all but the data of interest. Mine Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical context. Represent Choose a basic visual model, such as a bar graph, list, or tree. Refine Improve the basic representation to make it clearer and more visually engaging. Interact Add methods for manipulating the data or controlling what features are visible. lundi 7 octobre 13
4. What is D3.js ? Example: http://thepowerrank.com/ visual/NCAA_Tournament_Predictions D3.js is a JavaScript library for manipulating documents based on data. lundi 7 octobre 13
5. Why use D3.js ? Example: http://mbostock.github.io/d3/ talk/20111116/bundle.html - It lets you build the data visualization framework that you want. - It lets you interact with charts in amazing ways. lundi 7 octobre 13
6. More examples https://github.com/mbostock/d3/wiki/Gallery lundi 7 octobre 13
7. Starting D3.js employs a declarative approach. d3.selectAll(«p»).style(«color», «blue»); d3.selectAll(«p»).style(«color», function(){ return «hsl(« + Math.random() * 360 + «,100%,50%)»; }); d3.selectAll(«p») .data([3,7,11,13,17]) .style(«font-size», function(d){ return d + «px»; }); Applies a style to all paragraphs Applies a random font color to all paragraphs Applies a style coming from a dataset to all paragraphes lundi 7 octobre 13
8. Adding SVG with data D3.js let you create standard SVG elements quickly: rect, circle, line, ellipse, polyline, polygon, text, path lundi 7 octobre 13
9. Adding SVG with data Creating a single line var line = d3.select("svg").append("line") .attr("x1", 0).attr("y1", 10) .attr("x2", 100).attr("y2", 50); lundi 7 octobre 13
10. Adding SVG with data var line = d3.svg.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("basis"); Or you can use function to process an array of objects Create a function with its behaviour lundi 7 octobre 13
11. Adding SVG with data var line = d3.svg.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("basis"); Or you can use function to process an array of objects g.data([{x:0, y: 0}, {x:100, y: 100}]) .append("path") .attr("d", line); Create a function with its behaviour Draw the element from data thanks to the function lundi 7 octobre 13
12. Simplify functions Instead of writing code to define attributes var circles = svg.selectAll(«circle») .data(circleRadii) .enter() .append(«circle»); var circleAttributes = circles .attr(«cx», 50) .attr(«cy», 50) .attr(«r», function(d){return d;}) .style(«fill, function(d){...}); circleRadii = [40, 20, 10] var svg = d3.select(«body»).append(«svg») .attr(«width», 600) .attr(«height, 100) Define the data Create the SVG container Define the wanted behaviour (here only drawing a DOM element of type «circle» Call the drawing function and specifying the the circles’ attributes lundi 7 octobre 13
13. Simplify functions Enrich the JSON data with objects’attributes var circles = svg.selectAll(«circle») .data(data) .enter() .append(«circle»); var circleAttributes = circles .attr(«cx», function(d){ return d.cx) .attr(«cy», function(d){ return d.cy) .attr(«r», function(d){return d.r;}) .style(«fill, function(d){return d.color}); data = [{r:40, color: «purple», cx: 50, cy: 50}] var svg = d3.select(«body»).append(«svg») .attr(«width», 600) .attr(«height, 100) Enrich the data Mapping of data lundi 7 octobre 13
14. Enter & exit Create new nodes for incoming data and remove outgoing nodes that are no longer needed using D3’s enter and exit selections. d3.select(«body»).selectAll(«p») .data([10,30,50,60]) .enter().append(«p») .text(function(d){return d;}) .exit() .remove() For all new data, create a paragraph element And set their text to the value of d For all existing «p» not anymore present Remove them lundi 7 octobre 13
15. Transitions Improve user’s interactions with transitions Transitions are per-element & exclusive d3.select(«body»).selectAll(«p») .data([10,30,50,60]) .enter().transition() .duration(500) .append(«p») .text(function(d){return d;}) .style(‘opacity’, 1) .exit().transition() .duration(200) .style(‘opacity’, 0) .remove() Combine different transitions with different data events! lundi 7 octobre 13
16. And beyond http://d3js.org/ https://www.dashingd3js.com/ http://techslides.com/over-1000-d3-js-examples-and- demos/ http://vallandingham.me/d3_without_svg.html lundi 7 octobre 13
17. Thanks to : d3.js & dashingd3js.com for their great resources lundi 7 octobre 13