Dash_practice.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "4aebe003",
   "metadata": {},
   "source": [
    "# DASH"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "62224e46",
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install dash\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "24808df4",
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as dhc\n",
    "import plotly.graph_objs as pgo\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "from dash.dependencies import Input, Output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "746370df",
   "metadata": {},
   "source": [
    "REFERENCE\n",
    "dash core components:https://dash.plotly.com/dash-core-components\n",
    "dash html components:https://dash.plotly.com/dash-html-components"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8a1db85e",
   "metadata": {},
   "outputs": [],
   "source": [
    "app=dash.Dash()\n",
    "colors =dict(\n",
    "    background ='#111111',\n",
    "    text='#7FDBFF'\n",
    ")\n",
    "\n",
    "app.layout = dhc.Div(children=[\n",
    "    dhc.H1(\n",
    "        children='Hello Dash',\n",
    "        style=dict(\n",
    "            textAlign= 'center',\n",
    "            color= colors['text'])\n",
    "        ),\n",
    "\n",
    "    dhc.Div(\n",
    "        children='Dash: A web application framework for Python.',\n",
    "        style=dict(\n",
    "            textAlign= 'center',\n",
    "            color=colors['text'])\n",
    "            ),\n",
    "\n",
    "    dcc.Graph(\n",
    "        id='example-graph',\n",
    "        figure=dict(\n",
    "                    data= [dict(x= [1, 2, 3], y= [4, 1, 2], type= 'bar', name= 'SF'),\n",
    "                    dict(x= [1, 2, 3], y= [2, 4, 5], type= 'bar', name= u'Montréal')],\n",
    "                    layout= dict(plot_bgcolor= colors['background'],paper_bgcolor= colors['background'],\n",
    "                            font= dict(color= colors['text']),\n",
    "                            title= 'Dash Data Visualization',xaxis=dict(title='Rand. no'))\n",
    "                    )\n",
    "            )\n",
    "],\n",
    "    style=dict(backgroundColor= colors['background'])\n",
    ")\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "aa0aff15",
   "metadata": {},
   "outputs": [],
   "source": [
    "app=dash.Dash()\n",
    "np.random.seed(42)\n",
    "rand_x=np.random.randint(1,101,100)\n",
    "rand_y=np.random.randint(1,101,100)\n",
    "app.layout=dhc.Div([dcc.Graph(id='Scatterplot',\n",
    "                             figure=dict(data=[pgo.Scatter(x=rand_x,y=rand_y,mode='markers',marker=dict(size=12,symbol='pentagon'))],\n",
    "                                        layout=pgo.Layout(title='My dash app plot',xaxis=dict(title='x axis'),yaxis=dict(title='y axis'))\n",
    "                                        )\n",
    "                             )\n",
    "                   ])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1e28d7bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "app=dash.Dash()\n",
    "df=pd.read_csv('resources/OldFaithful.csv')\n",
    "app.layout=dhc.Div([dcc.Graph(id='Eruptions',\n",
    "                             figure=dict(data=[pgo.Scatter(x=df['X'],y=df['Y'],mode='markers')],\n",
    "                                        layout=pgo.Layout(title='Old faithful Eruptions plot',xaxis=dict(title='Duration'),yaxis=dict(title='Interval'))\n",
    "                                        )\n",
    "                             )\n",
    "                   ])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "00b33041",
   "metadata": {},
   "source": [
    "# HTML components  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "da776b71",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash()\n",
    "\n",
    "app.layout = html.Div([\n",
    "    'This is the outermost Div',\n",
    "    html.Div(\n",
    "        'This is an inner Div',\n",
    "        style={'color':'blue', 'border':'2px blue solid', 'borderRadius':5,\n",
    "        'padding':10, 'width':220}\n",
    "    ),\n",
    "    html.Div(\n",
    "        'This is another inner Div',\n",
    "        style={'color':'green', 'border':'2px green solid',\n",
    "        'margin':10, 'width':220}\n",
    "    ),\n",
    "],\n",
    "# this styles the outermost Div:\n",
    "style={'width':500, 'height':200, 'color':'red', 'border':'2px red dotted'})\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "39b9ae93",
   "metadata": {},
   "source": [
    "# DASH core components "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1166dcee",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash()\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "\n",
    "    # DROPDOWN https://dash.plot.ly/dash-core-components/dropdown\n",
    "    dhc.Label('Dropdown'),\n",
    "    dcc.Dropdown(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': 'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value='MTL'\n",
    "    ),\n",
    "\n",
    "    dhc.Label('Multi-Select Dropdown'),\n",
    "    dcc.Dropdown(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': u'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value=['MTL', 'SF'],\n",
    "        multi=True\n",
    "    ),\n",
    "\n",
    "    # SLIDER https://dash.plot.ly/dash-core-components/slider\n",
    "    dhc.Label('Slider'),\n",
    "    dhc.P(\n",
    "    dcc.Slider(\n",
    "        min=-5,\n",
    "        max=10,\n",
    "        step=0.5,\n",
    "        marks={i: i for i in range(-5,11)},\n",
    "        value=-3\n",
    "    )),\n",
    "\n",
    "    # RADIO ITEMS https://dash.plot.ly/dash-core-components/radioitems\n",
    "    dhc.Label('Radio Items'),\n",
    "    dcc.RadioItems(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': 'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value='MTL'\n",
    "    )\n",
    "], style={'width': '50%'})\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "59df45bd",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash()\n",
    "\n",
    "markdown_text = '''\n",
    "### Dash and Markdown\n",
    "\n",
    "Dash apps can be written in Markdown.\n",
    "Dash uses the [CommonMark](http://commonmark.org/) specification of Markdown.\n",
    "\n",
    "Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)\n",
    "if this is your first introduction to Markdown!\n",
    "\n",
    "Markdown includes syntax for things like **bold text** and *italics*,\n",
    "[links](http://commonmark.org/help), inline `code` snippets, lists,\n",
    "quotes, and more.\n",
    "'''\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.Markdown(children=markdown_text)\n",
    "])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "366409d0",
   "metadata": {},
   "outputs": [],
   "source": [
    "print(help(dhc.Div))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3ac0a69a",
   "metadata": {},
   "source": [
    "# CALLBACK "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "09e69260",
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash.dependencies import Input, Output\n",
    "app=dash.Dash()\n",
    "app.layout= dhc.Div([dcc.Input(id='my-id', value='initial value', type='text'),\n",
    "    dhc.Div(id='my-div')])\n",
    "@app.callback(\n",
    "    Output(component_id='my-div', component_property='children'),\n",
    "    [Input(component_id='my-id', component_property='value')]\n",
    ")\n",
    "def update_output_div(input_value):\n",
    "    return 'You\\'ve entered \"{}\"'.format(input_value)\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "639b07b4",
   "metadata": {},
   "source": [
    "# 2.0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cac05ee8",
   "metadata": {},
   "outputs": [],
   "source": [
    "df=pd.read_csv('resources/gapminderDataFiveYear.csv')\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "\n",
    "# https://dash.plot.ly/dash-core-components/dropdown\n",
    "# We need to construct a dictionary of dropdown values for the years\n",
    "year_options = []\n",
    "for year in df['year'].unique():\n",
    "    year_options.append({'label':str(year),'value':year})\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.Graph(id='graph'),\n",
    "    dcc.Dropdown(id='year-picker',options=year_options,value=df['year'].min())\n",
    "])\n",
    "\n",
    "@app.callback(Output('graph', 'figure'),\n",
    "              [Input('year-picker', 'value')])\n",
    "def update_figure(selected_year):\n",
    "    filtered_df = df[df['year'] == selected_year]\n",
    "    traces = []\n",
    "    for continent_name in filtered_df['continent'].unique():\n",
    "        df_by_continent = filtered_df[filtered_df['continent'] == continent_name]\n",
    "        traces.append(pgo.Scatter(\n",
    "            x=df_by_continent['gdpPercap'],\n",
    "            y=df_by_continent['lifeExp'],\n",
    "            text=df_by_continent['country'],\n",
    "            mode='markers',\n",
    "            opacity=0.7,\n",
    "            marker={'size': 15},\n",
    "            name=continent_name\n",
    "        ))\n",
    "\n",
    "    return {\n",
    "        'data': traces,\n",
    "        'layout': pgo.Layout(\n",
    "            xaxis={'type': 'log', 'title': 'GDP Per Capita'},\n",
    "            yaxis={'title': 'Life Expectancy'},\n",
    "            hovermode='closest'\n",
    "        )\n",
    "    }\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "29b5051c",
   "metadata": {},
   "source": [
    "# 3.0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b89bf5c8",
   "metadata": {},
   "outputs": [],
   "source": [
    "#multiple inputs\n",
    "df =pd.read_csv('resources/mpg.csv')\n",
    "app=dash.Dash()\n",
    "features=df.columns\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "\n",
    "        dhc.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='xaxis',\n",
    "                options=[{'label': i.title(), 'value': i} for i in features],\n",
    "                value='displacement'\n",
    "            )\n",
    "        ],\n",
    "        style={'width': '48%', 'display': 'inline-block'}),\n",
    "\n",
    "        dhc.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='yaxis',\n",
    "                options=[{'label': i.title(), 'value': i} for i in features],\n",
    "                value='acceleration'\n",
    "            )\n",
    "        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),\n",
    "\n",
    "    dcc.Graph(id='feature-graphic')\n",
    "], style={'padding':10})\n",
    "\n",
    "@app.callback(\n",
    "    Output('feature-graphic', 'figure'),\n",
    "    [Input('xaxis', 'value'),\n",
    "     Input('yaxis', 'value')])\n",
    "def update_graph(xaxis_name, yaxis_name):\n",
    "    return {\n",
    "        'data': [pgo.Scatter(\n",
    "            x=df[xaxis_name],\n",
    "            y=df[yaxis_name],\n",
    "            text=df['name'],\n",
    "            mode='markers',\n",
    "            marker={\n",
    "                'size': 15,\n",
    "                'opacity': 0.5,\n",
    "                'line': {'width': 0.5, 'color': 'white'}\n",
    "            }\n",
    "        )],\n",
    "        'layout': pgo.Layout(\n",
    "            xaxis={'title': xaxis_name.title()},\n",
    "            yaxis={'title': yaxis_name.title()},\n",
    "            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},\n",
    "            hovermode='closest'\n",
    "        )\n",
    "    }\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ca988aed",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "df = pd.read_csv(\n",
    "    'https://gist.githubusercontent.com/chriddyp/'\n",
    "    'cb5392c35661370d95f300086accea51/raw/'\n",
    "    '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'\n",
    "    'indicators.csv')\n",
    "\n",
    "available_indicators = df['Indicator Name'].unique()\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dhc.Div([\n",
    "        dhc.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='xaxis-column',\n",
    "                options=[{'label': i, 'value': i} for i in available_indicators],\n",
    "                value='Fertility rate, total (births per woman)'\n",
    "            ),\n",
    "            dcc.RadioItems(\n",
    "                id='xaxis-type',\n",
    "                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n",
    "                value='Linear',\n",
    "                labelStyle={'display': 'inline-block'}\n",
    "            )\n",
    "        ],\n",
    "        style={'width': '48%', 'display': 'inline-block'}),\n",
    "\n",
    "        dhc.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='yaxis-column',\n",
    "                options=[{'label': i, 'value': i} for i in available_indicators],\n",
    "                value='Life expectancy at birth, total (years)'\n",
    "            ),\n",
    "            dcc.RadioItems(\n",
    "                id='yaxis-type',\n",
    "                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n",
    "                value='Linear',\n",
    "                labelStyle={'display': 'inline-block'}\n",
    "            )\n",
    "        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})\n",
    "    ]),\n",
    "\n",
    "    dcc.Graph(id='indicator-graphic'),\n",
    "\n",
    "    dcc.Slider(\n",
    "        id='year--slider',\n",
    "        min=df['Year'].min(),\n",
    "        max=df['Year'].max(),\n",
    "        value=df['Year'].max(),\n",
    "        step=None,\n",
    "        marks={str(year): str(year) for year in df['Year'].unique()}\n",
    "    )\n",
    "], style={'padding':10})\n",
    "\n",
    "@app.callback(\n",
    "    Output('indicator-graphic', 'figure'),\n",
    "    [Input('xaxis-column', 'value'),\n",
    "     Input('yaxis-column', 'value'),\n",
    "     Input('xaxis-type', 'value'),\n",
    "     Input('yaxis-type', 'value'),\n",
    "     Input('year--slider', 'value')])\n",
    "def update_graph(xaxis_column_name, yaxis_column_name,\n",
    "                 xaxis_type, yaxis_type,\n",
    "                 year_value):\n",
    "    dff = df[df['Year'] == year_value]\n",
    "    return {\n",
    "        'data': [pgo.Scatter(\n",
    "            x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],\n",
    "            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],\n",
    "            text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],\n",
    "            mode='markers',\n",
    "            marker={\n",
    "                'size': 15,\n",
    "                'opacity': 0.5,\n",
    "                'line': {'width': 0.5, 'color': 'white'}\n",
    "            }\n",
    "        )],\n",
    "        'layout': pgo.Layout(\n",
    "            xaxis={\n",
    "                'title': xaxis_column_name,\n",
    "                'type': 'linear' if xaxis_type == 'Linear' else 'log'\n",
    "            },\n",
    "            yaxis={\n",
    "                'title': yaxis_column_name,\n",
    "                'type': 'linear' if yaxis_type == 'Linear' else 'log'\n",
    "            },\n",
    "            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},\n",
    "            hovermode='closest'\n",
    "        )\n",
    "    }\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b08d75c",
   "metadata": {},
   "source": [
    "# 4.0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0a14d0c6",
   "metadata": {},
   "outputs": [],
   "source": [
    "#multiple outputs\n",
    "\n",
    "import base64\n",
    "app=dash.Dash()\n",
    "df=pd.read_csv('resources/wheels.csv')\n",
    "\n",
    "def encode_image(image_file):\n",
    "    encoded = base64.b64encode(open(image_file, 'rb').read())\n",
    "    return 'data:image/png;base64,{}'.format(encoded.decode())\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.RadioItems(\n",
    "        id='wheels',\n",
    "        options=[{'label': i, 'value': i} for i in df['wheels'].unique()],\n",
    "        value=1\n",
    "    ),\n",
    "    dhc.Div(id='wheels-output'),\n",
    "\n",
    "    dhc.Hr(),  # add a horizontal rule\n",
    "    dcc.RadioItems(\n",
    "        id='colors',\n",
    "        options=[{'label': i, 'value': i} for i in df['color'].unique()],\n",
    "        value='blue'\n",
    "    ),\n",
    "    dhc.Div(id='colors-output'),\n",
    "    dhc.Img(id='display-image', src='children', height=300)\n",
    "], style={'fontFamily':'helvetica', 'fontSize':18})\n",
    "\n",
    "@app.callback(\n",
    "    Output('wheels-output', 'children'),\n",
    "    [Input('wheels', 'value')])\n",
    "def callback_a(wheels_value):\n",
    "    return 'You\\'ve selected \"{}\"'.format(wheels_value)\n",
    "\n",
    "@app.callback(\n",
    "    Output('colors-output', 'children'),\n",
    "    [Input('colors', 'value')])\n",
    "def callback_b(colors_value):\n",
    "    return 'You\\'ve selected \"{}\"'.format(colors_value)\n",
    "\n",
    "@app.callback(\n",
    "    Output('display-image', 'src'),\n",
    "    [Input('wheels', 'value'),\n",
    "     Input('colors', 'value')])\n",
    "def callback_image(wheel, color):\n",
    "    path = 'resources/images/'\n",
    "    return encode_image(path+df[(df['wheels']==wheel) & \\\n",
    "    (df['color']==color)]['image'].values[0])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1331c9c0",
   "metadata": {},
   "outputs": [],
   "source": [
    "app=dash.Dash()\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.RangeSlider(id='range',min=-6,max=6,step=1,count=1, value=[-3, 3] \n",
    "                   ),\n",
    "    dhc.Div(id='prod')\n",
    "    ])\n",
    "\n",
    "\n",
    "@app.callback(Output('prod','children'),[Input('range','value')])\n",
    "def show_output(value):\n",
    "    return  value[0]*value[1]\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "275c3049",
   "metadata": {},
   "source": [
    "# 5.0(callback with state())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "755f77e4",
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash.dependencies import State\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.Input(\n",
    "        id='number-in',\n",
    "        value=1,\n",
    "        style={'fontSize':28}\n",
    "    ),\n",
    "    dhc.Button(\n",
    "        id='submit-button',\n",
    "        n_clicks=0,\n",
    "        children='Submit',\n",
    "        style={'fontSize':28}\n",
    "    ),\n",
    "    dhc.H1(id='number-out')\n",
    "])\n",
    "\n",
    "@app.callback(\n",
    "    Output('number-out', 'children'),\n",
    "    [Input('submit-button', 'n_clicks')],\n",
    "    [State('number-in', 'value')])\n",
    "def output(n_clicks, number):\n",
    "    return '{} displayed after {} clicks'.format(number,n_clicks)\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c8232a0f",
   "metadata": {},
   "source": [
    "# Interacting with visualizations "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "85717867",
   "metadata": {},
   "outputs": [],
   "source": [
    "#Hover/click over data\n",
    "import base64\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "df = pd.read_csv('resources/wheels.csv')\n",
    "\n",
    "def encode_image(image_file):\n",
    "    encoded = base64.b64encode(open(image_file, 'rb').read())\n",
    "    return 'data:image/png;base64,{}'.format(encoded.decode())\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dhc.Div([\n",
    "    dcc.Graph(\n",
    "        id='wheels-plot',\n",
    "        figure={\n",
    "            'data': [\n",
    "                pgo.Scatter(\n",
    "                    x = df['color'],\n",
    "                    y = df['wheels'],\n",
    "                    dy = 1,\n",
    "                    mode = 'markers',\n",
    "                    marker = {\n",
    "                        'size': 12,\n",
    "                        'color': 'rgb(51,204,153)',\n",
    "                        'line': {'width': 2}\n",
    "                        }\n",
    "                )\n",
    "            ],\n",
    "            'layout': pgo.Layout(\n",
    "                title = 'Wheels & Colors Scatterplot',\n",
    "                xaxis = {'title': 'Color'},\n",
    "                yaxis = {'title': '# of Wheels','nticks':3},\n",
    "                hovermode='closest'\n",
    "            )\n",
    "        }\n",
    "    )], style={'width':'30%', 'float':'left'}),\n",
    "\n",
    "    dhc.Div([\n",
    "    dhc.Img(id='hover-image', src='children', height=300)\n",
    "    ], style={'paddingTop':35})\n",
    "])\n",
    "#Replace hoverData with clickData to interact with plot\n",
    "@app.callback( Output('hover-image', 'src'), [Input('wheels-plot', 'hoverData')])\n",
    "def callback_image(hoverData):\n",
    "    wheel=hoverData['points'][0]['y']\n",
    "    color=hoverData['points'][0]['x']\n",
    "    path = 'resources/images/'\n",
    "    return encode_image(path+df[(df['wheels']==wheel) & (df['color']==color)]['image'].values[0])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3b81f806",
   "metadata": {},
   "outputs": [],
   "source": [
    "#Selection Data\n",
    "app = dash.Dash()\n",
    "\n",
    "# create x and y arrays\n",
    "np.random.seed(10)          # for reproducible results\n",
    "x1 = np.linspace(0.1,5,50)  # left half\n",
    "x2 = np.linspace(5.1,10,50) # right half\n",
    "y = np.random.randint(0,50,50) # 50 random points\n",
    "\n",
    "# create three \"half DataFrames\"\n",
    "df1 = pd.DataFrame({'x': x1, 'y': y})\n",
    "df2 = pd.DataFrame({'x': x1, 'y': y})\n",
    "df3 = pd.DataFrame({'x': x2, 'y': y})\n",
    "\n",
    "# combine them into one DataFrame (df1 and df2 points overlap!)\n",
    "df = pd.concat([df1,df2,df3])\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dhc.Div([\n",
    "    dcc.Graph(\n",
    "        id='plot',\n",
    "        figure={\n",
    "            'data': [\n",
    "                pgo.Scatter(\n",
    "                    x = df['x'],\n",
    "                    y = df['y'],\n",
    "                    mode = 'markers'\n",
    "                )\n",
    "            ],\n",
    "            'layout': pgo.Layout(\n",
    "                title = 'Random Scatterplot',\n",
    "                hovermode='closest'\n",
    "            )\n",
    "        }\n",
    "    )], style={'width':'30%', 'display':'inline-block'}),\n",
    "\n",
    "    dhc.Div([\n",
    "    dhc.H1(id='density', style={'paddingTop':25})\n",
    "    ], style={'width':'30%', 'display':'inline-block', 'verticalAlign':'top'})\n",
    "])\n",
    "\n",
    "@app.callback(\n",
    "    Output('density', 'children'),\n",
    "    [Input('plot', 'selectedData')])\n",
    "def find_density(selectedData):\n",
    "    pts = len(selectedData['points'])\n",
    "    rng_or_lp = list(selectedData.keys())\n",
    "    rng_or_lp.remove('points')\n",
    "    max_x = max(selectedData[rng_or_lp[0]]['x'])\n",
    "    min_x = min(selectedData[rng_or_lp[0]]['x'])\n",
    "    max_y = max(selectedData[rng_or_lp[0]]['y'])\n",
    "    min_y = min(selectedData[rng_or_lp[0]]['y'])\n",
    "    area = (max_x-min_x)*(max_y-min_y)\n",
    "    d = pts/area\n",
    "    return 'Density = {:.2f}'.format(d)\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6527e8d4",
   "metadata": {},
   "source": [
    "# Updating graph of interaction "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c6bf634f",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "df = pd.read_csv('resources/mpg.csv')\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dcc.Graph(\n",
    "        id='mpg_scatter',\n",
    "        figure={\n",
    "            'data': [pgo.Scatter(\n",
    "                x = df['model_year']+1900,  # UN-JITTERED data\n",
    "                y = df['mpg'],\n",
    "                text = df['name'],\n",
    "                hoverinfo = 'text',\n",
    "                mode = 'markers'\n",
    "            )],\n",
    "            'layout': pgo.Layout(\n",
    "                title = 'mpg.csv dataset',\n",
    "                xaxis = {'title': 'model year'},\n",
    "                yaxis = {'title': 'miles per gallon'},\n",
    "                hovermode='closest'\n",
    "            )\n",
    "        }\n",
    "    )\n",
    "])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4c65f1ae",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash()\n",
    "\n",
    "df = pd.read_csv('resources/mpg.csv')\n",
    "\n",
    "# Add a random \"jitter\" \n",
    "df['year'] = df['model_year'] + np.random.randint(-4,5,len(df))*0.10\n",
    "\n",
    "app.layout = dhc.Div([\n",
    "    dhc.Div([   \n",
    "    dcc.Graph(\n",
    "        id='mpg_scatter',\n",
    "        figure={\n",
    "            'data': [pgo.Scatter(\n",
    "                x = df['year']+1900, \n",
    "                y = df['mpg'],\n",
    "                text = df['name'],\n",
    "                hoverinfo = 'text',\n",
    "                mode = 'markers'\n",
    "            )],\n",
    "            'layout': pgo.Layout(\n",
    "                title = 'mpg.csv dataset',\n",
    "                xaxis = {'title': 'model year'},\n",
    "                yaxis = {'title': 'miles per gallon'},\n",
    "                hovermode='closest'\n",
    "            )\n",
    "        }\n",
    "    )], style={'width':'50%','display':'inline-block'}),\n",
    "    dhc.Div([\n",
    "    dcc.Graph(\n",
    "        id='mpg_line',\n",
    "        figure={\n",
    "            'data': [pgo.Scatter(\n",
    "                x = [0,1],\n",
    "                y = [0,1],\n",
    "                mode = 'lines'\n",
    "            )],\n",
    "            'layout': pgo.Layout(\n",
    "                title = 'acceleration',\n",
    "                margin = {'l':0}\n",
    "            )\n",
    "        }\n",
    "    ),\n",
    "    dcc.Markdown(\n",
    "        id='mpg_stats'\n",
    "    )\n",
    "    ], style={'width':'20%', 'height':'50%','display':'inline-block'})\n",
    "])\n",
    "\n",
    "@app.callback(\n",
    "    Output('mpg_line', 'figure'),\n",
    "    [Input('mpg_scatter', 'hoverData')])\n",
    "def callback_graph(hoverData):\n",
    "    v_index = hoverData['points'][0]['pointIndex']\n",
    "    fig = {\n",
    "        'data': [pgo.Scatter(\n",
    "            x = [0,1],\n",
    "            y = [0,60/df.iloc[v_index]['acceleration']],\n",
    "            mode='lines',\n",
    "            line={'width':2*df.iloc[v_index]['cylinders']}\n",
    "        )],\n",
    "        'layout': pgo.Layout(\n",
    "            title = df.iloc[v_index]['name'],\n",
    "            xaxis = {'visible':False},\n",
    "            yaxis = {'visible':False, 'range':[0,60/df['acceleration'].min()]},\n",
    "            margin = {'l':0},\n",
    "            height = 300\n",
    "        )\n",
    "    }\n",
    "    return fig\n",
    "\n",
    "@app.callback(\n",
    "    Output('mpg_stats', 'children'),\n",
    "    [Input('mpg_scatter', 'hoverData')])\n",
    "def callback_stats(hoverData):\n",
    "    v_index = hoverData['points'][0]['pointIndex']\n",
    "    stats = \"\"\"\n",
    "        {} cylinders\n",
    "        {}cc displacement\n",
    "        0 to 60mph in {} seconds\n",
    "        \"\"\".format(df.iloc[v_index]['cylinders'],\n",
    "            df.iloc[v_index]['displacement'],\n",
    "            df.iloc[v_index]['acceleration'])\n",
    "    return stats\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b9ab678d",
   "metadata": {},
   "source": [
    "# Layout updating"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "20af7362",
   "metadata": {},
   "outputs": [],
   "source": [
    "crash_free=0\n",
    "app=dash.Dash()\n",
    "def refresh_layout():\n",
    "    global crash_free\n",
    "    crash_free =crash_free+1\n",
    "    return dhc.H1('Refreshed {} times'.format(crash_free))\n",
    "\n",
    "app.layout=refresh_layout\n",
    "\n",
    "if __name__=='__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c7cd5207",
   "metadata": {},
   "source": [
    "# 2.0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6cf72cf5",
   "metadata": {},
   "outputs": [],
   "source": [
    "app=dash.Dash()\n",
    "app.layout=dhc.Div([\n",
    "            dhc.H1(id='live-update-text'),\n",
    "            dcc.Interval(id='interval-update',\n",
    "                        interval=2000,\n",
    "                        n_intervals=0\n",
    "                        )\n",
    "])\n",
    "\n",
    "@app.callback(Output('live-update-text','children'),\n",
    "             [Input('interval-update','n_intervals')])\n",
    "def update_layout(n):\n",
    "    return \"Crsh free for {} refreshes \".format(n)\n",
    "\n",
    "\n",
    "if __name__=='__main__':\n",
    "    app.run_server()\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "34f2db63",
   "metadata": {},
   "source": [
    "# App authorization "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6c0b771b",
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash_auth\n",
    "\n",
    "USERNAME_PASSWORD_PAIRS = [\n",
    "    ['JamesBond', '007'],['LouisArmstrong', 'satchmo']\n",
    "]\n",
    "\n",
    "app = dash.Dash()\n",
    "auth = dash_auth.BasicAuth(app,USERNAME_PASSWORD_PAIRS)\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.RangeSlider(\n",
    "        id='range-slider',\n",
    "        min=-5,\n",
    "        max=6,\n",
    "        marks={i:str(i) for i in range(-5, 7)},\n",
    "        value=[-3, 4]\n",
    "    ),\n",
    "    html.H1(id='product')  # this is the output\n",
    "], style={'width':'50%'})\n",
    "\n",
    "@app.callback(\n",
    "    Output('product', 'children'),\n",
    "    [Input('range-slider', 'value')])\n",
    "def update_value(value_list):\n",
    "    return value_list[0]*value_list[1]\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  }
 ],
 "metadata": {
  "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.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}