Introduction to Dashboarding (Data Visualization) for Dash by Plotly

One of the most important skills for a data scientist is the ability to effectively convey the results of a project to a wider audience. While there already exists a number of web-based tools (like Tableau) that make data visualization easy, sometimes a more customized appearance or functionality is necessary. This is an ideal use case for Dash by Plotly; an open-source dashboarding (data visualization) framework built entirely using Python (or R).

Plot.ly is already a popular library for generating interactive and attractive data visualizations in Python, Dash translates that functionality into public-facing web apps. In order to publish your app, you will need to host your app somewhere, either using personal/company servers or through a cloud-based platform service like Heroku.

Setting up your app.py file

The documentation for Dash already provides a very good tutorial to building a Dash dashboard, if this is your first time using Dash you should absolutely go through the whole thing. To be brief, though Dash’s tutorial recommends dividing your file into two sections, I suggest three for ease of navigation. Feel free to explore a detailed [app.py](https://github.com/magnawhale/capstone_project/blob/master/app.py) file here, and view the user-facing app here.

First, I usually have a section for “globals”. This includes importing any libraries or data that will be used globally, defining global variables, defining any global functions (as opposed to callback functions…alternatively, you can import them from separate .py files), and defining dictionaries of repeated CSS styling attributes.

### SECTION ONE - GLOBALS ###
import dash
import dash_bootstrap_components as dbc       #for columns/tabs
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go    #for making plot.ly graph objectsdef global_function_01(inputs):
    return inputs + 1global_variable_01 = [1,2,3,5,7,11,13,17]app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID])
server = app.server

Second, there is the app layout section: the overall architecture of the app that dictates the location and appearance of your application components within the browser window. The layout section is composed completely of components. Components are either html-style components (headings, tables, DIVs, etc.) or dash core components (graphs, buttons, menus, etc.). Components can have a variety of properties, but the most vital are children=[], id='', value=, and style={} . The property children contains whatever you wish to be displayed in that particular location, whether it be a string, a number, or even a list of other components. Note: For ease of structuring, I highly recommend nesting Dash components as the children of html components.

### SECTION TWO - LAYOUT ###
app.layout = html.Div(children=[  ### whole page
    html.H1('Title of Your Application',   ### page header
        style={'textAlign': 'center', 'margin-bottom': 0.3}
    ),
    html.Br(),
    html.Div(id='graphs', children=[     ### page contents
        dcc.Tabs(id='tabs', 
            value='tab-1', 
            style={
                'height': '45px'
            },
            children=[                  ### tabs for the page
                dcc.Tab(id='tab1', value='tab-1', 
                    style=tab_style, 
                    selected_style=tab_selected_style),
                dcc.Tab(id='tab2', value='tab-2', 
                    style=tab_style, 
                    selected_style=tab_selected_style),
            ]
        ),
        ### displayed below tabs ###
        html.Div(id='tabs-content', children=[
            dcc.Graph(id='graph'),    #### all graphs 
        ])
    ]),
])

Third, and finally, is the callbacks section. This is where the magic happens. Callbacks consist of a list of outputs and a list of inputs (both within a @app.callback() wrapper) followed by a callback function. Though the outputs and inputs do not technically have to be within square brackets if there is only one of each, it’s better to get in the habit anyway to make debugging easier later. Most dashboards will require numerous callbacks; as your dashboard becomes more complicated, be careful to order these callbacks in such a way that nothing is referenced before it appears in the code.

Both outputs and inputs are constructed by two arguments: the id of the component being referenced from the Layout section, followed by the property with which the callback function interacts. The callback function parameters are simply all of the second Input arguments in the order they are listed. The callback function returns should be in the same order as the second Output arguments. This means you can have as many inputs and outputs as you like for the function, so long as the ordering is carefully declared. The code below provides an example of how the values returned from two dropdown menus determine the X and Y coordinates of a graph.

### SECTION 3 - Callbacks ###
@app.callback(
    [Output('graph', 'figure')],
    [Input('dropdown1', 'value'),
     Input('dropdown2', 'value')])
def update_graph(selected_value1, selected_value2):
    traces = []
    traces.append(go.Scatter(
        x=selected_value1,
        y=selected_value2,
    figure = {'data': traces}
    return figure# automatically update HTML display if a change is made to code
if __name__ == '__main__':
    app.run_server(debug=True)  #False hides errors from users

Tweaking Appearance and Layout

As wonderful as Dash is, there are still some issues with customizing dashboard appearance. Dash’s built-in layout options are fairly limited, do not always respond intuitively, and sometimes simply do not work for certain component combinations. The best solution is to utilize the open-source Dash Bootstrap Components library. Beyond the expanded number of components available from this library, it also allows two excellent layout methods: grid layout and row/column layout. Both are exceptionally intuitive and easy to implement. The only caveat is that bootstrap does not work properly with all browsers (I recommend Google Chrome).

Beyond this, there are virtually no limitations to tweaking the visual style of your dashboard. Not only does every component have some form of a style={} property to allow manipulation of visual characteristics on a element-by-element basis, but you can also import CSS stylesheets and JavaScript code to help define the global appearance of your dashboard. If you are unfamiliar with how to write code for CSS, there are numerous free resources on the web (for example, W3schools).

#python #web-development