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
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:
This code is based on this example
Good luck to create your own examples.
Top comments (2)
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:
Thanks