graf-uloh/frontend/src/Graph.svelte

<script>
  import { sigma } from "sigma";
  import "sigma/build/plugins/sigma.layout.forceAtlas2.min.js";
  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",
    });
    s.startForceAtlas2();
  });
</script>

<div id="c" />

<style>
  div {
    height: 500px;
    width: 80%;
  }
</style>