lin = d3.scaleLinear()
run2pixels = d3.scaleLinear()
.domain([0, 42.195]) // unit: km
.range([0, 600]) // unit: pixels
run2pixels(0) // The start line
run2pixels(42.195) // The distance of a full marathon is 42.195 km; represented by 600 pixels
run2pixels(10 * 1.609344) // 10 miles
grades = d3.scaleLinear().rangeRound([0, 3])
grades(63 / 100)
["D", "C", "B", "A"][grades(63 / 100)]
children = d3.scaleLinear().rangeRound([0, 46])
children(90 / 100)
piecewiseScale = d3.scaleLinear()
.domain([0, 100, 200, 300, 400])
.range([220, 200, 100, 200, 150]) // add + Math.sin(now / 1000) * 50 to one of these for animation
crayons = d3.scaleLinear()
.domain([-1, 0, 1])
.range(["orange", "white", "green"])
date = d3.scaleLinear()
.range([new Date("2009-01-01T00:00:00"), new Date("2009-12-31T23:59:59")])
date(0.5)
days = d3.scaleLinear().range([new Date("2009-01-01"), new Date("2009-12-31")])
days(0.5)
opacity = d3.scaleLinear()
.domain([0, 10])
.range([0, 1])
.clamp(true) // try with false instead
opacity(-1) // -1 is outside the domain!
opacity(15) // 15 is outside the domain!
opacity.clamp()
paint = d3.scaleLinear()
.range(["yellow", "red"])
.unknown("#ccc")
paint(NaN)
paint.unknown()
paint.invert("red")
opacity.clamp(true).invert(-1)
d3.scaleLinear()
.domain([-30, 0, 30])
.range([1, 0, 1])
.clamp(true)
.invert(0.4)
scaleRound = d3.scaleLinear()
.range([0, 960])
.interpolate(d3.interpolateRound)
scaleRound(1 / 3)
scaleDecimal = d3.scaleLinear()
.range([0, 960])
.interpolate(function(a, b) {
const c = b - a;
return function(t) {
return +(a + t * c).toFixed(1);
};
})
scaleDecimal(2 / 7)
scaleDecimal.interpolate()
d3 = require("d3-scale@4", "d3-array@2", "d3-interpolate@3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
