interactive-data-visualization-dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "colab_type": "text",
    "id": "view-in-github"
   },
   "source": [
    "<a href=\"https://colab.research.google.com/github/hluling/ph-dash/blob/master/interactive-data-visualization-dashboard.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "IbJr4GycNaPw"
   },
   "source": [
    "# Creating a Dashboard for Interactive Data Visualization with Dash in Python\n",
    "Use this notebook for testing specific lines of code for the first research question (RQ1)\n",
    "\n",
    "Refer to [the lesson](https://programminghistorian.github.io/ph-submissions/en/drafts/originals/interactive-data-visualization-dashboard)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "rYoXTNPqrBSP"
   },
   "source": [
    "## Coding the Dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "L8woGPICS3Gn"
   },
   "outputs": [],
   "source": [
    "# you may need to install and upgrade the following libraries\n",
    "# !pip install dash --upgrade\n",
    "# !pip install jupyter_dash --upgrade\n",
    "# !pip install dash_bootstrap_components --upgrade"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "EhVkee45rQD4"
   },
   "source": [
    "### Import Libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "id": "RBB2W02wQDUA"
   },
   "outputs": [],
   "source": [
    "import datetime\n",
    "import requests\n",
    "import pandas as pd\n",
    "from io import StringIO\n",
    "from datetime import date\n",
    "import dash\n",
    "from jupyter_dash import JupyterDash\n",
    "from dash import dcc\n",
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "import dash_bootstrap_components as dbc\n",
    "import plotly.express as px"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "O81T4OidrT-h"
   },
   "source": [
    "### Retrieve Data Using API"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "id": "m9jav932QDKm"
   },
   "outputs": [],
   "source": [
    "today = date.today()\n",
    "today_str = today.strftime(\"%Y%m%d\")\n",
    "start_day = today - datetime.timedelta(365)\n",
    "start_day_str = start_day.strftime(\"%Y%m%d\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "P4zhn4XHuVVP"
   },
   "source": [
    "Code explanation: We first define a range of dates for the complete dataset we want to retrieve using the API. The goal here is to create two string objects: `today_str` and `start_day_str`. Note that here we restrict the range to be 365 days for demonstration purpose only."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "id": "bpMboAFYv1Ey"
   },
   "outputs": [],
   "source": [
    "query_url_ukr = f\"https://api.gdeltproject.org/api/v2/tv/tv?query=(ukraine%20OR%20ukrainian%20OR%20zelenskyy%20OR%20zelensky%20OR%20kiev%20OR%20kyiv)%20market:%22National%22&mode=timelinevol&format=html&datanorm=perc&format=csv&timelinesmooth=5&datacomb=sep&timezoom=yes&STARTDATETIME={start_day_str}120000&ENDDATETIME={today_str}120000\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "id": "s2YIkQKQv1E3"
   },
   "outputs": [],
   "source": [
    "query_url_rus = f\"https://api.gdeltproject.org/api/v2/tv/tv?query=(kremlin%20OR%20russia%20OR%20putin%20OR%20moscow%20OR%20russian)%20market:%22National%22&mode=timelinevol&format=html&datanorm=perc&format=csv&timelinesmooth=5&datacomb=sep&timezoom=yes&STARTDATETIME={start_day_str}120000&ENDDATETIME={today_str}120000\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "1npBOgbEv409"
   },
   "source": [
    "Code explanation: We create two string objects for query: one for Ukraine-related terms and one for Russia-related terms. The parameters to be specified include keywords, geographic market, output mode, output format, range of dates, etc. See [this documentation](https://blog.gdeltproject.org/gdelt-2-0-television-api-debuts/) for a complete description of query parameters."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "id": "I-5TnQJkyuIW"
   },
   "outputs": [],
   "source": [
    "def to_df(queryurl):\n",
    "    response = requests.get(queryurl)\n",
    "    content_text = StringIO(response.content.decode('utf-8'))\n",
    "    df = pd.read_csv(content_text)\n",
    "    return df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "qRxIHn2py1Zz"
   },
   "source": [
    "Code explanation: Now we use the `requests` library to execute the queries and transform the query results into a `pandas` dataframe. To do this, we create a function called `to_df()` to streamline the workflow."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "id": "2VbbFilTv1E3"
   },
   "outputs": [],
   "source": [
    "df_ukr = to_df(query_url_ukr)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "id": "l5J65PMov1E3"
   },
   "outputs": [],
   "source": [
    "df_rus = to_df(query_url_rus)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 206
    },
    "id": "xb8M76LJzhXk",
    "outputId": "02711304-82e7-4a46-99b2-bbea63db93d7"
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Date (Daily +00:00: 05/13/2023 - 05/10/2024)</th>\n",
       "      <th>Series</th>\n",
       "      <th>Value</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>2023-05-17</td>\n",
       "      <td>BLOOMBERG</td>\n",
       "      <td>1.2631</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>2023-05-18</td>\n",
       "      <td>BLOOMBERG</td>\n",
       "      <td>1.6240</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>2023-05-19</td>\n",
       "      <td>BLOOMBERG</td>\n",
       "      <td>1.4818</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>2023-05-20</td>\n",
       "      <td>BLOOMBERG</td>\n",
       "      <td>1.1881</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>2023-05-21</td>\n",
       "      <td>BLOOMBERG</td>\n",
       "      <td>1.9917</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "  Date (Daily +00:00: 05/13/2023 - 05/10/2024)     Series   Value\n",
       "0                                   2023-05-17  BLOOMBERG  1.2631\n",
       "1                                   2023-05-18  BLOOMBERG  1.6240\n",
       "2                                   2023-05-19  BLOOMBERG  1.4818\n",
       "3                                   2023-05-20  BLOOMBERG  1.1881\n",
       "4                                   2023-05-21  BLOOMBERG  1.9917"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Take a look at the retrieved dataframe\n",
    "df_ukr.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "xPm_prsczqyo"
   },
   "source": [
    "So now we have two dataframes: one for Ukraine and one for Russia. In either, there are three columns: date, station, and relative frequency of keyword mentions (from left to right).\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "lYfDFqyp0QJu"
   },
   "source": [
    "### Clean Data for Further Use"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "id": "6HC5oLF2v1E3"
   },
   "outputs": [],
   "source": [
    "# Rename the first column to something shorter for convenience\n",
    "df_ukr = df_ukr.rename(columns={df_ukr.columns[0]: \"date_col\"})\n",
    "df_rus = df_rus.rename(columns={df_rus.columns[0]: \"date_col\"})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "id": "eKuH6_lbv1E3"
   },
   "outputs": [],
   "source": [
    "# Transform the first column to the datetime format\n",
    "df_ukr['date_col'] = pd.to_datetime(df_ukr['date_col'])\n",
    "df_rus['date_col'] = pd.to_datetime(df_rus['date_col'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "id": "c2IPp3rLv1E4"
   },
   "outputs": [],
   "source": [
    "# Select three stations for comparison\n",
    "# CNN: Presumed to represent an ideological middle ground\n",
    "# FOXNEWS: Presumed to represent the ideological conservative\n",
    "# MSNBC: Presumed to represent the ideological liberal\n",
    "df_rus = df_rus[[x in ['CNN', 'FOXNEWS', 'MSNBC'] for x in df_rus.Series]]\n",
    "df_ukr = df_ukr[[x in ['CNN', 'FOXNEWS', 'MSNBC'] for x in df_ukr.Series]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>date_col</th>\n",
       "      <th>Series</th>\n",
       "      <th>Value</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>720</th>\n",
       "      <td>2023-05-17</td>\n",
       "      <td>CNN</td>\n",
       "      <td>3.9329</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>721</th>\n",
       "      <td>2023-05-18</td>\n",
       "      <td>CNN</td>\n",
       "      <td>3.7608</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>722</th>\n",
       "      <td>2023-05-19</td>\n",
       "      <td>CNN</td>\n",
       "      <td>4.2881</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>723</th>\n",
       "      <td>2023-05-20</td>\n",
       "      <td>CNN</td>\n",
       "      <td>5.2805</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>724</th>\n",
       "      <td>2023-05-21</td>\n",
       "      <td>CNN</td>\n",
       "      <td>5.8981</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3235</th>\n",
       "      <td>2024-05-06</td>\n",
       "      <td>MSNBC</td>\n",
       "      <td>0.3536</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3236</th>\n",
       "      <td>2024-05-07</td>\n",
       "      <td>MSNBC</td>\n",
       "      <td>0.3777</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3237</th>\n",
       "      <td>2024-05-08</td>\n",
       "      <td>MSNBC</td>\n",
       "      <td>0.3917</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3238</th>\n",
       "      <td>2024-05-09</td>\n",
       "      <td>MSNBC</td>\n",
       "      <td>0.4252</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3239</th>\n",
       "      <td>2024-05-10</td>\n",
       "      <td>MSNBC</td>\n",
       "      <td>0.5889</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>1080 rows × 3 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "       date_col Series   Value\n",
       "720  2023-05-17    CNN  3.9329\n",
       "721  2023-05-18    CNN  3.7608\n",
       "722  2023-05-19    CNN  4.2881\n",
       "723  2023-05-20    CNN  5.2805\n",
       "724  2023-05-21    CNN  5.8981\n",
       "...         ...    ...     ...\n",
       "3235 2024-05-06  MSNBC  0.3536\n",
       "3236 2024-05-07  MSNBC  0.3777\n",
       "3237 2024-05-08  MSNBC  0.3917\n",
       "3238 2024-05-09  MSNBC  0.4252\n",
       "3239 2024-05-10  MSNBC  0.5889\n",
       "\n",
       "[1080 rows x 3 columns]"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_ukr"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "oDjUDl6DvWTf"
   },
   "source": [
    "### Initiate a Dashboard Instance\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "id": "-4iYibplvWb3",
    "outputId": "4335047d-89be-454d-a4d2-071cd9df72a4"
   },
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/usr/local/lib/python3.10/dist-packages/dash/dash.py:525: UserWarning:\n",
      "\n",
      "JupyterDash is deprecated, use Dash instead.\n",
      "See https://dash.plotly.com/dash-in-jupyter for more details.\n",
      "\n"
     ]
    }
   ],
   "source": [
    "app = JupyterDash(__name__, external_stylesheets=[dbc.themes.LITERA]) # for here use JupyterDash in a Jupyter environment\n",
    "server = app.server"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "0xhsGUXdvWiq"
   },
   "source": [
    "Code explanation: This is just the formalities of creating a dashboard. To use a template that controls how our dashboard will look, we use the LITERA theme from [Dash Bootstrap Components](https://dash-bootstrap-components.opensource.faculty.ai/)(`dbc`). You can choose any theme you prefer from [this list](https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/).  "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "C4f5HJHXvWzf"
   },
   "source": [
    "### Coding the Frontend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "id": "JJhCgd_PvWsA"
   },
   "outputs": [],
   "source": [
    "app.layout = dbc.Container(\n",
    "    [   dbc.Row([ # row 1\n",
    "        dbc.Col([html.H1('US National Television News Coverage of the War in Ukraine')],\n",
    "        className=\"text-center mt-3 mb-1\")\n",
    "    ]\n",
    "    ),\n",
    "        dbc.Row([ # row 2\n",
    "            dbc.Label(\"Select a date range:\", className=\"fw-bold\")\n",
    "    ]),\n",
    "\n",
    "     dbc.Row([ # row 3\n",
    "              dcc.DatePickerRange(\n",
    "                id='date-range',\n",
    "                min_date_allowed=df_ukr['date_col'].min().date(),\n",
    "                max_date_allowed=df_ukr['date_col'].max().date(),\n",
    "                initial_visible_month=df_ukr['date_col'].min().date(),\n",
    "                start_date=df_ukr['date_col'].min().date(),\n",
    "                end_date=df_ukr['date_col'].max().date()\n",
    "              )\n",
    "    ]),\n",
    "\n",
    "     dbc.Row([ # row 4\n",
    "              dbc.Col(dcc.Graph(id='line-graph-ukr'),\n",
    "                      )\n",
    "     ]),\n",
    "\n",
    "    dbc.Row([ # row 5\n",
    "              dbc.Col(dcc.Graph(id='line-graph-rus'),\n",
    "                      )\n",
    "     ])\n",
    "\n",
    "    ])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "q0kG7yOZOw2k"
   },
   "source": [
    "Code explanation: Here, we need to think about the dashboard layout as a grid with rows and columns. In our dashboard, we have five rows from top to bottom: title, instruction text for the date-range selector, data-range selector, the first line graph, and the second line graph. If you want to add columns within a row, you can easily do so by nesting two `dbc.Col` components under the same `dbc.Row` component. Below is an example of placing the two line graphs side by side on the same row:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "ixowlCrcP5fQ"
   },
   "outputs": [],
   "source": [
    "dbc.Row([\n",
    "          dbc.Col(dcc.Graph(id='line-graph-ukr'),\n",
    "                  ),\n",
    "          dbc.Col(dcc.Graph(id='line-graph-rus'),\n",
    "                  )\n",
    "  ])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "E2n-twuZVu5I"
   },
   "source": [
    "Also important to note in the frontend code above is that we explicitly give names to those components that are involved in user interaction. In our case, we have three such components: the data-range selector as input and the two line graphs as output (i.e., reacting to any update in the date-range selector triggered by a user). The names of these components are created using the `id` parameter. These names are very important when we code the backend."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "2g9sHVW5UIJb"
   },
   "source": [
    "### Coding the Backend"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "id": "ZD0qsQyHQG0n"
   },
   "outputs": [],
   "source": [
    "# callback decorator\n",
    "@app.callback(\n",
    "    Output('line-graph-ukr', 'figure'),\n",
    "    Output('line-graph-rus', 'figure'),\n",
    "    Input('date-range', 'start_date'),\n",
    "    Input('date-range', 'end_date')\n",
    ")\n",
    "\n",
    "# callback function\n",
    "def update_output(start_date, end_date):\n",
    "    # filter dataframes based on updated data range\n",
    "    mask_ukr = (df_ukr['date_col'] >= start_date) & (df_ukr['date_col'] <= end_date)\n",
    "    mask_rus = (df_rus['date_col'] >= start_date) & (df_rus['date_col'] <= end_date)\n",
    "    df_ukr_filtered = df_ukr.loc[mask_ukr]\n",
    "    df_rus_filtered = df_rus.loc[mask_rus]\n",
    "\n",
    "    # create line graphs based on filtered dataframes\n",
    "    line_fig_ukr = px.line(df_ukr_filtered, x=\"date_col\", y=\"Value\",\n",
    "                     color='Series', title=\"Coverage of Ukrainian Keywords\")\n",
    "    line_fig_rus = px.line(df_rus_filtered, x='date_col', y='Value',\n",
    "                     color='Series', title=\"Coverage of Russian Keywords\")\n",
    "\n",
    "    # set x-axis title and y-axis title in line graphs\n",
    "    line_fig_ukr.update_layout(\n",
    "                   xaxis_title='Date',\n",
    "                   yaxis_title='Percentage of Airtime')\n",
    "    line_fig_rus.update_layout(\n",
    "                   xaxis_title='Date',\n",
    "                   yaxis_title='Percentage of Airtime')\n",
    "\n",
    "    # set label format on y-axis in line graphs\n",
    "    line_fig_ukr.update_xaxes(tickformat=\"%b %d<br>%Y\")\n",
    "    line_fig_rus.update_xaxes(tickformat=\"%b %d<br>%Y\")\n",
    "\n",
    "    return line_fig_ukr, line_fig_rus"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "sglD9KqqUNKl"
   },
   "source": [
    "Code explanation: In the backend, the core concepts are *callback decorator* and *callback function*. In the above code, `@app.callback`, the callback decorator, defines which output variables and input variables are included in a user interaction. For example, remember that when we code the frontend, we name the line graph for Ukraine as 'line-graph-ukr'. Now we refer this name in one of our Output variable. The parameter 'figure' specifies which property of the referred component is updated when needed.<br>\n",
    "\n",
    "The callback function, `update_output()`, defines how the interaction occurs: The two line graphs are updated whenever the start date or the end date in the date-range selector is changed by a user. This is called *reactive programming*, similar to [the server logic used in R Shiny](https://programminghistorian.org/en/lessons/shiny-leaflet-newspaper-map-tutorial#shiny-and-reactive-programming). More detailed explanations are provided as comments in the above code. Note that the two returned objects (`line_fig_ukr` and `line_fig_rus`) should be ordered in the same way as how the output variables are ordered in the callback decorator (i.e., Ukraine's line graph goes first)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "pIIVNR-Gsqn3"
   },
   "source": [
    "### Testing the Dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "-eek-i_fQfJW"
   },
   "outputs": [],
   "source": [
    "app.run_server(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "Ui_7gekgsxWe"
   },
   "source": [
    "Code explanation: Now we can run the above code to actually see and test the created dashboard. It is recommended to turn on the debug mode so that any errors can be looked into when needed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "MzsRaPZrS3Gt"
   },
   "outputs": [],
   "source": [
    "# or\n",
    "app.run_server(debug=True, mode=\"inline\")\n",
    "# this may not work in Google Colab"
   ]
  }
 ],
 "metadata": {
  "colab": {
   "collapsed_sections": [
    "GxDO2jMduLiP",
    "t6rviedqZHoN"
   ],
   "include_colab_link": true,
   "provenance": [],
   "toc_visible": true
  },
  "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.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}