WebGL
High Performance
feather
22 kB
Lightweight
Open source
GitHub
Open Source
Free to use
GPLv3
ccNetViz

ccNetViz is a lightweight, high-performance javascript library for large network graphs (see graph theory) visualization using WebGL. It enables custom styling of nodes and edges in CSS like way, curve edges, dynamic changes of the network, force-directed layout and basic graph interactivity. Used for example by Cell Collective project. ccNetViz is open source library available under GPLv3 License.

Our source code can be found on the github at the https://github.com/HelikarLab/ccNetViz.

Hello World Example
In-built support for the multiple layouts
Recommended layout is Force based.
Inbuilt support for multiple layouts such as the Circular, Force, Grid, Hierarchical, Hierarchical2, Hive, Random, Spectral, Spectral2, Versinus. Inbuilt support for two modifications of Tree layout.
  • Graph layouts
  • Tree-specific layouts
See the link for list of all available layouts.

If you want to use one of our in-built layout, pass it as second parameter into the set function such as:

How to run the library localy on your computer
NOTE: this is only for the beginner users explaining howto spin up the simple http server for this directory.
  • Have nodejs installed (see https://nodejs.org/en/download/ for instalation instructions)
  • Have yarn installed (see https://classic.yarnpkg.com/en/docs/install/ for instalation instructions)
  • Clone the current git repository: git clone https://github.com/HelikarLab/ccNetViz.git
  • Run yarn start command (The command should automatically open you the web browser with http://127.0.0.1:8080)
  • Click onto the examples directory and then click on any of the example files you want to see
    or follow the http://127.0.0.1:8080/examples/hello_world.html to see hello world example
Developing with the ccNetViz
NOTE: use this guide if you are web developer and you want to integrate the library into the current webpage or javascript frontend project.
Step 1 : Install ccNetViz binaries
Step 2: Import the library
  • The minimal script you have to load is: <script src="./ccnetviz.js"></script>.
Personally we do prefer using installation via npm combined with the webpack bundler.
If you do that, then you can import the module via https://webpack.js.org/api/module-methods/.
Step 3: Using the library
We do recommend you to start by using the code from the Hello world example. Once you are confident you can look more into our advanced examples and to their code (follow the https://github.com/HelikarLab/ccNetViz/tree/master/examples for details).
Documentation
ccNetViz(element, options)
Creates new ccNetViz graph renderer attached to canvas element specified as first argument, styled with styles defined in styles property of options parameter.
Element
There is an advanced plugin you can use to draw ccNetViz graph on different elements.
  • svg:   You can set width and height of the svg element to accomodate large graphs (see: advanced plugin usage)
Options
Name Type Description Values
styles Object Contains all of edge and node styles. Node Edge
onChangeViewport Function Called every time viewport changes. viewport
onLoad Function Called when graph loaded
getNodesCount Function Callback to use if you want to force nodes count into this library (used to calculate curve excentricity and other built in options), expecting number as return value
getEdgesCount Function Callback to use if you want to force edges count into this library (used to calculate curve excentricity and other built in options), expecting number as return value
onDrag Function Drag event, disable original event in case of return false viewport
onZoom Function Zoom event, disable original event in case of return false viewport
onClick Function Called on click on graph
onDblClick Function Called on double click on graph
passiveEvts Boolean Make mouse events passive for performance reasons ( default false )
Edge and Node styles
There are three predefined styles:
  • node Default style used for all nodes
  • edge Default style used for all edges
  • background Default style used for canvas background
Besides overriding default styles (used for all nodes/edges) it is possible to define custom styles and then use this style just for specified subsets of nodes/edges. Property values specified for given custom style override default style values.
Node
Name Type Description Default
minSize Integer Minimum size of node representation in pixels. 6
maxSize Integer Maximum size of node representation in pixels. 16
color String Node color (combined with node image). rgb(255, 255, 255)
texture String Node image.
label Object Node label.
Node label
Name Type Description Default
hideSize Integer Minimum size (height) for the label to be displayed. 16
color String Label color. rgb(120, 120, 120)
font Object Label font.
Edge
Name Type Description Default
width Integer Edge width in pixels. 1
color String Edge color. rgb(204, 204, 204)
type String Type of edge (Supported types - "line", "dashed", "dotted", "chain-dotted"). line
arrow Object Edge arrow style.
Edge Arrow
Name Type Description Default
minSize Integer Minimum size of arrow in pixels. 6
maxSize Integer Maximum size of arrow. 12
aspect Integer Aspect of arrow image. 1
texture String Arrow image.
hideSize Integer Minimum size of arrow to be displayed.
Set set(Nodes, Edges, Layout, Layout Options)
Sets the data to be displayed by given ccNetViz instance.

Nodes
Nodes argument is an array of objects describing graph nodes.
Name Description Requirement
label Text label for given node (displayed if node labels are enabled by node label style). Optional
x,y Predefined position for given node (if "layout" argument is not specified these positions will be used for graph layout). Optional
color ccNetViz.color object defining color for this given node (use this in case of coloring each node separately, for coloring groups of nodes use color property of node style). Optional
style Name of custom style class used for this node (for example: "nodeBlue" see above section for how to define custom styles). Optional
Edges
Edges argument is an array of objects describing directed graph edges.
Name Description Requirement
source Pointer to given source node object. Required
target Pointer to given target node object. Required
style Name of custom style class used for this edge. Optional
Layout
Optional "layout" argument defines layout used to render this graph. Possible values: "force", "circular", "grid", "hierarchical", "hierarchical2", "hive", "random", "spectral", "spectral2", "tree", "treeT", "versinus". If not specified, positions are taken from each node x, y properties.
Layout Options
Special layout options object, such as margin and flip, are routed through the layout_options argument. See Advanced circular layout for an example of further layout options.
Find find(x, y, radius, nodes, edges)
Find the nodes and edges within the specified radius.
Name Type Requirement
x Float in range 0-1 Required
y Float in range 0-1 Required
radius Float in range 0-1 Required
nodes Boolean Optional
edges Boolean Optional
Find AreafindArea(x1, y1, x2, y2, nodes, edges)
Find the nodes and edges within the specified area.
Name Type Requirement
x1 Float in range 0-1 Required
y1 Float in range 0-1 Required
x2 Float in range 0-1 Required
y2 Float in range 0-1 Required
nodes Boolean Optional
edges Boolean Optional
Drawdraw()
Renders current data. Must wait for the set method complete.
Resizeresize()
Adjust graph for current canvas size.
Reset ViewresetView()
Reset zoom and panning.
Set ViewportsetViewport(viewport)
Set graph viewport.

"viewport" argument is an object with keys to modify (all of keys are optional)
Shown node countcntShownNodes()
Get number of nodes.
Shown edge countcntShownEdges()
Get number of edges.
Removeremove()
Clear graph and remove internal events from DOM.
Nodesnodes()
Property to access nodes data of given graph. Use this just to read current values, for modification use "set" method instead.
Edgesedges()
Property to access edges data of given graph. Use this just to read current values, for modification use "set" method instead.