Build a Beautiful Dash App in Python
Tags: Plotly, Programming, Dash, Python, Web App Development

Dash in action! See more at blmjusticeapp.co.uk.

Want to build something like this?

Then keep reading! What follows is a whistle stop tour of the key features, along with a few tips and tricks on how to make your Dash app look nice — here’s the source code for mine.

If you’re looking for something more introductory, then there’s really nothing better than Dash’s own tutorials.

Multiple Tabs

Tabs are a very easy way to structure Dash apps, which I think break apart the different sections nicely and make for straightforward navigation.

Doing this is pretty simple! Take a look at the code snippet below…

How to create a dash app with different graphs separated by tabs

After assigning html.Div to app.layout , you can use the dash core component dcc.Tabs to then easily create as many tabs as you like using dcc.Tab . The labels correspond to the tab title and in the children you can put html, graphs, markdown, and then format it all how you please.

Sunburst Charts

An example of a sunburst chart from the plotly documentation

These are some of the most visually appealing charts you can find in the plotly library but you don’t see them around very much.

They’re used to order hierarchical data, like in the example above where different nation states are arranged by continent.

You can add them to your dash apps using plotly express, the high level interface for making plotly charts. Although it offers you less control than using a plotly graph objects method, the results out of the box are pretty nice even if it is fiddly to tweak the formatting.

However, to get this to work you first need a pandas dataframe formatted just right. Otherwise everything goes kaput.

This is how your dataframe should look before you call the px.sunburst method.

In this example, I’m going to use the sunburst chart to express the ‘Ethnicity’ column’s categories of ‘Sentence Length’, ‘Custody Rate’, and ‘Conviction Rate’ just like the sunburst chart above expressed the continents’ different countries. I’m also going to then add a callback in dash to make the graph interactive so the user can filter the data by year.

For reference, this is what the final result should look like:

An interactive sunburst chart

First, write the decorator app.callback for the function you’ll use to create the sunburst chart. For the output, the format is a tuple like this (graph name, “figure”) and for input it’s (year slider name, “value”). You then refer back to these in the app.layout structure — see the dash documentation on adding callbacks to your app for more here.

Next, the custom function you write takes the selected year as a parameter and returns the a plotly express object — in my example below this is assigned to the justice_graph variable.

To build the sunburst chart, you assign the column names of your dataframe in a list to the path variable; the order you specify here expresses the graph hierarchy, all of which follows the plotly documentation quite clearly.

Unfortunately it’s much trickier to format the graph’s hover data so it looks nice! To do this you need to call update_traces on a Sunburst plotly graph object — see line 30 below. Then specify your own hover template and use that to refer to the values in the hover_data variable assigned to the custom function that creates the sunburst chart; see line 16.

You can then tweak some of the way this text appears by calling update_layout and specify the fonts used in the graph as in lines 45–48 below.

Python code for an interactive sunburst plot in a dash app

If you get stuck on this, then check out this article here which has a pretty good run down on the subject.

Layer a Scattermapbox Plot on a Choroplethmapbox Plot

Plotly offers two pretty cool graphs on top of maps — a scattermapbox that plots individual scatter points on a map and a choroplethmapbox, which colours different sections in a gradient according to some variable — the kind of thing you often see to express population density.

Interestingly, you can combine these two! There isn’t much documentation on how to do this but it’s not too hard.

First of all, you need to call a choroplethmapbox graph object method (excuse the mouthful) and assign it to a variable; in this case choro. This follows the plotly documentation pretty well. Probably the trickiest bit here is getting correctly formatted geojson quickly — for that I’d strongly recommend this github repository for UK values.

Then do the same for a Scattermapbox graph object method. To control the size and colour of the scattered points, you can input numerical pandas series objects to a dictionary assigned to the marker parameter.

Once you’ve done all this, call a plotly graph object using the . go.Figure method and input the Choroplethmapbox object followed by the Scattermapbox object in a list to the data parameter. Or perhaps it’s easier just to see what that looks like in line 34 below.

You’ll also need a mapbox token for this to load properly, which you can get from their website —mapbox’s default settings work just fine for this.

Python code for layering a scattermapbox on top of a choroplethmapbox

To get this working in your app, when you add a dcc.Graph method later you just assign the name of your graph — in this case ethnicity_map to the figure parameter and then you’re good to go.

Custom Favicon and Code Style

Two last little tips! It’s very easy to use your own favicon in Dash apps but for some reason it’s not that common.

All you have to do is create an assets folder in the root directory of your project and add the image you want as your favicon there. Call it favicon.ico and that’s it; Dash does everything else under the hood.

Next, keeping track of your code style when writing a Dash app can be fiddly since there’s a lot of white space and different possible tab indentations on each line which aren’t white space delineated.

Also, as far as I can tell, there’s no set style everyone seems to use! So I recommend not worrying too much and just coding it however is easy for you to read.

Then when you’re finished, use black to format your code. You can even run it on the whole app directory by hitting.

python -m black my-dash-app-directory

This skips the non-python files and cleans up all your code and leaves the dash app functioning intact. Thank you developers of black!