Public
Edited
Sep 14, 2022
1 fork
24 stars
{
const canvas = DOM.canvas(width, 700);
yield canvas;
const graph = new cosmo.Graph(canvas, config);
graph.setData(nodes, links);
graph.zoom(0.9);
invalidation.then(() => {
// TODO
});
}
mutable clicked = null
cosmo = import("https://cdn.skypack.dev/@cosmograph/cosmos@1")
// "https://cosmograph.app/data/jan99jac040sc.csv"
data = FileAttachment("jan99jac040sc.csv").csv({ typed: true })
nodes = [...new Set(data.flatMap((d) => [d.source, d.target]))].map(id => ({id}))
links = data
config = ({
backgroundColor: "#151515",
nodeSize: 3,
nodeColor: "#984040",
linkWidth: 0.1,
linkColor: "#8C8C8C",
linkArrows: false,
simulation: {
linkDistance: 1,
linkSpring: 2,
repulsion: 0.1,
gravity: 0.1,
decay: 10000
},
events: {
onClick: (node) => (mutable clicked = node)
}
})
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.
