what is d3.js?

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

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

How?

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.select()
• 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