yvachot/MicrosoftCDM-NetworkVisualizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First Commit

Browse source
This commit is contained in:
Yûki VACHOT 2024-05-12 02:37:54 +02:00
commit 2d00e59043
5 changed files with 1569 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README.md Normal file
View file

@ -0,0 +1 @@
# Representation of Microsoft Common Data Model with Sigma.js a Javascript library for network graph

1472
assets/network_graph_json.json Normal file
View file

File diff suppressed because it is too large Load diff

12
index.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Quick Sigma.js Example</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="container"></div>
<script type="module" src="script.js"></script>
</body>
</html>

75
script.js Normal file
View file

@ -0,0 +1,75 @@
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;
}

9
styles.css Normal file
View file

@ -0,0 +1,9 @@
body {
background: lightgrey;
}
#container {
height: auto;
width: auto;
background: white;
}