renderer = new Sigma.Sigma(graph, document.getElementById('sigma-container'));
Graph = require('graphology')
Sigma = require('https://bundle.run/sigma@2.0.0')
forceAtlas2 = require("https://bundle.run/graphology-layout-forceatlas2@0.8.1")
graphologyLayout = require("https://bundle.run/graphology-layout@0.4.0")
metrics = require('https://bundle.run/graphology-metrics@1.18.2')
assignLayouts = {
graphologyLayout.random.assign(graph); // Needs a starting layout for forceAtlas to work
let sensibleSettings = forceAtlas2.inferSettings(graph);
forceAtlas2.assign(graph, {iterations: 100, settings: sensibleSettings});
}
graph = {
let graph = new Graph({type: 'undirected'})
nodes.forEach(n => {
graph.addNode(n.Id);
});
edges.forEach(e => {
if (e.Weight > 10) {
graph.addEdge(e.Source,e.Target);
}
});
return graph
}
edges = FileAttachment("marvel-unimodal-edges.csv").csv()
nodes = FileAttachment("marvel-unimodal-nodes.csv").csv()
metrics.density(graph)
metrics.centrality.degree.assign(graph)
graph.forEachNode((n,attr) => {
graph.setNodeAttribute(n, "size", graph.degree(n)/10);
graph.setNodeAttribute(n, "label", n);
graph.setNodeAttribute(n, "color", colors[attr.community]);
});
graph.nodes().map(n => graph.getNodeAttributes(n));
louvain = require('https://bundle.run/graphology-communities-louvain@1.5.3')
louvain.assign(graph);
colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c']
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.
