Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D3.js

 D3.js

Short introduction to D3

Michael Albert

October 07, 2013
Tweet

Other Decks in Programming

Transcript

  1. Data-Driven Document Graphic / Data Visualization frameworks make a great

    deal of decisions to make the framework easy to use. lundi 7 octobre 13
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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