Graph visualization library in JavaScript

Question

I have a data structure that represents a directed graph  and I want to render that dynamically on an HTML page   These graphs will usually be just a few nodes  maybe ten at the very upper end  so my guess is that performance isn t going to be a big deal  Ideally  I d like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around   Note  I m not looking for a charting library

User · Answer

As guruz mentioned  the JIT has several lovely graph tree layouts  including quite appealing RGraph and HyperTree visualizations   Also  I ve just put up a super simple SVG-based implementation at github  no dependencies   125 LOC  that should work well enough for small graphs displayed in modern browsers

User · Answer

I ve just put together what you may be looking for  http   www graphdracula net  It s JavaScript with directed graph layouting  SVG and you can even drag the nodes around  Still needs some tweaking  but is totally usable  You create nodes and edges easily with JavaScript code like this   var g   new Graph    g addEdge  strawberry    cherry    g addEdge  cherry    apple    g addEdge  id34    cherry      I used the previously mentioned Raphael JS library  the graffle example  plus some code for a force based graph layout algorithm I found on the net  everything open source  MIT license   If you have any remarks or need a certain feature  I may implement it  just ask     You may want to have a look at other projects  too  Below are two meta-comparisons    SocialCompare has an extensive list of libraries  and the  Node   edge graph  line will filter for graph visualization ones  DataVisualization ch has evaluated many libraries  including node graph ones  Unfortunately there s no direct link so you ll have to filter for  graph     Here s a list of similar projects  some have been already mentioned here    Pure JavaScript Libraries   vis js supports many types of network edge graphs  plus timelines and 2D 3D charts  Auto-layout  auto-clustering  springy physics engine  mobile-friendly  keyboard navigation  hierarchical layout  animation etc  MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks  Cytoscape js - interactive graph analysis and visualization with mobile support  following jQuery conventions  Funded via NIH grants and developed by by  maxkfranz  see his answer below  with help from several universities and other organizations  The JavaScript InfoVis Toolkit - Jit  an interactive  multi-purpose graph drawing and layout framework  See for example the Hyperbolic Tree  Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010  D3 js Powerful multi-purpose JS visualization library  the successor of Protovis  See the force-directed graph example  and other graph examples in the gallery  Plotly s JS visualization library uses D3 js with JS  Python  R  and MATLAB bindings  See a nexworkx example in IPython here  human interaction example here  and JS Embed API  sigma js Lightweight but powerful library for drawing graphs jsPlumb jQuery plug-in for creating interactive connected graphs Springy - a force-directed graph layout algorithm Processing js Javascript port of the Processing library by John Resig JS Graph It - drag n drop boxes connected by straight lines  Minimal auto-layout of the lines  RaphaelJS s Graffle - interactive graph example of a generic multi-purpose vector drawing library  RaphaelJS can t layout nodes automatically  you ll need another library for that  JointJS Core - David Durman s MPL-licensed open source diagramming library  It can be used to create either static diagrams or fully interactive diagramming tools and application builders  Works in browsers supporting SVG  Layout algorithms not-included in the core package mxGraph Previously commercial HTML 5 diagramming library  now available under Apache v2 0  mxGraph is the base library used in draw io    Commercial libraries   GoJS Interactive graph drawing and layout library yFiles for HTML Commercial graph drawing and layout library KeyLines Commercial JS network visualization toolkit ZoomCharts Commercial multi-purpose visualization library Syncfusion JavaScript Diagram Commercial diagram library for drawing and visualization    Abandoned libraries   Cytoscape Web Embeddable JS Network viewer  no new features planned  succeeded by Cytoscape js  Canviz JS renderer for Graphviz graphs  Abandoned in Sep 2013  arbor js Sophisticated graphing with nice physics and eye-candy  Abandoned in May 2012  Several semi-maintained forks exist  jssvggraph  The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects   Abandoned in 2012  jsdot Client side graph drawing application  Abandoned in 2011  Protovis Graphical Toolkit for Visualization  JavaScript   Replaced by d3  Moo Wheel Interactive JS representation for connections and relations  2008  JSViz 2007-era graph visualization script dagre Graph layout for JavaScript   Non-Javascript Libraries   Graphviz Sophisticated graph visualization language   Graphviz has been compiled to Javascript using Emscripten here with an online interactive demo here  Flare Beautiful and powerful Flash based graph drawing NodeBox Python Graph Visualization

User · Answer

JsVIS was pretty nice  but slow with larger graphs  and has been abandoned since 2007   prefuse is a set of software tools for creating rich interactive data visualizations in Java  flare  is an ActionScript library for creating visualizations that run in the Adobe Flash Player  abandoned since 2012

User · Answer

In a commercial scenario  a serious contestant for sure is yFiles for HTML   It offers    Easy import of custom data  this interactive online demo seems to pretty much do exactly what the OP was looking for  Interactive editing for creating and manipulating the diagrams through user gestures  see the complete editor  A huge programming API for customizing each and every aspect of the library  Support for grouping and nesting  both interactive  as well as through the layout algorithms  Does not depend on a specfic UI toolkit but supports integration into almost any existing Javascript toolkit  see the  integration  demos  Automatic layout  various styles  like  hierarchic    organic    orthogonal    tree    circular    radial   and more  Automatic sophisticated edge routing  orthogonal and organic edge routing with obstacle avoidance  Incremental and partial layout  adding and removing elements and only slightly or not at all changing the rest of the diagram  Support for grouping and nesting  both interactive  as well as through the layout algorithms  Implementations of graph analysis algorithms  paths  centralities  network flows  etc   Uses HTML 5 technologies like SVG CSS and Canvas and modern Javascript leveraging properties and other more ES5 and ES6 features  but for the same reason will not run in IE versions 8 and lower   Uses a modular API that can be loaded on-demand using UMD loaders   Here is a sample rendering that shows most of the requested features     Full disclosure  I work for yWorks  but on Stackoverflow I do not represent my employer

User · Answer

Disclaimer  I m a developer of Cytoscape js  Cytoscape js is a HTML5 graph visualisation library   The API is sophisticated and follows jQuery conventions  including    selectors for querying and filtering  cy elements  node weight  gt   50  someClass   does much as you would expect   chaining  e g  cy nodes   unselect   trigger  mycustomevent     jQuery-like functions for binding to events  elements as collections  like jQuery has collections of HTMLDomElements   extensibility  can add custom layouts  UI  core  amp  collection functions  and so on   and more    If you re thinking about building a serious webapp with graphs  you should at least consider Cytoscape js   It s free and open-source   http   js cytoscape org

[javascript] Graph visualization library in JavaScript

Examples related to javascript

Examples related to jquery

Examples related to data-structures

Examples related to graph-layout