An Introduction to

Data-Driven Documents

Daniel Scrivano / @danielscrivano

what is d3.js?

  • a library of functions that helps represent data in documents
  • created by Mike Bostock in 2010

var svg ="body").append("svg");

  .attr("width", w + m[1] + m[3])
  .attr("height", h + m[0] + m[2])
  .attr("transform", "translate(" + m[3] + "," + m[0] + ")")

... look familiar?


by leveraging...

  • html
  • css
  • svg
  • javascript!

basic svg elements

  • lines
  • rectangles
  • circles

exercise #1

make an svg line using d3
(click me!)

exercise #2

make an svg rectangle using d3

exercise #3

make an svg circle using d3

selecting existing elements

  • d3.selectAll()
  • modifying multiple rectangles

exercise #1

select a rectangle and change its fill color

exercise #2

select all the rectangles and change their widths

exercise #3

make a small bar chart

adding data

  • .data()
  • .enter()
  • .exit()

exercise #1

make a bar chart using d for height

exercise #2

use .enter() to add additional rects

exercise #3

use .exit() to remove rects

transitions and joining data

  • .transition()
  • .delay()

exercise #1

use .transition() to animate the rects with new data

exercise #2

use .delay() to animate the rects with new data


click the links below to group up and make sense out of all these data

make an income bar chart