A JavaScript library dedicated to graph drawing


Build Status

sigma.js - v1.2.1

Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal.


The website provides a global overview of the project, and the documentation is available in the GitHub Wiki.

Also, the plugins and examples directories contain various use-cases that might help you understand how to use sigma.

How to use it

To use it, clone the repository:

git clone [email protected]:jacomyal/sigma.js.git

To build the code:

  • Install Node.js.
  • Install gjslint.
  • Use npm install to install sigma development dependencies.
  • Use npm run build to minify the code with Uglify. The minified file sigma.min.js will then be accessible in the build/ folder.

Also, you can customize the build by adding or removing files from the coreJsFiles array in Gruntfile.js before applying the grunt task.


You can contribute by submitting issues tickets and proposing pull requests. Make sure that tests and linting pass before submitting any pull request by running the command grunt.

The whole source code is validated by the Google Closure Linter and JSHint, and the comments are written in JSDoc (tags description is available here).

  • Hierarchy Graphs

    Hierarchy Graphs

    I'm looking at sigma.js for potentially replacing vis.js as our big data graphing library of choice. One of the deal breakers is hierarchy views of the network. I don't see anything besides this old issue #162 that says it's not possible, but potentially getting worked on. That was 3 years ago. Any word on this?

    opened by Prophet32j 29
  • Edge quadtree integration, edge events, edge hovering

    Edge quadtree integration, edge events, edge hovering

    Let's interact with edges! They are no second-class citizen anymore. This code works with all edge types provided by default in sigma.js.

    How it works

    Edges are indexed in a quad tree. Indexing and querying this quad tree is deactivated when the ForceAtlas2 is running, on node drag, and on animation. The quad tree is updated at the end of these actions.

    New events

    overEdge, outEdge, clickEdge, overEdges, outEdges, clickEdges

    New settings

    • enableEdgeHovering
    • edgeHoverColor
    • edgeHoverSizeRatio
    • defaultEdgeHoverColor
    • edgeHoverHighlightNodes


    Hovered edges can be drawn on the canvas hover context (enableEdgeHovering) with the ability to change their color (edgeHoverColor, defaultEdgeHoverColor) and size (edgeHoverSizeRatio). The node extremities of hovered edges can be hovered at the same time by setting edgeHoverExtremities to true.

    opened by sheymann 27
  • performance issue

    performance issue

    I am using sigmajs to render some large graphs (30K edges). When I export sigmajs package from Gephi it works great (it uses an older version of sigmajs which is bundled with gephi). However when I load the same graph in the latest version of sigmajs the performance is much slower. Are there some specific flags enabled in the version of sigmajs that ships with gephi or is the new version of sigmajs slower as compared to the older version (v0.1).

    opened by manishorkus 22
  • How to import plugins as module in Webpack ES6?

    How to import plugins as module in Webpack ES6?

    I imported the sigma.js with Webpack and ES6 syntax:

    import { sigma as Sigma } from 'sigma';

    but I can't import plugins like this:

    import 'sigma/build/plugins/sigma.parsers.json.require.js';
    import 'sigma/build/plugins/sigma.parsers.json.min.js';

    referenced: #799

    opened by geekplux 22
  • Angular 2 Compatability?

    Angular 2 Compatability?

    I am unable to get the example working with angular 2.

    Steps to reproduce:

    1. npm install sigma
    2. Create angular component (with angular-cli): ng g component about
    3. Add the following code to the component:
     import { Component, OnInit, AfterViewInit } from '@angular/core';
     const sigma = require('sigma');
        selector: 'ib-about',
        templateUrl: './about.component.html',
        styleUrls: ['./about.component.scss']
      export class AboutComponent implements OnInit, AfterViewInit {
      constructor() { }
        ngOnInit() {
        jsonData = { copy of the example data on sigmajs.org page } 
        ngAfterViewInit() {
          sigma.parsers.json(this.jsonData, {
            container: 'container',
            settings: {
              defaultNodeColor: '#ec5148'

    I get the following error:

    screen shot 2017-02-08 at 4 43 30 pm

    Is there a reference Angular 2 implementation for this?

    opened by viztastic 22
  • Added plug-in for custom node shapes and images

    Added plug-in for custom node shapes and images


    I added a plug-in called sigma.nodeShapes - demo / intro code sample here: https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

    screen shot 2013-06-05 at 11 36 17 am

    the plug-in itself adds more node drawing functions for:

    • square
    • triangle
    • diamond
    • star (configurable number of points and inner radius)

    In addition, the plug-in exposes an API to add additional custom shapes - also shown in demo with a 'Pacman' node.

    All node drawing functions keep the shape bounded in the node size radius. This is important for keeping the rest working - mouse click and hover, force atlas, arrow edges, etc.

    Last - the plug-in adds the ability to draw images on nodes, demonstrated as well. This addresses issue #83

    This plugin is based on minimal changes to plotter - needed to expose the functionality that currently draws circle for regular, active, and hover nodes (as well as borders). no changes to node attribute were made - the attributes for shape and image drawing are piggybacked on the node.attr bag.

    _NOTE_: post-mortem I noticed the file changes for plotter.js shows a lot of false diffs, due to auto-indent in my vi editor. I believe these are good indentations but can provide a non-indented version if you prefer. To help you review the code - I added a note next to each REAL code change (see under Files Changed tab)

    opened by rpeleg1970 22
  • IE11 Gives Security Error for new FA2 Algorithm

    IE11 Gives Security Error for new FA2 Algorithm

    I'm getting a security error in the console and the layout algorithm doesn't work in Internet Explorer 11. I believe it may be this issue associated with webworkers in IE10 and IE11: http://stackoverflow.com/questions/10343913/how-to-create-a-web-worker-from-a-string

    Since I'm on Linux though I run IE11 in a VM and it's a bit difficult for me to debug properly.

    bug wontfix 
    opened by apitts 20
  • V2@alpha issue in WebGLRenderer and React

    V2@alpha issue in WebGLRenderer and React

    Hey there.

    I am currently evaluating a bunch of different graph drawing libraries and I wanted to add sigma.js v2 to my stack. I tried running the basic example but I am always greeted with this error:

    Error: sigma/renderers/weblg/shaders/utils.loadShader: error while compiling the shader:
    ERROR: 0:1: '/' : syntax error

    weblg is a typo in your exception message btw

    I run the example code within a React App using the following packages:

    • "sigma": "^2.0.0-alpha20"
    • "faker": "^4.1.0"
    • "graphology": "^0.14.1"
    • "graphology-generators": "^0.10.1"
    • "graphology-layout": "^0.1.0"
    • "chroma-js": "^2.0.2"

    Does anyone have an idea how to fix this?

    Cheers, Lukas

    Ps: All examples use the WebGLRenderer, will you implement a Canvas Renderer for v2? Or is this the same (I saw it renders as canvas in the examples)?

    opened by lksnmnn 19
  • Cannot read property 'getElementsByTagName' of null

    Cannot read property 'getElementsByTagName' of null

    opened by psegovias 18
  • nodes dancing around in forceatlas2 layout

    nodes dancing around in forceatlas2 layout

    update: just to illustrate what I got, a picture is attached below.

    I have a small network of 3 nodes and 2 links. When starting the forceatlas2 layout, the middle node is jumping around like crazy. I can make it calm down by setting 'slowDown' to say 1000, but it is kind of hacky. I am using the default parameters. Is that the problem or is it a bug?

    Thank you.


    opened by bill10 18
  • Svg renderer support

    Svg renderer support

    Svg renderer support was mentioned in the following issues that it was already planned, but the last update was in June. https://github.com/jacomyal/sigma.js/issues/33 and https://github.com/jacomyal/sigma.js/issues/310

    I was wondering when svg renderer support would be available?

    opened by qinfchen 18
  • dotCurve.js and dotCurvedArrow.js do not exist, corrected references

    dotCurve.js and dotCurvedArrow.js do not exist, corrected references

    Pull request type

    Check the type of change your PR introduces:

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ x] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    NOTE: Before to create a PR, read our contributing guide

    NOTE: Try to limit your pull request to one type, submit multiple pull requests if needed.

    What is the current behavior?

    Curved and curvedArrow links are not working in canvas for npm package because in Gruntfile.js dotCurved.js and dotCurvedArrow.js are referenced and they do not exist.

    NOTE: Describe the current behavior that you are modifying, or link to a relevant issue.

    Gruntfile.js updated and in the resulting build both link types work.

    NOTE: Describe the behavior or changes that are being added by this PR.

    Gruntfile.js now points to dotCurve.js and dotCurvedArrow.js

    NOTE: Any other information that is important to this PR such as screenshots of how the component looks before and after the change.

    opened by gonzo2025 0
  • Adding the #.setCamera method

    Adding the #.setCamera method

    @jacomyal this PR adds the #.setCamera method. A typical use-case is to make sure two sigma renderers share the same camera and have synchronized camera movements (like it is required for ipysigma's small multiples. I tried something lock-based but the way the Camera fires events, based on actual changes, makes this nontrivial and sharing a camera seems more obvious).

    I did not add a camera setting but it might be useful to add here all the same? What do you think? The thing is that it might be awkard to deal with #.setSetting then in this configuration (the same could be said about the programs settings by the way).

    Also I guess this method should schedule a render?

    opened by Yomguithereal 0
  • Are there docs for sigma.js?

    Are there docs for sigma.js?

    Scanning the website and github, all I see are examples. But it's kind of hard to know where to start from just examples, are there any pages that document available methods to call, interactions w/ graphology, etc?

    opened by TGOlson 0
Alexis Jacomy
Alexis Jacomy
A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
Perfect pressure-sensitive drawing for both iOS and Android.

rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Inst

Robert Soriano 75 Jan 3, 2023
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 2022
A React toolkit for graph visualization based on G6

Graphin A React toolkit for graph analysis based on G6 English | 简体中文 ✨ Features ?? Good-looking elements, standardized style configuration Graphin st

AntV team 823 Jan 7, 2023
Gephi - The Open Graph Viz Platform

Gephi - The Open Graph Viz Platform Gephi is an award-winning open-source platform for visualizing and manipulating large graphs. It runs on Windows,

Gephi 5.1k Jan 4, 2023
3D graph viewer powered by WebGL (three.js)

Graphosaurus A three-dimensional static graph viewer. (click the image to try it out) Demos EVE Online map Add nodes incrementally Documentation JSDoc

Corey Farwell 362 Dec 4, 2022
Simple tiny dependency graph engine, MobX inspired

?? Quarx Simple tiny dependency graph engine, MobX inspired Introduction In less than 200 lines of code and zero dependencies Quarx supports most of M

Dmitry Maevsky 22 Nov 2, 2022
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation

Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.

Nathan S. Santos 39 Jan 5, 2023
CyberGraph is a 3D-graph based, user based social connection explorer

CyberGraph is a 3D-graph based, user based social connection explorer. It has some cool features like 3d node graph, dynamic loading bar, immersive user experience, cyber mode(10-hops friendship network display) and focus mode(aggregated connection display).

CyberConnect 16 Nov 25, 2022
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
JavaScript 3D library.

three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current

Mr.doob 87.9k Jan 2, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
JavaScript Vector Library

Raphaël: Cross-browser vector graphics the easy way Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.git

Dmitry Baranovskiy 11.2k Jan 3, 2023
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
mxGraph is a fully client side JavaScript diagramming library

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https://github.com/jsGraph/mxgraph https:

JGraph 6.5k Dec 30, 2022
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023