DataScholars

A blog about data science, computer science, machine learning, artificial intelligence, computational social science, data mining, analysis, and visualization.

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.

--
submit to reddit
comments powered by Disqus