A JavaScript library dedicated to graph drawing

Overview

Build Status

sigma.js - v1.2.1

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

Resources

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.

Contributing

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

Comments
  • 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?

    wontfix 
    opened by Prophet32j 28
  • 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

    Features

    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.

    reviewed 
    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).

    wontfix 
    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';
    or
    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');
     require('../../../../node_modules/sigma/build/plugins/sigma.parsers.json.min.js');
    
      @Component({
        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?

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

    Added plug-in for custom node shapes and images

    Hi,

    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

    [email protected] 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.

    example

    wontfix 
    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?

    wontfix 
    opened by qinfchen 18
  • 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?

    enhancement 
    opened by TGOlson 0
  • Label events (enterLabel and clickLabel)

    Label events (enterLabel and clickLabel)

    We would like to implement hover and click event listeners for labels, because we have found that users often try to click on labels instead of nodes.

    If you agree this should be a feature, we would be happy to put in a PR for it. If this is already achievable without any feature additions, please guide me on how to do this.

    Thanks!

    enhancement 
    opened by cyclecycle 3
  • EdgeRectangleProgram contemplations

    EdgeRectangleProgram contemplations

    @jacomyal this is not intended to be merged but more as a discussion item.

    I repurposed the techniques I need to use in the curve program to offer an alternative way to render edges as rectangles.

    I don't really know if this is faster (frankly I doubt it because the array is larger and the vertex shader computations are a tad more involved), but the shader code is way less magic/mystic as it is able to do its work by considering the viewport space we are rendering in. So no magic AA constants expressed in weird 0.001 units, no correction ratio or other ratio magic there, just "simple" geometry.

    By the same logic it is also possible to do stuff such as nodes having a border expressed in pixels and not in a percentage, for instance.

    opened by Yomguithereal 0
Releases(v2.4.0)
Owner
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 Nov 27, 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 70 Nov 7, 2022
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 Nov 12, 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 811 Nov 22, 2022
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 Nov 29, 2022
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 Nov 12, 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 232 Nov 13, 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 38 Oct 16, 2022
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 101 Nov 17, 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 87k Nov 21, 2022
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.3k Nov 20, 2022
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 Nov 29, 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.1k Nov 25, 2022
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.5k Nov 22, 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 Nov 21, 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 Nov 20, 2022