Graph Drawing Library
Some examples of library usage in the real projects:
- Amazon Visualization Shows related products on Amazon.com, uses SVG as graph output
- YouTube Visualization Shows related videos from YouTube. SVG based.
- Facebook Visualization friendship visualization on Facebook. WebGL based.
- Graph Viewer visualization of sparse matrices collection of the University of Florida. WebGL based.
- Vkontakte Visualization friendship visualization of the largest social network in Russia vk.com. WebGL based.
To start using the library include
vivagraph.js script from the dist
folder. The following code is the minimum required to render a graph with two nodes and one edge:
var graph = VivaGraphgraph;graphaddLink1 2;var renderer = VivaGraphViewrenderergraph;rendererrun;
This will produce the following layout:
The code above adds a link to the graph between nodes
2. Since nodes
are not yet in the graph they will be created. It's equivalent to
var graph = VivaGraphgraph;graphaddNode1;graphaddNode2;graphaddLink1 2;var renderer = VivaGraphViewrenderergraph;rendererrun;
VivaGraphJS is all about customization. You can easily change the appearance of nodes and links. You can also change the layouting algorithm and medium that displays elements of the graph. For example: The following code allows you to use WebGL-based rendering, instead of the default SVG.
var graph = VivaGraphgraph;graphaddLink1 2;var graphics = VivaGraphViewwebglGraphics;var renderer = VivaGraphViewrenderergraphgraphics : graphics;rendererrun;
graphics class is responsible for rendering nodes and links on the page. And
renderer orchestrates the process. To change nodes appearance tell
graphics how to represent them. Here is an example of graph with six people who I follow at github:
var graph = VivaGraphgraph;// Construct the graphgraphaddNode'anvaka' url : '';graphaddNode'manunt' url : '';graphaddNode'thlorenz' url : '';graphaddNode'bling' url : '';graphaddNode'diyan' url : '?';graphaddNode'pocheptsov' url : '';graphaddNode'dimapasko' url : '';graphaddLink'anvaka' 'manunt';graphaddLink'anvaka' 'thlorenz';graphaddLink'anvaka' 'bling';graphaddLink'anvaka' 'diyan';graphaddLink'anvaka' 'pocheptsov';graphaddLink'anvaka' 'dimapasko';// Set custom nodes appearancevar graphics = VivaGraphViewsvgGraphics;graphicsnode// The function is called every time renderer needs a ui to display nodereturn VivaGraphsvg'image'attr'width' 24attr'height' 24linknodedataurl; // node.data holds custom object passed to graph.addNode();placeNode// Shift image to let links go to the center:nodeUIattr'x' posx - 12attr'y' posy - 12;;var renderer = VivaGraphViewrenderergraphgraphics : graphics;rendererrun;
The result is:
Graphs vary by their nature. Some graphs have hundreds of nodes and few edges (or links), some might connect every node with every other. Tuning the physics often helps get the best layout. Consider the following example:
var graphGenerator = VivaGraphgenerator;var graph = graphGeneratorgrid3 3;var renderer = VivaGraphViewrenderergraph;rendererrun;
Graph generators are part of the library, which can produce classic graphs.
grid generator creates a grid with given number of columns and rows. But with
default parameters the rendering is pretty ugly:
Let's tweak the original code:
var graphGenerator = VivaGraphgenerator;var graph = graphGeneratorgrid3 3;var layout = VivaGraphLayoutforceDirectedgraphspringLength : 10springCoeff : 0.0005dragCoeff : 0.02gravity : -1.2;var renderer = VivaGraphViewrenderergraphlayout : layout;rendererrun;
Now the result is much better:
Tuning layout algorithm is definitely one of the hardest part of using this library. It has to be improved in future to simplify usage. Each of the force directed algorithm parameters are described in the source code.
Until version 0.7.x VivaGraph was a single monolithic code base. Starting from
0.7.x the library is bundled from small npm modules into
All these modules are part of a larger ngraph
ngraph modules support rendering graphs into images, 3D rendering,
integration with gephi, pagerank calculation and many more.
Version 0.7 is a compromise between maximum backward compatibility and ngraph flexibility. Eventually I hope to further simplify API and provide interface for custom builds.
Please refer the upgrade guide to see how to update older versions of the library to the latest one.
Run the following script:
git clone git://github.com/anvaka/VivaGraphJS.gitcd ./VivaGraphJSnpm installgulp release
The combined/minified code should be stored in
I'm trying to put up a list of all known graph drawing libraries. Please find it here
Though I implemented this library from scratch, I went through many existing libraries to pick the best (at my view) out of them. If you are evaluating libraries for your project make sure to check them out as well.