CS 105
Week 13
Final Project
✔: Form Project Teams
✔: Excel Sheet Due
Week #3: Hand-drawn Visualization Due
Week #4: d3.js Visualization Presentation
Midterm 2
Tuesday, April 21 (Tomorrow!)
8:00pm - 9:30pm
Rooms posted by e-mail and course website by 12:00noon today
Midterm 2
Covers material from Week 6-12
25-35 multiple choice questions
2-4 free response questions
d3.js
A Visualization, Deconstructed
Every d3.js visualization is made up of three pieces: data, d3.js boilerplate, drawing.
Data
d3.js is designed to work with arrays of objects
var a = [
{ major: "CS", students: 1038 },
{ major: "Accy", students: 1029 },
{ major: "Finance", students: 527 }
];
Boilerplate
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()
Visualization
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
Parameters
.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;
})
Shapes
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)
Circle
Circles (circle)
Defined by:
cx,
cy, and
r
.append("circle")
.attr("cx", 1) // Center x
.attr("cy", 2) // Center y
.attr("r", 3) // Radius
Line
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)
Scaling
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
- Linear scale
- C = (F - 32) * (5/9)
Scales
d3.js provides us tools to do this easily, with a set of different scales
- Linear Scale: Maps a domain to a range linearly.
- Power Scale: Maps a domain to a range via a given exponent (eg: 0.5 for square root)
- Log Scale: Maps a domain to a range via a given logarithmic base (eg: 10 for log10)
- Other Scales: Identity, Quantize, Quantile, and Threshold
Using a Linear Scale
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]
Using a Linear Scale
var f2c = d3.scale.linear()
.domain( [32, 212] )
.range( [0, 100] );
var c; c = f2c(75); // 23.88889 c = f2c(40); // 4.44444
Using a Log Scale
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] );
Finding Max/Min
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
