{
const graph = ({
nodes: [
{ x: 200, y: 200, label: 'Cluster 1', width: 100, height: 100 },
{ fx: 200, fy: 200, label: null },
{ x: 400, y: 300, label: 'Cluster 2', width: 100, height: 100 },
{ fx: 400, fy: 300, label: null },
{ x: 380, y: 290, label: 'Cluster 3', width: 100, height: 100 },
{ fx: 380, fy: 290, label: null },
{ x: 415, y: 305, label: 'Cluster 4', width: 100, height: 100 },
{ fx: 415, fy: 305, label: null },
],
links: [
{ source: 1, target: 0 },
{ source: 3, target: 2 },
{ source: 5, target: 4 },
{ source: 7, target: 6 },
]
});
const simulation = d3
.forceSimulation()
.nodes(graph.nodes)
.force("center", d3.forceCollide(20))
.force("link", d3.forceLink(graph.links))
.on("tick", tick);
simulation.tick(100);
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]),
link = svg
.selectAll(".link")
.data(graph.links)
.join("line")
.classed("link", true),
node = svg
.selectAll(".node")
.data(graph.nodes)
.join("circle")
.attr("r", 6)
.classed("node", true)
.classed("hidden", d => d.fx === undefined);
const labels = svg.selectAll(".label")
.data(graph.nodes.filter(n => n.label))
.join("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("text-anchor", "middle")
.text(d => d.label);
function tick() {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
}
yield svg.node();
}
height = Math.min(500, width * 0.6)
html`<style>
.link {
stroke: #000;
stroke-width: 1.5px;
}
.node {
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
}
.node.hidden {
fill: red;
}
</style>`
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.
