✔: Form Project Teams
✔: Excel Sheet Due
Week #3: Hand-drawn Visualization Due
Week #4: d3.js Visualization Presentation
Tuesday, April 21 (Tomorrow!)
8:00pm - 9:30pm
Rooms posted by e-mail and course website by 12:00noon today
Covers material from Week 6-12
25-35 multiple choice questions
2-4 free response questions
Every d3.js visualization is made up of three pieces: data, d3.js boilerplate, drawing.
d3.js is designed to work with arrays of objects
var a = [ { major: "CS", students: 1038 }, { major: "Accy", students: 1029 }, { major: "Finance", students: 527 } ];
Every d3.js visualization requires some basic code that will always be the same. We call this boilerplate code:
var chart = d3.select("#chart") .append("svg") .attr("width", width) .attr("height", height); chart.selectAll("type") .data( arrayOfObjects ) // a .enter()
d3.js can visualize shapes ranging from basic lines, circles, and rectangles to complicated polygons and paths
Each shape corresponds to a data point from the data set
Every shape attribute can either be defined directly or through a function that takes in parameters d, i
.attr("x", 100)
.attr("x", function (d, i) { // d: A data point from your data // d: { major: "CS", students: 1038 } // i: The index in your data (for-loop) // i: 0 return d.students; })
Rectangles (rect)
Defined by:
width,
height,
x, and
y
.append("rect") .attr("x", 1) // Left of top-left corner .attr("y", 2) // Top of top-left corner .attr("width", 3) .attr("height", 4)
Circles (circle)
Defined by:
cx,
cy, and
r
.append("circle") .attr("cx", 1) // Center x .attr("cy", 2) // Center y .attr("r", 3) // Radius
Lines (line)
Defined by:
x1,
y1,
x2, and
y2
.append("line") .attr("x1", 1) // Starting point .attr("y1", 2) .attr("x2", 3) // Ending point .attr("y2", 4)
Often we will want to scale our data within a range.
In mathematics, we describe this as mapping a number from an input domain to a output range.
Example: Converting from °F to °C
d3.js provides us tools to do this easily, with a set of different scales
var f2c = d3.scale.linear() .domain( [32, 212] ) .range( [0, 100] );
// f2c is a function that accepts // one parameter and will map // it from [32, 212] -> [0, 100]
var f2c = d3.scale.linear() .domain( [32, 212] ) .range( [0, 100] );
var c; c = f2c(75); // 23.88889 c = f2c(40); // 4.44444
var s = d3.scale.log() .base(10) .domain( [0, 552] ) .range( [0, 1] );
// Default base is 10 // Default range is [0, 1] var s = d3.scale.log() .domain( [0, 552] );
d3 can find the maximum and minimum values of an array, given a function to specify what value should be maximized or minimized (if needed)
d3.max(array[, accessor])
var a = [1, 5, 25]; var max = d3.max( a ); // 25
var majors = [ { major: "CS", students: 1038 }, { major: "Accy", students: 1029 }, { major: "Finance", students: 527 } ]; var maxStudent = d3.max(majors, function (d) { return d.students; }); // { major: "CS", students: 1038 } var max = maxStudent.students; // 1038