[D3] Convert Input Data to Output Values with Linear Scales in D3

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. Turning a test score into a column height, or a percentage into an opacity requires translating from one set of possible values to another, and linear scales perform a direct, proportional conversion of inputs to outputs. In this lesson we’ll learn the basic API of D3 scales and how to use them.

 

var color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);

console.log(color(-0.5)); // "rgb(255, 128, 128)"
console.log(color(+0.5)); // "rgb(128, 192, 128)"

// If clamping is enabled, the return value of the scale is always within the scale’s range.
var number = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 500])
    .clamp(true);

console.log(number(0)); // 0
console.log(number(50)); // 250
console.log(number(100)); // 500
console.log(number(105)); // 500 -- with clamp(true)
console.log(number(105)); // 525 -- without clamp(true)

var number = d3.scaleLinear()
    .domain([0, 100])
    .range([0, 500]);

// Given a value from the range, returns the corresponding value from the domain.
console.log(number.invert(500)); // 100
console.log(number.invert(250)); // 50
console.log(number.invert(100)); // 20
console.log(number.invert(0)); // 0 -- with clamp(true)
console.log(number.invert(-10)); // -2 -- without clamp(true)