<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Sigma.js</title> <meta name="description" content="a JavaScript library aimed at visualizing graphs of thousands of nodes and edges" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png" /> <meta name="theme-color" content="#e22653" /> <link rel="stylesheet" href="./styles.css" /> </head> <body> <header> <input type="checkbox" id="toggle-menu" /> <nav class="menu"> <label for="toggle-menu" tabindex="0"> <img src="./assets/images/icon-menu.svg" alt="Toggle menu" class="show-menu" /> <img src="./assets/images/icon-close.svg" alt="Toggle menu" class="hide-menu" /> </label> <div class="panel"> <div> <a href="#" class="text-title with-logo"> <img src="./assets/images/logo-sigma-ruby.svg" alt="" /> <strong class="text-ruby">sigma</strong ><strong class="text-grey">.js</strong> </a> </div> <ul class="internal"> <li><a href="#architecture">Architecture</a></li> <li><a href="#quickstart">Quick start</a></li> <li><a href="#usecases">Use cases</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#gofurther">Go further</a></li> <!--<li><a href="#inthewild">In the wild</a></li>--> </ul> <ul> <li> <a href="https://github.com/jacomyal/sigma.js" class="with-logo" ><img src="./assets/images/logo-github.svg" alt="GitHub" /> <span>GitHub</span></a > </li> <li> <a href="https://twitter.com/sigmajs" class="with-logo" ><img src="./assets/images/logo-twitter.svg" alt="Twitter" /> <span>Twitter</span></a > </li> <li> <a href="https://stackoverflow.com/questions/tagged/sigma.js" class="with-logo" ><img src="./assets/images/logo-stackoverflow.svg" alt="StackOverflow" /> <span>StackOverflow</span></a > </li> </ul> </div> </nav> <nav class="links"> <ul> <li> <a href="https://github.com/jacomyal/sigma.js" ><img src="./assets/images/logo-github.svg" alt="GitHub" /></a> </li> <li> <a href="https://twitter.com/sigmajs"><img src="./assets/images/logo-twitter.svg" alt="Twitter" /></a> </li> <li> <a href="https://stackoverflow.com/questions/tagged/sigma.js" ><img src="./assets/images/logo-stackoverflow.svg" alt="StackOverflow" /></a> </li> </ul> </nav> </header> <main> <section class="title"> <h1 class="with-logo"> <img src="./assets/images/logo-sigma-ruby.svg" alt="" /> <span class="text-ruby">sigma</span ><span class="text-grey">.js</span> </h1> <i><strong>a JavaScript library aimed at visualizing graphs of thousands of nodes and edges</strong></i> </section> <section class="showcase"> <div class="wrapper"> <iframe allowfullscreen="allowfullscreen" src="./demo/index.html" title="Sigma.js demo" width="100%"></iframe> <div class="overlay" tabindex="0"> <h2 class="text-title"><span class="bg">See sigma.js in action</span></h2> <div> <span class="bg">Click here to explore a network of Wikipedia pages about data visualization.</span> </div> </div> </div> <div class="caption"> <div class="links"> <a href="./demo/index.html">open demo</a> <a href="https://github.com/jacomyal/sigma.js/tree/main/demo">open demo sources</a> </div> <button class="button button-light restore-overlay-button" disabled>restore overlay over demo</button> </div> </section> <section id="architecture"> <h2>Architecture</h2> <p> Sigma.js is a modern JavaScript library for rendering and interacting with network graphs in the browser. It works in symbiosis with <a href="https://graphology.github.io/">graphology</a>, a multipurpose graph manipulation library. </p> <div class="schema"> <div> <div class="text-center"><img src="./assets/images/logo-graphology.svg" alt="" /></div> <h3>graphology</h3> <p> <i>handles <strong>graph data model & algorithms</strong></i> </p> </div> <span>+</span> <div> <div class="text-center"><img src="./assets/images/logo-sigma-ruby.svg" alt="" /></div> <h3>sigma.js</h3> <p> <i>handles <strong>graph rendering & interactions</strong></i> </p> </div> <span>=</span> <div> <div class="text-center"><img src="./assets/images/icon-app.svg" alt="" /></div> <h3 class="text-center">your <span class="text-ruby">♥</span> web app</h3> </div> </div> </section> <section id="quickstart"> <h2>Quick start</h2> <div class="options row"> <div> <p>I want sigma.js in my existing project:</p> <pre><code>npm install graphology sigma</code></pre> <p> Learn more on the library's <a href="https://github.com/jacomyal/sigma.js/#installation">GitHub repository</a> </p> </div> <div> <p>I start from nothing:</p> <p> <a class="button" href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/template"> Try this CodeSandbox </a> </p> </div> </div> </section> <section id="usecases"> <h2>Use cases</h2> <div class="usecase row"> <a class="thumbnail" href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/load-gexf-file"> <div style="background-image: url(./assets/images/thumbnail-display.png)"></div> </a> <div> <h2>Display</h2> <p> The most basic use case: you have a graph dataset, with colors, sizes and positions for each node. For instance, you exported a <a href="https://gephi.org/gexf/format/">GEXF graph file</a> from <a href="https://gephi.org/">Gephi</a>. You want to visualize it using on a web page. </p> <p> <a href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/load-gexf-file" class="button"> Launch live CodeSandbox </a> </p> </div> </div> <div class="usecase row"> <a class="thumbnail" href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/use-reducers"> <div style="background-image: url(./assets/images/thumbnail-explore.png)"></div> </a> <div> <h2>Explore</h2> <p> You want to add interaction, so that your users can dig into the graph. You want to add a search field, and allow users to see the neighborhood of a node when hovering it. </p> <p> <a href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/use-reducers" class="button"> Launch live CodeSandbox </a> </p> </div> </div> <div class="usecase row"> <a class="thumbnail" href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/mouse-manipulations"> <div style="background-image: url(./assets/images/thumbnail-interact.png)"></div> </a> <div> <h2>Interact</h2> <p> You are developing a web application where users can create and manipulate graphs. You need users to be able to create nodes on click, and to drag and drop nodes. </p> <p> <a href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/mouse-manipulations" class="button"> Launch live CodeSandbox </a> </p> </div> </div> <div class="usecase row"> <a class="thumbnail" href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/custom-rendering"> <div style="background-image: url(./assets/images/thumbnail-customize.png)"></div> </a> <div> <h2>Customize</h2> <p> You need to personalize the way your graphs are rendered. You need to display some nodes with pictures in them, and others differently. </p> <p> <a href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/custom-rendering" class="button"> Launch live CodeSandbox </a> </p> </div> </div> </section> <section id="faq"> <h2>Frequently asked questions</h2> <ul> <li> <h3>How can I obtain drawable data from a CSV?</h3> <p> You will process the data with graphology, then render it with sigma.js. You can look at <a href="https://githubbox.com/jacomyal/sigma.js/tree/main/examples/csv-to-network-map"> this CodeSandbox </a> for instance. </p> </li> <li> <h3>What graph algorithms are implemented in sigma.js?</h3> <p> None in sigma.js, but graphology has a lot, from <a href="https://graphology.github.io/standard-library/layout-forceatlas2.html">ForceAtlas2 layout</a> to <a href="https://graphology.github.io/standard-library/metrics.html">various metrics</a> or even <a href="https://graphology.github.io/standard-library/communities-louvain.html">community detection</a>. <strong> You can see an overview <a href="https://graphology.github.io/standard-library/">in the documentation</a>. </strong> </p> </li> <li> <h3>Why should I use sigma.js and not <a href="https://d3js.org/">d3.js</a>?</h3> <p> Sigma.js renders graphs using WebGL. It allows drawing larger graphs faster than with Canvas or SVG based solutions. It also makes custom rendering way harder to develop. If you have small graphs (like a few hundreds of nodes and edges) and/or if you need very customized rendering, then <strong>d3.js is indeed a best fit for you</strong>. </p> </li> <li> <h3>Can I use sigma.js in my <a href="https://reactjs.org/">React</a> application?</h3> <p> Yes, the best way is certainly to use the <a href="https://github.com/sim51/react-sigma">@react-sigma</a>. The example on top of this page is developed using it, you can check the <a href="https://github.com/jacomyal/sigma.js/tree/main/demo">sourcecode</a> to get an idea. </p> </li> <li> <h3>And within an <a href="https://angular.io/">Angular</a> application?</h3> <p> Yes it is possible, but harder, because we do not have a wrapper yet. So you will have to bind sigma.js lifecycle to your app manually. It is not necessarily too difficult though, please take a look on <a href="https://github.com/sim51/ng-sigma-example">this repository</a> which offers a quick example. </p> </li> </ul> </section> <section id="gofurther"> <h2>Go further</h2> <div class="contributing row"> <div> <h3>I want to know more</h3> <p>Look at <a href="https://github.com/jacomyal/sigma.js/blob/main/README.md">the documentation</a>.</p> </div> <div> <h3>I have a problem</h3> <p> Ask your questions on <a href="https://stackoverflow.com/questions/tagged/sigma.js">StackOverflow</a>, or report bugs by <a href="https://github.com/jacomyal/sigma.js/issues/new/choose">opening a new GitHub issue</a>. </p> </div> <div> <h3>I want to help</h3> <p> Contributions are welcome! Reading <a href="https://github.com/jacomyal/sigma.js/blob/main/CONTRIBUTING.md">our contribution guide</a> is a good start. You can also help us investigating <a href="https://github.com/jacomyal/sigma.js/issues">existing issues</a> or answering <a href="https://stackoverflow.com/questions/tagged/sigma.js">questions on StackOverflow</a>. </p> </div> </div> </section> </main> <footer class="row"> <section> <p> <span class="with-logo"> <img src="./assets/images/logo-sigma-ruby.svg" alt="" /> <strong class="text-ruby">sigma</strong ><strong class="text-grey">.js</strong> </span> is published by <a href="https://medialab.sciencespo.fr/en/">Sciences-Po médialab</a> and <a href="https://ouestware.com/en">OuestWare</a>. </p> <ul> <li> <a href="https://twitter.com/sigmajs">twitter.com/sigmajs</a> </li> <li> <a href="https://github.com/jacomyal/sigma.js">github.com/jacomyal/sigma.js</a> </li> </ul> </section> <section> <p> It is developed under <a href="https://github.com/jacomyal/sigma.js/blob/main/LICENSE.txt">the MIT License</a>. </p> <p> This website uses <a href="https://themeui.net/hauora-sans-free-font/">Hauroa Sans</a>, <a href=" https://public-sans.digital.gov/">Public Sans</a> and <a href="https://github.com/microsoft/cascadia-code">Cascadia Code</a> fonts. </p> </section> </footer> <!-- Tracking --> <img src="https://matomo.ouestware.com/matomo.php?idsite=26&rec=1&action_name=Homepage&send_image=0" alt="" /> <!-- Demo overlay interactions --> <script> (() => { const overlay = document.querySelector(".overlay"); const button = document.querySelector(".restore-overlay-button"); overlay.addEventListener("click", () => { overlay.classList.add("hide"); button.removeAttribute("disabled"); }); button.addEventListener("click", () => { overlay.classList.remove("hide"); button.setAttribute("disabled", "true"); }); })(); </script> </body> </html>