{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.read_csv('Gapminder-data.csv', sep=',')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df.describe()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df_info = pd.read_csv('Gapminder-info.csv', sep=',', index_col=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df_info"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df_info.loc['Population', 'LogScale']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.express as px\n",
    "import plotly.graph_objs as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "df_2000 = df.query('Year==2000')\n",
    "df_2000.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "color_map = {\n",
    "    'Asia': '#ff798e',\n",
    "    'Europe': '#ffeb33',\n",
    "    'Americas': '#98ef33',\n",
    "    'Africa': '#33dded'\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def gapminder_fig(x='Income', y='Life expectancy'):\n",
    "    \n",
    "    def background_year(year):\n",
    "        f = go.Scatter(\n",
    "            x=[df_info.loc[x, 'Mid']],\n",
    "            y=[df_info.loc[y, 'Mid']],\n",
    "            mode='text',\n",
    "            showlegend=False,\n",
    "            text=['{}'.format(year)],\n",
    "            textposition='middle center',\n",
    "            textfont=dict(size=200, color='lightgray')\n",
    "        )\n",
    "        return f\n",
    "    \n",
    "    fig = px.scatter(\n",
    "        df.query('Year>=2000'), \n",
    "        x=x,\n",
    "        y=y,\n",
    "        color='Region',\n",
    "        size='Population',\n",
    "        size_max=60,\n",
    "        hover_name='Country',\n",
    "        hover_data={'Income': False, 'Life expectancy': False, 'Region': False, 'Population': False, 'Year': False},\n",
    "        color_discrete_map=color_map,\n",
    "        log_x=df_info.loc[x, 'LogScale'],\n",
    "        log_y=df_info.loc[y, 'LogScale'],\n",
    "        range_x=[df_info.loc[x, 'Min'], df_info.loc[x, 'Max']],\n",
    "        range_y=[df_info.loc[y, 'Min'], df_info.loc[y, 'Max']],\n",
    "        animation_frame='Year',\n",
    "        animation_group='Country'\n",
    "    )\n",
    "    \n",
    "    fig.update_traces(marker=dict(opacity=1, line=dict(color='black', width=0.8)))\n",
    "    fig.update_layout(plot_bgcolor='white', font=dict(color='dimgray'), title='Gapminder', \n",
    "                      autosize=False, width=800, height=600)\n",
    "    fig.update_xaxes(linecolor='dimgray', gridcolor='lightgray', linewidth=1, \n",
    "                     showspikes=True, spikecolor='dimgray', spikethickness=1)\n",
    "    fig.update_yaxes(linecolor='dimgray', gridcolor='lightgray', linewidth=1, \n",
    "                     showspikes=True, spikecolor='dimgray', spikethickness=1)\n",
    "    \n",
    "    acknowledgment = 'Data from gapminder.org, CC-BY license'\n",
    "    fig.add_annotation(xref='paper', yref='paper', x=-0.073, y=1.07, \n",
    "                       text=acknowledgment, showarrow=False, align='left')\n",
    "    fig.add_annotation(xref='x domain', yref='y domain', x=1, y=0, align='right', \n",
    "                       text=df_info.loc[x, 'Meaning'], showarrow=False, font=dict(size=10))\n",
    "    fig.add_annotation(xref='x domain', yref='y domain', x=0, y=1, valign='top', textangle=-90, \n",
    "                       text=df_info.loc[y, 'Meaning'], showarrow=False, font=dict(size=10))\n",
    "    \n",
    "    frame_year = fig.frames[0]['name']\n",
    "    fig.add_trace(background_year(frame_year))\n",
    "    fig.data = [fig.data[-1]] + list(fig.data[:-1])\n",
    "    for frame in fig.frames:\n",
    "        frame.data = (background_year(frame.name), ) + frame.data\n",
    "        \n",
    "    fig.layout.sliders[0].currentvalue.update({'visible': False})\n",
    "    \n",
    "    fig.update_layout(clickmode='event+select')\n",
    "    \n",
    "    return fig\n",
    "\n",
    "fig = gapminder_fig()\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "app = JupyterDash(__name__, external_stylesheets=external_stylesheets)\n",
    "app.layout = html.Div([\n",
    "    html.H1('Data visualization in action', \n",
    "            style={'color': '#ff798e', 'fontSize': 50, 'text-align': 'center'}\n",
    "           ),\n",
    "    dcc.Graph(\n",
    "        id='plot', \n",
    "        figure=gapminder_fig()\n",
    "    ),\n",
    "    html.Div([\n",
    "        html.P('X axis'),\n",
    "        dcc.Dropdown(\n",
    "            id='dropdown_x',\n",
    "            options=[\n",
    "                {'label': 'Income', 'value': 'Income'},\n",
    "                {'label': 'Life expectancy', 'value': 'Life expectancy'},\n",
    "                {'label': 'Fertility', 'value': 'Fertility'},\n",
    "                {'label': 'Child mortality', 'value': 'Child mortality'}\n",
    "            ],\n",
    "            value='Income',\n",
    "            clearable=False\n",
    "        )],\n",
    "        style={'width': '200px', 'display': 'inline-block', 'padding-right': '10px'}\n",
    "    ),\n",
    "    html.Div([\n",
    "        html.P('Y axis'),\n",
    "        dcc.Dropdown(\n",
    "            id='dropdown_y',\n",
    "            options=[\n",
    "                {'label': 'Income', 'value': 'Income'},\n",
    "                {'label': 'Life expectancy', 'value': 'Life expectancy'},\n",
    "                {'label': 'Fertility', 'value': 'Fertility'},\n",
    "                {'label': 'Child mortality', 'value': 'Child mortality'}\n",
    "            ],\n",
    "            value='Life expectancy',\n",
    "            clearable=False\n",
    "        )],\n",
    "        style={'width': '200px', 'display': 'inline-block'}\n",
    "    ),\n",
    "],\n",
    "    style={'width': '800px', 'margin': '0 auto'}\n",
    ")\n",
    "\n",
    "@app.callback(Output('plot', 'figure'), \n",
    "              [Input('dropdown_x', 'value'), Input('dropdown_y', 'value')])\n",
    "def update_plot(value_x, value_y):\n",
    "    return gapminder_fig(x=value_x, y=value_y)\n",
    "\n",
    "app.run_server()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}