DEV Community

Cover image for ⚡🚀️ Build Easy & Performant Network Graph •̀ᴗ•́
Thomas Brillion
Thomas Brillion

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode
  • 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,
            }]
   })
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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.,
    }
}
Enter fullscreen mode Exit fullscreen mode

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)=>{}
}
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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,
    }
};
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)