Public
Edited
Oct 28, 2021
5 stars
Graph = require("graphology")
myGraph = new Graph();
{
myGraph.mergeNode('John');
myGraph.mergeNode('Martha');
myGraph.mergeEdge('John', 'Martha');
return `There are ${myGraph.order} nodes and ${myGraph.size} edge.`
}
graphologyLayout = require("https://bundle.run/graphology-layout@0.4.0")
forceAtlas2 = require("https://bundle.run/graphology-layout-forceatlas2@0.6.1")
graphologyLayout.circular.assign(myGraph);
graphologyLayout.circlepack.assign(myGraph);
graphologyLayout.random.assign(myGraph);
forceAtlas2.assign(myGraph, {iterations: 50});
graph = {
// init Graph object
const graph = new Graph();
// load and add nodes
const nodes = await FileAttachment("miserables-nodes.csv").csv()
nodes.forEach(n=>{
const attributes = {...n}
graph.addNode(n["id"], attributes)
});
// load and add edges
const edges = await FileAttachment("miserables-edges.csv").csv()
edges.forEach(e=>{
graph.addEdge(e["source"], e["target"])
});
// for the force atlas to work, nodes coordinates must be different from 0,0. So...
graphologyLayout.random.assign(graph);
// this is just for display purpose, you could remove it
graph.setAttribute("iterations", 0)
return graph;
}
spatialization = {
while (run) {
let iterations = graph.getAttribute("iterations")
forceAtlas2.assign(graph, {iterations: 1, settings: settings});
graph.setAttribute("iterations", ++iterations)
yield graph.export()
}
yield graph.export()
}
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.
