chart = {
const svg = d3.select(DOM.svg(width, height));
size.domain(d3.extent(data, (d) => +d.count));
color.domain(d3.extent(data, (d) => +d.posts));
const simulation = d3
.forceSimulation(data)
.force("charge", d3.forceManyBody().strength(3))
.force(
"collision",
d3
.forceCollide()
.radius((d) => size(d.count) + 4)
.iterations(5)
)
.alpha(1);
const node = svg
.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", (d) => size(d.count))
.attr("fill", (d) => color(d.posts))
.attr("stroke", (d) => {
if (d.posts > s) {
return "#999";
} else {
return "#EEE";
}
});
const label = svg
.append("g")
.selectAll("text")
.data(data)
.join("text")
.filter((d) => +d.posts > s)
.text((d) => d.soundbyte)
.attr("font-size", 11)
.attr("text-anchor", "middle");
simulation.on("tick", () => {
label.attr("x", (d) => d.x).attr("y", (d) => d.y);
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}