Learn D3.js

Linear scale

A linear scale, created with d3.scaleLinear(), preserves proportional differences. Its range is a linear function of the domain.

The following code builds a linear scale and uses it to plot values from 0 to 32 on a 1,000 pixel-wide axis line (see the full code for each of these examples in the Scales/ folder):

const data = d3.range(0,33);const scale = d3.scaleLinear().domain([0,32]).range([0,1000]); d3.select("svg").selectAll("circle").data(data)                .join("circle").attr("r", 5)                .attr("cx", d => scale(d) )                .attr("cy", 25);

The result, as shown in the following diagram, places the circles uniformly spaced on the axis:

A linear scale ...