Description
Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal.
sigma.js alternatives and similar libraries
Based on the "d3" category.
Alternatively, view sigma.js alternatives based on common mentions on social networks and blogs.
-
-
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
-
-
-
-
-
-
-
-
-
-
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
-
-
-
-
-
-
-
-
-
-
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
-
-
-
-
-
-
-
-
-
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
-
-
-
-
-
-
-
Civic Auth - Auth in Less Than 5 Minutes
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of sigma.js or a related project?
README
Sigma.js
Sigma.js is an open-source JavaScript library aimed at visualizing graphs of thousands of nodes and edges, mainly developed by @jacomyal and @Yomguithereal.
Overview
Architecture
Since version v2, sigma.js focuses on the management of graph display: rendering, interaction... The graph model is managed in a separate library called graphology, which is packed with convenience methods to manage graph data structures, and a lot of satellite libraries to handle various graph-related problems (metrics, community detection, layout algorithms...).
Graphology website offers a list of these libraries. Most of them can help you solve problems in your sigma.js based web applications.
Rendering
Sigma.js uses WebGL to render graphs. This makes it good at rendering medium to larger graphs in web pages (thousands of nodes and edges or more). It is also possible to customize rendering, but it is harder than it would be with SVG or Canvas based solutions.
Each way to draw a node or an edge is implemented as a program. You can develop your own, or use the owns provided by sigma. You can check [this example](./examples/custom-rendering/index.ts) to see how to use multiple programs. Also, you can check the list of available programs [here](./src/rendering/webgl/programs).
Installation
You can install sigma (and graphology which is required for sigma to work) in your JavaScript or TypeScript project using npm:
npm install graphology sigma
Examples
The [examples](./examples) folder contains a series of self-contained TypeScript projects that you can either browse and edit on CodeSandbox or install locally likewise:
git clone [email protected]:jacomyal/sigma.js.git
cd sigma.js
npm install
cd examples
npm start --example=load-gexf-file # Change this to the desired example
List of available examples
- Fetching and displaying a graph contained in a gexf file (fallback link)
- Using node & edge reducers to handle interactivity (fallback link)
- Fetching, parsing & wrangling a CSV file to create a network map (fallback link)
- Handling drag and drop of nodes as well as node & edge creation on click (fallback link)
- Displaying arbitrary elements, such as cluster labels, synchronized with the network (fallback link)
- Applying different animated layout algorithms to a network (fallback link)
- Displaying nodes in various custom ways (fallback link)
- Saving the graph as a PNG image (fallback link)
- Use events to implement interactions (fallback link)
- See how sigma behaves with larger graphs (fallback link)
Also, a more realistic sigma.js based web application is available in the [demo](./demo) folder. It aims to show a real-world usecase, and is the main showcase of sigma.js website.
Website
The current website is a simple manually crafted single-page website. It is located in the website folder. It also showcases the React.js based demo available in the [demo](./demo) folder in an iframe. The website itself does not need any build step, though the demo does.
It has been kindly designed by Robin de Mourat from the Sciences-Po médialab team.
Development
To start a dev server that will reload the webpage when the code is updated, run:
npm run website:watch
Then, open localhost:8080 in your browser. When any file in the website directory is saved (including the demo bundle), the page will be reloaded.
Build
To simply build the demo and copy the bundle in the website folder, just run:
npm run website:all
Contributing
You can contribute by submitting issues tickets and proposing pull requests. Make sure that tests and linting pass before submitting any pull request.
You can also browse the related documentation [here](./CONTRIBUTING.md).