D3

Quick and dirty introduction to D3

Transcript

1. D3 Graphs Are Fun! Friday, August 17, 12
2. D3 Dashboard! Jam packed with information Friday, August 17, 12
3. Visualize Your Data Learn things! Discover! Friday, August 17, 12
4. From the humble bar chart Not so humble? Friday, August 17, 12
5. To the classic pie... with a twist. Pie? Donut? Bagel? Friday, August 17, 12
6. Fancy layouts Tags from The Walters Art Museum Circle size is proportional to the number of pieces with the tag Friday, August 17, 12
7. And interesting relationships Tags from The Walters Art Museum And how they link to other tags Tags that appear together are linked The more often, the thicker the link Friday, August 17, 12
8. What Does D3 Do? D3 does not draw D3 does provide a way to tie data to an element D3 does provide a way to define the attributes of that element based on the data Friday, August 17, 12
9. var data = [0,2,3,5,17,42,6] var d = d3.select(‘#chart’).selectAll(‘div’).data(data); d.enter().append(‘div’) .attr(‘class’, ‘ex’) .style(‘width’, function(d) { return d + 15; }); Friday, August 17, 12
10. What Else Does D3 Do? Because the data is tied to the elements, D3 is able to determine if data is added or removed D3 can help you manage the transition from old to new Friday, August 17, 12
11. var data = [ { id: 15, v: 42 }, { id: 9, v: 17 }, { id: 94, v: 72 } ]; var chart = d3.select(‘#chart’); var d = chart.selectAll(‘div’).data(data, function(d) { return d.id; }); ... Same as earlier ... data = [ { id: 15, v: 42 }, { id: 9, v: 17 }, { id: 54, v: 8 } ]; d = chart.selectAll(‘div’).data(data, function(d) { return d.id; }); d.enter()... (build new elements) d... (update current elements) d.exit()... (handle removed elements) Friday, August 17, 12
12. Let’s Get Ready To Demooooooo! Friday, August 17, 12
13. Further Reading D3: http://d3js.org D3 demo screencast: http://vimeo.com/35005701 Tasseo (D3 + Graphite goodness!): https://github.com/ obfuscurity/tasseo Rickshaw, a graphing layer on top of D3: http:// code.shutterstock.com/rickshaw/ Mailstrom http://mailstrom.co (Shameless plug) The Walters API: http://walters-api.herokuapp.com/ playground.html / https://github.com/rayners/walters- api Friday, August 17, 12