Reading Notes for D3.js Part III (Chapter 7)

This is a Reading Note for Interactive Data Visualization for the Web - An Introduction to Designing with D3 by Scott Murray, pulished by O’Reilly, 2013

This post will contains concepts that I think it’s important for me to be familiar with in D3 book.

Note: All tips that is written by book will has a sign near it.
All code example in this post comes from book.

Chapter 7 : Scale (Linear)
code example for this chapter is here. This part involves lots of code practice.

In D3, the scales are the functions that has parameters. You pass value to these functions, then they pass out values based on scale.

  • input domain means possible range for input values
  • output range means possible range for output values, mostly by pixels.
  • normalization means based on possible min and max value, transfer a value to a new value between 0 and 1. This is what we are doing for linear scale.

Create Scale
Code Part I

1
2
3
4
5
6
7
var scale = d3.scale.linear(); //Now scale is a function for linear scale
scale.domain([100,500]); //set up input domain
scale.range([10,350]); //set up output range
//now scale(100) will return 10, scale(300) will return 180

Zoomed Scatter Plot
Code Part II

We can make the input range more flexiable by using d3.min() and d3.max(). Normall we can just do d3.min(dataset). To get max value from an array of arrays:

1
2
3
4
5
6
var dataset = [
[50,100],[20,200],[74,40],[0,300]
];
d3.max(dataset,function(d){
return d[0];//This will compare x value for single array. d[1] will compare y value
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//Full Code to create Zoomed Scatter Plot
var w = 400;
var h = 250;
//Add padding to make sure circle will not be cut to half
var padding = 50;
var dataset = [
[50,50],[20,120],[74,35],[85,85],[60,99]
];
//X Axis: Make input domain be max in dataset, based on x value. Output range is the width of SVG
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d[0];})])
.range([5,w-padding]);
//Y Axis: Make input range be max in dataset, based on y value. Output range is the height of SVG
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d[1];})])
.range([h-padding,5]); //Note normally larger y is at bottom. We change to make larger y on top
//Radius: Make a self defined scale so that the radius is between 2 and 5, but still show scales
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){ return d[1];})])
.range([2,5]);
//Create SVG and Add Border to it
var svg = d3.select(document.getElementById("chapter7").getElementsByClassName('2')[0])
.append('svg')
.attr('width',w)
.attr('height',h);
//create a scatter plot
var circle = svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle');
//Set cx, cy to new value based on scale
circle.attr('cx',function(d){
return xScale(d[0]);
});
circle.attr('cy',function(d){
window.console.log(yScale(d[1]));
return yScale(d[1]);
});
circle.attr('r',function(d){
return rScale(d[1]);
});
circle.attr('fill','green');
//Set tag based on scale
var text = svg.selectAll('text')
.data(dataset)
.enter()
.append('text');
text.text(function(d){
return d[0] + "," + d[1];
});
text.attr('x',function(d){
return xScale(d[0]);
});
text.attr('y',function(d){
return yScale(d[1]);
});
text.attr('fill','pink');
//Now if svg change, the position of circles will adjust automatically

Other Methods and Scales

  • scale.nice(): Extend the domain so it starts and ends on nice round values. Following formula: exp(round(log(dx))-1). For example, [0.998, 2.5555] to [1,2.5]
  • scale.rangeRound(): Round ranges to closest intenger
  • scale.clamp(): Force all values that out of range to be in closest range, i.e, max or min value.

  • scale.sqrt: square root scale

  • scale.pow: power scales, following y = mx^k + b
  • scale.log: log scales, following y = mlog(x) + b
  • scale.quanitize: a variant of linear scales with a discrate rather than continuous range. for example quantize(0.49) returns 0 and quantize(0.51) returns 1
  • scale.quantile: map an input domain to a discreate range. Input domain is discreate value
  • scale.ordinal: input domain is un-qualified value. For example, apple or monkey
  • d3.time.scale: scale for date and time