75 lines
2 KiB
JavaScript
75 lines
2 KiB
JavaScript
import graphology from 'https://cdn.jsdelivr.net/npm/graphology/+esm';
|
|
import sigma from 'https://cdn.jsdelivr.net/npm/sigma/+esm';
|
|
import forceAtlas2 from 'https://cdn.jsdelivr.net/npm/graphology-layout-forceatlas2/+esm';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
main();
|
|
});
|
|
|
|
async function main(){
|
|
try {
|
|
const network_graph_json = await getNetworkGraphJson();
|
|
let graph = createGraph(network_graph_json);
|
|
graph = addLayout(graph);
|
|
console.log("Graph data:", network_graph_json);
|
|
console.log("Graph object:", graph);
|
|
let sigmaInstance = new sigma.Sigma(
|
|
graph,
|
|
document.getElementById('container')
|
|
);
|
|
} catch (error) {
|
|
console.error('Failed to load or create the graph:', error);
|
|
}
|
|
}
|
|
|
|
|
|
function createGraph(network_graph_json){
|
|
let graph = new graphology.Graph();
|
|
|
|
for (const node of network_graph_json.nodes) {
|
|
graph.addNode(
|
|
node.key,
|
|
{
|
|
label: node.label,
|
|
tag: node.tag,
|
|
URL: node.URL,
|
|
cluster: node.cluster,
|
|
}
|
|
);
|
|
}
|
|
|
|
for (const edge of network_graph_json.edges) {
|
|
graph.addEdge(edge.source, edge.target);
|
|
}
|
|
|
|
return graph;
|
|
}
|
|
|
|
function addLayout(graph){
|
|
|
|
graph.forEachNode((node) => {
|
|
if (!graph.getNodeAttribute(node, 'x') && !graph.getNodeAttribute(node, 'y')) {
|
|
graph.setNodeAttribute(node, 'x', Math.random());
|
|
graph.setNodeAttribute(node, 'y', Math.random());
|
|
}
|
|
});
|
|
|
|
forceAtlas2.assign(graph, {
|
|
iterations: 100,
|
|
settings: {
|
|
gravity: 0.5,
|
|
scalingRatio: 2.0
|
|
}
|
|
});
|
|
|
|
return graph;
|
|
}
|
|
|
|
async function getNetworkGraphJson(){
|
|
const response = await fetch('./assets/network_graph_json.json');
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
return data;
|
|
}
|