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));
console.log(color.domain());
const simulation = d3
.forceSimulation(data)
.force(
"center",
d3
.forceCenter()
.x(width / 2)
.y(height / 2)
)
.force("charge", d3.forceManyBody().strength(3))
.force(
"collision",
d3
.forceCollide()
.radius(d => size(d.count) + 6)
.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.count > s) {
return "#999";
} else {
return "#EEE";
}
});
const label = svg
.append("g")
.selectAll("text")
.data(data)
.join("text")
.filter(d => +d.count > s)
.text(d => d.sound)
.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();
}