share
Stack OverflowGraph visualization library in JavaScript
[+523] [4] Chris Farmer
[2008-08-10 04:07:52]
[ javascript jquery data-structures graph-layout ]
[ https://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript ]

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.

look at this question: stackoverflow.com/questions/8308516/multigraphs-with-javascr‌​ipt - Michel Gokan Khan
[+1005] [2010-03-02 19:48:15] Johann Philipp Strathausen [ACCEPTED]

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 [1] 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":Selection DataVisualization.ch

Here's a list of similar projects (some have been already mentioned here):

Pure JavaScript Libraries

  • vis.js [2] 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 [3] and developed by a Dutch firm specializing in research on self-organizing networks.

  • Cytoscape.js [4] - interactive graph analysis and visualization with mobile support, following jQuery conventions. Funded via NIH grants and developed by by @maxkfranz [5] (see his answer below [6]) with help from several universities and other organizations.

  • The JavaScript InfoVis Toolkit [7] - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree [8]. Built by Twitter dataviz architect Nicolas Garcia Belmonte [9] and bought by Sencha [10] in 2010.

  • D3.js [11] Powerful multi-purpose JS visualization library, the successor of Protovis. See the force-directed graph [12] example, and other graph examples in the gallery [13].

  • Plotly's [14] JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings. See a nexworkx example in IPython here [15], human interaction example here [16], and JS Embed API [17].

  • sigma.js [18] Lightweight but powerful library for drawing graphs

  • jsPlumb [19] jQuery plug-in for creating interactive connected graphs

  • Springy [20] - a force-directed graph layout algorithm

  • JS Graph It [21] - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines.

  • RaphaelJS's Graffle [22] - 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 [23] - 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 [24] Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io [25].

Commercial libraries

Abandoned libraries

  • Cytoscape Web [31] Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js)

  • Canviz [32] JS renderer for Graphviz graphs. Abandoned [33] in Sep 2013.

  • arbor.js [34] Sophisticated graphing with nice physics and eye-candy. Abandoned in May 2012. Several semi-maintained [35] forks exist.

  • jssvggraph [36] "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". Abandoned in 2012.

  • jsdot [37] Client side graph drawing application. Abandoned in 2011 [38].

  • Protovis [39] Graphical Toolkit for Visualization (JavaScript). Replaced by d3.

  • Moo Wheel [40] Interactive JS representation for connections and relations (2008)

  • JSViz [41] 2007-era graph visualization script

  • dagre [42] Graph layout for JavaScript

Non-Javascript Libraries

[1] http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries
[2] http://visjs.org/#gallery
[3] https://github.com/almende/vis
[4] http://js.cytoscape.org
[5] https://stackoverflow.com/users/947225/maxkfranz
[6] https://stackoverflow.com/a/10319429/1269037
[7] https://philogb.github.io/jit/
[8] http://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Hypertree-js.html
[9] http://www.sencha.com/conference/session/sencha-charting-visualization
[10] http://philogb.github.io/infovis/
[11] http://d3js.org/
[12] http://bl.ocks.org/mbostock/4062045
[13] https://github.com/mbostock/d3/wiki/Gallery
[14] https://plot.ly./
[15] https://plot.ly/ipython-notebooks/network-graphs/
[16] https://plot.ly/ipython-notebooks/bioinformatics/#In-%5B54%5D
[17] https://github.com/plotly/Embed-API
[18] http://sigmajs.org/
[19] http://jsplumbtoolkit.com/
[20] http://getspringy.com/
[21] http://js-graph-it.sourceforge.net/
[22] http://raphaeljs.com/graffle.html
[23] http://www.jointjs.com/demos
[24] https://github.com/jgraph/mxgraph
[25] https://www.draw.io?splash=0
[26] http://gojs.net/latest/index.html
[27] http://www.yworks.com/yfileshtml
[28] http://keylines.com/
[29] https://zoomcharts.com
[30] https://www.syncfusion.com/javascript-ui-controls/diagram
[31] http://cytoscapeweb.cytoscape.org/
[32] http://code.google.com/p/canviz/
[33] https://code.google.com/p/canviz/source/list
[34] http://arborjs.org/
[35] https://github.com/samizdatco/arbor/issues/56#issuecomment-62842532
[36] http://github.com/jackrusher/jssvggraph
[37] https://code.google.com/p/jsdot/
[38] https://code.google.com/p/jsdot/source/list
[39] http://vis.stanford.edu/protovis/ex/force.html
[40] http://labs.unwieldy.net/moowheel/
[41] http://www.jsviz.org/
[42] https://github.com/cpettitt/dagre
[43] http://www.graphviz.org/
[44] https://github.com/mdaines/viz.js/
[45] http://mdaines.github.io/viz.js/
[46] http://flare.prefuse.org/
[47] http://nodebox.net/code/index.php/Graph
[48] http://processingjs.org/

