Published
Edited
Jul 1, 2021
1 star
Insert cell
Insert cell
dataset = [5, 4, 3, 2, 1]
Insert cell
width = 400
Insert cell
height = 100
Insert cell
x = d3.scaleLinear()
.domain([0, dataset.length - 1])
.range([50, width - 50]);

Insert cell
size = d3
.scaleSqrt()
.domain([0, d3.max(dataset)])
.rangeRound([0, height / 2])
Insert cell
{
const svg = d3.create("svg").attr("width", width).attr("height", height);

svg
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d, i) => x(i))
.attr("cy", height / 2)
.attr("r", size)
.attr("fill", "red")
.attr("opacity", 0.5);

return svg.node();
}
Insert cell
Insert cell
Object.entries(d3)
.filter((d) => typeof d[1] === "function")
.map((d) => d[0])
Insert cell
d3 = require("d3@7")
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