Public
Edited
Mar 30, 2022
1 fork
Insert cell
Insert cell
numbers = d3.range(26).map((d) => Math.round(Math.random() * 100))
Insert cell
svg`<svg id='viz' width='600' height='400'></svg>`
Insert cell
{
const scaleLength = d3.scaleLinear().domain([0, 40]).range([0, 200]);
const scaleY = d3
.scaleBand()
.domain(d3.range(numbers.length))
.range([0, 300])
.paddingInner(0.05);

d3.select("#viz")
.selectAll("rect")
.data(numbers)
.join("rect")
.attr("x", 10)
.attr("y", function (d, i) {
return scaleY(i);
})
.attr("height", scaleY.bandwidth())
.attr("width", scaleLength)
.attr("fill", "orange");

d3.select("#viz")
.selectAll("text")
.data(numbers)
.join("text")
.attr("x", 15)
.attr("y", (d, i) => scaleY(i) + scaleY.bandwidth())
.text((d) => d);
}
Insert cell

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.
Learn more