Published
Edited
Sep 15, 2022
barLength = d3.scaleLinear()
.domain([0, 1000]) // in each area, there are at most 1000 citi bikes.
.range([0, 400]) // the height of the bar chart is 400 (pixel)
barLength(40)
barLength(500)
barLength.invert(200)
radiusScale = d3.scaleSqrt()
.domain([0, 4e7]) // for example, the population in a state is at most 40 million.
.range([0, 200]) // the raidus of the circle for 40 million people is 200 px.
radiusScale(39613493) // California’s 39 million citizens are represented by a circle of radius = 199px
radiusScale(19299981) // New York State's 19 million citizens are represented by a circle of radius = 138px
paint = d3.scaleLinear().range(["yellow", "red"])
paint.domain()
ordinalScale = d3.scaleOrdinal()
.domain(['one', 'two', 'three'])
.range([1, 2, 3])
ordinalScale('two')
x = d3.scaleBand()
.domain(names)
.range([0, width])
// .padding(0.2)
x.bandwidth()
x('A')
x('C')
xx = d3.scalePoint()
.domain(names)
.range([0, width])
// .padding(.2)
xx('A')
xx('B')
xx('C')
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.
