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.

Transcript

1. D3.js + Backbone.js Tutorial by Sameer Segal BangaloreJS | Sept 15, 2012 www.artoo.in
2. Please download a copy from sameersegal.github.com
3. Artoo - Technology to the Rescue www.artoo.in And this is the stack I work on :
4. Whats up with JavaScript?! Any application that can be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood (Coding Horror)
5. 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
6. 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
7. 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
8. 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
9. 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!
10. 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
11. 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">
12. 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)">
13. 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>
14. 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>
15. 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);
16. JS HTML Step 3 http://jsfiddle.net/sameersegal/42WQm/ rect .transition() .duration(1000) .attr("width",x) .attr("height",y.rangeBand()); Enter Update Exit
17. 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);
18. 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? }, }
19. 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)"); }, }
20. 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
21. www.artoo.in