Make interactive graphs using Python and Dash!

So I learned about dash a couple months ago and I immediately fell in love with it. It makes building interactive graphs with Python pretty straight forward once you get the hang of it. At first the syntax might look a little scary, but once you break it down its nothing more than Python mixed with a little bit of html. Dash is an impressive tool that seamlessly combines HTML, CSS, JavaScript, and Python to create amazing interactive applications. In this example I will walk you through building the simple graph found on the Dash documentation page. So lets begin.

1. First, as always, open up a text editor. I like the Visual Studio Code IDE, but I also like Atom.
2. We will also need to install a couple packages, so go ahead and open up a terminal while you’re at it.
3. Once you have the terminal open we need to pip install dash, so type the next three lines and hit enter after each one.

pip3 install dash==0.22.0 #dash back-end package
pip3 install dash-renderer==0.13.0 #front-end
pip3 install dash-html-components==0.11.0 #HTML integration
pip3 install dash-core-components==0.26.0 # Supercharged components
pip3 install plotly --upgrade #library used in some dash examples

4. Ok, now head back to your editor and create a new file with a ‘.py’ extension and save it somewhere you will remember. In the new file type:

import dash
import dash_html_components as html
import dash_core_components as dcc

-The dash package will allow the system to run our program on LocalHost (http://127.0.0.1) typically on port 8050

-The html package imports all html tags and lets us create and manipulate them on our page and within our graph

-The dcc package imports all of the higher level functions that use Javascript, CSS, and HTML to make the graph interactive.

5. Below the imports, we need to create a dash app object that we can modify and then display to a webpage. So type:

app = dash.Dash()

6. Next we will create the actual layout of the web page that will show the graph. So type this next:

   app.layout = html.Div(children=[])

   This will create an HTML ‘Div’ element that will contain our graph.

7. Now we’re going to add some elements inside this tag

app.layout = html.Div(children=[
            html.H1('Electric Vehicles vs. Air Quality'),
            dcc.Graph()])

-Here you can see we are creating an HTML ‘h1’ tag which is a ‘header’ tag, meaning the text will be bolder and bigger. You can put the name of your graph here.

-Below the h1 tag, we are using Graph component, which is one of the dash core components, to create the actual graph.

8. Nice.. So, by now you can probably see that all we are doing is nesting elements inside of other elements. We only have about two more layers to go. Next add:

app.layout = html.Div(children=[
            html.H1('Electric Vehicles vs. Air Quality'),
            dcc.Graph(id='example',
                    figure={
                            'data':[]
                            }
                      )]

9. To add the actual data to our graph we insert it into the ‘data’ list like this:

app.layout = html.Div(children=[
            html.H1('Electric Vehicles vs. Air Quality'),
            dcc.Graph(id='example',
                    figure={
                            'data':[
                                    {'x':[1,2,3,4,5], 'y':[8,7,7,5,3], 
                                    'type':'line', 'name':'Air Pollution'},
                                    {'x':[1,2,3,4,5], 'y':[1,1,4,7,9], 
                                    'type':'bar', 'name':'Electric Vehicles'}
                                    ],
                            'layout':{
                                    'title':'Future Pollution Prediction'
                            }
                    })])

-Note: The only reason the data parameters ‘type’ and ‘name’ are on new lines is to prevent the text from wrapping around when I post this article. You can keep each dictionary on one line.

-Depending on the ‘type’ of graph, there may be more or less variables.

-Some of the types of graphs you can make are: line, bar, scatter, heatmap, bubble, and area.

10. Now for the final piece. We add a __name__ check at the bottom of the page. This is to check if the file is being imported from another file.

if __name__ == '__main__':
    app.run_server(debug=True)

-Note: If you have trouble stopping your dash program, try setting: debug=False If that doesn’t work, close the terminal you started it on. And if that doesn’t work, open Activity Monitor and force quit any active python programs.

11. Awesome! Thats pretty much it. Well, for this tutorial that is.. Dash has unlimited customization options you should explore. Check out some of these amazing examples.

-When you run the program with python3 filename.py it should look something like this
-All you have to do to view the graph is copy the url from the output and paste it into your favorite web browser.

12. Here’s the full code:

import dash
import dash_html_components as html
import dash_core_components as dcc


app = dash.Dash()

app.layout = html.Div(children=[
            html.H1('Electric Vehicles vs. Air Quality'),
            dcc.Graph(id='example',
                    figure={
                            'data':[
                                    {'x':[1,2,3,4,5], 'y':[8,7,7,5,3], 
                                    'type':'line', 'name':'Air Pollution'},
                                    {'x':[1,2,3,4,5], 'y':[1,1,4,7,9], 
                                    'type':'bar', 'name':'Electric Vehicles'}
                                    ],
                            'layout':{
                                    'title':'Future Pollution Prediction'
                            }
                    })])

if __name__ == '__main__':
    app.run_server(debug=True)

13. It should look something like this: