Reading Notes for D3.js Part III (Chapter 7)
This post is transferred from my old Hexo blog site, created on 2014.
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.
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
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:
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 }) //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