(4) Yes, directed edges are possible! Use g.addEdge("cherry", "apple", {"directed":true}); - Johann Philipp Strathausen
need to add also chart.js & chartnew.js library . and this (charts.livegap.com) is generate for it - Omar Sedki
I cannot edit but here is Almende. I have made a visual dictionary, based on it. - Val
@JohannPhilippStrathausen Is there a way,I could add an event handler for a node? I want to capture the X,Y coordinates for each node. (for graphdracula) - Suhail Gupta
ZoomCharts does nice graph visualization using net chart component. - jancha
GraphDracula itself seems to be dead (it hasn't been updated in over three years). Can we add it to the "Abandoned libraries" list? - machineghost
It's not dead. I just released a few new versions recently, check for the posts and github profile please. - Johann Philipp Strathausen
Nice review, upwoted. Also there is react-sigmajs - React components for SigmaJS, quite easy to use - Max Vorobjev
Can I determine the position of a Node by code? (Redrawing at random positions as in show case is not what most people would expect!) - forsberg
(1) There are two more noteworthy libraries that can be added to the list, namely Linkuroius.js and VivaGraphJS. - Łukasz K
(2) Is there any open source alternative for yFILES layout algorithm ? Such as yworks.com/products/yfiles-layout-algorithms-for-cytoscape - Ryan Chou
(1) I've made a free and lightweight library that may be useful to others: github.com/n-yousefi/Arg-Graph - n.y
I started my own library, I try to keep easy use. github.com/lmoraobando/lmDiagram/tree/Dev - Leonardo Mora
which is the most easiest to use for network graph? - Nur
1
[+54] [2012-04-25 16:05:05] maxkfranz

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 >= 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 & 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


(6) All APIs are fully documented. The docs even step you through getting started (i.e. init). There are also running examples for the individual APIs, and there are live demos. The functionality is far above any JS graph lib and the docs are more extensive than most projects -- whether commercial or opensource. What exactly is lacking for you in the docs? - maxkfranz
(1) Does it have a way to layout graphs in a hierarchical order(a layout that looks like a tree but it is in fact a graph , meaning there are nodes with multiple parents) - Mina
Both the dagre and the breadthfirst layout work for that case - maxkfranz
I need to edit the graph with drag'n'drop of arrows begin ends and end ends. This library says those things are immutable. So I need to seek for another library... - Eugene Gr. Philippov
Immutability does not mean inflexibility -- it just tends to keep things reliable and consistent . See eles.move() and the following extensions: edgehandles, edge-editation, edge-bend-editing - maxkfranz
2
[+10] [2013-01-07 11:00:49] Sebastian

In a commercial scenario, a serious contestant for sure is yFiles for HTML [1]:

It offers:

  • Easy import of custom data ( this interactive online demo [2] 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 [3])
  • A huge programming API [4] 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 [5])
  • 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 [6] (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:

Screenshot of a sample rendering created by the BPMN demo.

Full disclosure: I work for yWorks, but on Stackoverflow I do not represent my employer.

[1] https://www.yworks.com/yfileshtml
[2] http://live.yworks.com/yfiles-for-html/2.0/databinding/graphbuilder/index.html
[3] https://www.yworks.com/products/yed-live
[4] http://docs.yworks.com/yfileshtml/
[5] http://live.yworks.com/yfiles-for-html/2.0/#integration
[6] http://live.yworks.com/yfiles-for-html/2.0/#analysis

(4) The best collection of algorithms, but also the most closed, making it impossible to use in open-source projects :-( - forresto
(1) "Best collection" is probably true, but "most closed" is relative, and "impossible" is incorrect: It's a commercial license, so unless the open-source project uses a viral license, it can be used in open-source projects. Of course using open-source projects in other open-source projects is less problematic... - Sebastian
(1) You seem to not understand how open source works. Are you saying that your company can grant an open-source project the right to use this software for infinite developers, the right to distribute it to infinite developers and contributors and testers, for a fixed, one-time cost? Of course not. - Félix Saparelli
(2) @FélixSaparelli : Believe me: I do. What you describe is possible and similar things have been done before. You are linking to the standard license terms, but of course custom agreements are possible and have been made before. This is not the right place to discuss this, though. Feel free to contact yWorks directly. - Sebastian
3
[+7] [2010-04-03 17:01:09] Jack Rusher

As guruz mentioned, the JIT [1] 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 [2] (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers.

[1] http://philogb.github.io/jit/
[2] http://github.com/jackrusher/jssvggraph

4