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);
}