JSNetworkX: Visualizing Graphs On The Web Using JavaScript
by reiverVisualizing 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.
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'
}
});
More information about JSNetworkX is available here.
-- Charles Iliya Krempeaux