Overview of d3.js

Sept. 6, 2016

​

CS 205 Workbook

python workbook.py

Data Source

View

Data Processing

/res directory

txt, csv, jpg, json

/py directory

compute.py�

/res for output

/res

data.json

/web directory

index.html

<script> ⇒ vis.js

Anatomy of a d3.js visualization

1. Boilerplate Code
2. Scales
3. Axes
4. Visual Encodings

d3.js coordinate system

d3.js Boilerplate Code

var margin = { top: 50, right: 50, bottom: 50, left: 50 },� width = 970 - margin.left - margin.right,� height = 700 - margin.top - margin.bottom;��var svg = d3.select("#chart")� .append("svg")� .attr("width", width + margin.left + margin.right)� .attr("height", height + margin.top + margin.bottom)� .style("width", width + margin.left + margin.right)� .style("height", height + margin.top + margin.bottom)� .append("g")� .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

d3.js Boilerplate Code

var margin = { top: 50, right: 50, bottom: 50, left: 50 },� width = 970 - margin.left - margin.right,� height = 700 - margin.top - margin.bottom;�

d3.js Boilerplate Code

var svg = d3.select("#chart")�

Connects the JavaScript/d3.js to the HTML, via an element that has an id=”chart”.

<div id="chart">�

d3.js Boilerplate Code

var svg = d3.select("#chart")� /* … */� .append("g")� .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

d3.js: Scales

Consider a plot of exam grades:

• Student grades are [0, 100]
• We want to graph them on a horizontal line

• Solving Mathematically:

• Solving Mathematically:
• grade / 100 = y-coord / width�data / 100 = y / width �width * (data / 100) = y

• Solving Mathematically:
• grade / 100 = y-coord / width�data / 100 = y / width �width * (data / 100) = y
• f(data) = width * (data / 100)

d3.js: Scales

d3.js scales allow us to map an input domain to an output range by specifying the domain, range, and function:

• input domain: [0, 100]
• output range: [0, width]
• function: linear

d3.js: Scales

var gradeScale = d3.scaleLinear()� .domain([0, 100])� .range([0, width]);

​

d3.js: Scales

gradeScale(65) finds the value for ???

d3.js: Scales

Quantitative Scales:

d3.scaleLinear()�d3.scalePow()�d3.scaleLog()

​

Discrete Categories (Ordinal) Scales:

d3.scaleOrdinal()�d3.scaleBand()�

�

API: https://github.com/d3/d3-scale

d3.js: Axes

Given a d3.js scale variable, it is simple to draw an axis:

var axisVariable = d3.axisTop()� .scale( scaleVariable );

svg.append("g")� .call( axisVariable );

​

API: https://github.com/d3/d3-axis

Visual Encodings

How do we draw the circles?

The data we want to visualize must be an array:

data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� …� ]

​

​

Visual Encodings

d3 allows us to “loop” through our data:

svg.selectAll("grade")� .data(data)� .enter()� /* ... everything here runs once *� * per entry in our array ... */

svg.selectAll("grade")� .data(data)� .enter()� .append("circle")� .attr("r", function (d, i) {� return 4;� })� /* ...more .attr functions... */

​

Basic Shapes in d3.js

• Circle ("circle")
• Requires a cx, cy, and r (radius)�
• Rectangle ("rect")
• Requires an x, y, width, and height�

​

svg.selectAll("grade")� .data(data)� .enter()� .append("circle")� .attr("r", function (d, i) {� return 4;� })� /* ...more .attr functions... */

​

.attr("r", function (d, i) {� return 4;� })�

Every attribute (.attr) function takes in two arguments:

1. An attribute value (eg: "r")
2. An attribute value, in the form of either:
1. A function that returns a value, in the format of:� function(d, i) { … }� d, the array element from the data array� i, the current index in the array
2. A value (string, number, etc)

svg.selectAll("grade")� .data(data)� .enter()� .append("circle")� .attr("r", function (d, i) {� return 4;� })� .attr("cx", function (d, i) {� return gradeScale( d["grade"] );� })� .attr("cy", 0)� .attr("fill", "red")� .attr("stroke", "black")� ;

​

​

​

Rental Encodings

• Fill Color ("fill")
• Any string representing a color�
• Stroke Color ("stroke")
• Any string representing a color�
• Stroke Width (“stroke-width”)
• Any number�

​

svg.selectAll("grade")� .data(data)� .enter()� .append("circle")� .attr("r", function (d, i) {� return 4;� })� .attr("cx", function (d, i) {� return gradeScale( d["grade"] );� })� .attr("cy", 0)� .attr("fill", "red")� .attr("stroke", "black")� ;

​

​

​

.attr("cx", function (d, i) {� return gradeScale( d["grade"] );�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​

First Pass: d = { "student": "1", "grade": 87 }

.attr("cx", function (d, i) {� return gradeScale( 87 );�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​

First Pass (i=0)

.attr("cx", function (d, i) {� return 756.9;�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​

First Pass (i=0)

.attr("cx", function (d, i) {� return gradeScale( 91 );�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​

Second Pass (i=1)

.attr("cx", function (d, i) {� return 791.7;�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​

Second Pass (i=1)

.attr("cx", function (d, i) {� return gradeScale( d["grade"] );�})��data = [� { "student": "1", "grade": 87 },� { "student": "2", "grade": 91 },� { "student": "3", "grade": 64 },� { "student": "4", "grade": 97 },� ...�}

​

​

​

​