commit 282eb4c547ad9fb8c108624d8af34c60593c7439 Author: Yûki Vachot Date: Sun May 12 17:24:49 2024 +0200 Initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/assets/data_lineage_json.json b/assets/data_lineage_json.json new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..f979c2e --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + Data Lineage Visualizer + + + +
+
Data Lineage - Network Graph Visualization
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b0be1a5 --- /dev/null +++ b/script.js @@ -0,0 +1,99 @@ +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); + const sigmaInstance = new Sigma(graph, document.getElementById('container')); + add_drawer(sigmaInstance, graph); + } 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, + size: network_graph_json.tags.find((el) => el.key === node.tag).size, + color: network_graph_json.tags.find((el) => el.key === node.tag).color, + } + ); + } + + 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'); + } + return await response.json(); +} + +function add_drawer(sigmaInstance, graph){ + sigmaInstance.on('clickNode', ({node}) => { + const attributes = graph.getNodeAttributes(node); + const drawer = document.getElementById('nodeDrawer'); + const drawerText = document.getElementById('drawerText'); + + drawerText.innerHTML = `Node Label: ${attributes.label}
Node Type: ${attributes.tag}
More info: Click here`; + + drawer.style.width = "30%"; + drawer.style.display = "block"; + }); + + const close = document.getElementsByClassName("close")[0]; + close.onclick = function() { + const drawer = document.getElementById('nodeDrawer'); + drawer.style.display = "none"; + } + window.onclick = function(event) { + const drawer = document.getElementById('nodeDrawer'); + if (event.target === drawer) { + drawer.style.display = "none"; + } + } +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..436b7e9 --- /dev/null +++ b/styles.css @@ -0,0 +1,29 @@ +html, body { + height: 100vh; + margin: 0; + padding: 0; + background: lightgrey; + overflow: hidden; +} + +#container { + position: relative; + width: 100vw; + height: 100vh; + background: white; + border: 1px solid #ccc; + overflow: hidden; +} + +.graph-title { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + font-size: 32px; + color: #333; + z-index: 5; + background-color: rgba(255, 255, 255, 0.8); + padding: 5px 10px; + border-radius: 5px; +}