app.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# App for Dataviz"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "\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, State\n",
    "from dash.exceptions import PreventUpdate\n",
    "import plotly.express as px\n",
    "import plotly.colors as pc\n",
    "import plotly.graph_objects as go\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "import math"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## import data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# read dataframe (preprocessed in main.ipynb)\n",
    "df = pd.read_csv(\"data/merged_data_clean.csv\").drop(columns = \"Unnamed: 0\")\n",
    "# df = df.replace(\"Eswatini\",\"Swaziland\")\n",
    "#df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Modify Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# create lookup table for bar chart\n",
    "iso3_countrynames = pd.DataFrame()\n",
    "iso3_countrynames[\"Code\"] = df[\"Code\"].unique()\n",
    "iso3_countrynames[\"Country\"] = df[\"Country\"].unique()\n",
    "#iso3_countrynames"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Load Geojson data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<function FeatureCollection.get(key, default=None, /)>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# source: https://public.opendatasoft.com/explore/dataset/country_shapes/export/ \n",
    "import geojson\n",
    "with open(\"data/country_shapes.geojson\") as f:\n",
    "    gj = geojson.load(f)\n",
    "gj.get"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Color maps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "country_zipper = zip(df[\"Country\"].unique(), pc.sample_colorscale(\"turbo\", df[\"Country\"].unique().size))\n",
    "color_map_country = dict(country_zipper)\n",
    "cause_zipper = zip(df.iloc[0, 5:].index.values,  pc.sample_colorscale(\"greys\", df.iloc[0, 5:].index.values.size))\n",
    "color_map_cause = dict(cause_zipper)\n",
    "# make HIV red\n",
    "color_map_cause.update({\" HIV/AIDS\":'rgb(255, 0, 0)'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "#color_map_cause"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# define color scheme\n",
    "colors = {\n",
    "    'background': 'black',\n",
    "    'text': 'white',\n",
    "    'highlight':'yellow'\n",
    "}\n",
    "darkScheme ={\n",
    "    'backgroundColor':colors['background'],\n",
    "    'color': colors['text']\n",
    "}\n",
    "# define hover style\n",
    "hoverStyle = dict(\n",
    "        bgcolor=\"white\",\n",
    "        font_size=16,\n",
    "        font_family=\"Rockwell\"\n",
    "    )\n",
    "config_dict = {\"displayModeBar\": False, \"showTips\": False, \"scrollZoom\": False, \"showAxisDragHandles\":False, \"showAxisRangeEntryBoxes\": False}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "# the variable that holds our final webAPP\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "# create our map with animations already built in\n",
    "chloropleth = px.choropleth(\n",
    "        df,\n",
    "        geojson=gj,\n",
    "        color=\"Deaths from HIV/AIDS in 100 thousand people\",\n",
    "        locations=\"Code\",\n",
    "        featureidkey=\"properties.cou_iso3_code\",\n",
    "        projection=\"mercator\",\n",
    "        animation_frame=\"Year\", \n",
    "        animation_group=\"Country\",\n",
    "        range_color=[df['Deaths from HIV/AIDS in 100 thousand people'].min(), df[\"Deaths from HIV/AIDS in 100 thousand people\"].max()],\n",
    "        hover_name=df[\"Year\"].astype(str) + \" \" +  df[\"Country\"],\n",
    "        hover_data={\"Deaths from HIV/AIDS in 100 thousand people\" : \":.1f\",\n",
    "                        \"Life expectancy\": \":.1f\",\n",
    "                        \"Code\":False,\n",
    "                        \"Year\":False,\n",
    "                        \"Country\":False},\n",
    "        custom_data=[\"Code\"],\n",
    "        color_continuous_scale='reds'\n",
    "        )\n",
    "# chloropleth.update_traces(colorbar_orientation='h', selector=dict(type='chloropleth'))\n",
    "chloropleth.update_coloraxes(\n",
    "        colorbar_thicknessmode=\"pixels\",\n",
    "        colorbar_orientation='h',\n",
    "        colorbar_thickness=10,\n",
    "        colorbar_lenmode=\"fraction\",\n",
    "        colorbar_len=0.5,\n",
    "        colorbar_title_side=\"right\"\n",
    ")\n",
    "chloropleth.update_geos(fitbounds=\"locations\", visible=False)\n",
    "chloropleth.update_layout(margin={\"r\":0,\"t\":0,\"l\":0,\"b\":0},\n",
    "                             autosize = True,\n",
    "                             legend=dict(\n",
    "                                orientation=\"h\",\n",
    "                                yanchor=\"bottom\",\n",
    "                                y=1.02,\n",
    "                                xanchor=\"left\",\n",
    "                                x=0\n",
    "                                )\n",
    "                            )\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "# here we define the layout and components of our app\n",
    "app.layout = html.Div([\n",
    "    #  africa map container\n",
    "    html.Div([\n",
    "        html.H1(\"The impact of HIV on the life expectancy in Africa\", style={'width':'100vw',\n",
    "                                                                'height':'auto',\n",
    "                                                                'textAlign': 'center',\n",
    "                                                                'fontSize':'300%',\n",
    "                                                                 'font-family':'sans-serif'\n",
    "                                                                }), # heading\n",
    "        html.Div([\n",
    "            html.H3(\n",
    "                \"HIV and AIDS\"\n",
    "        , style={'font-family':'sans-serif'}),\n",
    "        html.P(\n",
    "            \"AIDS is the final stage of an HIV infection and was first diagnosed in 1981. It is an immunodeficiency disease which is so far not curable. HIV is most commonly contracted through unprotected sexual intercourse and drug consumption. Many lack the necessary education and thus do not know exactly how to protect themselves from the infection. Due to the missing education and since the medical treatment only developed over time, the deaths caused by HIV and Aids in the past had an impact on the life expectancy in many countries. \"\n",
    "        , style={'font-family':'sans-serif'}),\n",
    "        html.H3(\n",
    "            \"HIV spreading in Africa\"\n",
    "        , style={'font-family':'sans-serif'}),\n",
    "        html.P(\n",
    "            \"On the right there is a map showing the African continent. The different colors represent the rate of HIV/Aids deaths in the selected year. By clicking the play button next to the timeline, an animation will start playing and the change of the death rate over time can be seen. Hovering over the countries will show some additional information. By clicking on a specific country, two graphs will show underneath the map.\",\n",
    "           style={'font-family':'sans-serif'})\n",
    "        ],\n",
    "                style={\n",
    "                    'margin':10,\n",
    "                    'width': '25vw',\n",
    "                    'height': '85vh',\n",
    "                    'display':'inline-block',\n",
    "                    'fontSize':'100%',\n",
    "                    'padding':10,\n",
    "                    'verticalAlign':'middle',\n",
    "                    'font-family':'sans-serif'\n",
    "            }\n",
    "        ),\n",
    "        dcc.Graph(id=\"chloropleth\", config=config_dict,\n",
    "                                    figure=chloropleth, style={'width': '70vw',\n",
    "                                                                    'height': '85vh',\n",
    "                                                                    'display':'inline-block',\n",
    "                                                                    'verticalAlign':'top',\n",
    "                                                                    'right':0 }) # africa map figure with id \"chloropleth\"\n",
    "    ], style={\n",
    "        'width': '100vw',\n",
    "        'height':'auto',\n",
    "        'margin':'20px',\n",
    "        'verticalAlign':'top'}),\n",
    "    html.Div([\n",
    "        html.H3(\n",
    "            \"HIV and the impact on life expectancy in Africa\"\n",
    "        , style={'font-family':'sans-serif'}),\n",
    "        html.P(\n",
    "            \"The left chart shows a bubble chart. In the graph, the y-axis describes the life expectancy and the x-axis represents the year. The bubble size represents the deaths caused by HIV/Aids in the chosen country over time. By hovering over the dots, the exact death rate can be seen. Another country can be added by clicking on it on the map above or via the drop-down menu. This way, multiple countries can be compared. By hovering over the bubbles, the bar chart on the right changes according to year and country. It shows the top ten shares of death in the selected country of the year of the bubble. The red bar represents the share of deaths caused by HIV/Aids.\"\n",
    "        , style={'font-family':'sans-serif'})\n",
    "    ], style={\n",
    "        'height':'auto',\n",
    "        'width':'70vw',\n",
    "        'font-family':'sans-serif',\n",
    "        'fontSize':'100%',\n",
    "        'margin':10,\n",
    "        'padding':30\n",
    "    }),\n",
    "    # dropdown for country selection\n",
    "    html.Div([\n",
    "            # graph (later for the wormgraph)\n",
    "            html.Div([\n",
    "                    html.Div(dcc.Dropdown(\n",
    "                            id='country_select',\n",
    "                            options=[{'label': code, 'value': country} for index, country, code in iso3_countrynames.itertuples()],\n",
    "                            multi=True,\n",
    "                            placeholder=\"Select one or more Countries\",\n",
    "                        ), style={\n",
    "                            'margin':'20px',\n",
    "                            'height': 'auto',\n",
    "                            'width': '45vw'\n",
    "                        }),\n",
    "                    dcc.Graph(id=\"worm_figure\", style={\n",
    "                                                    'margin': '20px 20px 20px 20px',\n",
    "                                                    'display': 'inline-block',\n",
    "                                                    'height':'70vh',\n",
    "                                                    'width':'45vw'},\n",
    "                                                    config=config_dict),\n",
    "                    dcc.Graph(id=\"bar_chart\", style={\n",
    "                                                    'margin': '20px 20px 20px 20px',\n",
    "                                                    'display': 'inline-block',\n",
    "                                                    'height':'70vh',\n",
    "                                                    'width':'45vw'},\n",
    "                                                    config=config_dict)]),\n",
    "                    dcc.Link(\"The code, Project Documentation and Data.[↗]\",\n",
    "                    href=\"https://github.com/simonsasse/dataviz\",\n",
    "                    target=\"_blank\",\n",
    "                    style={\n",
    "                        'padding':5\n",
    "                    })\n",
    "                    ], style={'width':'100vw',\n",
    "                            'height':'auto',\n",
    "                            'padding':'0px',\n",
    "                            'margin':'10px'})\n",
    "    ], id=\"main-window\",\n",
    "    style={\n",
    "        'height':'auto',\n",
    "        'width':'100vw',\n",
    "        'font-family':'sans-serif'\n",
    "    })\n",
    "  "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create Callbacks"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "# here we define the functionality and interactivity of our App\n",
    "# define input and output of callback function\n",
    "@app.callback(\n",
    "    # Output(\"choropleth\", \"figure\"),\n",
    "    Output(\"worm_figure\", \"figure\"),\n",
    "    # Output(\"worm_container\", \"style\"),\n",
    "    Input(\"country_select\", \"value\"))\n",
    "    # the callback function: called when a value of the defined inputs above changes.\n",
    "def display_choropleth(country_select):\n",
    "    # if no countries are selected\n",
    "    if(not country_select):\n",
    "       raise PreventUpdate\n",
    "\n",
    "    # select df\n",
    "    df_temp = df[df[\"Code\"].isin(country_select)]\n",
    "    # create worm graph\n",
    "    fig2 = px.scatter(\n",
    "                            df_temp,\n",
    "                            x=\"Year\",\n",
    "                            y=\"Life expectancy\",\n",
    "                            color=\"Country\",\n",
    "                            color_discrete_map= color_map_country,\n",
    "                            # hover_name=df_temp[\"Year\"].astype(str)+ \" \" + df_temp[\"Country\"],\n",
    "                            # hover_data={\"Deaths from HIV/AIDS in 100 thousand people\" : \":.1f\",\n",
    "                            #             \"Life expectancy\": \":.1f\",\n",
    "                            #             \"Code\":False,\n",
    "                            #             \"Year\":False,\n",
    "                            #             \"Country\":False},\n",
    "                            custom_data=[\"Code\",\"Year\",\"Country\",\"Deaths from HIV/AIDS in 100 thousand people\"],\n",
    "                            size = [math.ceil(i/df[\"Deaths from HIV/AIDS in 100 thousand people\"].max()*30) for i in df_temp['Deaths from HIV/AIDS in 100 thousand people']],\n",
    "                            size_max = df[\"Deaths from HIV/AIDS in 100 thousand people\"].max()/30\n",
    "                            )\n",
    "    fig2.update_layout(margin={\"r\":0,\"t\":0,\"l\":0,\"b\":0},\n",
    "                            legend=dict(\n",
    "                                orientation=\"h\",\n",
    "                                yanchor=\"bottom\",\n",
    "                                y=1.02,\n",
    "                                xanchor=\"left\",\n",
    "                                x=0\n",
    "                            ), \n",
    "                        yaxis_title=\"Life expectancy in years\")\n",
    "    fig2.update_traces(\n",
    "        marker=dict(sizemin=1),\n",
    "        hovertemplate='<b>%{x} %{customdata[2]}</b><br>Life expectancy: <b>%{y:.1f} years</b><br>Deaths from HIV per 100,000 population: <b>%{customdata[3]:.1f}<br>'\n",
    "        )\n",
    "    fig2.add_annotation(text=\"The HIV/AIDS death rate per 100,000 population is displayed as the Bubble size.\",\n",
    "                xref=\"paper\", yref=\"paper\",\n",
    "                x=0, y=0.95, showarrow=False,\n",
    "                font=dict(\n",
    "                        family=\"sans-serif\",\n",
    "                        size=14,\n",
    "                        color=\"#000000\"\n",
    "                    ),\n",
    "                    borderpad=5,\n",
    "                    bgcolor=\"#ffffff\"\n",
    "                )\n",
    "    fig2.update_yaxes(range=[df[\"Life expectancy\"].min()-3, df[\"Life expectancy\"].max()+3])\n",
    "    \n",
    "    return fig2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "# here we define the functionality and interactivity of our App\n",
    "# define input and output of callback function\n",
    "@app.callback(\n",
    "    # Output(\"choropleth\", \"figure\"),\n",
    "    Output(\"country_select\", \"value\"),\n",
    "    # Output(\"worm_container\", \"style\"),\n",
    "    Input(\"chloropleth\", \"clickData\"),\n",
    "    State(\"country_select\", \"value\"))\n",
    "# the callback function: called when a value of the defined inputs above changes.\n",
    "def click_callback(clickData, country_select):\n",
    "    # worm_style = {'display', 'block'}\n",
    "    # if any countries are selected\n",
    "    if(not clickData):\n",
    "        raise PreventUpdate\n",
    "    if(not country_select):\n",
    "        selection = clickData[\"points\"][0][\"customdata\"]\n",
    "    else:\n",
    "        # concatenate lists\n",
    "        selection = country_select + clickData[\"points\"][0][\"customdata\"]\n",
    "        # remove duplicates\n",
    "        selection = pd.Series(selection).unique()\n",
    "    return selection\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a color vector for causes of death\n",
    "# colorDf = pd.DataFrame()\n",
    "# colorDf[\"column\"] = df.iloc[0, 5:].index.values\n",
    "# colorDf[\"color\"] = pc.sample_colorscale(\"reds\", colorDf[\"column\"].size)\n",
    "\n",
    "# here we define the functionality and interactivity of our App\n",
    "# define input and output of callback function\n",
    "@app.callback(\n",
    "    Output(\"bar_chart\", \"figure\"),\n",
    "    Input(\"worm_figure\", \"hoverData\"))# the callback function: called when a value of the defined inputs above changes.\n",
    "def hover_bar_chart(hoverData):\n",
    "    # worm_style = {'display', 'block'}\n",
    "    # if any countries are selected\n",
    "    if(not hoverData):\n",
    "        raise PreventUpdate\n",
    "    else:\n",
    "        # return bar chart\n",
    "        data_selection = df[(df[\"Year\"] == hoverData[\"points\"][0][\"customdata\"][1]) &\n",
    "                            (df[\"Code\"] == hoverData[\"points\"][0][\"customdata\"][0])]\n",
    "        subSelection = data_selection.iloc[0, 5:].sort_values(ascending=False).head(10)\n",
    "        barFig = px.bar(\n",
    "            y = subSelection.index.values,\n",
    "            x = subSelection,\n",
    "            orientation=\"h\",\n",
    "            color = subSelection.index.values,\n",
    "            color_discrete_map= color_map_cause,\n",
    "            title=(\"Top 10 causes of death in <b>\" +\n",
    "                    str(hoverData[\"points\"][0][\"customdata\"][1]) +\n",
    "                    \"</b> in <b>\" +\n",
    "                    hoverData[\"points\"][0][\"customdata\"][2] +\n",
    "                    \"</b> in Percent.\")\n",
    "            )\n",
    "        barFig.update_layout(showlegend=False,\n",
    "                            xaxis_title = \"Percentage of total deaths\",\n",
    "                            yaxis_title = \"Cause of death\"\n",
    "                            )\n",
    "        barFig.update_traces(\n",
    "            hovertemplate='<b>%{x:.1f} Percent',\n",
    "            name = \"\"\n",
    "        )\n",
    "        barFig.update_xaxes(range=[0, 60])\n",
    "\n",
    "    return barFig\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## RUN APP Server"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Dash app running on http://127.0.0.1:8050/\n"
     ]
    }
   ],
   "source": [
    "# run the local server\n",
    "# visit http://127.0.0.1:8050/ in webbrowser to see results and error codes\n",
    "app.run_server(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Possible deployment:\n",
    "https://austinlasseter.medium.com/how-to-deploy-a-simple-plotly-dash-app-to-heroku-622a2216eb73 "
   ]
  }
 ],
 "metadata": {
  "interpreter": {
   "hash": "619a83e1d7da3890ec51518104e49146b773b740911683a786c6a0462bd5ce3a"
  },
  "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.9.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}