d3.js: the core concepts

A very introductory view of d3.js, comes with some code example people can play with.

Transcript

1. d3.js: the Core Concepts Zero Cho
2. data visualization…?
4. so what is D3? d3 is an data visualization library
7. Data-Driven Documents notice how visualization is NOT in the title?
8. [ 1, 2, 3, 4 ] data <div/> <svg/> <canvas/> HTML/SVG/else
9. geography time scale color geometry layout behavior data
10. geography time scale color geometry layout behavior data
11. step 1: SELECT … just like jQuery
12. d3.select(‘#ex1') .selectAll('.circle') .style('width', '100px') .style('height', '100px'); code
13. step 2: BINDING … where magic happens
14. const data = [50, 100, 200, 300]; const funNumToPx = (num) => `${num}px`; d3.select(‘#ex2') .selectAll('.circle') .data(data) .style('width', funNumToPx) .style('height', funNumToPx); code http://codepen.io/itszero/pen/LVrwPJ
15. that’s not dynamic but, you say
16. given a data, you tell d3 to handle… • enter • update • exit
17. let data = []; const count = nextInt(20); for(let i=0;i<count;i++) { data.push(nextInt(400)); } const funNumToPx = (num) => `${num}px`; const sel = d3.select('#ex3') .selectAll('.circle') .data(data); sel.enter() .append('div') .attr('class', 'circle'); sel.transition() .duration(500) .style('width', funNumToPx) .style('height', funNumToPx); sel.exit() .remove(); code enter: create basic div exit: remove the div update: update style prep: generate an array of random numbers http://codepen.io/itszero/pen/rVKXMp
18. now let’s checkout a more advanced example http://codepen.io/itszero/pen/RPBKbj
19. references • paper • 2011 InfoVis • website (examples) • http://d3js.org/ • tutorials • https://square.github.io/intro-to-d3/