scale in D3.
D3’s scales simplify visual encoding.
They map data value (a domain) to pixels value (a range).
These scales supports both ordinal and quantitative (linear, logarithmic, exponential, quantile) values.
Cynthia Brewer’s useful color scales is also packed. See also: Color - Palette.
// Add a svg element
var width = 400, height = 50;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// The data set
var dataset = [1,2,3,4];
// The linear scale definition
// 0 to 5 will be scaled to 0 to 300 pixel
var linearScale = d3.scaleLinear()
.domain([0, 5])
.range([0, 300]);
// Add the circles to the svg and use the linear scale in the cllback function
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("r", 5)
.attr("cy", height/2)
.attr("cx", function(d) {
return linearScale(d);
});