Skip to main content
Chemistry LibreTexts

5.2.8.7: Using IPyCytoscape to visualize graphs

  • Page ID
    346986
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)

    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

     


    5.2.8.7: Using IPyCytoscape to visualize graphs is shared under a not declared license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?