A network graph chart, often simply called a network graph, is a visual representation of relationships between entities.

You can use Network graph chart to

analyze connections and influences between different/same unique entities such as people or their contents
optimizing the flow of data between servers and devices etc,.

When it comes to data visualization in Web Applications, there are lots of Javascript libraries you can leverage such as D3, Highcharts, ChartJs, etc,.

While D3.js and Highcharts are primarily known for its powerful data visualization capabilities using SVG (Scalable Vector Graphics), SVG Rendering is really slower than Canvas Rendering when it comes to big data. As for ChartJs, there are some network graph chart modules to be integrated but I believe they lack some features that I need.

So I decided to implement the wheel myself again. I invite you to ride it if it suits you XD. It is lighweight with 28.1kb with d3 as one and only dependency. ◝(ᵔᵕᵔ)◜

So, Enough talking. Let’s see how it is easy.

Before we get started, you can try the demo here.

Create a canvas element.

<canvas></canvas>

Install from npm or github , import and use it.

npm install d3canvas-networkgraph

import D3CanvasNetworkgraph from "d3canvas-networkgraph"


// or
import D3CanvasNetworkgraph from "https://w99910.github.io/d3canvas-networkgraph/dist/d3canvas-networkgraph.es.js"

let networkgraph = D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   })

You can pass options object as third parameter.

D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   }, options)

Check available options here.

That’s it. Let me explain what nodes and links are.

Node

A node represent the entity in the graph. For example, in a social network graph, nodes could represent people.

A node is an object whose has structure —

{
  id: string|number, // (mandatory)
  color?: string|Function, // node color
  label?: string|Function, // node label
  radius?: number|Function, // node radius
  border?: string|Function, // border color
  tooltip?: string|Function, // node tooltip
  tooltipFontSize?: string|Function, // node tooltip fontsize
}

Link

A link represent a connection or relationship between the nodes (entities). In the social network example, edges could represent friendships or interactions between people.

link = {
  source: number|string, // id of node (mandatory)
  target: number|string, // id of node (mandatory)
  width?: number,  // the width of the link 
  color?: string, // the color of the link
}

Let’s tweak the chart.

Tooltip

A tooltip is a text which shows on top of node when it is hovered. It is also implemented using rect and text of CanvasAPI . So it is also performant. In order to enable tooltip, you can specify tooltip property in node object.

let node1 = {
   id: 1,
   tooltip: 'This is tooltip for node 1',
}

// you can pass function 
let node1 = { 
    id: 1,
    tooltip: (n) => {
       // n is node object itself which has more attributes such as `x` position, `y` position etc.,
    }
}

Label

A label is a text which is placed below the node. In order to enable label , you just need to specify label in node object.

let node1 = {
   id: 1,
   label: '1',
}

// You can pass true and then `id` of the node will be considered as label.
let node1 = {
   id: 1, 
   label: true,
}

// Or pass function
let node1 = {
   id: 1,
   label: (n)=>{}
}

Not only tooltip and label but also other options — color ,radius, border , tooltipFontSize can be configured by specifying them.

Drag and Zoom

While dragging is enabled by default, zoom is disabled. You can configure their availability by passing options as second parameter.

let networkgraph = D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   },{ zoom: true , drag: false})

// Or update the existing networkgraph

networkgraph.update(null,{ zoom: true });

Available options

let options = {
    sticky: false,
    drag: true,
    simulation: null,
    zoom: false,
    events: {
        onZoom: null,
        onResize: null,
    },
    node: {
        color: null,
        border: true,
        radius: 10,
        borderWidth: 1,
        label: null,
        labelFontSize: 14,
        labelColor: null,
        tooltip: null,
        tooltipFontSize: 20,
        onClick: null,
        onHover: null,
        onDrag: null,
    },
    link: {
        color: null,
        width: 1,
    }
};

For more information, please consult the documentation here.

I hope my library can save your time. ⸜(｡˃ ᵕ ˂ )⸝♡

Cheers! ৻( •̀ ᗜ •́ ৻)

Github Link: https://github.com/w99910/d3canvas-networkgraph

⚡🚀️ Build Easy & Performant Network Graph •̀ᴗ•́