Linear Scales
The previous lesson described the concept of scale in data visualization. Scales allow, for instance, to translate a value in our dataset to a position on the screen.
Now, let's study the most common scale type and its d3.js implementation: the linear scale and its scaleLinear() function.
The scaleLinear() function
The scaleLinear() function is part of the d3-scale module of d3.js.
It expects 2 inputs: a domain and a range.
Domain
Usually an array of length 2. It provides the min and the max of the values we have in the dataset.
Range
Usually an array of length 2. It provides the start and the end of the positions we are targeting in pixel.
The output is a function that takes a single argument. You provide a value from the domain, and it returns the corresponding value from the range.
Let's create a scale to address the issue with the green circles above!
import {scaleLinear} from d3
const scale = scaleLinear()
.domain([0, 100])
.range([0, 500]);
console.log( scale(82) )
// 410
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