Network Demo using vis.js

http://visjs.org/

HTML

<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<div id="network"></div>

CSS

div {
    height:100vh;
}

JavaScript

var nodes = null;
var edges = null;
var network = null;

var LENGTH_MAIN = 350,
    LENGTH_SERVER = 150,
    LENGTH_SUB = 50,
    WIDTH_SCALE = 2,
    GREEN = 'green',
    RED = '#C5000B',
    ORANGE = 'orange',
    //GRAY = '#666666',
    GRAY = 'gray',
    BLACK = '#2B1B17';

// Called when the Visualization API is loaded.

// Create a data table with nodes.
nodes = [];

// Create a data table with links.
edges = [];

nodes.push({
    id: 1,
    label: '192.168.0.1',
    group: 'switch',
    value: 10
});
nodes.push({
    id: 2,
    label: '192.168.0.2',
    group: 'switch',
    value: 8
});
nodes.push({
    id: 3,
    label: '192.168.0.3',
    group: 'switch',
    value: 6
});
edges.push({
    from: 1,
    to: 2,
    length: LENGTH_MAIN,
    width: WIDTH_SCALE * 6,
    label: '0.71 mbps'
});
edges.push({
    from: 1,
    to: 3,
    length: LENGTH_MAIN,
    width: WIDTH_SCALE * 4,
    label: '0.55 mbps'
});

// group around 2
for (var i = 100; i <= 104; i++) {
    var value = 1;
    var width = WIDTH_SCALE * 2;
    var color = GRAY;
    var label = null;

    if (i === 103) {
        value = 5;
        width = 3;
    }
    if (i === 102) {
        color = RED;
        label = 'error';
    }

    nodes.push({
        id: i,
        label: '192.168.0.' + i,
        group: 'desktop',
        value: value
    });
    edges.push({
        from: 2,
        to: i,
        length: LENGTH_SUB,
        color: color,
        fontColor: color,
        width: width,
        label: label
    });
}
nodes.push({
    id: 201,
    label: '192.168.0.201',
    group: 'desktop',
    value: 1
});
edges.push({
    from: 2,
    to: 201,
    length: LENGTH_SUB,
    color: GRAY,
    width: WIDTH_SCALE
});

// group around 3
nodes.push({
    id: 202,
    label: '192.168.0.202',
    group: 'desktop',
    value: 4
});
edges.push({
    from: 3,
    to: 202,
    length: LENGTH_SUB,
    color: GRAY,
    width: WIDTH_SCALE * 2
});
for (var i = 230; i <= 231; i++) {
    nodes.push({
        id:...