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 domainmeans possible range for input values
output rangemeans possible range for output values, mostly by pixels.
normalizationmeans 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.
Code Part I
Zoomed Scatter Plot
Code Part II
We can make the input range more flexiable by using
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,
scale.rangeRound(): Round ranges to closest
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
scale.quantile: map an input domain to a discreate range. Input domain is
scale.ordinal: input domain is un-qualified value. For example,
d3.time.scale: scale for date and time