Public
Edited
Nov 11, 2022
Insert cell
Insert cell
Insert cell
Insert cell
dataset = d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)()
}))
Insert cell
Insert cell
{
const width = 400;
const height = 100;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);

const barPadding = 1;

const rects = svg.append("g").selectAll("rect").data(dataset).join("rect");

rects
.attr("x", (d, i) => i * 50)
.attr("y", (d) => height - d)
.attr("width", 40)
.attr("height", (d) => d)
.attr("fill", "#8cc");

return svg.node();
}
Insert cell
Insert cell
Insert cell
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