javascript tutorial - [Solved-3 Solutions] Graph visualization libe=rary in javascript - javascript - java script - javascript array

Problem:

We have a data structure that represents a directed graph, and we 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.

Solution 1 :

I've just put together what we may be looking for: www.graphdracula.net. It's JavaScript with directed graph layouting, SVG and we can even drag the nodes around. Still needs some tweaking, but is totally usable. We 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");

click below button to copy the code. By JavaScript tutorial team

We used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm WE found on the net (everything open source, MIT license). If we have any remarks or need a certain feature, WE may implement it, just ask! We 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":

Learn javascript - javascript tutorial - projects - javascript examples - javascript programs

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 vis 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.
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 network-graphs/, human interaction example here bioinformatics, 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

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

Solution 2:

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.

Solution 3:

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
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 UWE toolkit but supports integration into almost any existing Javascript toolkit
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 APWE that can be loaded on-demand using UMD loaders