D3 - Scale

1 - About

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.

3 - Linear


// 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);
	});

4 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap