Documentation

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>

Example

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>