Dash - how to make a web data app?

#Dash #Data visualization #Dashboard #Python

Today I would like to write a couple of words about Dash - an open source web application framework for data apps. Once we're done with cleaning and manipulating our data, Dash is a place where we can visualize it and/or create really nice dashboards.

Dash is a part of Plotly, where the charts and other visualizations are actually made. Dash provides an interface to display them. Since there is a detailed documentation and big community around it, I will not go through the details of building an app. Instead, let's focus on what can we do with this powerful tool.

As an example, let's take a look at this dashboard (it may take up to 1 minute to load, I'll explain why later in this article). This is a multipaged interactive dashboard I made to explore the dataset regarding National Rail in the UK. The dataset comes from Maven Analytics' monthly challenge and I found it really interesting to visualize. The dashboard is split into 3 pages, and can be navigated through the buttons at the top of each page. It is really helpful as you can organize the dashboard by topics.

The first page starts with some basic KPIs (you can see how to prepare them in this article) and a few vizzes regarding most popular routes and revenue analysis. All charts are interactive, dropdown menus have a few options to choose from. The first graph is made with dash-cytoscape component, which is just perfect for network visualizations like rail routes. Apart from really cool rail network visualization (based on geographical coordinates) the graph is also interactive. When you hover over the nodes and edges of the graph, the information with station names and routes respectively is displayed. I also included data regarding tickets sold on the particular route.

The other two charts present the revenue-related data. The first one allows users to choose time interval, and the second one enables them to analyze the revenue either by ticket type or ticket class.

The last element of the first page is a table, which is also interactive. Full potential of dash datatable component can be viewed here. In our example, users can choose the time interval from dropdown options, filter data and export data to xlsx. In the example below we filtered rows where Ticket Class = 'First Class' and the weekly revenue for Ticket Type = "Advance" > 4000.

The other pages of the dashboard include several charts focusing on delays and customer behavior analysis.

All right, but how do we get the charts updated based on the inputs from dropdowns? This is possible thanks to callbacks - the heart and soul of dash. These are functions' decorators and you can read more about them here.

I also would like to mention about one thing. Once our dash app is built, we can run it locally on our computer or we can deploy it. The second solution is really useful as we can send a link to anyone interested in viewing it. The downside of this solution is that you have to pay for it in most cases. Fortunately it is possible to deploy your app for free, however, it loads much slower and spins down with inactivity. An example of the service that enables us to deploy dash app for free is Render. Here's a tutorial how to do it.