Amir Razmjou bio photo

Amir Razmjou


Email Twitter Facebook Google+ LinkedIn Instagram Github Stackoverflow Pinterest Foursquare Youtube

I just wanted to refresh my JavaScript programming skills along with exercising my homeworks. I searched few Network Visualization JS libraries in the net I came up with VisJS. It’s pretty easy to create networks in VisJS.

var nodes = new vis.DataSet();
var edges = new vis.DataSet();

var lastNodeId = 1;
// create a network
var networkContainer = document.getElementById('mynetwork');
var histogramContainer = document.getElementById('histogram');
var data = {
nodes: nodes,
edges: edges
var options = {};
var network = new vis.Network(networkContainer, data, options);

function addNewNode() {
nodes.add([{id: lastNodeId, label: lastNodeId.toString()}]);

if (lastNodeId != 1) {
  randomNode = Math.floor(Math.random() * (lastNodeId));
  if (randomNode != 0)
    edges.add([{from: lastNodeId, to:randomNode }]);

An another quick search on google bring up FlotCharts JS library for histograms to visualize the degree distribution of nodes in a graph.

But it’s a bit tricky to extract Degree Distribution off edges dataset. One has to first create a HashMap to map degree number of nodes to occurance number of nodes in JavaScript

var h = {}; 
      .map(function(a) { 
      .forEach(function (b) { 
        if (typeof(h[b]) === 'undefined') 
          h[b] = 1; 
        else h[b]++; 
And then again convert that to an array to be used in Flot.

var hArray = [];
    for (var o in h) {
      hArray.push([Number(o), h[o]]);

    $(function() {
      $.plot("#histogram",  [hArray]);

Full Screen Version