57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Kalzu</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js" integrity="sha512-iiPEYww3QXZU5C795JnnINBRNgHqDnRHs9mA7aJoqx4pNE4u3CknCDGmePHFoHtKR/6C9aIcRFa+HJ6obtlteQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js" integrity="sha512-tjMBhL9fLMcqoccPOwpRiIQIOAyUh18lWUlUvE10zvG1UNMfxUC4qSERmUq+VF30iavIyqs/q6fSP2o475FAUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
</head>
|
|
<body style="background: lightgrey">
|
|
<div id="container" style="width: 97%; height: 95vh; background: white; margin: auto; margin-top: 32px"></div>
|
|
<script>
|
|
|
|
const hops = [
|
|
["_gateway", "(192.168.0.1) 0.549 ms"],
|
|
["83-148-246-178.static.lounea.fi", "(83.148.246.178) 1.200 ms"],
|
|
["*"],
|
|
["*"],
|
|
["*"],
|
|
["86-60-254-198.static.lounea.fi", "(86.60.254.198) 3.719 ms"],
|
|
["72.14.194.142", " (72.14.194.142) 3.716 ms"],
|
|
["142.251.53.71", " (142.251.53.71) 3.704 ms"],
|
|
["142.250.229.87", " (142.250.229.87) 4.603 ms"],
|
|
["mad06s09-in-f142.1e100.net", " (216.58.210.142) 3.700 ms"],
|
|
];
|
|
|
|
console.log("Hops!", hops)
|
|
|
|
|
|
// Create a graphology graph
|
|
const graph = new graphology.Graph();
|
|
|
|
hops.forEach((hop, i) => {
|
|
const [ label, extra ] = hop;
|
|
|
|
const size = i === 0 ? 15 : 10;
|
|
const color = "green"
|
|
|
|
graph.addNode(i, { label, x: 0, y: i, size, color });
|
|
if (i > 0) {
|
|
|
|
graph.addEdge(i, i-1, { size: 2, color: "purple" });
|
|
}
|
|
});
|
|
|
|
// graph.addNode("1", { label: "Node 1", x: 0, y: 0, size: 10, color: "blue" });
|
|
// graph.addNode("2", { label: "Node 2", x: 1, y: 1, size: 20, color: "red" });
|
|
// graph.addEdge("1", "2", { size: 5, color: "purple" });
|
|
|
|
// Instantiate sigma.js and render the graph
|
|
const sigmaInstance = new Sigma(graph, document.getElementById("container"));
|
|
</script>
|
|
</body>
|
|
</html>
|
|
</html>
|