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

Combining D3.js + Backbone.js to create quick realtime graphs

sameersegal
September 15, 2012

Combining D3.js + Backbone.js to create quick realtime graphs

D3.js is a powerful framework to handle data feed (websockets, ajax requests) . Combining this with backbone you can get really modular graphs that you can wherever you'd like.

sameersegal

September 15, 2012
Tweet

More Decks by sameersegal

Other Decks in Technology

Transcript

  1. Whats up with JavaScript?! Any application that can be written

    in JavaScript, will eventually be written in JavaScript. - Jeff Atwood (Coding Horror)
  2. D3.js • Data-Driven Document • Not just a charting library

    • if you have realtime data feed that you want to draw / plot, use D3.js • Not as easy as raphael.js, Google Visualization, etc • But so much more powerful
  3. Backbone.js • Minimalistic MVC Javascript framework • Love: Views, Fetch/Sync,

    Event definitions • Hate the explicit data binding (especially when you are dealing with forms). • Alternatives: Knockout.js, Ember.js
  4. Step 1 http://jsfiddle.net/sameersegal/S8EeF/ JS HTML d3.select("body").selectAll("p") .data([4, 8, 15, 16,

    23, 42]) .enter().append("p") .text(function(d) { return "I’m number " + d + "!"; }); I’m number 4! I’m number 8! I’m number 15! I’m number 16! I’m number 23! I’m number 42! Enter Update Exit
  5. Step 1 http://jsfiddle.net/sameersegal/S8EeF/ JS HTML d3.select("body").selectAll("p") .data([4, 8, 15, 23,

    42]) .exit() .style("text-decoration","line-through"); I’m number 4! I’m number 8! I’m number 15! I’m number 16! I’m number 23! I’m number 42! Enter Update Exit
  6. Step 1 http://jsfiddle.net/sameersegal/S8EeF/ JS HTML d3.select("body").selectAll("p") .data([4, 8, 15, 23,

    42], function(d, i) { return d; }) .exit() .style("text-decoration","line-through"); I’m number 4! I’m number 8! I’m number 15! I’m number 16! I’m number 23! I’m number 42!
  7. Step 2 http://jsfiddle.net/sameersegal/42WQm/ JS var x = d3.scale.linear() .domain([0, d3.max(data)])

    .range([0, 420]); var y = d3.scale.ordinal() .domain(data) .rangeBands([0, 120]); http://2.bp.blogspot.com/-W3qDnT2Jszs/Td0b8bJrMGI/AAAAAAAAAO4/tmOY5mtMmDk/s1600/pv_ordinal.png
  8. JS HTML Step 2 http://jsfiddle.net/sameersegal/42WQm/ var chart = d3.select("body").append("svg") .attr("class",

    "chart") .attr("width", 440) .attr("height", 20 * (data.length + 1)); <svg class="chart" width="440" height="140">
  9. JS HTML Step 2 http://jsfiddle.net/sameersegal/42WQm/ var chart = d3.select("body").append("svg") .attr("class",

    "chart") .attr("width", 440) .attr("height", 20 * (data.length + 1)) .append("g") .attr("transform","translate(10,15)"); <svg class="chart" width="440" height="140"> <g transform="translate(10,15)">
  10. JS HTML Step 2 http://jsfiddle.net/sameersegal/42WQm/ chart.selectAll("rect") .data(data) .enter().append("rect") .attr("y",y) .attr("width",

    x) .attr("height",y.rangeBand()) .text(function(d) { return d; }); <svg class="chart" width="440" height="140"> <g transform="translate(10,15)"> <rect y="0" width="40" height="20">4</rect> <rect y="20" width="80" height="20">8</rect>
  11. JS HTML Step 2 http://jsfiddle.net/sameersegal/42WQm/ chart.selectAll("text") .data(data) .enter().append("text") .attr("x", x)

    .attr("y", function(d) { return y(d) + y.rangeBand() / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(String); <text x="40" y="10" dx="-3" dy=".35em" text-anchor="end">4</text> <text x="80" y="30" dx="-3" dy=".35em" text-anchor="end">8</text>
  12. JS HTML Step 2 http://jsfiddle.net/sameersegal/ceDeC/ chart.selectAll("line") .data(x.ticks(10)) .enter().append("line") .attr("x1", x)

    .attr("x2", x) .attr("y1", 0) .attr("y2", 120) .style("stroke", "#ccc"); chart.selectAll(".rule") .data(x.ticks(10)) .enter().append("text") .attr("class", "rule") .attr("x", x) .attr("y", 0) .attr("dy", -3) .attr("text-anchor", "middle") .text(String);
  13. JS HTML Step 3 http://jsfiddle.net/sameersegal/42WQm/ var text = chart.selectAll("text") .data(data,

    function(d,i) { return i; }); // ... text .transition() .duration(1100) .attr("x", x) .text(String);
  14. JS Step 4 http://jsfiddle.net/sameersegal/NHAvS/ var BarGraph = Backbone.View.extend({ "el": "#graph",

    initialize: function() { // create the container element }, render: function() { // on changes in collection, render changes }, frame: function() { // on time draw -- axes, title, etc? }, }
  15. JS Step 4 http://jsfiddle.net/sameersegal/NHAvS/ var BarGraph = Backbone.View.extend({ initialize: function()

    { _.bindAll(this, "render", "frame"); this.collection.bind("reset", this.frame); this.collection.bind("change", this.render); this.chart = d3.selectAll($(this.el)) .append("svg") .attr("class", "chart") .attr("width", w) .attr("height", h) .append("g") .attr("transform", "translate(10,15)"); }, }
  16. Resources • D3 Homepage: http://d3js.org/ • D3 Documentation: https://github.com/mbostock/d3/wiki •

    Backbone-D3: https://github.com/drsm79/Backbone-d3 • D3 (+ Backbone) Intro: http://vimeo.com/45558674