{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Python: Reactive Visualization (Interactivity)\n",
"\n",
"Rendering reactive components.\n",
"\n",
"Adapted from [User Guide](https://plot.ly/dash/)"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import dash\n",
"from dash.dependencies import Input, Output\n",
"import dash_html_components as html\n",
"import dash_core_components as dcc\n",
"import plotly.graph_objs as go"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import pandas as pd\n",
"import json"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
""
],
"text/vnd.plotly.v1+html": [
""
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"# For Jupyter notebook only\n",
"import plotly\n",
"plotly.offline.init_notebook_mode()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Hello Interactivity"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"app = dash.Dash()\n",
"\n",
"app.layout = html.Div([\n",
" dcc.Input(id='text1', value='Enter name', type='text'),\n",
" html.Div(id='greet')\n",
"])\n",
"\n",
"\n",
"@app.callback(\n",
" Output('greet', 'children'),\n",
" [Input('text1', 'value')]\n",
")\n",
"def update_greet(val):\n",
" return f\"Hello, {val}!\""
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n"
]
}
],
"source": [
"app.server.run()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Enter ESC-I-I to interrupt before proceeding."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Reactive plots"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"url = 'https://raw.githubusercontent.com/pandas-dev/pandas/master/pandas/tests/data/iris.csv'\n",
"iris = pd.read_csv(url)\n",
"cols = iris.columns[:-1].tolist()"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"app = dash.Dash()\n",
"\n",
"app.layout = html.Div([\n",
" dcc.Graph(id='scatter', animate=True),\n",
" \n",
" dcc.Dropdown(id='x-axis', \n",
" options=[{'label': c,'value': c} for c in cols],\n",
" value=cols[0]),\n",
" \n",
" dcc.Dropdown(id='y-axis', \n",
" options=[{'label': c,'value': c} for c in cols],\n",
" value=cols[1]),\n",
"])\n",
"\n",
"@app.callback(\n",
" Output('scatter', 'figure'),\n",
" [\n",
" Input('x-axis', 'value'),\n",
" Input('y-axis', 'value')\n",
" ]\n",
")\n",
"def update_sccatter(xlab, ylab):\n",
" return {\n",
" 'data': [\n",
" go.Scatter(\n",
" x = iris.loc[iris['Name'] == name, xlab],\n",
" y = iris.loc[iris['Name'] == name, ylab],\n",
" text = iris.loc[iris['Name'] == name, 'Name'],\n",
" mode = 'markers',\n",
" marker = go.Marker(\n",
" size = 10\n",
" ),\n",
" name = name,\n",
" )\n",
" for name in iris['Name'].unique()\n",
" ],\n",
" 'layout': go.Layout(\n",
" width = 500,\n",
" height = 500,\n",
" xaxis = dict(\n",
" title=xlab,\n",
" range=[0, 10],\n",
" ),\n",
" yaxis = dict(\n",
" title=ylab,\n",
" range=[0, 10],\n",
" ),\n",
" hovermode = 'closest'\n",
" ) \n",
" }"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n"
]
}
],
"source": [
"app.server.run()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Enter ESC-I-I to interrupt before proceeding."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Graph Crossfiltering"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {},
"outputs": [
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n"
]
}
],
"source": [
"app = dash.Dash()\n",
"\n",
"styles = {\n",
" 'column': {\n",
" 'display': 'inline-block',\n",
" 'width': '29%',\n",
" 'padding': 10,\n",
" 'boxSizing': 'border-box',\n",
" 'minHeight': '200px',\n",
" 'float': 'right'\n",
" },\n",
" 'pre': {'border': 'thin lightgrey solid'}\n",
"}\n",
"\n",
"app.layout = html.Div([\n",
" html.Div([\n",
" dcc.Graph(id='scatter', \n",
" figure={\n",
" 'data': [\n",
" go.Scatter(\n",
" x = iris.loc[iris['Name'] == name, 'SepalLength'],\n",
" y = iris.loc[iris['Name'] == name, 'SepalWidth'],\n",
" text = iris.loc[iris['Name'] == name, 'Name'],\n",
" mode = 'markers',\n",
" marker = go.Marker(\n",
" size = 10\n",
" ),\n",
" name = name,\n",
" )\n",
" for name in iris['Name'].unique()\n",
" ],\n",
" 'layout': go.Layout(\n",
" xaxis = dict(\n",
" title='SepalLength',\n",
" ),\n",
" yaxis = dict(\n",
" title='SepalWidth',\n",
" ),\n",
" hovermode = 'closest'\n",
" ) \n",
" })],\n",
" style={'width': '69%', 'display': 'inline-block'}),\n",
" \n",
" html.Div([\n",
" dcc.Markdown(\"\"\"\n",
" **Selection Data**\n",
"\n",
" Choose the lasso or rectangle tool in the graph's menu\n",
" bar and then select points in the graph.\n",
" \"\"\".replace(' ', '')),\n",
" html.Pre(id='selected-data', style=styles['pre']),\n",
" ], \n",
" style=styles['column']),\n",
"])\n",
"\n",
"@app.callback(\n",
" Output('selected-data', 'children'),\n",
" [Input('scatter', 'selectedData')])\n",
"def display_selected_data(selectedData):\n",
" return json.dumps(selectedData, indent=2)\n",
"\n",
"app.server.run()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Enter ESC-I-I to interrupt before proceeding."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"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.6.1"
}
},
"nbformat": 4,
"nbformat_minor": 2
}