5.2.8.7: Using IPyCytoscape to visualize graphs

Last updated
Save as PDF

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}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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