ccNetViz

About Features Getting started Documentation Download Github

About

ccNetViz is a lightweight, high performance javascript library for large network graphs visualization using WebGL. It is an open source library available under GPLv3 License developed in the Helikar Lab.

Features

Custom Styling

Styling of nodes and edges in css like way

Layouts

In-built support for multiple layouts

Interactivity

Basic interaction for nodes and edges

Getting started

Start by downloading the library here. Once you unzip the file that you downloaded, the ready to use library is in the dist folder and you can use it by including in your code:

                
                <script src="dist/ccNetViz.js"></script>

Try out this simple example to get you started. The graph on the left is the output. To see in more detail what each function does, go to References.

<!DOCTYPE html> <html> <head> <title>ccNetViz example</title> <style type="text/css"> #container { width: 500px; height: 500px; } </style> <script src="dist/ccNetViz.js"></script> </head> <body> <canvas id="container" /> <script> var graph = new ccNetViz(document.getElementById('container'), { styles: { node: { texture: "images/node.png", label: { hideSize: 16 } }, edge: { arrow: { texture: "images/arrow.png" } } } }); var nodes = [ { label: "Hello" }, { label: "World" }, { label: "!" } ]; var edges = [ { source: nodes[0], target: nodes[1] }, { source: nodes[1], target: nodes[2] }, { source: nodes[2], target: nodes[1] } ]; graph.set(nodes, edges, "force"); graph.draw(); </script> </body> </html>