Python: Reactive Visualization (Layout)¶

Rendering HTML components.

Adapted from User Guide

Installation¶

Install dash using the following commands

pip3 install -U dash
pip3 install -U dash-renderer
pip3 install -U dash-html-components
pip3 install -U dash-core-components
pip3 install -U plotly

In [1]:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd

In [2]:

# For Jupyter notebook only
import plotly
plotly.offline.init_notebook_mode()

Hello Dash¶

In [3]:

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1('Hello Dash',
           style={
               'textAlign': 'center',
           }),

    html.Div('''
        Dash: A web application framework for Python.
    ''',
            style={
                'textAlign': 'center',
            }),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

In [4]:

app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

In [5]:

app.server.run()

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Enter ESC-I-I to interrupt before proceeding.

Rendering a `pandas` table¶

In [6]:

df = pd.read_csv('https://raw.githubusercontent.com/pandas-dev/pandas/master/pandas/tests/data/iris.csv')

In [7]:

df.head()

Out[7]:

	SepalLength	SepalWidth	PetalLength	PetalWidth	Name
0	5.1	3.5	1.4	0.2	Iris-setosa
1	4.9	3.0	1.4	0.2	Iris-setosa
2	4.7	3.2	1.3	0.2	Iris-setosa
3	4.6	3.1	1.5	0.2	Iris-setosa
4	5.0	3.6	1.4	0.2	Iris-setosa

In [8]:

def gen_table(df, max_rows=10):
    return html.Table(
        [
            html.Tr([
            html.Th(col) for col in df.columns])
        ] +
        [
            html.Tr([
            html.Td(df.iloc[i][col]) for col in df.columns
        ]) for i in range(min(df.shape[0], max_rows))
        ]
    )

In [10]:

app.layout = html.Div(children=[
    html.H4("Fisher's Iris Data"),
    gen_table(df)
])

In [11]:

app.server.run()

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Enter ESC-I-I to interrupt before proceeding.

Creating graphs¶

In [15]:

import plotly.graph_objs as go

In [53]:

text = """
# Fisher's Iris Data

- Data [Source](https://raw.githubusercontent.com/pandas-dev/pandas/master/pandas/tests/data/iris.csv)
- Created on 30 June 2017
"""

app.layout = html.Div(children=[
    dcc.Markdown(
        children = text,
    ),
    dcc.Graph(
        id = 'fihser-iris',
        figure = {
            'data': [
                go.Scatter(
                    x = df.loc[df['Name'] == name, 'SepalLength'],
                    y = df.loc[df['Name'] == name, 'SepalWidth'],
                    text = df.loc[df['Name'] == name, 'Name'],
                    mode = 'markers',
                    marker = go.Marker(
                        size = 10
                        ),
                    name = name,
                    )
                for name in df['Name'].unique()
            ],
            'layout': go.Layout(
                width = 500,
                height = 500,
                xaxis = {'title': 'Sepal Length'},
                yaxis = {'title': 'Sepal Width'},
                hovermode = 'closest'
            )
        }
    )
])

In [55]:

app.server.run()

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Enter ESC-I-I to interrupt before proceeding.