-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit b7a491a
Showing
1 changed file
with
208 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,208 @@ | ||
{ | ||
"cells": [ | ||
{ | ||
"cell_type": "code", | ||
"execution_count": 8, | ||
"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", | ||
"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", | ||
" WARNING: This is a development server. Do not use it in a production deployment.\n", | ||
" Use a production WSGI server instead.\n", | ||
" * Debug mode: off\n" | ||
] | ||
} | ||
], | ||
"source": [ | ||
"import dash\n", | ||
"import dash_core_components as dcc\n", | ||
"import dash_html_components as html\n", | ||
"import pandas as pd\n", | ||
"import plotly.express as px\n", | ||
"\n", | ||
"external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n", | ||
"\n", | ||
"app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n", | ||
"\n", | ||
"df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')\n", | ||
"\n", | ||
"available_indicators = df['Indicator Name'].unique()\n", | ||
"\n", | ||
"app.layout = html.Div([\n", | ||
" html.Div([\n", | ||
"\n", | ||
" html.Div([\n", | ||
" dcc.Dropdown(\n", | ||
" id='crossfilter-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='crossfilter-xaxis-type',\n", | ||
" options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n", | ||
" value='Linear',\n", | ||
" labelStyle={'display': 'inline-block', 'marginTop': '5px'}\n", | ||
" )\n", | ||
" ],\n", | ||
" style={'width': '49%', 'display': 'inline-block'}),\n", | ||
"\n", | ||
" html.Div([\n", | ||
" dcc.Dropdown(\n", | ||
" id='crossfilter-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='crossfilter-yaxis-type',\n", | ||
" options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n", | ||
" value='Linear',\n", | ||
" labelStyle={'display': 'inline-block', 'marginTop': '5px'}\n", | ||
" )\n", | ||
" ], style={'width': '49%', 'float': 'right', 'display': 'inline-block'})\n", | ||
" ], style={\n", | ||
" 'padding': '10px 5px'\n", | ||
" }),\n", | ||
"\n", | ||
" html.Div([\n", | ||
" dcc.Graph(\n", | ||
" id='crossfilter-indicator-scatter',\n", | ||
" hoverData={'points': [{'customdata': 'Japan'}]}\n", | ||
" )\n", | ||
" ], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20'}),\n", | ||
" html.Div([\n", | ||
" dcc.Graph(id='x-time-series'),\n", | ||
" dcc.Graph(id='y-time-series'),\n", | ||
" ], style={'display': 'inline-block', 'width': '49%'}),\n", | ||
"\n", | ||
" html.Div(dcc.Slider(\n", | ||
" id='crossfilter-year--slider',\n", | ||
" min=df['Year'].min(),\n", | ||
" max=df['Year'].max(),\n", | ||
" value=df['Year'].max(),\n", | ||
" marks={str(year): str(year) for year in df['Year'].unique()},\n", | ||
" step=None\n", | ||
" ), style={'width': '49%', 'padding': '0px 20px 20px 20px'})\n", | ||
"])\n", | ||
"\n", | ||
"\n", | ||
"@app.callback(\n", | ||
" dash.dependencies.Output('crossfilter-indicator-scatter', 'figure'),\n", | ||
" [dash.dependencies.Input('crossfilter-xaxis-column', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-yaxis-column', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-xaxis-type', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-yaxis-type', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-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", | ||
"\n", | ||
" fig = px.scatter(x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],\n", | ||
" y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],\n", | ||
" hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name']\n", | ||
" )\n", | ||
"\n", | ||
" fig.update_traces(customdata=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'])\n", | ||
"\n", | ||
" fig.update_xaxes(title=xaxis_column_name, type='linear' if xaxis_type == 'Linear' else 'log')\n", | ||
"\n", | ||
" fig.update_yaxes(title=yaxis_column_name, type='linear' if yaxis_type == 'Linear' else 'log')\n", | ||
"\n", | ||
" fig.update_layout(margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')\n", | ||
"\n", | ||
" return fig\n", | ||
"\n", | ||
"\n", | ||
"def create_time_series(dff, axis_type, title):\n", | ||
"\n", | ||
" fig = px.scatter(dff, x='Year', y='Value')\n", | ||
"\n", | ||
" fig.update_traces(mode='lines+markers')\n", | ||
"\n", | ||
" fig.update_xaxes(showgrid=False)\n", | ||
"\n", | ||
" fig.update_yaxes(type='linear' if axis_type == 'Linear' else 'log')\n", | ||
"\n", | ||
" fig.add_annotation(x=0, y=0.85, xanchor='left', yanchor='bottom',\n", | ||
" xref='paper', yref='paper', showarrow=False, align='left',\n", | ||
" text=title)\n", | ||
"\n", | ||
" fig.update_layout(height=225, margin={'l': 20, 'b': 30, 'r': 10, 't': 10})\n", | ||
"\n", | ||
" return fig\n", | ||
"\n", | ||
"\n", | ||
"@app.callback(\n", | ||
" dash.dependencies.Output('x-time-series', 'figure'),\n", | ||
" [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),\n", | ||
" dash.dependencies.Input('crossfilter-xaxis-column', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-xaxis-type', 'value')])\n", | ||
"def update_y_timeseries(hoverData, xaxis_column_name, axis_type):\n", | ||
" country_name = hoverData['points'][0]['customdata']\n", | ||
" dff = df[df['Country Name'] == country_name]\n", | ||
" dff = dff[dff['Indicator Name'] == xaxis_column_name]\n", | ||
" title = '<b>{}</b><br>{}'.format(country_name, xaxis_column_name)\n", | ||
" return create_time_series(dff, axis_type, title)\n", | ||
"\n", | ||
"\n", | ||
"@app.callback(\n", | ||
" dash.dependencies.Output('y-time-series', 'figure'),\n", | ||
" [dash.dependencies.Input('crossfilter-indicator-scatter', 'hoverData'),\n", | ||
" dash.dependencies.Input('crossfilter-yaxis-column', 'value'),\n", | ||
" dash.dependencies.Input('crossfilter-yaxis-type', 'value')])\n", | ||
"def update_x_timeseries(hoverData, yaxis_column_name, axis_type):\n", | ||
" dff = df[df['Country Name'] == hoverData['points'][0]['customdata']]\n", | ||
" dff = dff[dff['Indicator Name'] == yaxis_column_name]\n", | ||
" return create_time_series(dff, axis_type, yaxis_column_name)\n", | ||
"\n", | ||
"\n", | ||
"if __name__ == '__main__':\n", | ||
" app.run_server(debug=False)" | ||
] | ||
}, | ||
{ | ||
"cell_type": "code", | ||
"execution_count": null, | ||
"metadata": {}, | ||
"outputs": [], | ||
"source": [] | ||
} | ||
], | ||
"metadata": { | ||
"interpreter": { | ||
"hash": "2f454e2e96646770199fc47cb78d862d839ffea576fb3d9512f2d8b1a9f28fb3" | ||
}, | ||
"kernelspec": { | ||
"display_name": "Python 3.7.9 64-bit ('base': conda)", | ||
"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.7.9" | ||
}, | ||
"orig_nbformat": 4 | ||
}, | ||
"nbformat": 4, | ||
"nbformat_minor": 2 | ||
} |