joelmturner pyramid logo

About

Blog

Illustration

TIL

Uses

About

Blog

Illustration

TIL

Uses

Data Visualizations

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

Discuss this article on Twitter

Category:

data-vis

© 2012-2023, built with Next.js and Chakra UI

InstagramtwitterlinkedIngithubjoelmturner's DEV Profilejoelmturner's Mastodon Profile