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
	.attr("r", 5)
        .attr("cy", height/2)
	.attr("cx", function(d) {
		return linearScale(d);

4 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap