experimental graph with sigma

frontend/src/App.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	export let name: string;
+
+	import Graph from "./Graph.svelte";
 </script>
 
 <main>
 	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+	<Graph />
 </main>
 
 <style>
@@ -27,4 +30,4 @@
 			max-width: none;
 		}
 	}
-</style>
+</style>

frontend/src/Graph.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { sigma } from "sigma";
+  import { onMount } from "svelte";
+
+  /**
+   * This is a basic example on how to instantiate sigma. A random graph is
+   * generated and stored in the "graph" variable, and then sigma is instantiated
+   * directly with the graph.
+   *
+   * The simple instance of sigma is enough to make it render the graph on the on
+   * the screen, since the graph is given directly to the constructor.
+   */
+  var i,
+    s,
+    N = 100,
+    E = 500,
+    g = {
+      nodes: [],
+      edges: [],
+    };
+
+  // Generate a random graph:
+  for (i = 0; i < N; i++)
+    g.nodes.push({
+      id: "n" + i,
+      label: "Node " + i,
+      x: Math.random(),
+      y: Math.random(),
+      size: Math.random(),
+      color: "#666",
+    });
+
+  for (i = 0; i < E; i++)
+    g.edges.push({
+      id: "e" + i,
+      source: "n" + ((Math.random() * N) | 0),
+      target: "n" + ((Math.random() * N) | 0),
+      size: Math.random(),
+      color: "#ccc",
+    });
+
+  // Instantiate sigma:
+  onMount(() => {
+    s = new sigma({
+      graph: g,
+      container: "c",
+    });
+  });
+</script>
+
+<div id="c" />
+
+<style>
+  div {
+    height: 500px;
+    width: 80%;
+  }
+</style>