Tweet
Tweet

Slide 1

Slide 1 text

D3 Graphs Are Fun! Friday, August 17, 12

Slide 2

Slide 2 text

D3 Dashboard! Jam packed with information Friday, August 17, 12

Slide 3

Slide 3 text

Visualize Your Data Learn things! Discover! Friday, August 17, 12

Slide 4

Slide 4 text

From the humble bar chart Not so humble? Friday, August 17, 12

Slide 5

Slide 5 text

To the classic pie... with a twist. Pie? Donut? Bagel? Friday, August 17, 12

Slide 6

Slide 6 text

Fancy layouts Tags from The Walters Art Museum Circle size is proportional to the number of pieces with the tag Friday, August 17, 12

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Let’s Get Ready To Demooooooo! Friday, August 17, 12

Slide 13

Slide 13 text

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