Last active
June 27, 2017 12:02
-
-
Save kmader/28c48276ae6b04c01399ba3b0c081ff3 to your computer and use it in GitHub Desktop.
Dash Demo
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
| { | |
| "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