Dash by Plotly

GIS 714 Geovisualization Spring 2019 - Student-led lab

Dash is a Python framework for building interactive web applications for data visualization. Dash is rendered in a browser and uses CSS, so it is highly customizable and easy to share via URLs. Dash uses purely Python with html components and Plot.ly graph objects.

This tutorial will demonstrate how to create a basic dashboard application showing a bubble chart, map, and interactive filtering with a range slider. The tutorial will add elements step-by-step to demonstrate how to iteratively add functionality to a dashboard.

This tutorial uses data on California wildfires larger than 1,000 acres from 1992-2015. The original data linked here was posted by Buzz Feed News.

1. Install Dash and Plotly

• Open Visual Studio Code
• Click Terminal from the top menu and select New Terminal.
• In terminal, run:

pip install dash
pip install plotly --upgrade
pip install --upgrade pandas

2. Install Python Extension for VS Code

• In Visual Studio Code, press Crtl + Shift + X to open the list of available Extensions.
• Search for Python and click Install.

3. Download data and scripts

1. If you haven't already done so, go to https://github.com/kellynm/dash-GIS715 and download the tutorial repository. (Select Clone or Download from the main repo page and download zip.) Alternatively, if you have Git set up on you computer and would prefer to use the command line, follow the bulleted steps below instead of downloading the zip:

• Select Clone or Download and copy the repository web URL (https://github.com/kellynm/dash-GIS715.git).
• In a terminal, navigate to the directory where you'd like to save the repository.
• In terminal, run:

git clone https://github.com/kellynm/dash-GIS715.git

2. In Visual Studio Code, select File, Open folder, and browse to the dash-715 folder.

4. Run first Dash script to create bubble chart

1. Select step1_bubble.py in the Explorer panel to view the first script.

This script will create and run a Dash application containing a bubble chart of the California wildfire similar to the one we created in ggplotly. Read the comments for more details about the code structure.

Notice there is only one main Dash layout object in this script. It sets the layout and specifies what data visualizations will be included. It is made up of dash html components and dash core components. You can include as many core components (graphs, tables, interactive elements) as you want, but each must have a unique id name.

2. Double check you are in the dash-715 folder in the terminal. Right click anywhere in the script or on the script file name in the Explorer panel and select Run Python File in Terminal.

This will execute the code and run the app on localhost server.

3. In the terminal output, an IP address will be listed (http://127.0.0.1:8050/). Ctrl + click the address to open the app in a browser. Use Crtl + C to terminate the server if needed.

5. Run second Dash script to add range slider

1. Select step2_rangeSlider.py in the Explorer panel to view the second script.

This script will add an interactive range slider to filter the data by years. Read the comments for more details about the code structure.

To add interactive elements, like check boxes, drop down selection, or sliders, you have to add a callback which takes an input core component (a range slider in this case) and outputs another core component (a graph using the filtered data in this case).

When the interactive event fires (moving the slider in this case), the callback is triggered, which executes a function that will execute the desired response action (updating graph in this case).

Whenever you add a callback that will result in an updated graph, you must remove the code for the original, static graph in the main Dash layout (app.layout).

1. Right click anywhere in the script or on the script file name in the Explorer panel and select Run Python File in Terminal.

This will execute the code and run the app on localhost server.

3. In the terminal output, an IP address will be listed (http://127.0.0.1:8050/). Ctrl + click the address to open the app in a browser. Use Crtl + C to terminate the server if needed.

6. Run third Dash script to add a map

1. Select step3_map.py in the Explorer panel to view the third script.

This script will add a map of the fire locations colored by cause. Read the comments for more details about the code structure.

Now we will add a second component to the Dash layout. We can use the scattermapbox plotly object to create a map of fire point locations. For now the map is not interactive (beyond the out of the box functionality). We will use a style sheet (CSS) to place the components within the layout into rows and columns.

2. On line 28 of the script, insert your Mapbox token.

3. Right click anywhere in the script or on the script file name in the Explorer panel and select Run Python File in Terminal.

This will execute the code and run the app on localhost server.

3. In the terminal output, an IP address will be listed (http://127.0.0.1:8050/). Ctrl + click the address to open the app in a browser. Use Crtl + C to terminate the server if needed.

7. Run final Dash script to use the range slider to filter the map

1. Select step4_linkGraphs.py in the Explorer panel to view the fourth script.

This script will add another callback to use the range slider to filter the map data as well. Read the comments for more details about the code structure.

Just like before, we will add a callback that takes the range slider years as input and outputs an updated map. Again, we need to remove the map graph element from the main Dash layout.

2. On line 27 of the script, insert your Mapbox token.

3. Right click anywhere in the script or on the script file name in the Explorer panel and select Run Python File in Terminal.

This will execute the code and run the app on localhost server.

3. In the terminal output, an IP address will be listed (http://127.0.0.1:8050/). Ctrl + click the address to open the app in a browser. Use Crtl + C to terminate the server if needed.

8. Add a data table component

1. Try adding a data table component below the map and bubble plot. You'll need to import the dash_table library.

import dash_table as dt

html.Div(
    [
        dt.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("rows"),
            style_table={'overflowX': 'scroll'}
        )]

2. Try another approach for adding data table using a function instead of dash_table library

def generate_table(dataframe, max_rows=10):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

html.H4(children='California Wildfires'), 
generate_table(df)

Resources

• Announcement of Dash release with high level description.
• Dash Getting Started tutorial.
• Helpful tutorial by Adriano Yoshino with videos. Note that some functionality shown in this tutorial is now deprecated, but updates can easily be found in Dash documentation.
• Plot.ly documentation.
• Collection of Dash resources including tutorials.