D3.js - Data-Driven Documents

Introductory talk about D3.js at Georgian Front-end Developers Meet-up #2.

Some example charts by @ireneros.

Transcript

1. Data-Driven Documents
2. Levan Velijanashvili me@stichoza.com twitter.com/Stichoza github.com/Stichoza
3. WHAT IS D3 Charting library
4. WHAT IS D3 The bestCharting library
5. WHAT IS D3 The best that is not a Charting library
6. WHAT IS D3 Charting mmm... nope
7. d3.selectAll("p") .attr("class", "lead") .style("color", "red"); WHAT IS D3 D3 is jQuery(?) lol, nope
8. jQuery WHAT D3 IS NOT
9. jQuery Charting Library WHAT D3 IS NOT
10. jQuery Charting Library Graphics Layer WHAT D3 IS NOT
11. jQuery Charting Library Graphics Layer SVG Polyfill WHAT D3 IS NOT
12. jQuery Charting Library Graphics Layer SVG Polyfill ...and a vitamin WHAT D3 IS NOT
13. DATA VISUALIZATION D3.js is a JavaScript library for manipulating documents based on data
14. W3C standards Super flexible Functional GOOD PARTS
15. GOOD PARTS
16. GOOD PARTS
17. GOOD PARTS
18. GOOD PARTS
19. Hard to learn BAD PARTS
20. D3 STRUCTURE AND PRINCIPLES
21. d3.select("p") .attr("class", "lead") .style("color", "red"); SELECTIONS d3.selectAll("ul li") .foo(...);
22. d3.selectAll("p") .transition() .delay(200) .duration(500) .ease("linear") .style("color", "red"); TRANSITIONS
23. d3.selectAll("ul li") .data([293, 12, 6, 89, 11]) .style("width", function (d) { return (d * 10) + "px"; }) .style("color", "red") .enter() .style("color", "lime") DATA BINDING
24. ENTER / UPDATE / EXIT enter() exit() update()
25. D3JS.ORG
26. d3.selectAll("meetup people") .data(questions) .ask(function(q) { return answer(q); });