scaleLinear() is a D3 function that maps continuous numeric values from an input domain to continuous output values in a range. Configure it by chaining domain() and range(), then call the resulting scale like a JavaScript function. section 3.4.1 section 3.4.2
Use a linear scale to translate data values into visual dimensions:
- Set the domain to the possible input values, such as [0, 250]. section 3.4.2
- Set the range to the corresponding output bounds, such as [0, 25]. section 3.4.1
- Call the scale with a data value; the output remains directly proportional to the input. section 3.4.2
Sizing bars in a responsive chart
A bar chart can map counts from 0 through 1,078 onto 0 through 450 pixels: const xScale = d3.scaleLinear().domain([0, 1078]).range([0, 450]); Then set each rectangle's width with .attr("width", d => xScale(d.count)). For example, xScale(1078) returns 450 and xScale(414) returns 172.82. section 3.4.2
const createViz = (data) => {
const xScale = d3.scaleLinear()
.domain([0, 1078])
.range([0, 450]);
// Data-binding
...
}
Inspect the complete scale declaration used to reserve chart space for labels while sizing bars from data counts. section 3.4.2
