chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g")
.attr("class", "circles");
g.append("style").text(`
.circles {
stroke: transparent;
stroke-width: 1.5px;
}
.circles circle:hover {
stroke: black;
}
`);
g.selectAll("circle")
.data(data)
.join("circle")
.datum(([x, y], i) => [x, y, i])
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", radius)
.attr("fill", ([,, i]) => d3.interpolateRainbow(i / 360))
.on("mousedown", mousedowned)
.append("title")
.text((d, i) => `circle ${i}`);
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 8])
.on("zoom", zoomed));
function mousedowned(event, [,, i]) {
d3.select(this).transition()
.attr("fill", "black")
.attr("r", radius * 2)
.transition()
.attr("fill", d3.interpolateRainbow(i / 360))
.attr("r", radius);
}
function zoomed({transform}) {
g.attr("transform", transform);
}
return svg.node();
}