Gallery Examples for Graphviz and NetworkX (#2732)

* added example of graphviz

* add dependencies for graphviz

* add graphviz

* add networkx example

* get pygraphviz installed for binder

* Add pygraphviz

* Try to fix dependency

* Readd pygraphviz

Co-authored-by: Marc Skov Madsen <masma@orsted.dk>
Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>

binder/postBuild

@@ -1,5 +1,6 @@
 pip install voila>=0.2.10 -U
 conda install -c conda-forge code-server
+conda install -c conda-forge pygraphviz
 code-server --install-extension ms-python.python
 SERVICE_URL=https://open-vsx.org/vscode/gallery ITEM_URL=https://open-vsx.org/vscode/item code-server --install-extension wesbos.theme-cobalt2
 SERVICE_URL=https://open-vsx.org/vscode/gallery ITEM_URL=https://open-vsx.org/vscode/item code-server --install-extension RandomFractalsInc.vscode-data-preview

examples/gallery/viz/GraphViz.ipynb

@@ -0,0 +1,128 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fc69e05f-be77-4c75-9157-60c60dcba6a5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from graphviz import Graph\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension(sizing_mode=\"stretch_width\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "fe92851c-51a2-4684-97a5-a1603da30ff2",
+   "metadata": {},
+   "source": [
+    "# Panel and GraphViz\n",
+    "\n",
+    "The purpose of this example is to show how easy it is to use [GraphViz](https://graphviz.readthedocs.io/en/stable/manual.html#) with Panel."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "15f4789d-68d2-43d9-9791-8b7659f85be4",
+   "metadata": {},
+   "source": [
+    "## Creating a Graph with GraphViz\n",
+    "\n",
+    "This section is independent of Panel. You can find a tutorial and examples in the [GraphViz Documentation](https://graphviz.readthedocs.io/en/stable/manual.html#)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c03112b3-cc8d-4d87-a87e-ba21c897072c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def create_graph(word1=\"Hello\", word2=\"world\", node_color='#00aa41'):\n",
+    "    graphviz_graph = Graph(word1, format='svg', node_attr={'color': node_color, 'style': 'filled', \"fontcolor\": 'white'})\n",
+    "    graphviz_graph.attr(bgcolor='#A01346:pink', label='My Awesome Graph', fontcolor='white')\n",
+    "    graphviz_graph.edge(word1, word2)\n",
+    "    return graphviz_graph\n",
+    "\n",
+    "create_graph()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3bdace1d-b268-4e10-8285-172b0a5be0c2",
+   "metadata": {},
+   "source": [
+    "## Making the Graph Interactive with Panel\n",
+    "\n",
+    "Panel recognizes and shows GraphViz objects in the `svg` format out of the box."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "60c3d76a-6672-4b28-8dfc-eb43a5511782",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "word1 = pn.widgets.TextInput(value=\"Hello\", name=\"Node 1\")\n",
+    "word2 = pn.widgets.TextInput(value=\"World\", name=\"Node 2\")\n",
+    "node_color = pn.widgets.ColorPicker(value='#00aa41', name=\"Node Color\")\n",
+    "\n",
+    "create_graph = pn.bind(create_graph, word1=word1, word2=word2, node_color=node_color)\n",
+    "\n",
+    "create_graph_component = pn.Row(pn.Spacer(), pn.panel(create_graph, width=105, sizing_mode=\"fixed\"), pn.Spacer())\n",
+    "\n",
+    "component = pn.Column(word1, word2, node_color, create_graph_component)\n",
+    "component"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a6d8f7c7-9b94-478d-83cd-d74195e5d947",
+   "metadata": {},
+   "source": [
+    "## Deploying it as an interactive App\n",
+    "\n",
+    "You can serve the app with `panel serve GraphViz.ipynb` an find the live app at http://localhost:5006/GraphViz"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a8272216-f3a9-4710-8589-ecac9e49cf86",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.template.FastListTemplate(\n",
+    "    site=\"Panel\",\n",
+    "    site_url=\"https://panel.holoviz.org/_static/logo_horizontal.png\",\n",
+    "    title=\"Graphviz - Basic Example\",\n",
+    "    main=[component],\n",
+    ").servable();"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

examples/gallery/viz/NetworkX.ipynb

@@ -0,0 +1,150 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fc69e05f-be77-4c75-9157-60c60dcba6a5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import networkx as nx\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension(sizing_mode=\"stretch_width\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "fe92851c-51a2-4684-97a5-a1603da30ff2",
+   "metadata": {},
+   "source": [
+    "# Panel and NetworkX\n",
+    "\n",
+    "The purpose of this example is to show how easy it is to use [NetworkX](https://networkx.org/documentation/stable/index.html) with Panel. For this example to work you will need `NetworkX>=2.5` and `pygraphviz` installed.\n",
+    "\n",
+    "If you want interactive NetworkX graphs we recommend using [HvPlot](https://hvplot.holoviz.org/index.html). See the [HvPlot NetworkX User Guide](https://hvplot.holoviz.org/user_guide/NetworkX.html)."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "15f4789d-68d2-43d9-9791-8b7659f85be4",
+   "metadata": {},
+   "source": [
+    "## Creating a Graph with NetworkX\n",
+    "\n",
+    "This section is independent of Panel. You can find a tutorial and examples in the [NetworkX Documentation](https://networkx.org/documentation/stable/index.html).\n",
+    "\n",
+    "We create the graph via NetworkX. We transform the NetworkX graph to a SVG using pygraphviz."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c03112b3-cc8d-4d87-a87e-ba21c897072c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def clean_svg(svg):\n",
+    "    \"\"\"To display a SVG in Panel nicely we need to \n",
+    "    \n",
+    "    - remove any html in front of the `<svg` tag. \n",
+    "    - replace the fixed width and height\n",
+    "    - make the fill transparent\n",
+    "    \"\"\"\n",
+    "    viewbox_start = svg.find(\"viewBox=\")\n",
+    "    return '<svg height=\"100%\"' + svg[viewbox_start:].replace('fill=\"white\"','fill=\"transparent\"')\n",
+    "\n",
+    "def get_graph(nodes=5):\n",
+    "    graph = nx.complete_graph(nodes)\n",
+    "    pyviz_graph = nx.nx_agraph.to_agraph(graph)\n",
+    "    svg_graph = pyviz_graph.draw(prog='dot', format='svg').decode('utf-8')\n",
+    "    return clean_svg(svg_graph)\n",
+    "\n",
+    "pn.pane.SVG(get_graph(), height=500)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3bdace1d-b268-4e10-8285-172b0a5be0c2",
+   "metadata": {},
+   "source": [
+    "## Making the Graph Interactive with Panel\n",
+    "\n",
+    "Panel recognizes and shows clean `svg` images out of the box."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "788bc072-22da-4add-95de-6ce9f8476964",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "nodes=pn.widgets.IntSlider(value=5, start=2, end=7, name=\"Number of Nodes\")\n",
+    "get_graph = pn.bind(get_graph, nodes=nodes)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "60c3d76a-6672-4b28-8dfc-eb43a5511782",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "create_graph_component = pn.Row(pn.Spacer(), pn.panel(get_graph, height=500), pn.Spacer())\n",
+    "\n",
+    "component = pn.Column(nodes, create_graph_component, height=600)\n",
+    "component"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a6d8f7c7-9b94-478d-83cd-d74195e5d947",
+   "metadata": {},
+   "source": [
+    "## Deploying it as an interactive App\n",
+    "\n",
+    "You can serve the app with `panel serve NetworkX.ipynb` and find the live app at http://localhost:5006/NetworkX"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a8272216-f3a9-4710-8589-ecac9e49cf86",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "ACCENT_BASE_COLOR=\"#98b2d1\"\n",
+    "\n",
+    "pn.template.FastListTemplate(\n",
+    "    site=\"Panel\",\n",
+    "    site_url=\"https://panel.holoviz.org/_static/logo_horizontal.png\",\n",
+    "    title=\"NetworkX - Basic Example\",\n",
+    "    main=[component], header_background=ACCENT_BASE_COLOR, accent_base_color=ACCENT_BASE_COLOR,\n",
+    "    theme_toggle=False,\n",
+    ").servable();"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

setup.py

@@ -152,7 +152,11 @@ def run(self):
         'xarray',
         'pyinstrument >=4.0',
         'aiohttp',
-        'croniter'
+        'croniter',
+        'graphviz',
+        'python-graphviz',
+        'networkx>=2.5',
+        'pygraphviz'
     ],
     'tests': _tests,
     'recommended': _recommended,