{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Python: Reactive Visualization (Layout)\n", "\n", "Rendering HTML components.\n", "\n", "Adapted from [User Guide](https://plot.ly/dash/)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Installation\n", "\n", "Install `dash` using the following commands\n", "\n", "```bash\n", "pip3 install -U dash\n", "pip3 install -U dash-renderer\n", "pip3 install -U dash-html-components\n", "pip3 install -U dash-core-components\n", "pip3 install -U plotly\n", "```" ] }, { "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 pandas as pd" ] }, { "cell_type": "code", "execution_count": 2, "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 Dash" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": true }, "outputs": [], "source": [ "app = dash.Dash()\n", "\n", "app.layout = html.Div(children=[\n", " html.H1('Hello Dash',\n", " style={\n", " 'textAlign': 'center',\n", " }),\n", "\n", " html.Div('''\n", " Dash: A web application framework for Python.\n", " ''',\n", " style={\n", " 'textAlign': 'center',\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': 'Montréal'},\n", " ],\n", " 'layout': {\n", " 'title': 'Dash Data Visualization'\n", " }\n", " }\n", " )\n", "])\n" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": true }, "outputs": [], "source": [ "app.css.append_css({\"external_url\": \"https://codepen.io/chriddyp/pen/bWLwgP.css\"})" ] }, { "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": { "collapsed": true }, "source": [ "## Rendering a `pandas` table" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "collapsed": true }, "outputs": [], "source": [ "df = pd.read_csv('https://raw.githubusercontent.com/pandas-dev/pandas/master/pandas/tests/data/iris.csv')" ] }, { "cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
SepalLengthSepalWidthPetalLengthPetalWidthName
05.13.51.40.2Iris-setosa
14.93.01.40.2Iris-setosa
24.73.21.30.2Iris-setosa
34.63.11.50.2Iris-setosa
45.03.61.40.2Iris-setosa
\n", "
" ], "text/plain": [ " SepalLength SepalWidth PetalLength PetalWidth Name\n", "0 5.1 3.5 1.4 0.2 Iris-setosa\n", "1 4.9 3.0 1.4 0.2 Iris-setosa\n", "2 4.7 3.2 1.3 0.2 Iris-setosa\n", "3 4.6 3.1 1.5 0.2 Iris-setosa\n", "4 5.0 3.6 1.4 0.2 Iris-setosa" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "df.head()" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "collapsed": true }, "outputs": [], "source": [ "def gen_table(df, max_rows=10):\n", " return html.Table(\n", " [\n", " html.Tr([\n", " html.Th(col) for col in df.columns])\n", " ] +\n", " [\n", " html.Tr([\n", " html.Td(df.iloc[i][col]) for col in df.columns\n", " ]) for i in range(min(df.shape[0], max_rows))\n", " ]\n", " )" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "collapsed": true }, "outputs": [], "source": [ "app.layout = html.Div(children=[\n", " html.H4(\"Fisher's Iris Data\"),\n", " gen_table(df)\n", "])" ] }, { "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.server.run()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Enter ESC-I-I to interrupt before proceeding." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Creating graphs" ] }, { "cell_type": "code", "execution_count": 15, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import plotly.graph_objs as go" ] }, { "cell_type": "code", "execution_count": 53, "metadata": { "collapsed": true }, "outputs": [], "source": [ "text = \"\"\"\n", "# Fisher's Iris Data\n", "\n", "- Data [Source](https://raw.githubusercontent.com/pandas-dev/pandas/master/pandas/tests/data/iris.csv)\n", "- Created on 30 June 2017\n", "\"\"\"\n", "\n", "app.layout = html.Div(children=[\n", " dcc.Markdown(\n", " children = text,\n", " ),\n", " dcc.Graph(\n", " id = 'fihser-iris',\n", " figure = {\n", " 'data': [\n", " go.Scatter(\n", " x = df.loc[df['Name'] == name, 'SepalLength'],\n", " y = df.loc[df['Name'] == name, 'SepalWidth'],\n", " text = df.loc[df['Name'] == name, 'Name'],\n", " mode = 'markers',\n", " marker = go.Marker(\n", " size = 10\n", " ),\n", " name = name,\n", " )\n", " for name in df['Name'].unique()\n", " ],\n", " 'layout': go.Layout(\n", " width = 500,\n", " height = 500,\n", " xaxis = {'title': 'Sepal Length'},\n", " yaxis = {'title': 'Sepal Width'},\n", " hovermode = 'closest'\n", " ) \n", " }\n", " )\n", "])" ] }, { "cell_type": "code", "execution_count": 55, "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": "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 }