Visualizzazione Big Graph su una pagina web: networkx, vivagraph

Question

Ho un grafico di circa 5000 nodi e 5000 collegamenti, che posso visualizzare in Chrome grazie a the vivagraph javascript library (Webgl è più veloce di svg - in d3 per esempio).

mio flusso di lavoro è:

• Costruire con la libreria networkx pitone e in uscita il risultato in un file JSON.
• Caricare il json e costruire il grafico con the vivagraph javascript library.
• Nodi posizioni sono calcolati dalla libreria js

Il problema è che ci vuole tempo per rendere il layout con nodi ben positionned.

Il mio approccio è di pre-calcolare la posizione dei nodi in networkx ad esempio. Il vero punto su questo approccio è che minimizza il lavoro del client sul browser. Ma non riesco a ottenere buone posizioni sulla pagina web. Ho bisogno di aiuto su questo passaggio.

Il codice python rilevante per la posizione di nodo di calcolo è:

## positionning 
    try: 
     # Position nodes using Fruchterman-Reingold force-directed algorithm. 
     pos=nx.spring_layout(G) 
     for k,v in pos.iteritems(): 
      # scaling tentative 
      # from small float like 0.5555 to higher values 
      # casting to int because precision is not important 
      pos[k] = [ int(i*1000) for i in v.tolist() ] 
    except Exception, e: 
     print "positionning failed" 
     raise 

    ## setting positions 
    try: 
     # set position of nodes as a node attribute 
     # that will be used with the js library 
     nx.set_node_attributes(G,'pos', pos) 
    except Exception, e: 
     print "getting positions failed" 
     raise e 

    # output all the stuff 
    d = json_graph.node_link_data(G) 
    with open(args.output,'w') as f: 
     json.dump(d,f) 

Poi nella mia pagina, in javascript:

/*global Viva*/ 
function graph(file){ 
    var file = file; 

    $.getJSON(file, function(data) { 
     var graphGenerator = Viva.Graph.generator(); 
     graph = Viva.Graph.graph(); 

     # building the graph with the json data : 

     data.nodes.forEach(function(n,i) { 
     var node = graph.addNode(n.id,{d: n.d}); 

     # node position is defined in the json element attribute 'pos' 
     node.position = { 
      x : n.pos[0], 
      y : n.pos[1] 
     }; 
     }) 

     # adding links between nodes 

     data.links.forEach(function(l,i) { 
      graph.addLink(data.nodes[l.source].id, data.nodes[l.target].id); 
     }) 


     var max_link = 55 
     var min_link = 1 

     var colors = d3.scale.linear().domain([min_link,max_link]).range(['#F0F0F0','#252525']); 

     var layout = Viva.Graph.Layout.forceDirected(graph, { 
     springLength : 80, 
     springCoeff : 0.0008, 
     dragCoeff : 0.001, 
     gravity : -5.0, 
     theta : 0.8 
     }); 

     var graphics = Viva.Graph.View.webglGraphics(); 
     graphics 
     .node(function(node){ 

     # color and size of nodes 

     color = colors(node.links.length) 
     if(node.id == "root"){ 
      // pin node on canvas, so no position update 
      node.isPinned = true; 
      size = 60; 
     } else { 
      size = 20+(7-node.id.length)*(7-node.id.length); 
     } 
     return Viva.Graph.View.webglSquare(size,color); 
     }) 
     .link(function(link) { 

     # color on links 

     fromId = link.fromId; 
     toId = link.toId; 
     if(toId == "root" || fromId == "root"){ 
      return Viva.Graph.View.webglLine("#252525"); 
     } else { 
      if(fromId[0] == toId[0]){ 
      linkcolor = linkcolors(fromId[0]) 
      return Viva.Graph.View.webglLine(linkcolor); 
      } else { 
      linkcolor = averageRGB(linkcolors(fromId[0]),linkcolors(toId[0])) 
      return Viva.Graph.View.webglLine('#'+linkcolor); 
      } 
     } 
     }); 

     renderer = Viva.Graph.View.renderer(graph, 
      { 
       layout  : layout, 
       graphics : graphics, 
       enableBlending: false, 
       renderLinks : true, 
       prerender : true 
      }); 

     renderer.run(); 
    }); 
} 

Ora sto cercando Gephi, ma io non voglio usa lo gephi toolkit perché non sono abituato a java.

Se qualcuno ha qualche suggerimento su questo, si prega di evitare me centinaia di prove e forse fallimento;)

Answer 1

Primavera layout presuppone che i pesi bordo sostengono la proprietà metrica, cioè Peso (A, B) + Peso (A , C)> Peso (B, C). Se questo non è il caso, networkx prova a posizionarli nel modo più realistico possibile.

Si potrebbe provare a regolare questo da

pos=nx.spring_layout(G,k=\alpha, iterations=\beta) 
    # where 0.0<\alpha<1.0 and \beta>0 
    # k is the minimum distance between the nodes 
    # iterations specify the simulated annealing runs 
    # This code works only on Networkx 1.8 and not earlier versions