Intro to D3

View Github Repository Open presentation in a new window

vicapow

See all presentation from vicapow

Intro to D3

1 1

intro-to-d3-talk

On Github vicapow / intro-to-d3-talk

Intro to D3

Created by Victor Powell / @vicapow

About me

  • why you should listen

I visualize data

  • as a freelance developer

  • most recently helped Monsoon built this dashboard for HP

I teach

  • at a Hacker School in San Francisco called Hack Reactor

I like to explain things

I'm writing a book

Need help understanding your data?

lets talk: me@vctr.me + so... out last ad,

ok.. no more ads

  • okay, enough ads, lets start getting into the good parts

What is D3?

Data

Driven

Document

D3

D3 is not a collection of charts

+ d3 is a meta library + d3 is the library you would want to have if you were building your own data visualization library + if you just want a pie chart and you don't have strong concerns for how it looks, you don't need d3.

Bart Employee Salaries

D3(data) -> HTML

+ D3 _is_ a new way of thinking about data visualization and broadly computer graphics in general. + in the end, this helps us write less code + which in return makes it easier for us to change our code

How does it work?

Similar to jQuery

  $('.foo');
  $('.foo'); // jQuery
  d3.selectAll('.foo'); // D3
  $('div'); // jQuery
  d3.selectAll('div'); // D3

Attributes

  $('a').attr('href', 'http://vctr.me')
  d3.selectAll('a').attr('href', 'http://vctr.me')

Styles

  $('div').css('color', 'red')
  d3.selectAll('div').style('color', 'red')

How are they different?

(assuming our document already has 3 divs) 
  $('div');

(assuming our document already has 3 divs) 
  d3.selectAll('div');

+ instead of collections of elements + d3 selectors are collections of (data, element) pairs + assuming our document already has 3 divs
(our document has 3 divs) 
  d3.selectAll('div').data([18, 4, 7]);

data binding

  d3.selectAll('div').data(['red', 'green', 'blue'])
    .style('color', function(d){ return d})

data binding

  d3.selectAll('div').data([18, 4, 7])
    .attr('width', function(d){ return d + '%' })
(our document has no divs) 
  d3.selectAll('div').data([18, 4, 7]);

+ here's where things get really different + assuming our document does NOT have any DIVS
(our document has no divs) 
  d3.selectAll('div').data([18, 4, 7])
    .enter().append('div');

(our document now has 3 divs) + here's where things get epic + assuming our document does NOT have any DIVS
(our document has 3 divs) 
  d3.selectAll('div').data([18, 4, 7, 11])
    .enter().append('div');

(our document now has 4 divs) + here's where things get epic + assuming our document does NOT have any DIVS
(our document has 4 divs) 
  d3.selectAll('div').data([18, 4])
    .exit().remove();

(our document now has 2 divs) + here's where things get epic + assuming our document does NOT have any DIVS 
  d3.selectAll('div').data([8, 3, 7])
    .enter().append('div').style('opacity', 0)
+ just like with jQuery, the selector methods that don't return a new selector apply to each of the selected data/element pairs. + add three divs and set their opacity to 0 
  d3.selectAll('div').data([8, 3, 7])
    .enter().append('div').style('opacity', 0)
    .text('hello world')
    .transition().style('opacity', 1)

demo

+ add three divs, set their opacity to zero, slowly transition in their opacity