Fork me on GitHub

#0: Undirected weighted graph

  1. var G = new jsnx.Graph();
  2.  
  3. G.addWeightedEdgesFrom([[2,3,10]]);
  4. G.addStar([3,4,5,6], {weight: 5}); 
  5. G.addStar([2,1,0,-1], {weight: 3});
  6.  
  7. jsnx.draw(G, {
  8.     element: '#canvas',  
  9.     weighted: true,
  10.     edgeStyle: {
  11.         'stroke-width': 10
  12.     }
  13. });

#1: Directed graph with labels

  1. var G = new jsnx.DiGraph();
  2.  
  3. G.addNodesFrom([1,2,3,4,5,[9,{color: '#008A00'}]], {color: '#0064C7'});
  4. G.addCycle([1,2,3,4,5]);
  5. G.addEdgesFrom([[1,9], [9,1]]);
  6.  
  7. jsnx.draw(G, {
  8.     element: '#canvas', 
  9.     withLabels: true, 
  10.     nodeStyle: {
  11.         fill: function(d) { 
  12.             return d.data.color; 
  13.         }
  14.     }, 
  15.     labelStyle: {fill: 'white'},
  16.     stickyDrag: true
  17. });

#2: NetworkX example graph

  1. var G = new jsnx.Graph();
  2.  
  3. G.addNodesFrom([1,2,3,4], {group:0});
  4. G.addNodesFrom([5,6,7], {group:1});
  5. G.addNodesFrom([8,9,10,11], {group:2});
  6.  
  7. G.addPath([1,2,5,6,7,8,11]);
  8. G.addEdgesFrom([[1,3],[1,4],[3,4],[2,3],[2,4],[8,9],[8,10],[9,10],[11,10],[11,9]]);
  9.  
  10. var color = d3.scale.category20();
  11. jsnx.draw(G, {
  12.     element: '#canvas',
  13.     layoutAttr: {
  14.         charge: -120,
  15.         linkDistance: 20
  16.     },
  17.     nodeAttr: {
  18.         r: 5,
  19.         title: function(d) { return d.label;}
  20.     },
  21.     nodeStyle: {
  22.         fill: function(d) { 
  23.             return color(d.data.group); 
  24.         },
  25.         stroke: 'none'
  26.     },
  27.     edgeStyle: {
  28.         fill: '#999'
  29.     }
  30. });