A scale is a function that translates data values into visual values such as size, position, length, or color. It maps an input domain—the possible data values—to an output range—the possible screen values. section 3.4 section 3.4.1
Map data to pixels
A linear scale can turn values from 0 through 200 into lengths from 0 through 20: const myScale = d3.scaleLinear() .domain([0, 200]) .range([0, 20]); myScale(100); // 10 The domain describes the input values, while the range supplies the corresponding visual values. section 3.4.1
Choose a scale according to the kinds of values entering and leaving it:
- Use continuous domains for quantitative values such as numbers or dates, and continuous ranges when any output within an interval is valid. section 3.4.1
- Use discrete domains for qualitative values such as genres, and discrete ranges when outputs come from a predefined list. section 3.4.1
- Combine scale types to build charts: a bar chart can use linear and band scales to position and size rectangles. section 3.0
- For box plots, use a discrete horizontal scale for categories and a continuous vertical scale for numeric distributions. section 6.4.2
Figure 3.22 In the last step of the D3 data workflow, we use scales to translate data values into screen attributes such as length, position, and color.
Follow the final data-workflow step as values become screen attributes such as length, position, and color. section 3.4
Scales remain useful when D3 is used as a utility library. A framework can control the DOM and generate SVG markup while D3 performs scale calculations in the background. section 8.6
