examples/03_color_mapping.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "id": "e9aec846-1e8b-4930-9e05-6e12621ad1ee",
      "metadata": {
        "id": "e9aec846-1e8b-4930-9e05-6e12621ad1ee"
      },
      "source": [
        "# Element Color Mapping <a target=\"_blank\" href=\"https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/03_color_mapping.ipynb\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>\n",
        "\n",
        "This notebook covers the basics of customizing node and edge colors.\n",
        "\n",
        "For the purpose of mapping demonstrations, the same graph, ```erdos_renyi_graph```, will be used. For this, we will import the graph from the NetworkX package. \\\n",
        "For more details on how to import graph data, explore the other example notebooks or refer to the full widget [documentation](https://yworks.github.io/yfiles-jupyter-graphs/).\n",
        "\n",
        "Before using the graph widget, install all necessary packages."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 1,
      "id": "d56c690f-ea18-4f92-a6e2-63593f06e3b3",
      "metadata": {
        "id": "d56c690f-ea18-4f92-a6e2-63593f06e3b3",
        "outputId": "a650c4b5-c2f4-4c82-ccb7-6853fc234241",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 86
        }
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m15.6/15.6 MB\u001b[0m \u001b[31m29.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m139.8/139.8 kB\u001b[0m \u001b[31m6.7 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m2.3/2.3 MB\u001b[0m \u001b[31m20.1 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m1.6/1.6 MB\u001b[0m \u001b[31m35.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[?25h"
          ]
        }
      ],
      "source": [
        "%pip install yfiles_jupyter_graphs --quiet\n",
        "from yfiles_jupyter_graphs import GraphWidget\n",
        "%pip install networkx --quiet\n",
        "from typing import Dict\n",
        "from networkx import erdos_renyi_graph\n",
        "\n",
        "g = erdos_renyi_graph(10, 0.3, 2)\n",
        "w = GraphWidget(graph=g)"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "4fabf87e-26e0-4f5f-b4ba-0d2c377ebc1a",
      "metadata": {
        "id": "4fabf87e-26e0-4f5f-b4ba-0d2c377ebc1a"
      },
      "source": [
        "You can also open this notebook in Google Colab when Google Colab's custom widget manager is enabled:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "id": "28440f01-73ee-467a-b99d-7293cc8015d6",
      "metadata": {
        "id": "28440f01-73ee-467a-b99d-7293cc8015d6"
      },
      "outputs": [],
      "source": [
        "try:\n",
        "  import google.colab\n",
        "  from google.colab import output\n",
        "  output.enable_custom_widget_manager()\n",
        "except:\n",
        "  pass"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "d42543fc-6da2-4c88-9a1f-bcdcf6d9d129",
      "metadata": {
        "id": "d42543fc-6da2-4c88-9a1f-bcdcf6d9d129"
      },
      "source": [
        "<a target=\"_blank\" href=\"https://colab.research.google.com/github/yWorks/yfiles-jupyter-graphs/blob/main/examples/03_color_mapping.ipynb\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "c59d77a7-987c-4a6f-895e-e41817d3cffb",
      "metadata": {
        "id": "c59d77a7-987c-4a6f-895e-e41817d3cffb"
      },
      "source": [
        "This is the graph we will be working on:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "id": "3c234cb0-fa25-40ce-85b3-b81b54d6e522",
      "metadata": {
        "id": "3c234cb0-fa25-40ce-85b3-b81b54d6e522",
        "outputId": "91cb0264-f6a1-4ea7-a731-df947cb842f8",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 517,
          "referenced_widgets": [
            "d60ce03297f949468da42187a0463ee8",
            "7ca3c5ce3646409cac69432128cf8590"
          ]
        }
      },
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "GraphWidget(layout=Layout(height='500px', width='100%'))"
            ],
            "application/vnd.jupyter.widget-view+json": {
              "version_major": 2,
              "version_minor": 0,
              "model_id": "d60ce03297f949468da42187a0463ee8"
            }
          },
          "metadata": {
            "application/vnd.jupyter.widget-view+json": {
              "colab": {
                "custom_widget_manager": {
                  "url": "https://ssl.gstatic.com/colaboratory-static/widgets/colab-cdn-widget-manager/2b70e893a8ba7c0f/manager.min.js"
                }
              }
            }
          }
        }
      ],
      "source": [
        "display(GraphWidget(graph=g))"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "a89c07b2-1314-4f5b-a584-c9910b9a51c9",
      "metadata": {
        "id": "a89c07b2-1314-4f5b-a584-c9910b9a51c9"
      },
      "source": [
        "## Node Color Mapping\n",
        "\n",
        "The node color mapping is a function that is supposed to return a CSS color string for each given node object which is then used as node color in the widget.\n",
        "\n",
        "Optionally, the index can be used as the first function parameter.\n",
        "\n",
        "We will color every node which has an odd label blue and nodes with an even label orange. \\\n",
        "For this we first define a new mapping function and then set this function as our current color mapping."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "id": "e3bb8793-db19-470a-9ce2-8f6823dac3a0",
      "metadata": {
        "id": "e3bb8793-db19-470a-9ce2-8f6823dac3a0"
      },
      "outputs": [],
      "source": [
        "def custom_node_color_mapping(node: Dict):\n",
        "    \"\"\"let the color be orange or blue if the index is even or odd respectively\"\"\"\n",
        "    return (\"#ff8800\" if int(node['properties']['label']) % 2 == 0 else \"#0096C7\")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "6029f59d-e25d-4e9f-b6e4-5f66e519a6b2",
      "metadata": {
        "id": "6029f59d-e25d-4e9f-b6e4-5f66e519a6b2"
      },
      "source": [
        "### Custom node mappings\n",
        "\n",
        "There are get and set methods for each customizable node property.\n",
        "- you can set a new node mapping with ```w.set_node_[binding]_mapping```\n",
        "- you can get the current node mapping with ```w.get_node_[binding]_mapping```\n",
        "- you can delete a custom node mapping with ```w.del_node_[binding]_mapping```\n",
        "\n",
        "You can find more details in the dedicated function documentation, available at ```w.[function_name].__doc__``` or in the [documentation](https://yworks.github.io/yfiles-jupyter-graphs/02_graph_widget/#methods).\n",
        "\n",
        "If no custom mapping is set the default mappings are used."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "id": "f86ee9b9-f7da-41e7-9a1e-51269c787ef3",
      "metadata": {
        "id": "f86ee9b9-f7da-41e7-9a1e-51269c787ef3",
        "outputId": "ba3b5d8f-d4d0-4f86-b808-815000c938ad",
        "colab": {
          "base_uri": "https://localhost:8080/"
        }
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "The default color mapping for nodes.\n",
            "\n",
            "        Provides constant value of '#15AFAC' for all nodes, or different colors per label/type when importing a Neo4j\n",
            "        graph.\n",
            "\n",
            "        Parameters\n",
            "        ----------\n",
            "        index: int (optional)\n",
            "        node: typing.Dict\n",
            "\n",
            "        Notes\n",
            "        -----\n",
            "        This is the default value for the `node_color_mapping` property.\n",
            "        Can be 'overwritten' by setting the property\n",
            "        with a function of the same signature.\n",
            "\n",
            "        If the given mapping function has only one parameter (that is not typed as int),\n",
            "        then it will be called with the element (typing.Dict) as first parameter.\n",
            "\n",
            "        Example\n",
            "        -------\n",
            "        .. code::\n",
            "\n",
            "           from yfiles_jupyter_graphs import GraphWidget\n",
            "           w = GraphWidget()\n",
            "           def custom_node_color_mapping(node: typing.Dict):\n",
            "           ...\n",
            "           w.set_node_color_mapping(custom_node_color_mapping)\n",
            "\n",
            "        Returns\n",
            "        -------\n",
            "        color: str\n",
            "            css color value\n",
            "\n",
            "        References\n",
            "        ----------\n",
            "        css color value <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value>\n",
            "\n",
            "        yFiles docs Fill api <https://docs.yworks.com/yfileshtml/#/api/Fill>\n",
            "\n",
            "        \n"
          ]
        }
      ],
      "source": [
        "print(w.default_node_color_mapping.__doc__)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 6,
      "id": "d9b6afce-9faa-466c-b6f2-b7fc5d7407b6",
      "metadata": {
        "id": "d9b6afce-9faa-466c-b6f2-b7fc5d7407b6",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 188
        },
        "outputId": "6d536ad9-6e65-4e2f-abf2-7f2a6791ffcd"
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<bound method GraphWidget.default_node_color_mapping of GraphWidget(layout=Layout(height='500px', width='100%'))>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>yfiles_jupyter_graphs.widget.GraphWidget.default_node_color_mapping</b><br/>def default_node_color_mapping(index: int, node: TDict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/usr/local/lib/python3.10/dist-packages/yfiles_jupyter_graphs/widget.py</a>The default color mapping for nodes.\n",
              "\n",
              "Provides constant value of &#x27;#15AFAC&#x27; for all nodes, or different colors per label/type when importing a Neo4j\n",
              "graph.\n",
              "\n",
              "Parameters\n",
              "----------\n",
              "index: int (optional)\n",
              "node: typing.Dict\n",
              "\n",
              "Notes\n",
              "-----\n",
              "This is the default value for the `node_color_mapping` property.\n",
              "Can be &#x27;overwritten&#x27; by setting the property\n",
              "with a function of the same signature.\n",
              "\n",
              "If the given mapping function has only one parameter (that is not typed as int),\n",
              "then it will be called with the element (typing.Dict) as first parameter.\n",
              "\n",
              "Example\n",
              "-------\n",
              ".. code::\n",
              "\n",
              "   from yfiles_jupyter_graphs import GraphWidget\n",
              "   w = GraphWidget()\n",
              "   def custom_node_color_mapping(node: typing.Dict):\n",
              "   ...\n",
              "   w.set_node_color_mapping(custom_node_color_mapping)\n",
              "\n",
              "Returns\n",
              "-------\n",
              "color: str\n",
              "    css color value\n",
              "\n",
              "References\n",
              "----------\n",
              "css color value &lt;https://developer.mozilla.org/en-US/docs/Web/CSS/color_value&gt;\n",
              "\n",
              "yFiles docs Fill api &lt;https://docs.yworks.com/yfileshtml/#/api/Fill&gt;</pre>\n",
              "      <script>\n",
              "      if (google.colab.kernel.accessAllowed && google.colab.files && google.colab.files.view) {\n",
              "        for (const element of document.querySelectorAll('.filepath')) {\n",
              "          element.style.display = 'block'\n",
              "          element.onclick = (event) => {\n",
              "            event.preventDefault();\n",
              "            event.stopPropagation();\n",
              "            google.colab.files.view(element.textContent, 1487);\n",
              "          };\n",
              "        }\n",
              "      }\n",
              "      for (const element of document.querySelectorAll('.function-repr-contents')) {\n",
              "        element.onclick = (event) => {\n",
              "          event.preventDefault();\n",
              "          event.stopPropagation();\n",
              "          element.classList.toggle('function-repr-contents-collapsed');\n",
              "        };\n",
              "      }\n",
              "      </script>\n",
              "      </div>"
            ]
          },
          "metadata": {},
          "execution_count": 6
        }
      ],
      "source": [
        "w.get_node_color_mapping()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "93d66078-f9ba-4f7f-ab7a-67388456de2c",
      "metadata": {
        "id": "93d66078-f9ba-4f7f-ab7a-67388456de2c"
      },
      "source": [
        "Let's use the new node color mapping:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 7,
      "id": "673c731a-9d65-4811-b148-327a40b23856",
      "metadata": {
        "id": "673c731a-9d65-4811-b148-327a40b23856",
        "outputId": "79415e96-ead5-40ee-d50a-a975a6e6f06f",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 105
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<function __main__.custom_node_color_mapping(node: Dict)>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>custom_node_color_mapping</b><br/>def custom_node_color_mapping(node: Dict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/content/&lt;ipython-input-4-031f85cbcd23&gt;</a>let the color be orange or blue if the index is even or odd respectively</pre></div>"
            ]
          },
          "metadata": {},
          "execution_count": 7
        }
      ],
      "source": [
        "w.set_node_color_mapping(custom_node_color_mapping)\n",
        "w.get_node_color_mapping()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 8,
      "id": "18520a26-0421-4291-aa84-4c92666b2104",
      "metadata": {
        "id": "18520a26-0421-4291-aa84-4c92666b2104",
        "outputId": "6346bb74-6549-4367-a9dd-baad84b36c69",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 517,
          "referenced_widgets": [
            "11a82b6f70214c08b4e3226c1cea0525",
            "d86065c3d95c4f0e9fd290d6ba251101"
          ]
        }
      },
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "GraphWidget(layout=Layout(height='500px', width='100%'))"
            ],
            "application/vnd.jupyter.widget-view+json": {
              "version_major": 2,
              "version_minor": 0,
              "model_id": "11a82b6f70214c08b4e3226c1cea0525"
            }
          },
          "metadata": {
            "application/vnd.jupyter.widget-view+json": {
              "colab": {
                "custom_widget_manager": {
                  "url": "https://ssl.gstatic.com/colaboratory-static/widgets/colab-cdn-widget-manager/2b70e893a8ba7c0f/manager.min.js"
                }
              }
            }
          }
        }
      ],
      "source": [
        "display(w)"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "2bc8c19a-9a18-4a31-b87c-9b3b3657def0",
      "metadata": {
        "id": "2bc8c19a-9a18-4a31-b87c-9b3b3657def0"
      },
      "source": [
        "If a node color mapping is deleted, the color mapping reverts back to the default mapping."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 9,
      "id": "30962f59-7a19-4d22-b4f2-4fcc3f2e83da",
      "metadata": {
        "id": "30962f59-7a19-4d22-b4f2-4fcc3f2e83da",
        "outputId": "adabf201-1763-4d67-91e7-f43d1f595308",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 188
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<bound method GraphWidget.default_node_color_mapping of GraphWidget(layout=Layout(height='500px', width='100%'))>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>yfiles_jupyter_graphs.widget.GraphWidget.default_node_color_mapping</b><br/>def default_node_color_mapping(index: int, node: TDict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/usr/local/lib/python3.10/dist-packages/yfiles_jupyter_graphs/widget.py</a>The default color mapping for nodes.\n",
              "\n",
              "Provides constant value of &#x27;#15AFAC&#x27; for all nodes, or different colors per label/type when importing a Neo4j\n",
              "graph.\n",
              "\n",
              "Parameters\n",
              "----------\n",
              "index: int (optional)\n",
              "node: typing.Dict\n",
              "\n",
              "Notes\n",
              "-----\n",
              "This is the default value for the `node_color_mapping` property.\n",
              "Can be &#x27;overwritten&#x27; by setting the property\n",
              "with a function of the same signature.\n",
              "\n",
              "If the given mapping function has only one parameter (that is not typed as int),\n",
              "then it will be called with the element (typing.Dict) as first parameter.\n",
              "\n",
              "Example\n",
              "-------\n",
              ".. code::\n",
              "\n",
              "   from yfiles_jupyter_graphs import GraphWidget\n",
              "   w = GraphWidget()\n",
              "   def custom_node_color_mapping(node: typing.Dict):\n",
              "   ...\n",
              "   w.set_node_color_mapping(custom_node_color_mapping)\n",
              "\n",
              "Returns\n",
              "-------\n",
              "color: str\n",
              "    css color value\n",
              "\n",
              "References\n",
              "----------\n",
              "css color value &lt;https://developer.mozilla.org/en-US/docs/Web/CSS/color_value&gt;\n",
              "\n",
              "yFiles docs Fill api &lt;https://docs.yworks.com/yfileshtml/#/api/Fill&gt;</pre>\n",
              "      <script>\n",
              "      if (google.colab.kernel.accessAllowed && google.colab.files && google.colab.files.view) {\n",
              "        for (const element of document.querySelectorAll('.filepath')) {\n",
              "          element.style.display = 'block'\n",
              "          element.onclick = (event) => {\n",
              "            event.preventDefault();\n",
              "            event.stopPropagation();\n",
              "            google.colab.files.view(element.textContent, 1487);\n",
              "          };\n",
              "        }\n",
              "      }\n",
              "      for (const element of document.querySelectorAll('.function-repr-contents')) {\n",
              "        element.onclick = (event) => {\n",
              "          event.preventDefault();\n",
              "          event.stopPropagation();\n",
              "          element.classList.toggle('function-repr-contents-collapsed');\n",
              "        };\n",
              "      }\n",
              "      </script>\n",
              "      </div>"
            ]
          },
          "metadata": {},
          "execution_count": 9
        }
      ],
      "source": [
        "w.del_node_color_mapping()\n",
        "w.get_node_color_mapping()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "d1991d12-1032-4761-9ad8-af5e619e84e6",
      "metadata": {
        "id": "d1991d12-1032-4761-9ad8-af5e619e84e6"
      },
      "source": [
        "## Edge Color Mapping\n",
        "\n",
        "The edge color mapping is a function that is supposed to return a CSS color string for each given edge object which is then used as node color in the widget.\n",
        "\n",
        "If the index is used, it can be optionally given as the first function parameter.\n",
        "Edge mappings generally work the same as node mappings.\n",
        "\n",
        "We will color every edge which starts from an evenly indexed node purple. \\\n",
        "For this we first define a new mapping function and then set this function as our current color mapping."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 10,
      "id": "bd6681e6-6998-45b0-b6b2-859908c34a4c",
      "metadata": {
        "id": "bd6681e6-6998-45b0-b6b2-859908c34a4c"
      },
      "outputs": [],
      "source": [
        "w2 = GraphWidget(graph=g)\n",
        "\n",
        "def custom_edge_color_mapping(edge: Dict):\n",
        "    \"\"\"let the edge be purple if the starting node has an even index\"\"\"\n",
        "    return (\"#D6B4FC\" if int(edge['start']) % 2 == 0 else \"#15AFAC\")"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "d23bb323-bdf4-4365-a7c9-f3736a1526c3",
      "metadata": {
        "id": "d23bb323-bdf4-4365-a7c9-f3736a1526c3"
      },
      "source": [
        "### Custom edge mappings\n",
        "\n",
        "There are get and set methods for each customizable edge property.\n",
        "- you can set a new edge mapping with ```w.set_edge_[binding]_mapping```\n",
        "- you can get the current edge mapping with ```w.get_edge_[binding]_mapping```\n",
        "- you can delete a custom edge mapping with ```w.del_edge_[binding]_mapping```\n",
        "\n",
        "You can find more details in the dedicated function documentation, available at ```w.[function_name].__doc__``` or in the [documentation](https://yworks.github.io/yfiles-jupyter-graphs/02_graph_widget/#methods).\n",
        "\n",
        "If no custom mapping is set the default mappings are used."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 11,
      "id": "1ca048f0-f794-4778-b691-c2794544deaf",
      "metadata": {
        "id": "1ca048f0-f794-4778-b691-c2794544deaf",
        "outputId": "94f81e3a-fbc6-40af-efa6-7bf0876decea",
        "colab": {
          "base_uri": "https://localhost:8080/"
        }
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "The default color mapping for edges.\n",
            "\n",
            "        Provides constant value of '#15AFAC' for all edges.\n",
            "\n",
            "        Parameters\n",
            "        ----------\n",
            "        index: int (optional)\n",
            "        edge: typing.Dict\n",
            "\n",
            "        Notes\n",
            "        -----\n",
            "        This is the default value for the `edge_color_mapping` property.\n",
            "        Can be 'overwritten' by setting the property\n",
            "        with a function of the same signature.\n",
            "\n",
            "        If the given mapping function has only one parameter (that is not typed as int),\n",
            "        then it will be called with the element (typing.Dict) as first parameter.\n",
            "\n",
            "        Example\n",
            "        -------\n",
            "        .. code::\n",
            "\n",
            "           from yfiles_jupyter_graphs import GraphWidget\n",
            "           w = GraphWidget()\n",
            "           def custom_edge_color_mapping(edge: typing.Dict):\n",
            "           ...\n",
            "           w.set_edge_color_mapping(custom_edge_color_mapping)\n",
            "\n",
            "        Returns\n",
            "        -------\n",
            "        color: str\n",
            "            css color value\n",
            "\n",
            "        References\n",
            "        ----------\n",
            "        css color value <https://developer.mozilla.org/en-US/docs/Web/CSS/color_value>\n",
            "\n",
            "        yFiles docs Fill api <https://docs.yworks.com/yfileshtml/#/api/Fill>\n",
            "\n",
            "        \n"
          ]
        }
      ],
      "source": [
        "print(w2.default_edge_color_mapping.__doc__)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 12,
      "id": "6b18d49e-9873-476d-aaf3-311c3f9c80a6",
      "metadata": {
        "id": "6b18d49e-9873-476d-aaf3-311c3f9c80a6",
        "outputId": "fbf96620-da39-43cb-94c2-0fc3dcde867d",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 188
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<bound method GraphWidget.default_edge_color_mapping of GraphWidget(layout=Layout(height='500px', width='100%'))>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>yfiles_jupyter_graphs.widget.GraphWidget.default_edge_color_mapping</b><br/>def default_edge_color_mapping(index: int, edge: TDict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/usr/local/lib/python3.10/dist-packages/yfiles_jupyter_graphs/widget.py</a>The default color mapping for edges.\n",
              "\n",
              "Provides constant value of &#x27;#15AFAC&#x27; for all edges.\n",
              "\n",
              "Parameters\n",
              "----------\n",
              "index: int (optional)\n",
              "edge: typing.Dict\n",
              "\n",
              "Notes\n",
              "-----\n",
              "This is the default value for the `edge_color_mapping` property.\n",
              "Can be &#x27;overwritten&#x27; by setting the property\n",
              "with a function of the same signature.\n",
              "\n",
              "If the given mapping function has only one parameter (that is not typed as int),\n",
              "then it will be called with the element (typing.Dict) as first parameter.\n",
              "\n",
              "Example\n",
              "-------\n",
              ".. code::\n",
              "\n",
              "   from yfiles_jupyter_graphs import GraphWidget\n",
              "   w = GraphWidget()\n",
              "   def custom_edge_color_mapping(edge: typing.Dict):\n",
              "   ...\n",
              "   w.set_edge_color_mapping(custom_edge_color_mapping)\n",
              "\n",
              "Returns\n",
              "-------\n",
              "color: str\n",
              "    css color value\n",
              "\n",
              "References\n",
              "----------\n",
              "css color value &lt;https://developer.mozilla.org/en-US/docs/Web/CSS/color_value&gt;\n",
              "\n",
              "yFiles docs Fill api &lt;https://docs.yworks.com/yfileshtml/#/api/Fill&gt;</pre>\n",
              "      <script>\n",
              "      if (google.colab.kernel.accessAllowed && google.colab.files && google.colab.files.view) {\n",
              "        for (const element of document.querySelectorAll('.filepath')) {\n",
              "          element.style.display = 'block'\n",
              "          element.onclick = (event) => {\n",
              "            event.preventDefault();\n",
              "            event.stopPropagation();\n",
              "            google.colab.files.view(element.textContent, 1590);\n",
              "          };\n",
              "        }\n",
              "      }\n",
              "      for (const element of document.querySelectorAll('.function-repr-contents')) {\n",
              "        element.onclick = (event) => {\n",
              "          event.preventDefault();\n",
              "          event.stopPropagation();\n",
              "          element.classList.toggle('function-repr-contents-collapsed');\n",
              "        };\n",
              "      }\n",
              "      </script>\n",
              "      </div>"
            ]
          },
          "metadata": {},
          "execution_count": 12
        }
      ],
      "source": [
        "w2.get_edge_color_mapping()"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "b8538547-4710-4497-976d-d61a1b2f85e8",
      "metadata": {
        "id": "b8538547-4710-4497-976d-d61a1b2f85e8"
      },
      "source": [
        "Let's use the new edge color mapping:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 13,
      "id": "4b574f9d-aca9-4623-9bcc-18515121e7fb",
      "metadata": {
        "id": "4b574f9d-aca9-4623-9bcc-18515121e7fb",
        "outputId": "59aba2ca-707d-4f0a-d9f3-dd15e4261cf6",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 105
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<function __main__.custom_edge_color_mapping(edge: Dict)>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>custom_edge_color_mapping</b><br/>def custom_edge_color_mapping(edge: Dict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/content/&lt;ipython-input-10-dde270ec55b2&gt;</a>let the edge be purple if the starting node has an even index</pre></div>"
            ]
          },
          "metadata": {},
          "execution_count": 13
        }
      ],
      "source": [
        "w2 = GraphWidget(graph=g)\n",
        "w2.set_edge_color_mapping(custom_edge_color_mapping)\n",
        "w2.get_edge_color_mapping()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 14,
      "id": "1542fcdf-8974-46ab-8720-3bdda965112c",
      "metadata": {
        "id": "1542fcdf-8974-46ab-8720-3bdda965112c",
        "outputId": "424a5325-28f7-4706-b68a-02995499aa13",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 517,
          "referenced_widgets": [
            "e6cb7a463af243949c218e7be1d6aec3",
            "d0b258aae1554449b1c0c9ce3f824e04"
          ]
        }
      },
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "GraphWidget(layout=Layout(height='500px', width='100%'))"
            ],
            "application/vnd.jupyter.widget-view+json": {
              "version_major": 2,
              "version_minor": 0,
              "model_id": "e6cb7a463af243949c218e7be1d6aec3"
            }
          },
          "metadata": {
            "application/vnd.jupyter.widget-view+json": {
              "colab": {
                "custom_widget_manager": {
                  "url": "https://ssl.gstatic.com/colaboratory-static/widgets/colab-cdn-widget-manager/2b70e893a8ba7c0f/manager.min.js"
                }
              }
            }
          }
        }
      ],
      "source": [
        "display(w2)"
      ]
    },
    {
      "cell_type": "markdown",
      "id": "200d7806-000e-4c3f-8636-10719302a1e4",
      "metadata": {
        "id": "200d7806-000e-4c3f-8636-10719302a1e4"
      },
      "source": [
        "If a edge color mapping is deleted, the color mapping reverts back to the default mapping."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 15,
      "id": "25f29cd1-1b09-40ab-a154-4ff0b461ab25",
      "metadata": {
        "id": "25f29cd1-1b09-40ab-a154-4ff0b461ab25",
        "outputId": "2c94b7c7-24bc-4d11-8935-fb9c6407a501",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 188
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<bound method GraphWidget.default_edge_color_mapping of GraphWidget(layout=Layout(height='500px', width='100%'))>"
            ],
            "text/html": [
              "<div style=\"max-width:800px; border: 1px solid var(--colab-border-color);\"><style>\n",
              "      pre.function-repr-contents {\n",
              "        overflow-x: auto;\n",
              "        padding: 8px 12px;\n",
              "        max-height: 500px;\n",
              "      }\n",
              "\n",
              "      pre.function-repr-contents.function-repr-contents-collapsed {\n",
              "        cursor: pointer;\n",
              "        max-height: 100px;\n",
              "      }\n",
              "    </style>\n",
              "    <pre style=\"white-space: initial; background:\n",
              "         var(--colab-secondary-surface-color); padding: 8px 12px;\n",
              "         border-bottom: 1px solid var(--colab-border-color);\"><b>yfiles_jupyter_graphs.widget.GraphWidget.default_edge_color_mapping</b><br/>def default_edge_color_mapping(index: int, edge: TDict)</pre><pre class=\"function-repr-contents function-repr-contents-collapsed\" style=\"\"><a class=\"filepath\" style=\"display:none\" href=\"#\">/usr/local/lib/python3.10/dist-packages/yfiles_jupyter_graphs/widget.py</a>The default color mapping for edges.\n",
              "\n",
              "Provides constant value of &#x27;#15AFAC&#x27; for all edges.\n",
              "\n",
              "Parameters\n",
              "----------\n",
              "index: int (optional)\n",
              "edge: typing.Dict\n",
              "\n",
              "Notes\n",
              "-----\n",
              "This is the default value for the `edge_color_mapping` property.\n",
              "Can be &#x27;overwritten&#x27; by setting the property\n",
              "with a function of the same signature.\n",
              "\n",
              "If the given mapping function has only one parameter (that is not typed as int),\n",
              "then it will be called with the element (typing.Dict) as first parameter.\n",
              "\n",
              "Example\n",
              "-------\n",
              ".. code::\n",
              "\n",
              "   from yfiles_jupyter_graphs import GraphWidget\n",
              "   w = GraphWidget()\n",
              "   def custom_edge_color_mapping(edge: typing.Dict):\n",
              "   ...\n",
              "   w.set_edge_color_mapping(custom_edge_color_mapping)\n",
              "\n",
              "Returns\n",
              "-------\n",
              "color: str\n",
              "    css color value\n",
              "\n",
              "References\n",
              "----------\n",
              "css color value &lt;https://developer.mozilla.org/en-US/docs/Web/CSS/color_value&gt;\n",
              "\n",
              "yFiles docs Fill api &lt;https://docs.yworks.com/yfileshtml/#/api/Fill&gt;</pre>\n",
              "      <script>\n",
              "      if (google.colab.kernel.accessAllowed && google.colab.files && google.colab.files.view) {\n",
              "        for (const element of document.querySelectorAll('.filepath')) {\n",
              "          element.style.display = 'block'\n",
              "          element.onclick = (event) => {\n",
              "            event.preventDefault();\n",
              "            event.stopPropagation();\n",
              "            google.colab.files.view(element.textContent, 1590);\n",
              "          };\n",
              "        }\n",
              "      }\n",
              "      for (const element of document.querySelectorAll('.function-repr-contents')) {\n",
              "        element.onclick = (event) => {\n",
              "          event.preventDefault();\n",
              "          event.stopPropagation();\n",
              "          element.classList.toggle('function-repr-contents-collapsed');\n",
              "        };\n",
              "      }\n",
              "      </script>\n",
              "      </div>"
            ]
          },
          "metadata": {},
          "execution_count": 15
        }
      ],
      "source": [
        "w2.del_edge_color_mapping()\n",
        "w2.get_edge_color_mapping()"
      ]
    }
  ],
  "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.11.3"
    },
    "colab": {
      "provenance": []
    },
    "widgets": {
      "application/vnd.jupyter.widget-state+json": {
        "d60ce03297f949468da42187a0463ee8": {
          "model_module": "yfiles-jupyter-graphs",
          "model_name": "GraphModel",
          "model_module_version": "^1.8.1",
          "state": {
            "_context_pane_mapping": [
              {
                "id": "Neighborhood",
                "title": "Neighborhood"
              },
              {
                "id": "Data",
                "title": "Data"
              },
              {
                "id": "Search",
                "title": "Search"
              },
              {
                "id": "About",
                "title": "About"
              }
            ],
            "_data_importer": "networkx",
            "_directed": false,
            "_dom_classes": [],
            "_edges": [
              {
                "id": 0,
                "start": 0,
                "end": 3,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 1,
                "start": 0,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 2,
                "start": 1,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 3,
                "start": 2,
                "end": 5,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 4,
                "start": 2,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 5,
                "start": 2,
                "end": 7,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 6,
                "start": 3,
                "end": 8,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 7,
                "start": 3,
                "end": 9,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 8,
                "start": 4,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 9,
                "start": 5,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              }
            ],
            "_graph_layout": {},
            "_highlight": [],
            "_license": {},
            "_model_module": "yfiles-jupyter-graphs",
            "_model_module_version": "^1.8.1",
            "_model_name": "GraphModel",
            "_neighborhood": {},
            "_nodes": [
              {
                "id": 0,
                "properties": {
                  "label": "0"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "0",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 1,
                "properties": {
                  "label": "1"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "1",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 2,
                "properties": {
                  "label": "2"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "2",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 3,
                "properties": {
                  "label": "3"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "3",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 4,
                "properties": {
                  "label": "4"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "4",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 5,
                "properties": {
                  "label": "5"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "5",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 6,
                "properties": {
                  "label": "6"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "6",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 7,
                "properties": {
                  "label": "7"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "7",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 8,
                "properties": {
                  "label": "8"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "8",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 9,
                "properties": {
                  "label": "9"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "9",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              }
            ],
            "_overview": {
              "enabled": null,
              "overview_set": false
            },
            "_selected_graph": [
              [],
              []
            ],
            "_sidebar": {
              "enabled": false,
              "start_with": null
            },
            "_view_count": null,
            "_view_module": "yfiles-jupyter-graphs",
            "_view_module_version": "^1.8.1",
            "_view_name": "GraphView",
            "layout": "IPY_MODEL_7ca3c5ce3646409cac69432128cf8590",
            "tabbable": null,
            "tooltip": null
          }
        },
        "7ca3c5ce3646409cac69432128cf8590": {
          "model_module": "@jupyter-widgets/base",
          "model_name": "LayoutModel",
          "model_module_version": "2.0.0",
          "state": {
            "_model_module": "@jupyter-widgets/base",
            "_model_module_version": "2.0.0",
            "_model_name": "LayoutModel",
            "_view_count": null,
            "_view_module": "@jupyter-widgets/base",
            "_view_module_version": "2.0.0",
            "_view_name": "LayoutView",
            "align_content": null,
            "align_items": null,
            "align_self": null,
            "border_bottom": null,
            "border_left": null,
            "border_right": null,
            "border_top": null,
            "bottom": null,
            "display": null,
            "flex": null,
            "flex_flow": null,
            "grid_area": null,
            "grid_auto_columns": null,
            "grid_auto_flow": null,
            "grid_auto_rows": null,
            "grid_column": null,
            "grid_gap": null,
            "grid_row": null,
            "grid_template_areas": null,
            "grid_template_columns": null,
            "grid_template_rows": null,
            "height": "500px",
            "justify_content": null,
            "justify_items": null,
            "left": null,
            "margin": null,
            "max_height": null,
            "max_width": null,
            "min_height": null,
            "min_width": null,
            "object_fit": null,
            "object_position": null,
            "order": null,
            "overflow": null,
            "padding": null,
            "right": null,
            "top": null,
            "visibility": null,
            "width": "100%"
          }
        },
        "11a82b6f70214c08b4e3226c1cea0525": {
          "model_module": "yfiles-jupyter-graphs",
          "model_name": "GraphModel",
          "model_module_version": "^1.8.1",
          "state": {
            "_context_pane_mapping": [
              {
                "id": "Neighborhood",
                "title": "Neighborhood"
              },
              {
                "id": "Data",
                "title": "Data"
              },
              {
                "id": "Search",
                "title": "Search"
              },
              {
                "id": "About",
                "title": "About"
              }
            ],
            "_data_importer": "networkx",
            "_directed": false,
            "_dom_classes": [],
            "_edges": [
              {
                "id": 0,
                "start": 0,
                "end": 3,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 1,
                "start": 0,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 2,
                "start": 1,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 3,
                "start": 2,
                "end": 5,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 4,
                "start": 2,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 5,
                "start": 2,
                "end": 7,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 6,
                "start": 3,
                "end": 8,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 7,
                "start": 3,
                "end": 9,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 8,
                "start": 4,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 9,
                "start": 5,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              }
            ],
            "_graph_layout": {},
            "_highlight": [],
            "_license": {},
            "_model_module": "yfiles-jupyter-graphs",
            "_model_module_version": "^1.8.1",
            "_model_name": "GraphModel",
            "_neighborhood": {},
            "_nodes": [
              {
                "id": 0,
                "properties": {
                  "label": "0"
                },
                "color": "#ff8800",
                "styles": {},
                "label": "0",
                "scale_factor": 1,
                "type": "#ff8800",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 1,
                "properties": {
                  "label": "1"
                },
                "color": "#0096C7",
                "styles": {},
                "label": "1",
                "scale_factor": 1,
                "type": "#0096C7",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 2,
                "properties": {
                  "label": "2"
                },
                "color": "#ff8800",
                "styles": {},
                "label": "2",
                "scale_factor": 1,
                "type": "#ff8800",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 3,
                "properties": {
                  "label": "3"
                },
                "color": "#0096C7",
                "styles": {},
                "label": "3",
                "scale_factor": 1,
                "type": "#0096C7",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 4,
                "properties": {
                  "label": "4"
                },
                "color": "#ff8800",
                "styles": {},
                "label": "4",
                "scale_factor": 1,
                "type": "#ff8800",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 5,
                "properties": {
                  "label": "5"
                },
                "color": "#0096C7",
                "styles": {},
                "label": "5",
                "scale_factor": 1,
                "type": "#0096C7",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 6,
                "properties": {
                  "label": "6"
                },
                "color": "#ff8800",
                "styles": {},
                "label": "6",
                "scale_factor": 1,
                "type": "#ff8800",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 7,
                "properties": {
                  "label": "7"
                },
                "color": "#0096C7",
                "styles": {},
                "label": "7",
                "scale_factor": 1,
                "type": "#0096C7",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 8,
                "properties": {
                  "label": "8"
                },
                "color": "#ff8800",
                "styles": {},
                "label": "8",
                "scale_factor": 1,
                "type": "#ff8800",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 9,
                "properties": {
                  "label": "9"
                },
                "color": "#0096C7",
                "styles": {},
                "label": "9",
                "scale_factor": 1,
                "type": "#0096C7",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              }
            ],
            "_overview": {
              "enabled": null,
              "overview_set": false
            },
            "_selected_graph": [
              [],
              []
            ],
            "_sidebar": {
              "enabled": false,
              "start_with": null
            },
            "_view_count": null,
            "_view_module": "yfiles-jupyter-graphs",
            "_view_module_version": "^1.8.1",
            "_view_name": "GraphView",
            "layout": "IPY_MODEL_d86065c3d95c4f0e9fd290d6ba251101",
            "tabbable": null,
            "tooltip": null
          }
        },
        "d86065c3d95c4f0e9fd290d6ba251101": {
          "model_module": "@jupyter-widgets/base",
          "model_name": "LayoutModel",
          "model_module_version": "2.0.0",
          "state": {
            "_model_module": "@jupyter-widgets/base",
            "_model_module_version": "2.0.0",
            "_model_name": "LayoutModel",
            "_view_count": null,
            "_view_module": "@jupyter-widgets/base",
            "_view_module_version": "2.0.0",
            "_view_name": "LayoutView",
            "align_content": null,
            "align_items": null,
            "align_self": null,
            "border_bottom": null,
            "border_left": null,
            "border_right": null,
            "border_top": null,
            "bottom": null,
            "display": null,
            "flex": null,
            "flex_flow": null,
            "grid_area": null,
            "grid_auto_columns": null,
            "grid_auto_flow": null,
            "grid_auto_rows": null,
            "grid_column": null,
            "grid_gap": null,
            "grid_row": null,
            "grid_template_areas": null,
            "grid_template_columns": null,
            "grid_template_rows": null,
            "height": "500px",
            "justify_content": null,
            "justify_items": null,
            "left": null,
            "margin": null,
            "max_height": null,
            "max_width": null,
            "min_height": null,
            "min_width": null,
            "object_fit": null,
            "object_position": null,
            "order": null,
            "overflow": null,
            "padding": null,
            "right": null,
            "top": null,
            "visibility": null,
            "width": "100%"
          }
        },
        "e6cb7a463af243949c218e7be1d6aec3": {
          "model_module": "yfiles-jupyter-graphs",
          "model_name": "GraphModel",
          "model_module_version": "^1.8.1",
          "state": {
            "_context_pane_mapping": [
              {
                "id": "Neighborhood",
                "title": "Neighborhood"
              },
              {
                "id": "Data",
                "title": "Data"
              },
              {
                "id": "Search",
                "title": "Search"
              },
              {
                "id": "About",
                "title": "About"
              }
            ],
            "_data_importer": "networkx",
            "_directed": false,
            "_dom_classes": [],
            "_edges": [
              {
                "id": 0,
                "start": 0,
                "end": 3,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 1,
                "start": 0,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 2,
                "start": 1,
                "end": 4,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 3,
                "start": 2,
                "end": 5,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 4,
                "start": 2,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 5,
                "start": 2,
                "end": 7,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 6,
                "start": 3,
                "end": 8,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 7,
                "start": 3,
                "end": 9,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 8,
                "start": 4,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#D6B4FC",
                "thickness_factor": 1,
                "directed": false
              },
              {
                "id": 9,
                "start": 5,
                "end": 6,
                "properties": {},
                "label": "",
                "color": "#15AFAC",
                "thickness_factor": 1,
                "directed": false
              }
            ],
            "_graph_layout": {},
            "_highlight": [],
            "_license": {},
            "_model_module": "yfiles-jupyter-graphs",
            "_model_module_version": "^1.8.1",
            "_model_name": "GraphModel",
            "_neighborhood": {},
            "_nodes": [
              {
                "id": 0,
                "properties": {
                  "label": "0"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "0",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 1,
                "properties": {
                  "label": "1"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "1",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 2,
                "properties": {
                  "label": "2"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "2",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 3,
                "properties": {
                  "label": "3"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "3",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 4,
                "properties": {
                  "label": "4"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "4",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 5,
                "properties": {
                  "label": "5"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "5",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 6,
                "properties": {
                  "label": "6"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "6",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 7,
                "properties": {
                  "label": "7"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "7",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 8,
                "properties": {
                  "label": "8"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "8",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              },
              {
                "id": 9,
                "properties": {
                  "label": "9"
                },
                "color": "#15AFAC",
                "styles": {},
                "label": "9",
                "scale_factor": 1,
                "type": "#15AFAC",
                "size": [
                  55,
                  55
                ],
                "position": [
                  0,
                  0
                ]
              }
            ],
            "_overview": {
              "enabled": null,
              "overview_set": false
            },
            "_selected_graph": [
              [],
              []
            ],
            "_sidebar": {
              "enabled": false,
              "start_with": null
            },
            "_view_count": null,
            "_view_module": "yfiles-jupyter-graphs",
            "_view_module_version": "^1.8.1",
            "_view_name": "GraphView",
            "layout": "IPY_MODEL_d0b258aae1554449b1c0c9ce3f824e04",
            "tabbable": null,
            "tooltip": null
          }
        },
        "d0b258aae1554449b1c0c9ce3f824e04": {
          "model_module": "@jupyter-widgets/base",
          "model_name": "LayoutModel",
          "model_module_version": "2.0.0",
          "state": {
            "_model_module": "@jupyter-widgets/base",
            "_model_module_version": "2.0.0",
            "_model_name": "LayoutModel",
            "_view_count": null,
            "_view_module": "@jupyter-widgets/base",
            "_view_module_version": "2.0.0",
            "_view_name": "LayoutView",
            "align_content": null,
            "align_items": null,
            "align_self": null,
            "border_bottom": null,
            "border_left": null,
            "border_right": null,
            "border_top": null,
            "bottom": null,
            "display": null,
            "flex": null,
            "flex_flow": null,
            "grid_area": null,
            "grid_auto_columns": null,
            "grid_auto_flow": null,
            "grid_auto_rows": null,
            "grid_column": null,
            "grid_gap": null,
            "grid_row": null,
            "grid_template_areas": null,
            "grid_template_columns": null,
            "grid_template_rows": null,
            "height": "500px",
            "justify_content": null,
            "justify_items": null,
            "left": null,
            "margin": null,
            "max_height": null,
            "max_width": null,
            "min_height": null,
            "min_width": null,
            "object_fit": null,
            "object_position": null,
            "order": null,
            "overflow": null,
            "padding": null,
            "right": null,
            "top": null,
            "visibility": null,
            "width": "100%"
          }
        }
      }
    }
  },
  "nbformat": 4,
  "nbformat_minor": 5
}