Update example notebooks to support google colab embeddings out of th…

…e box
yWorks · Oct 30, 2023 · ad6f958 · ad6f958
1 parent ddffa8b
commit ad6f958
Show file tree

Hide file tree

Showing 24 changed files with 489 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,8 @@ The widget is supported in the default Jupyter environments, but also in other e
 
 ![A screenshot showing the yFiles graph widget in a jupyter lab notebook](https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/yfiles-jupyter-graphs-introduction.png)
 
+Try the [Introduction](https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/introduction.ipynb) notebook on Google Colab [here](https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/introduction.ipynb).
+
 ## Supported Environments
 - [JupyterLab or Jupyter Notebook](https://jupyter.org/)
 - [Visual Studio Code](https://code.visualstudio.com/)
@@ -70,26 +72,33 @@ You can find the full documentation [here](https://yworks.github.io/yfiles-jupyt
 <table>
     <tr>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/neighborhood.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/neighborhood.png" title="See Node Neighborhood" alt="neighborhood sidebar"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/neighborhood.ipynb">See Node Neighborhood</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/neighborhood.ipynb">See Node Neighborhood</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/neighborhood.ipynb">Try Notebook on Google Colab</a></td>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/layouts.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/layouts.png" title="Choose Graph Layout" alt="layouts"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/layouts.ipynb">Choose Graph Layout</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/layouts.ipynb">Choose Graph Layout</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/layouts.ipynb">Try Notebook on Google Colab</a></td>
     </tr>
     <tr>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/data.png" title="Investigate Nodes and Edges Data" alt="data sidebar"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Investigate Nodes or Edges Data</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Investigate Nodes or Edges Data</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Try Notebook on Google Colab</a></td>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/search.png" title="Search for Nodes or Edges" alt="search sidebar"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Search for Nodes or Edges</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Search for Nodes or Edges</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/sidebar.ipynb">Try Notebook on Google Colab</a></td>
     </tr>
     <tr>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/import_from_networkx.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/importer.png" title="Import Graph Data" alt="importer"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/import_from_networkx.ipynb">Import Graph Data</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/import_from_networkx.ipynb">Import Graph Data</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/import_from_networkx.ipynb">Try Notebook on Google Colab</a></td>
         <td><a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/element_color_mapping.ipynb"><img src="https://raw.githubusercontent.com/yWorks/yfiles-jupyter-graphs/main/screenshots/element_color_mapping.png" title="Make Data Dependent Property Changes" alt="element color mapping"></a>
-        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/element_color_mapping.ipynb">Make Data Dependent Property Changes</a></td>
+        <a href="https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/element_color_mapping.ipynb">Make Data Dependent Property Changes</a><br><a href="https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/element_color_mapping.ipynb">Try Notebook on Google Colab</a></td>
     </tr>
 </table>
 
 For example code look [here](https://github.com/yWorks/yfiles-jupyter-graphs/tree/master/examples).
 
+### Google Colab Examples
+You can try the [example notebooks](https://github.com/yWorks/yfiles-jupyter-graphs/tree/master/examples) in Google Colab by
+opening GitHub notebook URL: `https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/<notebook.ipynb>`.
+
+For example the [Introduction](https://github.com/yWorks/yfiles-jupyter-graphs/blob/main/examples/introduction.ipynb) notebook: <br> 
+https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/introduction.ipynb
+
 ## Documentation
 You can find the documentation [here](https://yworks.github.io/yfiles-jupyter-graphs/).
 

diff --git a/examples/edge_direction_mapping.ipynb b/examples/edge_direction_mapping.ipynb
@@ -8,15 +8,30 @@
     "# Edge Direction Mapping"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "925037b9-bed1-4af1-85e3-6a1f2431a345",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "c1f51c9c-633f-4a86-a2cf-905bd35b9beb",
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture\n",
-    "!pip install networkx"
+    "%pip install networkx --quiet"
    ]
   },
   {
@@ -202,7 +217,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -216,7 +231,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

diff --git a/examples/element_color_mapping.ipynb b/examples/element_color_mapping.ipynb
@@ -10,15 +10,30 @@
     "# Element Color Mapping"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4eb58ba1-1e95-4090-b2b8-e117e35561c5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "e69d0359-1fc6-4521-893f-7c9b93c610f7",
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture\n",
-    "!pip install networkx"
+    "%pip install networkx --quiet"
    ]
   },
   {
@@ -303,7 +318,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -317,7 +332,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

diff --git a/examples/element_label_mapping.ipynb b/examples/element_label_mapping.ipynb
@@ -8,15 +8,30 @@
     "# Element Label Mapping"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "090ffda3-e803-44da-b926-6771540c13ad",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "d0aa97c4-eff1-41c9-8351-27dadb14388a",
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture\n",
-    "!pip install networkx"
+    "%pip install networkx --quiet"
    ]
   },
   {
@@ -271,7 +286,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -285,7 +300,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

diff --git a/examples/element_property_mapping.ipynb b/examples/element_property_mapping.ipynb
@@ -8,15 +8,30 @@
     "# Element Property Mapping"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "74bcc1fa-8c3d-4050-bd8b-9858a90a2523",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "4006009d-b833-4d3e-84f8-a0839da74fac",
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture\n",
-    "!pip install networkx"
+    "%pip install networkx --quiet"
    ]
   },
   {
@@ -300,7 +315,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -314,7 +329,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

diff --git a/examples/element_size_mapping.ipynb b/examples/element_size_mapping.ipynb
@@ -8,15 +8,30 @@
     "# Element Size Mapping"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cd43c610-432f-402c-bc09-abd9df462d42",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "4c18aeed-6796-4e59-be3b-6dc0e276a835",
    "metadata": {},
    "outputs": [],
    "source": [
-    "%%capture\n",
-    "!pip install networkx"
+    "%pip install networkx --quiet"
    ]
   },
   {
@@ -280,7 +295,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -294,7 +309,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

diff --git a/examples/import_from_graph_tool.ipynb b/examples/import_from_graph_tool.ipynb
@@ -1,5 +1,21 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2291dc52-fd28-4cf1-b3e9-32016d073989",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -141,7 +157,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -155,7 +171,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   }
  },
  "nbformat": 4,

diff --git a/examples/import_from_graphviz.ipynb b/examples/import_from_graphviz.ipynb
@@ -1,5 +1,31 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9cf4d71b-a07b-483c-ac76-3450eb1fc147",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install yfiles_jupyter_graphs --quiet\n",
+    "try:\n",
+    "  import google.colab\n",
+    "  from google.colab import output\n",
+    "  output.enable_custom_widget_manager()\n",
+    "except:\n",
+    "  pass"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1f6c3685-9e5c-474d-a6e2-4b4ed8016d0d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install pygraphviz --quiet"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -173,7 +199,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -187,7 +213,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.15"
+   "version": "3.11.3"
   }
  },
  "nbformat": 4,