d3.scaleLinear()
barLength = d3.scaleLinear()
.domain([0, 100000])
.range([0, 400])
barLength.domain()
barLength.range()
barLength.invert(200) // what is the income under the mouse if it sits at 200 pixels?
lifeSpan = d3.scaleOrdinal()
.domain(["cat", "rabbit", "dog"])
.range([16, 2, 13])
lifeSpan("dog")
d3.scaleOrdinal([16, 13, 2]).domain(["cat", "dog", "rabbit"])
d3.scaleOrdinal(["cat", "dog", "rabbit"], [16, 13, 2])
{
const emoji = d3.scaleOrdinal().range(["🎃", "👹", "🌚"]);
return [
emoji("1st point"),
emoji("2nd point"),
emoji("3rd point"),
emoji("4th point"),
emoji("5th point"),
emoji("6th point"),
emoji("7th point")
];
}
paint = d3.scaleLinear().range(["yellow", "red"])
paint(0.5) // this must be orange
population2radius = d3.scaleSqrt() // instead of scaleLinear()
.domain([0, 2e9])
.range([0, 300])
population2radius(1.386e9) // China’s 1.386 billion citizens are represented by a circle of radius = 250px
population2radius(127e6) // Japan’s population of 127 millions is represented by a circle of radius = 76px
population2radius(427e3) // Brunei shows up as a small circle
color = d3.scaleOrdinal(["green", "red", "blue"])
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.
