Public
Edited
Oct 24, 2023
4 forks
31 stars
Insert cell
Insert cell
Insert cell
d3.scaleLinear()
Insert cell
Insert cell
Insert cell
Insert cell
barLength = d3.scaleLinear()
.domain([0, 100000])
.range([0, 400])
Insert cell
Insert cell
Insert cell
barLength.domain()
Insert cell
barLength.range()
Insert cell
Insert cell
Insert cell
barLength.invert(200) // what is the income under the mouse if it sits at 200 pixels?
Insert cell
Insert cell
Insert cell
lifeSpan = d3.scaleOrdinal()
.domain(["cat", "rabbit", "dog"])
.range([16, 2, 13])
Insert cell
lifeSpan("dog")
Insert cell
Insert cell
d3.scaleOrdinal([16, 13, 2]).domain(["cat", "dog", "rabbit"])
Insert cell
d3.scaleOrdinal(["cat", "dog", "rabbit"], [16, 13, 2])
Insert cell
Insert cell
Insert cell
{
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")
];
}
Insert cell
Insert cell
Insert cell
paint = d3.scaleLinear().range(["yellow", "red"])
Insert cell
paint(0.5) // this must be orange
Insert cell
Insert cell
Insert cell
population2radius = d3.scaleSqrt() // instead of scaleLinear()
.domain([0, 2e9])
.range([0, 300])
Insert cell
population2radius(1.386e9) // China’s 1.386 billion citizens are represented by a circle of radius = 250px
Insert cell
population2radius(127e6) // Japan’s population of 127 millions is represented by a circle of radius = 76px
Insert cell
population2radius(427e3) // Brunei shows up as a small circle
Insert cell
Insert cell
color = d3.scaleOrdinal(["green", "red", "blue"])
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more