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 valuesoutput 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


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:




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 closestintenger
scale.clamp()
: Force all values that out of range to be in closest range, i.e, max or min value.scale.sqrt
: square root scalescale.pow
: power scales, followingy = mx^k + b
scale.log
: log scales, followingy = mlog(x) + b
scale.quanitize
: a variant of linear scales with a discrate rather than continuous range. for examplequantize(0.49)
returns 0 andquantize(0.51)
returns 1scale.quantile
: map an input domain to a discreate range. Input domain isdiscreate
valuescale.ordinal
: input domain is unqualified value. For example,apple
ormonkey
d3.time.scale
: scale for date and time