DEV Community

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

Posted on

4 1

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.

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay