How to Build a Web App in 50 lines of code using Plotly and Dash | by François St-Amant | Towards Data Science

There are many tools out there for data visualization. However, few tools will take your data visualization game to the next level by allowing you to easily build web based applications with interactive high quality plots.
That’s what Plotly and Dash offer, all of it in Python. That’s why you should 100% learn about it!
In this article, I will show how to create basic interactive plots with Plotly and how to integrate them in a web based application using Dash.
The data used will be the daily sales from a store, as well as a 7 day forecast. Here is what the daily sales data looks like:
Plotly is a graphing library that makes interactive high quality graphs. The keyword is interactive. Here is the code to plot 2 lines, one for the daily sales, another for the forecast.
#Import plotlyimport plotly.graph_objects as go#Initialize the plotfig_totalsales=go.Figure()#Add the linesfig_totalsales.add_trace(go.Scatter(x=sales[sales.columns[0]], y=sales[sales.columns[1]], visible=True, name='Sales'))fig_totalsales.add_trace(go.Scatter(x=fore['Date'],y=fore[fore.columns[0]],visible=True, name='Forecast'))#Add title/set graph sizefig_totalsales.update_layout(title = 'Daily Sales', width=850, height=400)fig_totalsales.show()
Pretty neat right? The append.traces function allows us to easily add other lines to the graph.
Plotly offers so much more. I will leave it at that in this article because I want to focus more on Dash. Still, I highly recommend that you check out the Plotly documentation: https://plotly.com/python/.
The Dash platform allows us newbies to produce quality enterprise-ready analytic apps without the need for developers, JavaScript or anything more than basic Python skills for that matter.
With Dash Open Source (the free version), Dash apps run on your local workstation. You cannot share the app itself but you can always share the code.
Every complete Dash app has three parts:
The layout, which describes what the application looks like.The Dash core components (called dcc), which is basically the content of the application (graphs, dropdown menus, checkboxes, etc.).The callbacks, which make the app interactive, by having the components interact with one another.
The layout, which describes what the application looks like.
The Dash core components (called dcc), which is basically the content of the application (graphs, dropdown menus, checkboxes, etc.).
The callbacks, which make the app interactive, by having the components interact with one another.
Here is all the code you need to create a Dash app that contains the table we created earlier:
#Import librariesimport dashimport dash_core_components as dccimport dash_html_components as html#Create the appapp = dash.Dash()app.layout = html.Div([    dcc.Graph(figure=fig_totalsales)])app.run_server(debug=True, use_reloader=False)
That’s all! As easy as it gets. We see that this app contains a layout as well as one core component, the figure.
The html.div tag is what defines a new section in the app, where we can add any Dash Core Component we want (dcc.Graph here). Here is what the “app” looks like right now:
Now of course, if someones wants to create an application, it’s not to show a single plot. You could have done that with any python library. What makes Dash great is that you can have different components interacting with one another. That’s where the third part of Dash, the callbacks, comes into play.
A callback asks for an input, makes it go through a function and gives an output. Let’s see how we could improve our current app (there are a million things we could do, here’s a few).
1. Add a title.
2. Add the ability to filter through our figure to only show the data points for a specific range of dates.
3. Add an interactive text box, showing the sum of the sales for the selected period.
Dash has a core component called DatePickerRange. All we need is a callback to link the figure and the text with this new core component.
Here is the full code that does just that.
Here is a block by block description of the code:
The first html.div is there to create a section with the title of the app.
The second html.div adds the DateRangePicker component as well as the 2 outputs that will be linked to it via the callback (a text element and a figure).
The last part is the callback. It asks for 2 inputs, i.e. the two dates and it gives 2 outputs, i.e. the figure and the text. Inside the update_output function, the data is selected based on the dates provided. Then, the sales total is calculated and the figure is created.
Here is a short video showing what the app looks like now:
There you have it, a decent looking web-based application in less than 50 lines of code! Check this out for more information on Dash: https://dash.plotly.com/.
Thanks a lot for reading!