dashboard.ipynb

{
  "cells": [
    {
      "cell_type": "code",
      "execution_count": 50,
      "metadata": {},
      "outputs": [],
      "source": [
        "import importlib\n",
        "\n",
        "import functions.data_preprocess as dp\n",
        "importlib.reload(dp);                                                                                                                                                               \n",
        "\n",
        "import functions.plot as dplt\n",
        "importlib.reload(dplt);\n",
        "\n",
        "import functions.transform_data as td\n",
        "importlib.reload(td);"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 51,
      "metadata": {
        "id": "4BNvZZDncuAt"
      },
      "outputs": [],
      "source": [
        "from dash import html, dcc, Dash, dash_table\n",
        "from dash.dependencies import Input, Output, State\n",
        "import dash_bootstrap_components as dbc\n",
        "\n",
        "import numpy as np\n",
        "import pandas as pd\n",
        "import plotly.express as px\n",
        "# import plotly.io as pio\n",
        "import plotly.graph_objects as go"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "WX152CawcuA0"
      },
      "source": [
        "# Dashboard"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 52,
      "metadata": {
        "id": "a-yvE7nLcuA3"
      },
      "outputs": [],
      "source": [
        "app = Dash(external_stylesheets=['assets/style_sheet.css', dbc.themes.BOOTSTRAP], title=\"Wars Consequences\")"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Import & Preprocess Data"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 53,
      "metadata": {},
      "outputs": [],
      "source": [
        "plots_theme = 'simple_white'\n",
        "idp_color = '#9B1D20'\n",
        "ref_color = '#235755'\n",
        "asylm_color = '#E19A00'\n",
        "gray = '#b3b3b3'\n",
        "default_year = 2022"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 54,
      "metadata": {},
      "outputs": [
        {
          "name": "stderr",
          "output_type": "stream",
          "text": [
            "e:\\ITI_AI\\Phase 2\\14.Data Viisualization\\repo\\Refugee_Analysis\\functions\\data_preprocess.py:12: FutureWarning:\n",
            "\n",
            "The default value of regex will change from True to False in a future version.\n",
            "\n"
          ]
        }
      ],
      "source": [
        "df_all_years, second_plot, lons_lats = dp.prepare_data();\n",
        "td.get_df(df_all_years)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 55,
      "metadata": {},
      "outputs": [],
      "source": [
        "countries_second = list(second_plot[\"country\"].unique())"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 56,
      "metadata": {},
      "outputs": [],
      "source": [
        "total_three = df_all_years.groupby('Year').agg({'Asylum-seekers': 'sum', \"Refugees under UNHCR's mandate\": 'sum', \"IDPs of concern to UNHCR\": 'sum'})"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 57,
      "metadata": {},
      "outputs": [],
      "source": [
        "iso_loc = lons_lats[['Alpha-3 code', 'Latitude (average)', 'Longitude (average)', 'Country']]\n",
        "isos_original = df_all_years[['Country of origin (ISO)', 'Country of asylum (ISO)']]\n",
        "dplt.get_isos(iso_loc, isos_original)"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {
        "id": "jYn-Lh1WcuA4"
      },
      "source": [
        "## Title & Description"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 58,
      "metadata": {},
      "outputs": [],
      "source": [
        "title = html.Div(\n",
        "    [\n",
        "        html.Div(\n",
        "            [\n",
        "                html.Img(src=app.get_asset_url('people.png'),id=\"title_icon\"),\n",
        "                html.Span(\"Wars Consequences\", id='title')\n",
        "            ], className=\"mt-3\")\n",
        "    ], style={'margin': '0px 30px 10px'}\n",
        ")"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 59,
      "metadata": {},
      "outputs": [],
      "source": [
        "intro = html.Div([\n",
        "    html.P([\"The pain of war can't exceed the woe of aftermath.\"], className='h5'),\n",
        "    html.P([\"Every single day, families around the world are being forced from their homes. In search of safety and a better life, they are risking everything to escape conflict, disaster, poverty, or hunger, often leaving with nothing but the clothes they are wearing.\"]),\n",
        "    ], style={'margin': '0px 730px 0px 30px'})"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 60,
      "metadata": {},
      "outputs": [],
      "source": [
        "description = dbc.Row([\n",
        "    html.H5(\"Population Types\"),\n",
        "    dbc.Col([\n",
        "        html.H6(['Refugees '], style={'color':ref_color}),\n",
        "        html.Span([\" are people who have fled their homes, crossed an international border, and cannot return because they fear their lives are in danger. People become refugees when one or more of their basic human rights are violated or threatened.\"]),\n",
        "    ], className='col-4 desc'),\n",
        "    dbc.Col([\n",
        "        html.H6([\"IDPs\"], style={'color':idp_color}),\n",
        "        html.Span([\" have been forced to flee their homes for the same reasons as refugees but have not crossed an international border. IDPs live in their countries of origin but are often afraid or unwilling to return home for fear of persecution.\"]),\n",
        "    ], className='col-4 desc'),\n",
        "    dbc.Col([\n",
        "        html.H6([\"Asylum-seekers\"], style={'color':asylm_color}),\n",
        "        html.Span([\" are people who have fled their homes and claim international protection, but whose status has not yet been definitively determined. Every refugee begins as an asylum-seeker, but not every asylum-seeker will be granted refugee status.\"])\n",
        "    ], className='col-4 desc')\n",
        "    ], id=\"description_row\")"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Analysis Tab"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Select Year"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 61,
      "metadata": {},
      "outputs": [],
      "source": [
        "base_year = 2001\n",
        "slider_marks = {str(i): str(i) for i in df_all_years[df_all_years['Year']>=base_year]['Year'].unique()}\n",
        "max_year = df_all_years['Year'].max()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 62,
      "metadata": {},
      "outputs": [],
      "source": [
        "slider = dbc.Row([\n",
        "       html.H5(\"Select A Year\", className=\"me-1\"),\n",
        "       html.Br(),\n",
        "        dcc.Slider(\n",
        "            base_year,\n",
        "            max_year,\n",
        "            id='main_slider_id',\n",
        "            step=None,\n",
        "            value=2022,\n",
        "            marks=slider_marks), html.Br()\n",
        "        ], id='slider_row')\n"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### BANS"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 63,
      "metadata": {},
      "outputs": [],
      "source": [
        "ban1, ban2, ban3, ban4, ban5 = dplt.get_all_bans(default_year)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 64,
      "metadata": {},
      "outputs": [],
      "source": [
        "bans = dbc.Row([\n",
        "    ban1,\n",
        "    ban2, \n",
        "    ban3,\n",
        "    ban4,\n",
        "    ban5\n",
        "],className='ban_row', id='bans1')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 65,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"bans1\" , component_property = \"children\"),\n",
        "Input(component_id = \"main_slider_id\" , component_property = \"value\"))\n",
        "def update_bans(year):\n",
        "    ban1, ban2, ban3, ban4, ban5 = dplt.get_all_bans(year)\n",
        "    return [ban1, ban2, ban3, ban4, ban5]"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Populations By Country of Origin and Population Type, 2022"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 66,
      "metadata": {},
      "outputs": [],
      "source": [
        "first_plot = td.get_first_data(default_year)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 67,
      "metadata": {},
      "outputs": [],
      "source": [
        "default_fig1 = dplt.plot_fig1(first_plot)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 68,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_1 = dbc.Col([\n",
        "    dbc.Row([html.H5('Populations By Country of Origin and Population Type')]),\n",
        "    dbc.Row([dcc.Graph(id=\"figure1\", figure=default_fig1)])\n",
        "])"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 69,
      "metadata": {},
      "outputs": [],
      "source": [
        "# FIRST GRAPH \n",
        "@app.callback(\n",
        "Output(component_id = \"figure1\" , component_property = \"figure\"),\n",
        "Input(component_id = \"main_slider_id\" , component_property = \"value\"))\n",
        "def update_My_GRAPH(year):\n",
        "    df_new= td.get_first_data(year)\n",
        "    fig = dplt.plot_fig1(df_new)\n",
        "\n",
        "    return fig"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Events Description"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 70,
      "metadata": {},
      "outputs": [],
      "source": [
        "default_event = second_plot[(second_plot[\"country\"]=='Syria') & (second_plot[\"date\"]=='2022-01')][[\"day\", \"event\"]]"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 71,
      "metadata": {},
      "outputs": [],
      "source": [
        "table_events = dplt.create_events_table(default_event, '2022-01')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 72,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_2 = dbc.Col([\n",
        "    dbc.Row([html.H5(\"Incidents Affecting The Protection of IDPs And Refugees In 2022\")]),\n",
        "    dbc.Row([\n",
        "        dbc.Col(html.Div([dcc.Dropdown(countries_second,id='demo-dropdown_country', value='Syria')]),width = 6),\n",
        "        dbc.Col(html.Div([dcc.Dropdown(id='demo-dropdown_date', value='2022-01')]),width = 6),\n",
        "    ]),\n",
        "    dbc.Row([table_events], id=\"events\")\n",
        "])"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 73,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(\"events\" , 'children'),\n",
        "Input(\"demo-dropdown_date\" , \"value\"),\n",
        "State(\"demo-dropdown_country\" , \"value\"))\n",
        "def update_event(date,country):\n",
        "    out = second_plot[(second_plot[\"country\"]==country) & (second_plot[\"date\"]==date)][[\"day\", \"event\"]]\n",
        "    table_events = dplt.create_events_table(out, date)\n",
        "    return table_events"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 74,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"demo-dropdown_date\" , component_property = 'options'),    \n",
        "Input(component_id = \"demo-dropdown_country\" , component_property = \"value\"))\n",
        "def update_date(country):\n",
        "    options = list(second_plot[second_plot[\"country\"]==country][\"date\"].unique())\n",
        "    return options"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Asylum-seekers, Refugees, IDPs along the years"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 75,
      "metadata": {},
      "outputs": [],
      "source": [
        "three_lines_plot = px.line(data_frame=total_three, y=['Asylum-seekers', \"Refugees under UNHCR's mandate\", \"IDPs of concern to UNHCR\"], color_discrete_sequence=[asylm_color, ref_color, idp_color], template=plots_theme)\n",
        "three_lines_plot.update_layout(legend=dict(\n",
        "    orientation=\"h\",\n",
        "    yanchor=\"bottom\",\n",
        "    y=1.02,\n",
        "    xanchor=\"right\",\n",
        "    x=1\n",
        "), legend_title=\"Population Type\");"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 76,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_3 = dbc.Col([\n",
        "    dbc.Row([html.H5('Trend Over Time By Population Type')]),\n",
        "    dbc.Row([dcc.Graph(id='line_plot', figure=three_lines_plot)])\n",
        "])"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### IDPs"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 77,
      "metadata": {},
      "outputs": [],
      "source": [
        "idps = td.get_idps(default_year)\n",
        "default_idps= dplt.plot_idp(idps)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 78,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_4 = dbc.Col([\n",
        "    dbc.Row([html.H5('Top Countries With IDPs')]),\n",
        "    dbc.Row([dcc.Graph(id='idp_plot', figure=default_idps)])\n",
        "], className='col-5 p-0')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 79,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"idp_plot\" , component_property = \"figure\"),\n",
        "Input(component_id = \"main_slider_id\" , component_property = \"value\"))\n",
        "def update_idp(year):\n",
        "    new_idps = td.get_idps(year)\n",
        "    fig= dplt.plot_idp(new_idps)\n",
        "\n",
        "    return fig"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Migrations Connections"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 80,
      "metadata": {},
      "outputs": [],
      "source": [
        "origin_countries = df_all_years[['Country of origin', 'Country of origin (ISO)']].drop_duplicates().sort_values('Country of origin')\n",
        "i = origin_countries[origin_countries['Country of origin'] == 'Stateless'].index[0]\n",
        "origin_countries = origin_countries.drop(i)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 81,
      "metadata": {},
      "outputs": [],
      "source": [
        "origin_countries = origin_countries.set_index('Country of origin (ISO)')\n",
        "options_df = origin_countries.to_dict()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 82,
      "metadata": {},
      "outputs": [],
      "source": [
        "default_fig = dplt.create_map()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 83,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_5 = dbc.Col([\n",
        "    dbc.Row([html.H5(\"Refugees' Destination\")]),\n",
        "    dbc.Row([dcc.Dropdown(options_df['Country of origin'], value='SYR', id='source_country')]),\n",
        "    dbc.Row([dcc.Graph(id='mig_plot', figure=default_fig)]),\n",
        "], className='col-5 p-0')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 84,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"mig_plot\" , component_property = \"figure\"),\n",
        "Input(component_id = \"source_country\" , component_property = \"value\"))\n",
        "def update_map(country_iso):\n",
        "    new_fig = dplt.create_map(country_iso)\n",
        "    return new_fig"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Country of Asylm Map"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 85,
      "metadata": {},
      "outputs": [],
      "source": [
        "default_fig2 = dplt.plot_asylm_ref(td.get_ref_data(default_year))"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 86,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_6 = dbc.Col([\n",
        "    dbc.Row([html.H5(\"Refugees In Countries of Asylum\")]),\n",
        "    dbc.Row([dcc.Graph(id='asylm_plot', figure=default_fig2)]),\n",
        "])"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 87,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"asylm_plot\" , component_property = \"figure\"),\n",
        "Input(component_id = \"main_slider_id\" , component_property = \"value\"))\n",
        "def update_map2(year):\n",
        "    new_fig = dplt.plot_asylm_ref(td.get_ref_data(year))\n",
        "    return new_fig"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Asylum Seekers"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 88,
      "metadata": {},
      "outputs": [],
      "source": [
        "default_seekers = dplt.plot_seekers(td.get_seekers())"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 89,
      "metadata": {},
      "outputs": [],
      "source": [
        "plot_7 = dbc.Col([\n",
        "    dbc.Row([html.H5('Top Countries With Asylum Seekers')]),\n",
        "    dbc.Row([dcc.Graph(id='seekers_plot', figure=default_seekers)])\n",
        "], className='col-6 p-0')"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 90,
      "metadata": {},
      "outputs": [],
      "source": [
        "@app.callback(\n",
        "Output(component_id = \"seekers_plot\" , component_property = \"figure\"),\n",
        "Input(component_id = \"main_slider_id\" , component_property = \"value\"))\n",
        "def update_seeker(year):\n",
        "    new_seekers = td.get_seekers(year)\n",
        "    fig= dplt.plot_seekers(new_seekers)\n",
        "\n",
        "    return fig"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Last Row in Analysis"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 91,
      "metadata": {},
      "outputs": [],
      "source": [
        "first_row = dbc.Row([\n",
        "    plot_3,\n",
        "    plot_4\n",
        "])\n",
        "\n",
        "second_row = dbc.Row([\n",
        "    plot_1\n",
        "], style={'margin-top': '25px'})\n",
        "\n",
        "third_row = dbc.Row([\n",
        "    plot_5, plot_6\n",
        "], style={'margin-top': '25px'})\n",
        "\n",
        "fourth_row = dbc.Row([\n",
        "    plot_7, plot_2\n",
        "], style={'margin-top': '25px'})\n"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "## Donation Tab"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### IDPs Video"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 92,
      "metadata": {},
      "outputs": [],
      "source": [
        "donation_vid = dbc.Row([\n",
        "    dbc.Col([ \n",
        "        html.H3(\"Who are Internally Displaced People?\", style={\"font-family\": \"serif\", \"text-align\": \"center\"})\n",
        "    ]),\n",
        "    dbc.Col([ \n",
        "        html.Iframe(src='https://www.youtube.com/embed/DCzpVQkencw', height=315, width=690)\n",
        "    ])\n",
        "], style={'align-items': 'center'})"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "### Charities"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 93,
      "metadata": {},
      "outputs": [],
      "source": [
        "## describtion of ecah charity \n",
        "uncif_dis =  \"\"\"\n",
        "UNICEF works for the rights of every child, every day, across the globe.\n",
        "UNICEF was established in the aftermath of World War II to help children whose\n",
        "lives and futures were at risk – no matter what country they were from. \"\"\"\n",
        "\n",
        "unchr_dis = ''' UNHCR, the UN Refugee Agency, is a global organization dedicated to saving lives, \n",
        "protecting rights and building a better future for refugees, forcibly displaced communities and stateless people.'''"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 94,
      "metadata": {},
      "outputs": [],
      "source": [
        "ch_title = html.Div([   \n",
        "            html.Span('Help ', className='h2', style={\"font-family\": \"serif\", \"text-align\": \"center\"}),\n",
        "            html.Span('Syrians ', className='h1', style={\"font-family\": \"serif\", \"text-align\": \"center\", 'color': '#C10000'}),\n",
        "            html.Span('!', className='h2', style={\"font-family\": \"serif\", \"text-align\": \"center\"})\n",
        "], style={'text-align': 'center'})"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 95,
      "metadata": {},
      "outputs": [],
      "source": [
        "charities = dbc.Row([\n",
        "        dbc.Col([html.Div([\n",
        "                    # player.DashPlayer(\n",
        "                    #     id='video-player',\n",
        "                    #     url='https://www.youtube.com/watch?v=8G4hUALJ9HQ&feature=youtu.be',\n",
        "                    #     controls=True,\n",
        "                    #      ) ,\n",
        "            html.Iframe(id='video-player', src=\"https://www.youtube.com/embed/8G4hUALJ9HQ\", height=382,width=700)\n",
        "        ])],width =6),\n",
        "\n",
        "        # charities contact \n",
        "        dbc.Col([\n",
        "            # first one \n",
        "            html.Div(\n",
        "                html.Img(src=r'https://th.bing.com/th/id/OIP.byDeKXkU-ruBpsbNCQXxpgHaEK?pid=ImgDet&rs=1', alt='unicef logo',width=\"100\", style={'margin-bottom':'5px'}),\n",
        "            ),\n",
        "\n",
        "            html.P(uncif_dis),        \n",
        "            html.A(\n",
        "                    style = {\"font-size\": \"larger\",\n",
        "                            \"font-weight\": \"bold\"},\n",
        "                    href= \"https://help.unicef.org/?country=EG&gclsrc=aw.ds&msclkid=3cd8317e04441b2395735557bfd8d36a&utm_source=bing&utm_medium=cpc&utm_campaign=DLV_EG_Search_Brand_Generic_EN&utm_term=unicef&utm_content=Brand_Exact\",\n",
        "                    children = [\"Donate HERE \"]\n",
        "            ),        \n",
        "            \n",
        "            html.Br(),\n",
        "            html.Br(),\n",
        "            html.Hr(),\n",
        "\n",
        "            # second one \n",
        "            html.Div(\n",
        "                html.Img(src=r'https://th.bing.com/th/id/R.f47476cd2c53ddafff9f56b738fd6b93?rik=otNP6cPlRdJ%2bRA&pid=ImgRaw&r=0', alt='unhcr logo',width=\"68\" , style={'margin-bottom':'5px'}),\n",
        "            ),\n",
        "            html.P(unchr_dis),\n",
        "                         \n",
        "            html.A(\n",
        "                style = {\"font-size\": \"larger\",\n",
        "                        \"font-weight\": \"bold\"},\n",
        "                href= \"https://www.unhcr.org/syria-emergency.html\",\n",
        "                children = [\"Donate HERE \"])        \n",
        "                            \n",
        "            ], style = {\"text-align\": \"center\"})\n",
        "        ], style = {\"align-items\": \"center\"})\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "fqVwHer-cuA9"
      },
      "source": [
        "## Tabs"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 96,
      "metadata": {
        "id": "wLkapHgocuA_"
      },
      "outputs": [],
      "source": [
        "analysis_content = dbc.Card(\n",
        "    dbc.CardBody(\n",
        "        [\n",
        "            dbc.Container([\n",
        "                slider,\n",
        "                bans,\n",
        "                first_row,\n",
        "                second_row,\n",
        "                third_row,\n",
        "                fourth_row\n",
        "            ])\n",
        "        ]\n",
        "    ),\n",
        ")\n",
        "\n",
        "donation_content = dbc.Card(\n",
        "    dbc.CardBody(\n",
        "        [\n",
        "            donation_vid,\n",
        "            html.Hr(),\n",
        "            ch_title,\n",
        "            html.Br(),\n",
        "            charities\n",
        "        ],\n",
        "    style={\"background-color\": 'white'}),\n",
        ")\n",
        "\n",
        "tabs = dbc.Tabs(\n",
        "    [\n",
        "        dbc.Tab(analysis_content, label=\"Analysis\"),\n",
        "        dbc.Tab(donation_content, label=\"Donation\")\n",
        "    ]\n",
        ")"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 97,
      "metadata": {
        "id": "Jp4g5e3mcuBA"
      },
      "outputs": [],
      "source": [
        "app.layout = html.Div(children=[\n",
        "    title,\n",
        "    # intro,\n",
        "    html.Div(tabs, style={'margin': '0px 30px'}),\n",
        "    description,\n",
        "])"
      ]
    },
    {
      "attachments": {},
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# Run Server"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 98,
      "metadata": {},
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "Dash is running on http://127.0.0.1:8050/\n",
            "\n",
            "Dash is running on http://127.0.0.1:8050/\n",
            "\n",
            " * Serving Flask app \"__main__\" (lazy loading)\n",
            " * Environment: production\n",
            "\u001b[31m   WARNING: This is a development server. Do not use it in a production deployment.\u001b[0m\n",
            "\u001b[2m   Use a production WSGI server instead.\u001b[0m\n",
            " * Debug mode: off\n"
          ]
        },
        {
          "name": "stderr",
          "output_type": "stream",
          "text": [
            " * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET / HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-dependencies HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-layout HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-slider.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-graph.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-dropdown.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:26] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-plotlyjs.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mGET /_dash-component-suites/dash/dash_table/async-highlight.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mGET /_dash-component-suites/dash/dash_table/async-table.js HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:27] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:28] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:28] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:28] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:28] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:30:30] \"\u001b[37mPOST /_dash-update-component HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dcc/dash_core_components-shared.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/html/dash_html_components.min.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dash_table/bundle.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dcc/dash_core_components.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-slider.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-graph.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dcc/async-dropdown.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:03] \"\u001b[37mGET /_dash-component-suites/dash/dash_table/async-highlight.js.map HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [02/Apr/2023 23:31:04] \"\u001b[37mGET /_dash-component-suites/dash/dash_table/async-table.js.map HTTP/1.1\u001b[0m\" 200 -\n"
          ]
        }
      ],
      "source": [
        "app.run_server()"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {},
      "outputs": [],
      "source": []
    }
  ],
  "metadata": {
    "colab": {
      "provenance": []
    },
    "kernelspec": {
      "display_name": "try",
      "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.7"
    },
    "vscode": {
      "interpreter": {
        "hash": "200a82db256eb3265b4550f1d4b97313489e3e78e9bc57877291979c0c710f12"
      }
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}