D3 - Scale

Card Puncher Data Processing


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

Documentation / Reference

Discover More
Card Puncher Data Processing
D3 - (Architecture|Design)

D3’s atomic operand is the selection: a filtered set of elements queried from the current document. Operators act on selections, modifying content. Data joins bind input data to elements, enabling...
Card Puncher Data Processing
D3 - Histogram

in D3. The properties of an histogram function A callback function to return the data to bins from the raw data (data passed to the histogram function). Parameters are: the element the index...
Card Puncher Data Processing
D3 - Module

modules are optional in D3 Design.
D3 Scale Domain Range
Viz - Scale

Scale in Visualization Line with numbers (Major and minor Grid) Scale map: data value (a domain) to pixels value (a range). Scale permits data (the domain) to fit the chart area (the pixels...

Share this page:
Follow us:
Task Runner