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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay