How to Quickly Build a Front-End using Dash
By: Trevor O'Hearn
Tags: Data Visualization, Python, Dash, Data Science, Plotly

One of the problems I’ve always ran into when I’m trying to bring my data to life in Data Science is Dash. There is not much information on it other than the basic Dash documentation. So I did the hard work and worked through their examples and found out how all these tools work together. The best part about it all is that you can use Dash and Plotly to set up your own front end in only a few simple steps. Install the packages, set up a layout you like, write the functions for your user input and you are all set! So first things first, get the required packages using terminal and pip.

pip install dash==1.12.0

pip install plotly==4.8.1

Once you have the necessary packages installed you are set to import them into your .py file ‘frontend.py’ or whatever else you want to name it.

import dash

from dash.dependencies import Input, Output

import dash_core_components as dcc

import dash_html_components as html

Dash is a great tool to set up a webpage, but the whole point of this front end you are creating is to show off some lovely visuals and dash does not do that on its own. Plotly is a great tool to use to throw up some of those visuals. You have a choice of using plotly’s graph objects or express modules. I’m going to show how to use the graph_objects. So lets go ahead and import that as well.

import plotly.graph_objects as go

#import Plotly.express as px

Once everything is imported you are ready to start. The standard is to create a dash.Dash object and call it app. Anything and everything you want to add to your webpage will be added to app.layout. Below is a basic container called Div from dash_html_components to hold your graphs and such. You can add multiple Divs to separate content if you like.

app = dash.Dash(__name__) app.layout = html.Div(['list', 'of', 'html', 'and', 'core', 'components'])

The basics of html is simple; containers have different names so that they can apply their own attributes to whatever text or content is inside it. A Div does not do anything aside from contain while a P is a paragraph and has smaller text than a H1 or H2 which are headers.

The dash core components are more important when it comes to displaying your data as they do all the fun stuff like radio buttons, drop down menus, sliders, checkboxes, and much more. If you are looking for a specific component scroll to the bottom for the link.

Now that you’ve chosen what to use to layout your page and what specific components you want to use, you are ready to set up the callbacks that actually make your page do whatever you want it to do.

@app.callback(Output('id-of-output-container', 'type-of-output'),

[Input('id-of-input-component1', 'type-of-input'),

Input('id-of-input-component2', 'type-of-input'),

#as many inputs as needed

] # end list

) #endcallback

def functCallbackUses(input1, input2):

return {['whatever is needed for your output location']}

First thing is to understand that you are sending app.callback an Output and a list of however many inputs you need. Input and Output are part of dash.dependencies and govern all the actions. They both take two string arguments. The first is the Id of where the information is coming from (input) and going to (output). The second is the type, for inputs it can be text, number, password, email, url, or value, and for outputs it can be a figure, or more often it is children which makes it the first child of the container.

The app.callback will use the very next function in your code. If that function does not have the correct amount of inputs it will throw an error. So be careful and match that list of inputs up with a variable for each. Be sure to return the proper data for your output component and you’re all set.

Use the code below to start the server. Just add it to the bottom, save, bring up the terminal and run this command: “Python3 myfile.py”. The terminal will have a local address for you to put into a browser and check out your page!

app.run_server(debug=True)

A very simple example.

#pip install dash==1.12.0

#pip install plotly==4.8.1 import dash

from dash.dependencies import Input, Output

import dash_core_components as dcc

import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div([

dcc.Input(id='input1',

type='text',

value=2,

debounce=True),

dcc.Graph(id='whereitgoes')

])

@app.callback(Output('whereitgoes', 'figure'),

[Input('input1', 'value')]

)

def functionUsed(input1):

trace = {'data' : [ {

'x' : [input1, input1, input1],

'y' : [input1, input1, input1],

'name' : 'your value',

'type' : 'bar'

}

],

'layout' : go.Layout(title='Graph title')

}

return trace app.run_server(debug=True, use_reloader=False)

The dash_core_component (dcc) uses the input component to take in a value, the debounce parameter is so that it does not send it to the callback function until the element is no longer focused.

The callback uses the first function below it and sends it whatever value is put in by the user. Then it returns a dictionary of the data and layout to be used by the dcc.Graph that has the proper id.

All the components and graphs follow the basic callback concept. All you have to do is pick out which components you would like to use on the front end create functions that return the data in the proper format for Plotly. Good luck and happy coding!