Skip to content

Instantly share code, notes, and snippets.

@kmader

kmader/DashDemo.ipynb

Last active June 27, 2017 12:02
Show Gist options
  • Save kmader/28c48276ae6b04c01399ba3b0c081ff3 to your computer and use it in GitHub Desktop.
Save kmader/28c48276ae6b04c01399ba3b0c081ff3 to your computer and use it in GitHub Desktop.
Download ZIP
Dash Demo
Display the source blob
Display the rendered blob
Raw
DashDemo.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Simple Demo\n",
"A few of the Dash examples packaged together in a simple Jupyter notebook to make interactive testing easier"
]
},
{
"cell_type": "code",
"execution_count": 34,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import dash\n",
"import dash_core_components as dcc\n",
"import dash_html_components as html\n",
"from dash.dependencies import Input, Output\n",
"offline = True\n",
"if offline:\n",
" app.css.config.serve_locally = True\n",
" app.scripts.config.serve_locally = True"
]
},
{
"cell_type": "code",
"execution_count": 43,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"from IPython import display\n",
"def show_app(app, port = 9999, width = 700, height = 350):\n",
" url = 'http://localhost:%d' % port\n",
" iframe = '<iframe src=\"{url}\" width={width} height={height}></iframe>'.format(url = url, \n",
" width = width, \n",
" height = height)\n",
" display.display_html(iframe, raw = True)\n",
" return app.run_server(debug=False, # needs to be false in Jupyter\n",
" port=port)"
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"app_simple = dash.Dash()\n",
"\n",
"app_simple.layout = html.Div(children=[\n",
" html.H1(children='Hello Dash'),\n",
"\n",
" html.Div(children='''\n",
" Dash: A web application framework for Python.\n",
" '''),\n",
"\n",
" dcc.Graph(\n",
" id='example-graph',\n",
" figure={\n",
" 'data': [\n",
" {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},\n",
" {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},\n",
" ],\n",
" 'layout': {\n",
" 'title': 'Dash Data Visualization'\n",
" }\n",
" }\n",
" )\n",
"])"
]
},
{
"cell_type": "code",
"execution_count": 24,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<iframe src=http://localhost:9999 width=700 height=350></iframe>"
]
},
"metadata": {},
"output_type": "execute_result"
},
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:9999/ (Press CTRL+C to quit)\n",
"127.0.0.1 - - [27/Jun/2017 13:29:55] \"GET / HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:29:56] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:29:56] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:29:56] \"GET /_dash-routes HTTP/1.1\" 200 -\n"
]
}
],
"source": [
"show_app(app_simple)"
]
},
{
"cell_type": "code",
"execution_count": 25,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import pandas as pd\n",
"\n",
"df = pd.read_csv(\n",
" 'https://gist.githubusercontent.com/chriddyp/'\n",
" 'c78bf172206ce24f77d6363a2d754b59/raw/'\n",
" 'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'\n",
" 'usa-agricultural-exports-2011.csv')\n",
"\n",
"def generate_table(dataframe, max_rows=10):\n",
" return html.Table(\n",
" # Header\n",
" [html.Tr([html.Th(col) for col in dataframe.columns])] +\n",
"\n",
" # Body\n",
" [html.Tr([\n",
" html.Td(dataframe.iloc[i][col]) for col in dataframe.columns\n",
" ]) for i in range(min(len(dataframe), max_rows))]\n",
" )\n",
"\n",
"app_table = dash.Dash()\n",
"\n",
"app_table.layout = html.Div(children=[\n",
" html.H4(children='US Agriculture Exports (2011)'),\n",
" \n",
" generate_table(df)\n",
"])"
]
},
{
"cell_type": "code",
"execution_count": 36,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"?html.Source"
]
},
{
"cell_type": "code",
"execution_count": 26,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<iframe src=http://localhost:9999 width=700 height=350></iframe>"
]
},
"metadata": {},
"output_type": "execute_result"
},
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:9999/ (Press CTRL+C to quit)\n",
"127.0.0.1 - - [27/Jun/2017 13:30:17] \"GET / HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:30:17] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:30:17] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:30:17] \"GET /_dash-routes HTTP/1.1\" 200 -\n"
]
}
],
"source": [
"show_app(app_table)"
]
},
{
"cell_type": "code",
"execution_count": 31,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"app_inter = dash.Dash()\n",
"\n",
"app_inter.layout = html.Div([\n",
" dcc.Input(id='my-id', value='initial value', type=\"text\"),\n",
" html.Div(id='my-div')\n",
"])\n",
"\n",
"@app_inter.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)"
]
},
{
"cell_type": "code",
"execution_count": 32,
"metadata": {
"collapsed": false,
"scrolled": true
},
"outputs": [
{
"data": {
"text/html": [
"<iframe src=http://localhost:9999 width=700 height=350></iframe>"
]
},
"metadata": {},
"output_type": "execute_result"
},
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:9999/ (Press CTRL+C to quit)\n",
"127.0.0.1 - - [27/Jun/2017 13:35:48] \"GET / HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:50] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:50] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:50] \"GET /_dash-routes HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:50] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:35:52] \"POST /_dash-update-component HTTP/1.1\" 200 -\n"
]
}
],
"source": [
"show_app(app_inter)"
]
},
{
"cell_type": "code",
"execution_count": 55,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"%matplotlib inline\n",
"import matplotlib.pyplot as plt\n",
"from lungstage.html_viz import fig_to_uri\n",
"import numpy as np\n",
"app_iplot = dash.Dash()\n",
"\n",
"app_iplot.layout = html.Div([\n",
" dcc.Input(id='plot_title', value='FancyPlot', type=\"text\"),\n",
" html.Div([html.Img(id = 'cur_plot', src = '')],\n",
" id='plot_div')\n",
"])\n",
"\n",
"@app_iplot.callback(\n",
" Output(component_id='cur_plot', component_property='src'),\n",
" [Input(component_id='plot_title', component_property='value')]\n",
")\n",
"def update_output_div(input_value):\n",
" fig, ax1 = plt.subplots(1,1)\n",
" np.random.seed(len(input_value))\n",
" ax1.matshow(np.random.uniform(-1,1, size = (5,5)))\n",
" ax1.set_title(input_value)\n",
" out_url = fig_to_uri(fig)\n",
" return out_url"
]
},
{
"cell_type": "code",
"execution_count": 56,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [
{
"data": {
"text/html": [
"<iframe src=\"http://localhost:9999\" width=700 height=350></iframe>"
]
},
"metadata": {},
"output_type": "execute_result"
},
{
"name": "stderr",
"output_type": "stream",
"text": [
" * Running on http://127.0.0.1:9999/ (Press CTRL+C to quit)\n",
"127.0.0.1 - - [27/Jun/2017 13:59:38] \"GET / HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:38] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:38] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:38] \"GET /_dash-routes HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:39] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:42] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:43] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:43] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:44] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:45] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:46] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:46] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:46] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:47] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:48] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:49] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
"127.0.0.1 - - [27/Jun/2017 13:59:49] \"POST /_dash-update-component HTTP/1.1\" 200 -\n"
]
}
],
"source": [
"show_app(app_iplot)"
]
},
{
"cell_type": "code",
"execution_count": 40,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": [
"Img"
]
},
"execution_count": 40,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
""
]
}
],
"metadata": {
"anaconda-cloud": {},
"kernelspec": {
"display_name": "Python [default]",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3.0
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.2"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment