DEV Community

Cover image for How to use Sigma.js with Svelte.js
Deotyma
Deotyma

Posted on

How to use Sigma.js with Svelte.js

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 or here

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
Enter fullscreen mode Exit fullscreen mode

After I need to install Sigma:

npm install graphology sigma
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Now i need a container where my little graph will be drowned:

<h1> Sigma graph exemple</h1>
<div id="sigma-container" />
Enter fullscreen mode Exit fullscreen mode

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);

  });

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And I have this rendered in the browser:

example of graph

This code is based on this example

Good luck to create your own examples.

Top comments (2)

Collapse
 
rodrigomatosrj profile image
Rodrigo Matos • Edited

Hi, congratulations for the post.

I would like to add an observation:

I believe the best practice is to declare a variable and bind it to the container, instead of get the container from the DOM.

For example:

let renderDiv;

<div bind:this={renderDiv} />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
deotyma profile image
Deotyma

Thanks