From IT Skills
Jump to: navigation, search

I built VivaGraph to learn javascript two years ago. I definitely learned a lot and vivagraph itself is a pretty decent graph drawing library.

However vivagraph is built in monolithic way. For example, if I wanted to add new streaming traversal API I could not justify it inside monolithic "graph drawing" library.

Ngraph opens huge possibilities, with each module being available on npm.



It is designed to be extensible and to support different rendering engines and layout algorithms.

VivaGraph it's a free and open source tool for graph visualization tool - but it has a smaller community compared to Sigmajs. It has the zoom feature but no 3d. Impressive animation of loading!

supports WebGL, SVG


var graph = Viva.Graph.graph();
// Construct the graph
graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b'});
graph.addNode('dimapasko', {url : 'https://secure.gravatar.com/avatar/8e587a4232502a9f1ca14e2810e3c3dd'});

graph.addLink('anvaka', 'dimapasko');

// Set custom nodes appearance
var graphics = Viva.Graph.View.svgGraphics();
graphics.node(function(node) {
       // The function is called every time renderer needs a ui to display node
       return Viva.Graph.svg('image')
             .attr('width', 24)
             .attr('height', 24)
             .link(node.data.url); // node.data holds custom object passed to graph.addNode();
    })
    .placeNode(function(nodeUI, pos){
        // Shift image to let links go to the center:
        nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);
    });

var renderer = Viva.Graph.View.renderer(graph,
    {
        graphics : graphics
    });
renderer.run();