viz = {
const width = 1000
const height = 800
const context = DOM.context2d(width,height)
const force = d3.forceSimulation()
.force("link", d3.forceLink()
.id(function(d) { return d.name; })
.distance(60))
.force("charge", d3.forceManyBody().distanceMax(40))
force
.nodes(nodes)
.on('tick', tick)
force.force('link')
.links(links)
function tick() {
context.clearRect(0, 0, width, height);
// draw links
context.strokeStyle = "#ccc";
context.beginPath();
links.forEach(function(d) {
context.moveTo(d.source.x + width/2, d.source.y + height/2);
context.lineTo(d.target.x+ width/2, d.target.y+ height/2);
});
context.stroke();
// draw nodes
context.fillStyle = "steelblue";
context.beginPath();
nodes.forEach(function(d) {
let radius = 4.5
let x = Math.max(radius, Math.min(width - radius, d.x + width/2))
let y = Math.max(radius, Math.min(height - radius, d.y + height/2))
context.moveTo(x, y);
context.arc(x, y, radius, 0, 2 * Math.PI);
});
context.fill();
}
context.canvas.addEventListener('click', () => force.alpha(1).restart())
return context.canvas;
}
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.
