sn-network-chart

A network chart to be used with nebula.js, built using visjs network visualization to display networks of nodes and edges.

Requirements

Requires @nebula.js/stardust version 1.7.0 or later.

Installing

If you use npm: npm install @nebula.js/sn-network-chart.

You can also load through the script tag directly from https://unpkg.com.

Usage

import { embed } from '@nebula.js/stardust';
import network from '@nebula.js/sn-network-chart';

// 'app' is an enigma app model
const nuked = embed(app, {
  types: [
    {
      // register grid chart - qlik-network-chart is the default name in sense
      name: 'qlik-network-chart',
      load: () => Promise.resolve(network),
    },
  ],
});

// Rendering a simple network chart
nuked.render({
  element: document.querySelector('.network'),
  type: 'qlik-network-chart',
  fields: ['Source', 'Target', '=Sum(Flow)'],
  properties: {
    title: 'Visualization of network flows',
  },
});

Data sample

Check resources/Network data.xlsx for an example. The simplest data form is where each row represents an edge in the network. Take this example of airport connections:

| AirportID | AirportName | LinkToId | Volume | |-----------|----------------|----------|--------| | 0 | Soekarno-Hatta | 3 | 23000 | | 1 | Halim | 0 | 5460 | | 2 | Changi | 0 | 10870 | | 3 | KLCC | 1 | 2780 | | 4 | Don Muang | 1 | 4800 | | 4 | Don Muang | 2 | 7800 |

Sense inline load script example:

Load * Inline [
AirportID, AirportName, LinktoID,Volume
0,Soekarno-Hatta,3,23000
1,Halim,0,5460
2,Changi,0,10870
3,KLCC,1,2780
4,Don Muang,1,4800
4,Don Muang,2,7800
];

Original Author

Michael Laenen

• github.com/miclae76

Contributors

Göran Sander

• github.com/mountaindude