April 26, 2013

JSNetworkX: Visualizing Graphs On The Web Using JavaScript

by reiver

Visualizing graphs (in the graph theory sense of the word) can be a challenge. Visualizing graphs on the web can be a even bigger challenge. Luckily there is JSNetworkX.

JSNetworkX is an open source JavaScript library that makes visualizing graph data easy.

JSNetwork is a port of the NetworkX graph visualization library to JavaScript and the Web (using D3).

Here is an example, as shown in figure 1.

Figure 1. Sample graph visualization created with JSNetworkX.

And here is the code for the graph visualization in figure 1, as shown in figure 2.


var G = jsnx.Graph();
     
G.add_nodes_from([1,2,3,4], {group:0});
G.add_nodes_from([5,6,7], {group:1});
G.add_nodes_from([8,9,10,11], {group:2});
     
G.add_path([1,2,5,6,7,8,11]);
G.add_edges_from([[1,3],[1,4],[3,4],[2,3],[2,4],[8,9],[8,10],[9,10],[11,10],[11,9]]);
     
var color = d3.scale.category20();
jsnx.draw(G, {
  element: '#PUT_IT_OF_WHERE_TO_RENDER_THE_GRAPH_HERE',
  layout_attr: {
    charge: -120,
    linkDistance: 20
  },
  node_attr: {
    r: 5,
    title: function(d) { return d.label;}
  },
  node_style: {
    fill: function(d) {
      return color(d.data.group);
    },
    stroke: 'none'
  },
  edge_style: {
    fill: '#999'
  }
});

Figure 2. JavaScript source code using JSNetworkX for the graph visualization shown in figure 1.

More information about JSNetworkX is available here.

-- Charles Iliya Krempeaux