data viz with d3

Matthew Zhang

What is d3?

A popular framework for creating data visualizations, such as...

"Data-Driven Documents"

Why d3?

Lightweight (127 KB)

Open Source

Highly flexible/customizable

A good data visualization should...

Be clear

Be honest

Be visually appealing

Tell a story

First Pass (datawrapper)

Second Pass (d3)

How does it all work?

Data Binding

DOM

(Document Object Model)

DATA

d3 binds data to the Document Object Model

(Basically, it gives your data direct access to HTML, CSS, SVG, etc)

          var cards = svg.selectAll(".hour")

              .data(data).enter().append("rect")

              .attr("x", function(d) { return (d.hour - 1) * gridSize + 90; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", function(d) { return colorScale(d.value) }
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

var data = [{"hour":1,"day":7,"value":null},{"hour":2,"day":7,"value":null},{"hour":3,"day":7,"value":0},{"hour":4,"day":7,"value":0},{"hour":5,"day":7,"value":1},{"hour":6,"day":7,"value":25}, {"hour":7,"day":7,"value":32},{"hour":8,"day":7,"value":29},
{"hour":9,"day":7,"value":23},{"hour":10,"day":7,"value":22},{"hour":11,"day":7,"value":28},{"hour":12,"day":7,"value":23},{"hour":13,"day":7,"value":22},{"hour":14,"day":7,"value":15},

          var cards = svg.selectAll(".hour")

              .data(data).enter().append("rect")

              .attr("x", function(d) { return (d.hour - 1) * gridSize + 90; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", function(d) { return colorScale(d.value) }
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

var data = [{"hour":1,"day":7,"value":null},{"hour":2,"day":7,"value":null},{"hour":3,"day":7,"value":0},{"hour":4,"day":7,"value":0},{"hour":5,"day":7,"value":1},{"hour":6,"day":7,"value":25}, {"hour":7,"day":7,"value":32},{"hour":8,"day":7,"value":29},
{"hour":9,"day":7,"value":23},{"hour":10,"day":7,"value":22},{"hour":11,"day":7,"value":28},{"hour":12,"day":7,"value":23},{"hour":13,"day":7,"value":22},{"hour":14,"day":7,"value":15},

          var cards = svg.selectAll(".hour")

              .data(data).enter().append("rect")

              .attr("x", function(d) { return (d.hour - 1) * gridSize + 90; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", function(d) { return colorScale(d.value) }
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

var data = [{"hour":1,"day":7,"value":null},{"hour":2,"day":7,"value":null},{"hour":3,"day":7,"value":0},{"hour":4,"day":7,"value":0},{"hour":5,"day":7,"value":1},{"hour":6,"day":7,"value":25}, {"hour":7,"day":7,"value":32},{"hour":8,"day":7,"value":29},
{"hour":9,"day":7,"value":23},{"hour":10,"day":7,"value":22},{"hour":11,"day":7,"value":28},{"hour":12,"day":7,"value":23},{"hour":13,"day":7,"value":22},{"hour":14,"day":7,"value":15},

          var cards = svg.selectAll(".hour")

              .data(data).enter().append("rect")

              .attr("x", function(d) { return (d.hour - 1) * gridSize + 90; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", function(d) { return colorScale(d.value) }
              .on('mouseover', tip.show)
              .on('mouseout', tip.hide);

var data = [{"hour":1,"day":7,"value":null},{"hour":2,"day":7,"value":null},{"hour":3,"day":7,"value":0},{"hour":4,"day":7,"value":0},{"hour":5,"day":7,"value":1},{"hour":6,"day":7,"value":25}, {"hour":7,"day":7,"value":32},{"hour":8,"day":7,"value":29},
{"hour":9,"day":7,"value":23},{"hour":10,"day":7,"value":22},{"hour":11,"day":7,"value":28},{"hour":12,"day":7,"value":23},{"hour":13,"day":7,"value":22},{"hour":14,"day":7,"value":15},