D3 Linear Scale
Create a linear scale in D3 with scaleLinear.
Given this dataset:
year population
1950 5
1951 10
1955 15
1959 20
D3 Linear Scale with scaleLinear()
Use this syntax:
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.population; })])
.range([h - padding, padding]);
Mapping input domain to output range:
- Input domain: From
0
to themax
value of thepopulation
column - Output range: Limit the visualization to the padded limits of the
SVG
height.
With SVG the coordinates increase left to right, top to bottom.
For this:
.range([h - padding, padding]);
- The height
h
is the height of theSVG
, for examplevar h = 300;
. padding
can be set asvar padding = 40;
h - padding
is300 - 40
which is260
Then the range is:
.range([260, 40])
The range is between the y
coordinate 260
and the y
coordinate 40
. Which is the padded region of the height of the SVG.
More about D3 and Scales: