Skip to main content
Chemistry LibreTexts

5.2.8.7: Using IPyCytoscape to visualize graphs

  • Page ID
    346986
  • Libretexts authors can create code blocks that utillize the ipyctyoscape package to create cytoscape.js graphs. Below is an example taken from the ipycytoscape repository and is licensed under the BSD 3-Clause License.

    import ipycytoscape
    data = {
      'nodes': [
          { 'data': { 'id': 'desktop', 'name': 'Cytoscape', 'href': 'http://cytoscape.org' } },
          { 'data': { 'id': 'a', 'name': 'Grid', 'href': 'http://cytoscape.org' } },
          { 'data': { 'id': 'b', 'name': 'Cola', 'href': 'http://cytoscape.org' } },
          { 'data': { 'id': 'c', 'name': 'Popper', 'href': 'http://cytoscape.org' } },
          { 'data': { 'id': 'js', 'name': 'Cytoscape.js', 'href': 'http://js.cytoscape.org' } }
      ],
      'edges': [
          {'data': { 'source': 'desktop', 'target': 'js' }},
          {'data': { 'source': 'a', 'target': 'b' }},
          {'data': { 'source': 'a', 'target': 'c' }},
          {'data': { 'source': 'b', 'target': 'c' }},
          {'data': { 'source': 'js', 'target': 'b' }}
      ]
    }
    cytoscapeobj = ipycytoscape.CytoscapeWidget()
    cytoscapeobj.graph.add_graph_from_json(data)
    cytoscapeobj.set_style([{
      'selector': 'node',
      'css': {
          'content': 'data(name)',
          'text-valign': 'center',
          'color': 'white',
          'text-outline-width': 2,
          'text-outline-color': 'green',
          'background-color': 'green'
      }
      },
      {
      'selector': ':selected',
      'css': {
          'background-color': 'black',
          'line-color': 'black',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'text-outline-color': 'black'
      }}
      ])
    cytoscapeobj

     

    • Was this article helpful?