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

Transcript

1. Getting Real with D3 Data Driven Documents and Node
2. What is it?
3. A charts library!
4. WRONG A charts library!
5. 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
6. ...okay that is Lame
7. ...so what is it?
8. d • three noun 1. a library for mapping data to a document object model
9. d • three noun 1. a library for mapping data to a document object model
10. 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
11. 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
12. Covering the Basics
13. the basics 1. selecting 2. updating the DOM 3. binding 4. stages enter + exit 5. transitions
14. 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");
15. 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; });
16. ex1.html DEMO TIME
17. ...so it's a jQuery Wannabe
18. Where's the beef?
19. .data()
20. 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;});
21. ex2.html DEMO TIME
22. Data DRIVEN Documents!
23. But what if we don't have enough DOM elements?
24. What if we have too many DOM elements?
25. .enter() and .exit()
26. 4. Stages: Enter and Exit • Allow us to handle when ◦ We don't have enough elements ◦ We have too many elements
27. Enter • When we don't have enough elements, typically we want to add more • We can accomplish this with .append() bs.enter().append("div");
28. Exit • When we have too many DOM elements, typically we want to remove them • We can accomplish this with .remove() bs.exit().remove();
29. ex2.html RETURN TO DEMO TIME
30. great... but I want Charts!
31. D3 works with SVG just as nicely as it does with any other DOM elements
32. ex3.html DEMO TIME WITH CHARTS
33. okay... but that chart's Boring!
34. Let's make it move.
35. .transition()
36. 5. Transitions • D3 also handles transitions! • Animate transition between two states • Handles the math for us bs.transition(). .duration(1000) .attr("color","green");
37. ex4.html DEMO TIME
38. cool... but when do we Get Real?
39. Bringing node in • Node ◦ Awesome for real time stuff ◦ Socket.io: everyone's favorite package • D3 ◦ Handles changing datasets very nicely
40. http://localhost/ex4.html http://localhost/vote.html ONE LAST DEMO TIME
41. Thanks! • Nate Good ◦ Director of Engineering @ShowClix ◦ @nategood ◦ http://nategood.com • Example Code ◦ http://github.com/nategood/d3-intro