Public
Edited
Nov 16, 2021
5 forks
6 stars
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")
noverlap = require("https://bundle.run/graphology-layout-noverlap@0.4.1")
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});
noverlap.assign(graph)
}
graph = {
let graph = new Graph({type: 'undirected'})
nodes.forEach(n => {
graph.addNode(n.id);
});
edges.forEach(e => {
graph.addEdge(e.source,e.target);
});
return graph
}
edges = FileAttachment("got-edges.csv").csv()
nodes = FileAttachment("got-nodes.csv").csv()
metrics.density(graph)
metrics.centrality.degree.assign(graph)
graph.forEachNode((n,attr) => {
graph.setNodeAttribute(n, "size", graph.degree(n));
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']
// Bind graph interactions:
renderer.on("enterNode", ({ node }) => {
graph.forEachNode((n,attr) => {
graph.setNodeAttribute(n, "color", "#999");
});
graph.forEachNeighbor(node, (n, attr) => {
graph.setNodeAttribute(n, "color", colors[attr.community]);
});
graph.setNodeAttribute(node, "color", colors[graph.getNodeAttribute(node, "community")]);
});
renderer.on("leaveNode", ({ node }) => {
graph.forEachNode((n,attr) => {
graph.setNodeAttribute(n, "color", colors[attr.community]);
});
});
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.
