PhD Candidate @densitydesign
Published
Edited
Oct 22, 2021
2 stars
chart = {
const svg = d3.select(DOM.svg(width, height));
const simulation = d3
.forceSimulation(data)
.force(
"center",
d3
.forceCenter()
.x(width / 2)
.y(height / 2)
)
.force("charge", d3.forceManyBody().strength(1))
.force(
"collision",
d3.forceCollide().radius(d => size(d.attributes["Occurrences Count"]) + 1)
);
let node = svg.append("g");
var groups = _(nodes)
.map('cluster')
.uniq()
.sort()
.value();
// mutate to add the group
_.each(nodes, (n, i) => {
n.group = nodes[i].cluster;
});
// now group by group
const nodeGroups = _.groupBy(nodes, 'group');
console.log(nodeGroups);
const hulls = svg
.append("g")
.selectAll('path')
.data(groups)
.enter()
.append('path')
.style('stroke', "rgba(0,0,0,0.5)")
.style('fill', "#DDD")
.style('stroke-width', 3)
.style('stroke-opacity', 1)
.style('fill-opacity', 1)
.attr('stroke-linejoin', 'round');
node
.selectAll("circle")
.enter()
.data(data)
.join("circle")
.attr("r", d => size(d.attributes["Occurrences Count"]))
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y));
simulation.on("tick", () => {
node.attr("cx", d => d.x).attr("cy", d => d.y);
});
// invalidation.then(() => simulation.stop());
return svg.node();
}
size = d3
.scaleSqrt()
.range([2, 4])
.domain(d3.extent(data, d => d.attributes["Occurrences Count"]))
data = d3.json(
"https://gist.githubusercontent.com/andreabenedetti/0ddd145c57faac19142fccb2dd89ad9e/raw/362cb40667eb292ce97eb32cfc0840c9ea72c398/210208_adi-nodes.json"
)
nodes = data.map(d => {
return {
type: d.attributes["Tipo di affiliazione"],
cluster: d.attributes["Ambito tematico"]
};
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
