pythonpython-2.7networkxcytoscape.jscytoscape-web

How to show a network generated by networkx in cytoscape.js?


How can I show the network that generated by networkx in Cytoscape.js?

I have tried JSON data generated by networkx, seems it doesn't work. All edges are gone. JSON generated by networkx as below:

{
"directed":false,
"graph":{

},
"nodes":[
    {
        "id":"P40012"
    },
    {
        "id":"P53963"
    },
    {
        "id":"Q12265"
    },
    {
        "id":"P35728"
    },
    {
        "id":"P53270"
    },
    {
        "id":"P40559"
    },
    {
        "id":"P53066"
    },
    {
        "id":"P52960"
    },
    {
        "id":"P47125"
    },
    {
        "id":"Q04895"
    },
    {
        "id":"P54074"
    },
    {
        "id":"P21672"
    },
    {
        "id":"P53077"
    },
    {
        "id":"P36145"
    },
    {
        "id":"P31109"
    },
    {
        "id":"P35194"
    },
    {
        "id":"Q12447"
    },
    {
        "id":"P43580"
    },
    {
        "id":"Q04659"
    },
    {
        "id":"P53170"
    },
    {
        "id":"Q12377"
    },
    {
        "id":"Q3E742"
    },
    {
        "id":"Q05787"
    },
    {
        "id":"Q06263"
    },
    {
        "id":"P54862"
    },
    {
        "id":"P32802"
    },
    {
        "id":"Q12365"
    },
    {
        "id":"P38264"
    },
    {
        "id":"P32477"
    },
    {
        "id":"P20484"
    },
    {
        "id":"Q04344"
    },
    {
        "id":"Q03825"
    },
    {
        "id":"P06778"
    },
    {
        "id":"P17536"
    },
    {
        "id":"Q07355"
    },
    {
        "id":"Q06630"
    },
    {
        "id":"P29055"
    },
    {
        "id":"Q08208"
    },
    {
        "id":"Q08206"
    },
    {
        "id":"P25719"
    },
    {
        "id":"P38150"
    },
    {
        "id":"Q12504"
    },
    {
        "id":"P53550"
    },
    {
        "id":"P34077"
    },
    {
        "id":"Q04430"
    },
    {
        "id":"P31412"
    },
    {
        "id":"P38959"
    },
    {
        "id":"Q12157"
    },
    {
        "id":"P36016"
    },
    {
        "id":"P53397"
    },
    {
        "id":"P38322"
    },
    {
        "id":"P38323"
    },
    {
        "id":"P33895"
    },
    {
        "id":"Q05979"
    },
    {
        "id":"P47164"
    },
    {
        "id":"Q04502"
    },
    {
        "id":"Q12471"
    },
    {
        "id":"P25646"
    },
    {
        "id":"Q08683"
    },
    {
        "id":"Q03735"
    },
    {
        "id":"P25567"
    },
    {
        "id":"Q05518"
    },
    {
        "id":"Q07786"
    },
    {
        "id":"P29461"
    },
    {
        "id":"Q06338"
    },
    {
        "id":"P37267"
    },
    {
        "id":"P40961"
    },
    {
        "id":"P38331"
    },
    {
        "id":"P53206"
    },
    {
        "id":"P32048"
    },
    {
        "id":"P27614"
    },
    {
        "id":"Q07791"
    },
    {
        "id":"P10964"
    },
    {
        "id":"P21734"
    },
    {
        "id":"Q6B0W0"
    },
    {
        "id":"P36051"
    },
    {
        "id":"P0C0V8"
    },
    {
        "id":"Q03465"
    },
    {
        "id":"O14468"
    },
    {
        "id":"P38634"
    },
    {
        "id":"Q03788"
    },
    {
        "id":"Q12122"
    },
    {
        "id":"P46949"
    },
    {
        "id":"Q03782"
    },
    {
        "id":"P34247"
    },
    {
        "id":"P38358"
    },
    {
        "id":"Q04371"
    },
    {
        "id":"Q03778"
    },
    {
        "id":"P53113"
    },
    {
        "id":"Q08922"
    },
    {
        "id":"Q12115"
    },
    {
        "id":"P35732"
    },
    {
        "id":"P40317"
    },
    {
        "id":"P46970"
    },
    {
        "id":"P38994"
    },
    {
        "id":"Q12297"
    },
    {
        "id":"P23624"
    },
    {
        "id":"P26364"
    },
    {
        "id":"P0CX10"
    },
    {
        "id":"P15646"
    }
],
"links":[
    {
        "source":11,
        "target":48
    },
    {
        "source":11,
        "target":36
    },
    {
        "source":15,
        "target":99
    },
    {
        "source":18,
        "target":46
    },
    {
        "source":20,
        "target":51
    },
    {
        "source":20,
        "target":77
    },
    {
        "source":24,
        "target":27
    },
    {
        "source":25,
        "target":85
    },
    {
        "source":27,
        "target":75
    },
    {
        "source":27,
        "target":85
    },
    {
        "source":29,
        "target":99
    },
    {
        "source":29,
        "target":37
    },
    {
        "source":33,
        "target":60
    },
    {
        "source":35,
        "target":60
    },
    {
        "source":37,
        "target":63
    },
    {
        "source":42,
        "target":91
    },
    {
        "source":47,
        "target":58
    },
    {
        "source":48,
        "target":54
    },
    {
        "source":52,
        "target":83
    },
    {
        "source":57,
        "target":91
    },
    {
        "source":60,
        "target":91
    },
    {
        "source":60,
        "target":99
    },
    {
        "source":72,
        "target":99
    }
],
"multigraph":false
}

Is there any other ways to show a network generated by networkx in Cytoscape.js ? I know networkx can export to GEXF,GML,JSON. So how can I show it in Cytoscape.js ?


Solution

  • Library to import gml


    Edges (not links), need id's in cytoscape. In general it should look like this.

    {
      data: {
        id: 'something',
        source: 'source id'
        target: 'target id'
      }
    }
    

    this should be fairly simple to parse from the networkx input.

    documentation for cytoscape's format