Data Visualizations

Author: Published Updated

How do you remember domain vs range when building data visualizations?

Domain maps to your data values and range maps to pixel/output values — remember "d for data, r for rems." This page collects D3 and VisX scale snippets and the mental models I use when wiring up charts.

D3VisXVX

Domain and Range

It can be confusing at first to remember which values domain and range map to. Ryan Legler helped me remember with the pneumonic, d for data, r for rems.

// domain === data
const data = [3000, 4560, 8340, 123];
// domain is [123, 8340]


// range === rems (it's really pixels
// but the notion of space is true)
const width = 450;
// range is [0, 450]

Scales

You can pass a pixel value to get the domain value by using scale.invert().

const scale = d3.scaleLinear().domain([3000, 4560, 8340, 123]).range([0, 450]);


scale.invert(225);
// 3780
< VS Code