Network Graph Visualization JavaScript

This JavaScript code snippet helps you to create a network graph visualization. It defines a Highcharts chart object that displays a force-directed network graph of the Indo-European language tree. The chart object is created by calling the Highcharts.chart() method with the ID of a container element where the chart will be rendered. The chart type is specified as ‘networkgraph’, and the margin top is set to 80. The title and subtitle of the chart are also defined. The plotOptions specify the layout algorithm and link length of the networkgraph, and the series object contains data and color information for each node of the network graph.

Finally, the nodes are defined as objects with an ID and a color property. The data array specifies the links between nodes, where each link is an array of two elements representing the “from” and “to” nodes. Finally, the chart object is rendered to the container element.

How to Create Network Graph Visualization JavaScript

Create the HTML structure for the network graph visualization as follows:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>

<div id="container"></div>

Now, style the network graph visualization using the following CSS styles:

#container {
  min-width: 320px;
  max-width: 800px;
  margin: 0 auto;
  height: 500px;
}
.cd__main{
display: block !important;
}

Finally, add the following JavaScript function for its functionality:

var celticColor = "#7becb2",
  italicColor = "#ecb27b",
  indoIranianColor = "#ec7bb6";

Highcharts.chart('container', {

  chart: {
    type: 'networkgraph',
    marginTop: 80
  },

  title: {
    text: 'The Indo-European Language Tree'
  },

  subtitle: {
    text: 'A Force-Directed Network Graph in Highcharts'
  },

  plotOptions: {
    networkgraph: {
      keys: ['from', 'to'],
      layoutAlgorithm: {
        enableSimulation: true,
        integration: 'verlet',
        linkLength: 100
      }
    }
  },

  series: [{
    marker: {
      radius: 13,
    },
    dataLabels: {
      enabled: true,
      linkFormat: '',
      allowOverlap: true
    },
    data: [
      ['Proto Indo-European', 'Balto-Slavic'],
      ['Proto Indo-European', 'Germanic'],
      ['Proto Indo-European', 'Celtic'],
      ['Proto Indo-European', 'Italic'],
      ['Proto Indo-European', 'Hellenic'],
      ['Proto Indo-European', 'Anatolian'],
      ['Proto Indo-European', 'Indo-Iranian'],
      ['Proto Indo-European', 'Tocharian'],
      ['Indo-Iranian', 'Dardic'],
      ['Indo-Iranian', 'Indic'],
      ['Indo-Iranian', 'Iranian'],
      ['Iranian', 'Old Persian'],
      ['Old Persian', 'Middle Persian'],
      ['Indic', 'Sanskrit'],
      ['Italic', 'Osco-Umbrian'],
      ['Italic', 'Latino-Faliscan'],
      ['Latino-Faliscan', 'Latin'],
      ['Celtic', 'Brythonic'],
      ['Celtic', 'Goidelic']
    ],
    nodes: [{
      id: 'Indo-Iranian',
      color: indoIranianColor
    }, {
      id: 'Dardic',
      color: indoIranianColor
    }, {
      id: 'Indic',
      color: indoIranianColor
    }, {
      id: 'Iranian',
      color: indoIranianColor
    }, {
      id: 'Old Persian',
      color: indoIranianColor
    }, {
      id: 'Middle Persian',
      color: indoIranianColor
    }, {
      id: 'Sanskrit',
      color: indoIranianColor
    }, {
      id: 'Celtic',
      color: celticColor
    }, {
      id: 'Brythonic',
      color: celticColor
    }, {
      id: 'Goidelic',
      color: celticColor
    }, {
      id: 'Italic',
      color: italicColor
    }, {
      id: 'Osco-Umbrian',
      color: italicColor
    }, {
      id: 'Latino-Faliscan',
      color: italicColor
    }, {
      id: 'Latin',
      color: italicColor
    }]
  }]
});

That’s all! hopefully, you have successfully created the network graph visualization JavaScript. If you have any questions or suggestions, feel free to comment below.