rendererPre = new Sigma.Sigma(graphPre, document.getElementById('sigma-container-pre'));
rendererPost = new Sigma.Sigma(graphPost, document.getElementById('sigma-container-post'));
function difference(setA, setB) {
let _difference = new Set(setA)
for (let elem of setB) {
_difference.delete(elem)
}
return _difference
}
function intersection(setA, setB) {
let _intersection = new Set()
for (let elem of setB) {
if (setA.has(elem)) {
_intersection.add(elem)
}
}
return _intersection
}
nodesPreSet = new Set(nodesPre)
nodesPostSet = new Set(nodesPost)
PreNotPost = difference(nodesPreSet,nodesPostSet)
PostNotPre = difference(nodesPostSet,nodesPreSet)
InBoth = intersection(nodesPreSet,nodesPostSet)
edgesPreSet = new Set(edgesPre)
edgesPostSet = new Set(edgesPost)
EdgesPreNotPost = difference(edgesPreSet,edgesPostSet)
EdgesInBoth = intersection(edgesPreSet,edgesPostSet)
graphPreDensity = metrics.density.undirectedDensity(graphPre)
graphPostDensity = metrics.density.undirectedDensity(graphPost)
avgdegree = (graph) => {
let totalDegree = 0
graph.forEachNode( (n,attr) => { totalDegree += graph.degree(n); })
return totalDegree/graph.nodes().length;
}
graphPreAvgDegree = avgdegree(graphPre)
graphPostAvgDegree = avgdegree(graphPost)
GPreStats = {
let n = 0
let stats = []
while (n < 100) {
n++
let RG = gen.random.erdosRenyi(Graph, {order: 544, approximateSize: 1405})
stats.push({density: metrics.density.undirectedDensity(RG), avgdegree: avgdegree(RG)})
}
return stats
}
viewof randomPreStats = aq.from(GPreStats).view()
GPostStats = {
let n = 0
let stats = []
while (n < 100) {
n++
let RG = gen.random.erdosRenyi(Graph, {order: 430, approximateSize: 910})
stats.push({density: metrics.density.undirectedDensity(RG), avgdegree: avgdegree(RG)})
}
return stats
}
viewof randomPostStats = aq.from(GPostStats).view()
randomPreStats.filter(d => d.avgdegree > 5.1).numRows()/randomPreStats.numRows()
randomPostStats.filter(d => d.avgdegree > 4.2).numRows()/randomPostStats.numRows()
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')
gen = require('https://bundle.run/graphology-generators@0.11.1')
assignLayouts = (graph) => {
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)
}
assignLayouts(graphPre)
assignLayouts(graphPost)
graphPre = {
let graph = new Graph({type: 'undirected'})
nodesPre.forEach(n => {
graph.addNode(n);
});
edgesPre.forEach(e => {
try {
graph.addEdge(e["Source Name"],e["Target Name"]);
} catch (e) {}
});
return graph
}
graphPost = {
let graph = new Graph({type: 'undirected'})
nodesPost.forEach(n => {
graph.addNode(n);
});
edgesPost.forEach(e => {
try {
graph.addEdge(e["Source Name"],e["Target Name"]);
} catch (e) {}
});
return graph
}
edges = FileAttachment("sdfb_edgelist.csv").csv()
edgesPre = edges.filter(e => e["Start Year"] < 1570);
edgesPost = edges.filter(e => e["Start Year"] >= 1570);
nodesPre = [...new Set(edgesPre.map(e => {return [e["Source Name"], e["Target Name"]];}).flat())]
nodesPost = [...new Set(edgesPost.map(e => {return [e["Source Name"], e["Target Name"]];}).flat())]
metrics.centrality.degree.assign(graphPre)
assignAttributes = (graph) => {
graph.forEachNode((n,attr) => {
// graph.setNodeAttribute(n, "size", attr.degreeCentrality);
graph.setNodeAttribute(n, "label", n);
graph.setNodeAttribute(n, "color", colors[attr.community]);
});
}
graphPre.nodes().map(n => graphPre.getNodeAttributes(n))
assignAttributes(graphPre)
assignAttributes(graphPost)
louvain = require('https://bundle.run/graphology-communities-louvain@1.5.3')
louvain.assign(graphPre);
louvain.assign(graphPost)
colors = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf']
import { aq, op } from '@uwdata/arquero'
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.
