chart = {
replay;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
const path = d3.geoPath().pointRadius(1);
svg
.append("g")
.attr("transform", `translate(0,${height - margin})`)
.call(d3.axisBottom(x))
.call((g) =>
g
.append("text")
.attr("fill", "black")
.attr("text-anchor", "end")
.attr("transform", `translate(${width - margin},32)`)
.text("carats →")
);
svg
.append("g")
.attr("transform", `translate(${margin},0)`)
.call(d3.axisLeft(y))
.call((g) =>
g
.append("text")
.attr("fill", "black")
.attr("text-anchor", "start")
.attr("transform", `translate(-20,${margin - 10})`)
.text("↑ price ($)")
);
const current = svg
.append("path")
.attr("stroke", "steelblue")
.attr("fill", "none")
.attr("stroke-width", 2);
const traces = svg
.append("path")
.attr("stroke", "steelblue")
.attr("fill", "none")
.attr("stroke-width", 1)
.attr("d", "");
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("d", diamonds
.filter((d, i) => i % 10 === 0)
.map((d) => `M${x(d.carat)},${y(d.price)}l1,1`).join(""));
yield svg.node();
for (const value of d3.ticks(Number.MIN_VALUE, contour.max, 2000)) {
current.attr("d", path(contour(value)));
if ((40 * value) % 1 === 0) traces.attr("d", traces.attr("d") + path(contour(value)));
await Promises.delay(1);
}
current.attr("d", null);
}
contour = d3.contourDensity()
.size([width, height])
.x(d => x(d.carat))
.y(d => y(d.price))
.contours(diamonds)
margin = 40
x = d3.scaleLog(d3.extent(diamonds, (d) => d.carat), [margin, width - margin])
y = d3.scaleLog(d3.extent(diamonds, (d) => d.price), [height - margin, margin])
height = 600
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.
