Public
Edited
Apr 27, 2023
chart = ForceGraph(miserables, {
nodeId: d => d.id,
nodeGroup: d => d.group,
nodeTitle: d => `${d.id}\n${d.group}`,
linkStrokeWidth: l => Math.sqrt(l.value),
width,
height: 600,
invalidation, // a promise to stop the simulation when the cell is re-run
nodeLabel: d => d.id, // display node label
onNodeHover: (node, prevNode) => {
if (node) {
const tooltip = document.createElement('div');
tooltip.innerHTML = `<b>${node.id}</b><br/>Group: ${node.group}`;
tooltip.style.position = 'absolute';
tooltip.style.top = `${node.y + 10}px`;
tooltip.style.left = `${node.x + 10}px`;
tooltip.style.backgroundColor = 'white';
tooltip.style.padding = '5px';
tooltip.style.border = '1px solid black';
tooltip.style.borderRadius = '5px';
tooltip.id = 'node-tooltip';
document.body.appendChild(tooltip);
} else {
const tooltip = document.getElementById('node-tooltip');
if (tooltip) {
tooltip.remove();
}
}
}
})
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.
