How to use Sigma.js with Svelte.js
Tags: svelte, sigma, tutorial, beginners
Published: 2022-07-09 23:29:36

Have you ever heard about Sigma.js? This is a library created by Science Po Médialab team. For some weeks we have had version 2.0 of this library.

The creators described it like this: "Sigma.js is a modern JavaScript library for rendering and interacting with network graphs in the browser. It works in symbiosis with graphology, a multipurpose graph manipulation library." 

Sigma.js uses WebGL and performs faster and better than other solutions like d3.js.

More about Sigma.js you can read [here](https://www.sigmajs.org/) or [here](https://medialab.sciencespo.fr/actu/sigmajs-version-2-finally-released/)

In the documentation, there is explicit how to use Sigma.js with React.js or Angular.js, but  there is no solution to use it with Svelte so I decided to try it with this framework.

In the first place, I create a svelte-sigma application:

```
npm init vite svelte-sigma -- --template svelte
cd my-app
npm install
npm run dev
```

After I need to install Sigma:
```
npm install graphology sigma
```
Now I will change an App.svelte file
I import installed packages and onMount function:

```
import Sigma from 'sigma';
import Graph from 'graphology';
import { onMount } from 'svelte';
```
Now i need a container where my little graph will be drowned: 

```
<h1> Sigma graph exemple</h1>
<div id="sigma-container" />
```

and I crate onMount like this:

```
onMount(() => {
//here I take a div sigma-container
    const container1 =  document.getElementById("sigma-container");
    

      const graph = new Graph();
//here I create some nodes 
      graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
      graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
      graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
      graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });

// here there are different relations between nodes. 
      graph.addEdge("John", "Mary");
      graph.addEdge("John", "Thomas");
      graph.addEdge("John", "Hannah");
      graph.addEdge("Hannah", "Thomas");
      graph.addEdge("Hannah", "Mary");

//this const render a graph in container
      const renderer = new Sigma(graph, container1);

  });

```
There is necessary also to style a div sigma-container (it is better to use pixels than %)

```
<style>
  #sigma-container {
      width: 550px;
      height: 450px;
  }
</style>
```

The all code is like this: 

```
<script>
  import Sigma from 'sigma';
  import Graph from 'graphology';
  import { onMount } from 'svelte';

  onMount(() => {
    const container1 =  document.getElementById("sigma-container");
    

      const graph = new Graph();

      graph.addNode("John", { x: 0, y: 10, size: 15, label: "John", color: "blue" });
      graph.addNode("Mary", { x: 10, y: 0, size: 10, label: "Mary", color: "green" });
      graph.addNode("Thomas", { x: 7, y: 9, size: 20, label: "Thomas", color: "red" });
      graph.addNode("Hannah", { x: -7, y: -6, size: 25, label: "Hannah", color: "teal" });

      graph.addEdge("John", "Mary");
      graph.addEdge("John", "Thomas");
      graph.addEdge("John", "Hannah");
      graph.addEdge("Hannah", "Thomas");
      graph.addEdge("Hannah", "Mary");

      const renderer = new Sigma(graph, container1);

  });

  
</script>
<h1> Sigma graph exemple</h1>
<div id="sigma-container" />

<style>
  #sigma-container {
      width: 550px;
      height: 450px;
  }
</style>
```

And I have this rendered in the browser: 

![example of graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar6ykzcaik71hntoqynx.png)

This code is based on [this example](https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/template)

Good luck to create your own examples.