Finnland_Urbanisation_Dashbord_Plotly_with_Dash.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "authorship_tag": "ABX9TyPkhW2OofRyfCI0bj9pwNF5",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/ErtanOz/PythonGIS/blob/main/Finnland_Urbanisation_Dashbord_Plotly_with_Dash.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "pip install dash_bootstrap_components\n"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "n-OU6ck1waUW",
        "outputId": "ffac84ba-9d84-4219-a150-90efbf65a046"
      },
      "execution_count": 4,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Collecting dash_bootstrap_components\n",
            "  Downloading dash_bootstrap_components-1.6.0-py3-none-any.whl (222 kB)\n",
            "\u001b[?25l     \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m0.0/222.5 kB\u001b[0m \u001b[31m?\u001b[0m eta \u001b[36m-:--:--\u001b[0m\r\u001b[2K     \u001b[91m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m\u001b[90m╺\u001b[0m\u001b[90m━━━━━━━━\u001b[0m \u001b[32m174.1/222.5 kB\u001b[0m \u001b[31m5.0 MB/s\u001b[0m eta \u001b[36m0:00:01\u001b[0m\r\u001b[2K     \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m222.5/222.5 kB\u001b[0m \u001b[31m4.6 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[?25hRequirement already satisfied: dash>=2.0.0 in /usr/local/lib/python3.10/dist-packages (from dash_bootstrap_components) (2.17.0)\n",
            "Requirement already satisfied: Flask<3.1,>=1.0.4 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (2.2.5)\n",
            "Requirement already satisfied: Werkzeug<3.1 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (3.0.3)\n",
            "Requirement already satisfied: plotly>=5.0.0 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (5.15.0)\n",
            "Requirement already satisfied: dash-html-components==2.0.0 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (2.0.0)\n",
            "Requirement already satisfied: dash-core-components==2.0.0 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (2.0.0)\n",
            "Requirement already satisfied: dash-table==5.0.0 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (5.0.0)\n",
            "Requirement already satisfied: importlib-metadata in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (7.1.0)\n",
            "Requirement already satisfied: typing-extensions>=4.1.1 in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (4.12.1)\n",
            "Requirement already satisfied: requests in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (2.31.0)\n",
            "Requirement already satisfied: retrying in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (1.3.4)\n",
            "Requirement already satisfied: nest-asyncio in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (1.6.0)\n",
            "Requirement already satisfied: setuptools in /usr/local/lib/python3.10/dist-packages (from dash>=2.0.0->dash_bootstrap_components) (67.7.2)\n",
            "Requirement already satisfied: Jinja2>=3.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash>=2.0.0->dash_bootstrap_components) (3.1.4)\n",
            "Requirement already satisfied: itsdangerous>=2.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash>=2.0.0->dash_bootstrap_components) (2.2.0)\n",
            "Requirement already satisfied: click>=8.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash>=2.0.0->dash_bootstrap_components) (8.1.7)\n",
            "Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.10/dist-packages (from plotly>=5.0.0->dash>=2.0.0->dash_bootstrap_components) (8.3.0)\n",
            "Requirement already satisfied: packaging in /usr/local/lib/python3.10/dist-packages (from plotly>=5.0.0->dash>=2.0.0->dash_bootstrap_components) (24.0)\n",
            "Requirement already satisfied: MarkupSafe>=2.1.1 in /usr/local/lib/python3.10/dist-packages (from Werkzeug<3.1->dash>=2.0.0->dash_bootstrap_components) (2.1.5)\n",
            "Requirement already satisfied: zipp>=0.5 in /usr/local/lib/python3.10/dist-packages (from importlib-metadata->dash>=2.0.0->dash_bootstrap_components) (3.19.1)\n",
            "Requirement already satisfied: charset-normalizer<4,>=2 in /usr/local/lib/python3.10/dist-packages (from requests->dash>=2.0.0->dash_bootstrap_components) (3.3.2)\n",
            "Requirement already satisfied: idna<4,>=2.5 in /usr/local/lib/python3.10/dist-packages (from requests->dash>=2.0.0->dash_bootstrap_components) (3.7)\n",
            "Requirement already satisfied: urllib3<3,>=1.21.1 in /usr/local/lib/python3.10/dist-packages (from requests->dash>=2.0.0->dash_bootstrap_components) (2.0.7)\n",
            "Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.10/dist-packages (from requests->dash>=2.0.0->dash_bootstrap_components) (2024.6.2)\n",
            "Requirement already satisfied: six>=1.7.0 in /usr/local/lib/python3.10/dist-packages (from retrying->dash>=2.0.0->dash_bootstrap_components) (1.16.0)\n",
            "Installing collected packages: dash_bootstrap_components\n",
            "Successfully installed dash_bootstrap_components-1.6.0\n"
          ]
        }
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "# -*- coding: utf-8 -*-\n",
        "import pandas as pd\n",
        "from dash import Dash, dcc, html, Input, Output, clientside_callback\n",
        "import dash_bootstrap_components as dbc\n",
        "import plotly.express as px\n",
        "import requests\n",
        "\n",
        "# Data provided by Statistics Finland.\n",
        "# Original data source: https://pxdata.stat.fi/PxWeb/pxweb/en/Kuntien_avainluvut/Kuntien_avainluvut__2021/kuntien_avainluvut_2021_viimeisin.px/\n",
        "df = (\n",
        "    pd.read_csv(\"https://raw.githubusercontent.com/plotly/datasets/master/Dash-Examle-Index/key_figures_regions.csv\", encoding=\"utf-8\")\n",
        "    .rename(columns={\"Region 2021\": \"Region\"})\n",
        "    .set_index(\"Region\")\n",
        ")\n",
        "\n",
        "# Whole country figures on a pandas Dataframe.\n",
        "# Extract information from the key figure names to be used in callbacks.\n",
        "whole_country_df = pd.DataFrame(df.loc[\"WHOLE COUNTRY\"])\n",
        "whole_country_df = whole_country_df.rename(columns={\"WHOLE COUNTRY\": \"value\"})\n",
        "whole_country_df[\"year\"] = [stat.split(\", \")[-1] for stat in whole_country_df.index]\n",
        "whole_country_df[\"unit\"] = [\n",
        "    stat.split(\", \")[-2] if len(stat.split(\", \")) > 2 else \"\"\n",
        "    for stat in whole_country_df.index\n",
        "]\n",
        "whole_country_df[\"stat_name\"] = [\n",
        "    stat.split(\", \")[0]\n",
        "    if len(stat.split(\", \")) < 4\n",
        "    else \", \".join(stat.split(\", \")[:2])\n",
        "    for stat in whole_country_df.index\n",
        "]\n",
        "\n",
        "# Drop since not needed.\n",
        "df.drop(\"WHOLE COUNTRY\", axis=0, inplace=True)\n",
        "\n",
        "# The json file used for the mapbox viz.\n",
        "# https://geo.stat.fi/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typeName=maakunta1000k_2021&outputFormat=json\n",
        "r = requests.get(r\"https://raw.githubusercontent.com/plotly/datasets/master/Dash-Examle-Index/regions.json\")\n",
        "r.encoding='utf-8'\n",
        "regions_json = r.json()\n",
        "\n",
        "external_stylesheets = [dbc.themes.SPACELAB]\n",
        "\n",
        "app = Dash(name=__name__, external_stylesheets=external_stylesheets)\n",
        "\n",
        "app.layout = dbc.Container(\n",
        "    [\n",
        "        html.Div(\n",
        "            \"Finland's Regional Key Figures\",\n",
        "            className=\"text-center mb-3 mt-3 fw-bold display-1\",\n",
        "        ),\n",
        "        dbc.Row(\n",
        "            [\n",
        "                dbc.Col(\n",
        "                    [\n",
        "                        html.H2(\"Key figure\"),\n",
        "                        dcc.Dropdown(\n",
        "                            id=\"key-figure-selection\",\n",
        "                            options=sorted(list(pd.unique(df.columns))),\n",
        "                            value=\"Degree of urbanisation, %, 2020\",\n",
        "                            className=\"text-nowrap\",\n",
        "                        ),\n",
        "                        html.H3(\n",
        "                            id=\"whole-country-header\",\n",
        "                            className=\"mt-5 display-3 text-center\",\n",
        "                        ),\n",
        "                        html.Div(\n",
        "                            [\n",
        "                                \"Data by \",\n",
        "                                html.A(\n",
        "                                    \"Statistics Finland\",\n",
        "                                    href=\"https://pxdata.stat.fi/PxWeb/pxweb/en/Kuntien_avainluvut/Kuntien_avainluvut__2021/kuntien_avainluvut_2021_viimeisin.px/\",\n",
        "                                    target=\"_blank\",\n",
        "                                ),\n",
        "                            ],\n",
        "                            className=\"text-center fs-3 text\",\n",
        "                        ),\n",
        "                    ],\n",
        "                    md=6,\n",
        "                    align=\"center\",\n",
        "                ),\n",
        "                dbc.Col(\n",
        "                    [\n",
        "                        dcc.Graph(\n",
        "                            id=\"region-map\",\n",
        "                            figure=px.choropleth_mapbox(\n",
        "                                center={\"lat\": 64.961093, \"lon\": 25.795386}\n",
        "                            ),\n",
        "                        )\n",
        "                    ],\n",
        "                    md=6,\n",
        "                ),\n",
        "            ],\n",
        "            justify=\"center\",\n",
        "        ),\n",
        "        dcc.Store(id=\"locations\"),\n",
        "        dcc.Store(id=\"zs\"),\n",
        "        dcc.Store(id=\"geojson-data\", data=regions_json),\n",
        "    ],\n",
        "    fluid=True,\n",
        ")\n",
        "\n",
        "\n",
        "@app.callback(\n",
        "    Output(\"whole-country-header\", \"children\"),\n",
        "    Input(\"key-figure-selection\", \"value\"),\n",
        ")\n",
        "def update_whole_country_header(key_figure):\n",
        "    dff = whole_country_df.loc[key_figure]\n",
        "\n",
        "    # Change values with no decimals (.0) to int.\n",
        "    stat_value = {True: int(dff.value), False: dff.value}[\".0\" in str(dff.value)]\n",
        "\n",
        "    return html.Div(\n",
        "        [\n",
        "            html.Div([dff.stat_name, \", \", dff.year]),\n",
        "            html.Div(\"in Finland\"),\n",
        "            html.Span([f\"{stat_value:,}\", \" \", dff.unit]),\n",
        "        ],\n",
        "    )\n",
        "\n",
        "\n",
        "@app.callback(\n",
        "    Output(\"locations\", \"data\"),\n",
        "    Output(\"zs\", \"data\"),\n",
        "    Input(\"key-figure-selection\", \"value\"),\n",
        ")\n",
        "def store_data(key_figure):\n",
        "    dff = df[key_figure]\n",
        "    return list(dff.index), list(dff.values)\n",
        "\n",
        "\n",
        "# Update map on clientside for better performance\n",
        "clientside_callback(\n",
        "    \"\"\"\n",
        "    function(geojson, locations, z){\n",
        "\n",
        "        var layout = {\n",
        "            'height':600,\n",
        "            'mapbox': {'style':'open-street-map','zoom':3.8,'center':{'lat': 64.961093, 'lon': 25.795386}\n",
        "            },\n",
        "            'margin':{'l':0,'t':0,'b':0,'r':0}\n",
        "        };\n",
        "        var data = [{\n",
        "            'type':'choroplethmapbox',\n",
        "            'name':'',\n",
        "            'geojson':geojson,\n",
        "            'locations':locations,\n",
        "            'featureidkey':'properties.name',\n",
        "            'hovertemplate': '<b>%{location}</b><br>%{z:,}',\n",
        "            'hoverlabel':{'font':{'family':'Arial Black', 'size':20, 'color':'black'},'bgcolor':'white'},\n",
        "            'z':z,\n",
        "            'colorscale':'Viridis'\n",
        "        }];\n",
        "        return {'data':data,'layout':layout}\n",
        "    }\n",
        "\"\"\",\n",
        "    Output(\"region-map\", \"figure\"),\n",
        "    Input(\"geojson-data\", \"data\"),\n",
        "    Input(\"locations\", \"data\"),\n",
        "    Input(\"zs\", \"data\"),\n",
        ")\n",
        "\n",
        "if __name__ == \"__main__\":\n",
        "    app.run_server(debug=False)"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 671
        },
        "id": "xIWLiR7JwacU",
        "outputId": "505f6e01-e684-4c15-b0e0-e2bd4abb11f2"
      },
      "execution_count": 5,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "    if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "      return;\n",
              "    }\n",
              "    element.appendChild(document.createTextNode(''));\n",
              "    const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "    const iframe = document.createElement('iframe');\n",
              "    iframe.src = new URL(path, url).toString();\n",
              "    iframe.height = height;\n",
              "    iframe.width = width;\n",
              "    iframe.style.border = 0;\n",
              "    iframe.allow = [\n",
              "        'accelerometer',\n",
              "        'autoplay',\n",
              "        'camera',\n",
              "        'clipboard-read',\n",
              "        'clipboard-write',\n",
              "        'gyroscope',\n",
              "        'magnetometer',\n",
              "        'microphone',\n",
              "        'serial',\n",
              "        'usb',\n",
              "        'xr-spatial-tracking',\n",
              "    ].join('; ');\n",
              "    element.appendChild(iframe);\n",
              "  })(8050, \"/\", \"100%\", 650, false, window.element)"
            ]
          },
          "metadata": {}
        }
      ]
    }
  ]
}