cyto_from_scratch_1.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# PART 1: The super basics"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipycytoscape\n",
    "import json\n",
    "import ipywidgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What is a graph?\n",
    "Mathematical structures used to model pairwise relations between objects. \n",
    "Examples:   \n",
    "- twitter connections.   \n",
    "- Rail net of a country\n",
    "- Post system of a country\n",
    "- Facebook connections.\n",
    "\n",
    "Nomenclature:\n",
    "The basic nomenclature consist in (base on an example of the train rail system)\n",
    "- nodes (railstations) and \n",
    "- edges (rail connections between train stations)\n",
    "\n",
    "Lets use ipycytoscape to dive into graphs.   \n",
    "\n",
    "The basic way to create an ipycytoscape graph is based on a JSON \"data\" as follows.\n",
    "(We will be following the train-rail example)\n",
    "\n",
    "Later on it might be clear that other ways to pass data to ipycytoscape are not only possible but probably desirable in many circunstances. For the moment we pretend to create a really small Graph to up and running understanding Graphs and ipycytoscape.   \n",
    "Moreover be aware that normally the data itself is in an external separate file, but if we would proceed reading the data from an external file we would not be able to see it in the notebook and it would not serve the teaching purpose.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# we create the graph that is an object of ipycytoscape\n",
    "ipycytoscape_obj = ipycytoscape.CytoscapeWidget()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<class 'str'>\n"
     ]
    }
   ],
   "source": [
    "railnet= '''{\n",
    "    \"nodes\": [\n",
    "        {\"data\": { \"id\": \"BER\" }},\n",
    "        {\"data\": { \"id\": \"MUN\"}},\n",
    "        {\"data\": { \"id\": \"FRA\"}},\n",
    "        {\"data\": { \"id\": \"HAM\"}}\n",
    "        ],\n",
    "    \"edges\": [\n",
    "        {\"data\": { \"source\": \"BER\", \"target\": \"MUN\" }},\n",
    "        {\"data\": { \"source\": \"MUN\", \"target\": \"FRA\" }},\n",
    "        {\"data\": { \"source\": \"FRA\", \"target\": \"BER\" }},\n",
    "        {\"data\": { \"source\": \"BER\", \"target\": \"HAM\" }}\n",
    "        \n",
    "    ]\n",
    "  }'''\n",
    "print(type(railnet))\n",
    "railnetJSON = json.loads(railnet)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Lets see how is our mini German rail system that joins the three main German cities BERlin, MUNich and FRAnkfurt\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "ipycytoscape_obj.graph.add_graph_from_json(railnetJSON)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f510ba5ee87e496b8500fc3123e5a06a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'css': {'background-c…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ipycytoscape_obj"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Some observations:\n",
    "- The train stations has a color (but we did not specified that)\n",
    "- Between the train stations there is a connection (edge) representing the rail. Think about this, it can be unidirectional (train goes only in one direction, or bidirectional, the connections are in both directions. This is what \"directionalyty\" stands for.\n",
    "- We dont know which station is which (no names)\n",
    " \n",
    "Lets try to solve that problems.\n",
    "\n",
    "IMPORTANT NOTE: We are creating a new graph every time in order for you to be able to scroll up and down and compare the results."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Direcionality\n",
    "How would have been the JSON file if we dont want directionality?\n",
    "Compare this two graphs one with and the other one without direction."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "187666d32f8848f49b997aa2eb59653a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'css': {'background-c…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ipycytoscape_obj2 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj2.graph.add_graph_from_json(railnetJSON, directed=True) # I am telling I dont want directions\n",
    "ipycytoscape_obj2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "dcea943d8a8c46f5bf6bb9928759000c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'css': {'background-c…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ipycytoscape_obj3 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj3.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj3"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Adding names\n",
    "Lets say we want to see the names of the stations over the nodes.\n",
    "Those names are called labels.\n",
    "We have to add then the corresponding lables to all the nodes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "30dd5fd3982545a0bec262bb8806bf48",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'css': {'background-c…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "railnet= '''{\n",
    "    \"nodes\": [\n",
    "        {\"data\": { \"id\": \"BER\", \"label\":\"HBf BER\"}},\n",
    "        {\"data\": { \"id\": \"MUN\", \"label\":\"HBf MUN\"}},\n",
    "        {\"data\": { \"id\": \"FRA\", \"label\":\"HBf FRA\"}},\n",
    "        {\"data\": { \"id\": \"HAM\", \"label\":\"HBf HAM\"}}\n",
    "        ],\n",
    "    \"edges\": [\n",
    "        {\"data\": { \"source\": \"BER\", \"target\": \"MUN\" }},\n",
    "        {\"data\": { \"source\": \"MUN\", \"target\": \"FRA\" }},\n",
    "        {\"data\": { \"source\": \"FRA\", \"target\": \"BER\" }},\n",
    "        {\"data\": { \"source\": \"BER\", \"target\": \"HAM\" }}\n",
    "        \n",
    "    ]\n",
    "  }'''\n",
    "\n",
    "railnetJSON = json.loads(railnet)\n",
    "ipycytoscape_obj4 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj4.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj4"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "mmmmmm, as you can see we did not achieved our objective of adding the name of the sations-nodes. (btw, HBf states for central main station in German).\n",
    "In order to affect and change the appearance of the graph we have not only to change the data of the graph but the style.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_style = [\n",
    "    {'selector': 'node','style': {\n",
    "        'font-family': 'helvetica',\n",
    "        'font-size': '20px',\n",
    "        'label': 'data(label)'}},\n",
    "    ]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What are we doing here?  \n",
    "We are writing down our style and afterwards we will tell ipycytoscape that the label   data(label) should be printed out and how (helvetica and 20px)  \n",
    "Lets create a new graph with the labels  \n",
    "Take into account that this is a bit of CSS nomenclature.   \n",
    "You select one element and pass a style to that element.   \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "13e3492aa2e446feafab2eb4d762d329",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'style': {'font-famil…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ipycytoscape_obj5 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj5.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj5.set_style(my_style)\n",
    "ipycytoscape_obj5"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Lets just play around and change the size of the font and the type of font.\n",
    "Now what we what to achieve is to change the style of an existing graph, namely the number 5."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ipycytoscape_obj6 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj6.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj6.set_style(my_style)\n",
    "ipycytoscape_obj6 # which is the same as graph 5, but in the next cell we will tray to change it"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "0b1dd34a3621403cb6255bfd2110f005",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'style': {'font-famil…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "my_style = [\n",
    "    {'selector': 'node','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'red'}},\n",
    "    ]\n",
    "ipycytoscape_obj6 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj6.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj6.set_style(my_style)\n",
    "ipycytoscape_obj6 # which is the same\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As you can see when running this last cell the appearance of the graph changed in that the font is different (arial) and the size of the font with respect to the node circle as well. And the circles are now red.\n",
    "The first question that comes to my mind is if I can change the atributes of only one node.\n",
    "Lets see."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "744569ff71c34d299b6a610461222c17",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'style': {'font-famil…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "my_style = [\n",
    "    {'selector': 'node','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'red'}},\n",
    "    \n",
    "    {'selector': 'node[id = \"BER\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'green'}}\n",
    "    \n",
    "    ]\n",
    "ipycytoscape_obj7 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj7.graph.add_graph_from_json(railnetJSON, directed=False) # I am telling I dont want directions\n",
    "ipycytoscape_obj7.set_style(my_style)\n",
    "ipycytoscape_obj7.set_style(my_style)\n",
    "ipycytoscape_obj7"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### What did we do?   \n",
    "We gave a particular style to ALL the nodes ('selector': 'node') and afterwards we gave the color green just to the berlin central station ('node[id = \"BER\"]')   \n",
    "\n",
    "As you can see the way to \"access\" the node is 'node[id = \"BER\"]'.   \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## more customization layout\n",
    "What else can we change in the apperance?   \n",
    "There are a bunch of other atributes of the graph visualization that we can change.  \n",
    "Lets assume that the train connections between the cities are as follows:\n",
    "- BER - HAM -> 300km/h\n",
    "- BER - MUN -> 200km/h\n",
    "- MUN - FRA -> 100km/h\n",
    "- FRA - BER -> 250km/h\n",
    "\n",
    "We can also add information to the edges.\n",
    "We need to think that it is neccesary to add the labels to the edges and also we have to be able to identify every edge."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3d7f4e924ed044598e7b600e6ccb28b6",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'style': {'font-famil…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "railnet= '''{\n",
    "    \"nodes\": [\n",
    "        {\"data\": { \"id\": \"BER\", \"label\":\"HBf BER\"}},\n",
    "        {\"data\": { \"id\": \"MUN\", \"label\":\"HBf MUN\"}},\n",
    "        {\"data\": { \"id\": \"FRA\", \"label\":\"HBf FRA\"}},\n",
    "        {\"data\": { \"id\": \"HAM\", \"label\":\"HBf HAM\"}}\n",
    "        ],\n",
    "    \"edges\": [\n",
    "        {\"data\": { \"id\": \"line1\", \"source\": \"BER\", \"target\": \"MUN\",\"label\":\"200km/h\"}},\n",
    "        {\"data\": { \"id\": \"line2\", \"source\": \"MUN\", \"target\": \"FRA\",\"label\":\"200km/h\"}},\n",
    "        {\"data\": { \"id\": \"line3\", \"source\": \"FRA\", \"target\": \"BER\",\"label\":\"250km/h\" }},\n",
    "        {\"data\": { \"id\": \"line4\", \"source\": \"BER\", \"target\": \"HAM\",\"label\":\"300km/h\" }}\n",
    "        \n",
    "    ]\n",
    "  }'''\n",
    "\n",
    "my_style = [\n",
    "    {'selector': 'node','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'red'}},\n",
    "    \n",
    "    {'selector': 'node[id = \"BER\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'green'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line1\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line2\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line3\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line4\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',}}\n",
    "    \n",
    "    ]\n",
    "railnetJSON = json.loads(railnet)\n",
    "ipycytoscape_obj8 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj8.graph.add_graph_from_json(railnetJSON, directed=True) # I am telling I dont want directions\n",
    "ipycytoscape_obj8.set_style(my_style)\n",
    "ipycytoscape_obj8.set_style(my_style)\n",
    "ipycytoscape_obj8"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Classes. what are they and what for?\n",
    "Now imagine we want to divide the rail net into two parts.   \n",
    "- cities belonging to former east Germany and \n",
    "- cities belonging to former west Germany\n",
    "And paint them in one go with a particular color. One go meaning that I dont want to paint node by node but being able to tell \"paint all the west cities blue and east cities green\".   \n",
    "We can use classes for that.    \n",
    "We add a class to any node.   \n",
    "Lets see it with an example from the very beginning again.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "56f6bfb5829a4b93816d894f12df1743",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'style': {'font-famil…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "railnet= '''{\n",
    "    \"nodes\": [\n",
    "        {\"data\": { \"id\": \"BER\", \"label\":\"HBf BER\", \"classes\":\"east\"}},\n",
    "        {\"data\": { \"id\": \"MUN\", \"label\":\"HBf MUN\", \"classes\":\"west\"}},\n",
    "        {\"data\": { \"id\": \"FRA\", \"label\":\"HBf FRA\", \"classes\":\"west\"}},\n",
    "        {\"data\": { \"id\": \"HAM\", \"label\":\"HBf HAM\", \"classes\":\"west\"}},\n",
    "        {\"data\": { \"id\": \"LEP\", \"label\":\"HBf LEP\", \"classes\":\"east\"}}\n",
    "        ],\n",
    "    \"edges\": [\n",
    "        {\"data\": { \"id\": \"line1\", \"source\": \"BER\", \"target\": \"MUN\",\"label\":\"200km/h\"}},\n",
    "        {\"data\": { \"id\": \"line2\", \"source\": \"MUN\", \"target\": \"FRA\",\"label\":\"200km/h\"}},\n",
    "        {\"data\": { \"id\": \"line3\", \"source\": \"FRA\", \"target\": \"BER\",\"label\":\"250km/h\" }},\n",
    "        {\"data\": { \"id\": \"line4\", \"source\": \"BER\", \"target\": \"HAM\",\"label\":\"300km/h\" }},\n",
    "        {\"data\": { \"id\": \"line5\", \"source\": \"BER\", \"target\": \"LEP\",\"label\":\"300km/h\" }}\n",
    "        \n",
    "    ]\n",
    "  }'''\n",
    "\n",
    "my_style = [\n",
    "    {'selector': 'node','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',}},\n",
    "    \n",
    "    {'selector': 'node[classes=\"east\"]','style': {\n",
    "        'background-color': 'yellow'}},\n",
    "    \n",
    "     {'selector': 'node[classes=\"west\"]','style': {\n",
    "        'background-color': 'blue'}},\n",
    "    \n",
    "    \n",
    "    {'selector': 'node[id = \"BER\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)',\n",
    "        'background-color': 'green'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line1\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line2\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line3\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line4\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)'}},\n",
    "    \n",
    "    {'selector': 'edge[id = \"line5\"]','style': {\n",
    "        'font-family': 'arial',\n",
    "        'font-size': '10px',\n",
    "        'label': 'data(label)'}}\n",
    "    \n",
    "    ]\n",
    "railnetJSON = json.loads(railnet)\n",
    "ipycytoscape_obj9 = ipycytoscape.CytoscapeWidget()\n",
    "ipycytoscape_obj9.graph.add_graph_from_json(railnetJSON, directed=True) # I am telling I dont want directions\n",
    "ipycytoscape_obj9.set_style(my_style)\n",
    "ipycytoscape_obj9"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "What happended?   \n",
    "With    \n",
    "{'selector': 'node[classes=\"east\"]',   \n",
    "'style': {'background-color': 'yellow'}},   \n",
    "\n",
    "We painted all east German cities yellow. BER as well. But Ber color is overwritten by the green color of the BER node."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Next\n",
    "After having undertood this there is a lot of questions open that we will treat in future notebooks.\n",
    "- How to change atributes programatically? for instance if we have an input field with number of passengers the user can input a data and the color of the railstation will become red if the number of passengers per day is greater than 200000\n",
    "- How to add and delete elements of the graph: A new station is built in a population called Cologne. How to add that node and several edges to an existing railnet.\n",
    "- How to add events: You are building an application for the rail company and they want that when the user hovers over the node information about the station pops up for the user to red.\n",
    "\n",
    "stay tuned."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.8.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}