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

Getting Real with D3

Nate Good
February 28, 2013

Getting Real with D3

Introduction to D3 and how it plays nicely with node to create real time visualizations. Code samples available at https://github.com/nategood/d3-intro

Nate Good

February 28, 2013
Tweet

More Decks by Nate Good

Other Decks in Programming

Transcript

  1. What it isn't • Not a plotting or charts library

    ◦ Not a Flot ◦ Not a Google Charts ◦ At least not out of the box • Not a framework for drawing ◦ Not a Raphael.js ◦ Not a KineticJS ◦ Not a DSL for Canvas or SVG
  2. What does that mean? • Gives us a nice way

    to take a data set and bind it to DOM elements • Data ◦ Any set of data ▪ [4,3,2,3,4] ▪ [{"name":"Nate"}, {"name":"Mike"}] • DOM Elements ◦ Everything from spans to svg elements
  3. What it does well • Mapping data to visual elements

    • Handles changing datasets ◦ A surprising PITA without D3 • and other nasty parts of data visualization ◦ Scaling, Animation, Data Set Operations • It is future proof! ◦ Not a wrapper library (Raphael) ◦ Relies on standards
  4. the basics 1. selecting 2. updating the DOM 3. binding

    4. stages enter + exit 5. transitions
  5. 1. Select ing • Clean, familiar way to grab DOM

    elements • Very similar to jQuery ◦ Sizzle under the hood • Allows chaining var bs = d3 .select("#foo") .selectAll("div.buckets");
  6. 2. Manipulate the DOM • Clean way to update DOM

    • Set attributes, style, text, etc. • Use functions to compute dynamic values! bs.style("color", "#4CCF76") .attr("href", "#") .text(function(d, i) { return "Link " + i; });
  7. 3. Binding • Bind data to a selection of DOM

    elements • Once bound we can use this data to update each individual DOM element • Recall functions as values... var bs = d3.selectAll("div.buckets"); bs.data([3,2,1]); bs.text(function(d) {return d;});
  8. 4. Stages: Enter and Exit • Allow us to handle

    when ◦ We don't have enough elements ◦ We have too many elements
  9. Enter • When we don't have enough elements, typically we

    want to add more • We can accomplish this with .append() bs.enter().append("div");
  10. Exit • When we have too many DOM elements, typically

    we want to remove them • We can accomplish this with .remove() bs.exit().remove();
  11. D3 works with SVG just as nicely as it does

    with any other DOM elements
  12. 5. Transitions • D3 also handles transitions! • Animate transition

    between two states • Handles the math for us bs.transition(). .duration(1000) .attr("color","green");
  13. Bringing node in • Node ◦ Awesome for real time

    stuff ◦ Socket.io: everyone's favorite package • D3 ◦ Handles changing datasets very nicely
  14. Thanks! • Nate Good ◦ Director of Engineering @ShowClix ◦

    @nategood ◦ http://nategood.com • Example Code ◦ http://github.com/nategood/d3-intro