chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("stroke-width", 2);
const circles = d3.range(20).map(i => ({
x: Math.random() * (width - radius * 2) + radius,
y: Math.random() * (height - radius * 2) + radius,
index: i
}));
svg.selectAll("circle")
.data(circles)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", radius)
.attr("fill", d => d3.schemeCategory10[d.index % 10])
.call(drag)
.on("click", clicked);
function clicked(event, d) {
if (event.defaultPrevented) return;
d3.select(this).transition()
.attr("fill", "black")
.attr("r", radius * 2)
.transition()
.attr("r", radius)
.attr("fill", d3.schemeCategory10[d.index % 10]);
}
return svg.node();
}