How To Build And Deploy An Enterprise Grade Dashboard Using Dash And Plotly (Part 1 | Part 2 | Part 3)-Hospital Readmissions
By: Niteen Kumar
Tags: Data Visualization, Ds In The Real World, Plotly, Dashboard, Hospital Readmissions

Data storytelling is an art and an essential data science skill. One of the most important task in the hands of data scientists is to give data a clear, loud and convincing voice. It is much more than creating visually appealing graphs, plots and charts. Dashboards are a very powerful and unique way to tell your data story.

It is common for data scientists to leverage open source scientific libraries for data visualization purpose but building a proper enterprise grade dashboard could be daunting. Sometimes, data of different types (numerical/ categorical)and shapes (high/ multi dimensional or sparse) pose a great challenge when it comes to put different plots, graphs and charts together in an effective manner.

What’s in this article: This article (3 parts series) describes how you can use modern open source scientific libraries and apply data visualization techniques to create an enterprise grade dashboard.

Part 1 — Dashboard Design

Part 2 — Dashboard Development

Part 3 — Dashboard Deployment

Here, we’ll be using a popular healthcare dataset and plotly/dash open source libraries to accomplish the same. In this 3 parts series, we’ll turn dashboard idea into a reality. We’ll build some tangible components, deploy the dashboard application and make it ready for stakeholders.

Why hospital readmissions data: Reducing hospital readmissions has long been a health policy goal because it represents an opportunity to lower health care costs, improve quality, and increase patient satisfaction at once. Readmission rates not only negatively impact patient and financial outcomes but also act as an indicator of overall healthcare quality of a hospital system. Therefore, it is of great significance to study and visualize the hospital readmission dataset. The scope of this article is limited to data visualization and dashboard building techniques. However, this dataset can also be used for feature analysis, machine learning, deep learning etc.

Photo by Marcel Scholte on Unsplash

Data Source: The UCI Machine Learning Repository (link): The dataset contains over 100,000 (100K+) data points and 55 features. It also represents 10 years (1998–2008) of clinical data from 130 US hospitals and contains various features such as race, gender, age, time in hospital, number of lab tests performed, number of inpatient, outpatient, and emergency visits for prior year, etc.

Why Plotly and Dash: Dash (link) is a Python based web framework for developing web applications and modern dashboards. It is built on top of Flask, Plotly.js and React.js. Dash based applications are fast, intuitive and scale with data. Dash out of box functionalities, core components, interfaces and controls make the dashboard more interactive, effective and user friendly. It’s worth mentioning here that Plotly team has done a great job in creating proper and comprehensive API documentation.

Architecture Overview

Below diagram shows high level architecture overview and overall approach for building the dashboard.

Architecture Overview

We’ll be using following tools, technologies and platforms for dashboard development:

Python IDE (I’m using PyCharm, feel free to use any), Python3, various Python scientific libraries such as Pandas, Scipy, Numpy, Plotly, Dash etc.

Github for source code version control and repository

Heroku cloud platform for dashboard application deployment

Dashboard Design Considerations

One of the main purpose of dashboards is to provide 360 degree view of underlying data. Different plots, graphs and charts when assembled together on a dashboard should be able to communicate the message very clearly and effectively. So, it is important to understand the data first and then carefully formulate the use cases to design the dashboard.

We will follow multi tab layout design approach for our dashboard. Each tab will contain multiple related graphs/ plots providing more insights into the data. One can really get creative with widgets and core components of Dash libraries in order to provide more user controls and features on the dashboard.

Dashboard — Logical Design

As shown above in logical design diagram, we will be building an interactive and multi tab navigation dashboard. We will focus on couple of use cases and will create two tabs (one for each use case) :

Demographics information

Medical specialty and Readmit information

The first tab, demographics, will show the data distribution of race, age and gender features and their co-relations. The demographics tab will be loaded as a main page when the dashboard application is launched. The second tab, medical specialty and readmit, will provide information on different medical specialty and data distribution of patient’s readmission. In second tab, we’ll also learn how to use Dash core components to create dynamic graphs and make the dashboard more intuitive.

Let’s get started

Environment Set Up: First create a project specific Python virtual environment which will have its own independent set of installed Python packages in its site directories. (Assumptions: Python 3 is installed and you know how to create a Python virtual environment {link})

Dash Installation: Just launch the terminal and type in the below commands to install dash libraries. It supports Python 2 and 3 both but I highly recommend to use Python 3 for this track and future development.

pip install dash==0.43.0 # The core dash backend

pip install dash-daq==0.1.0 # DAQ components

Project Structure: Create a Python project work-space and folder structure as shown below:

app.py

assets <folder>

— patient_demographics.py

— patient_med_readmit.py

Dash Application Layout

Once you have all required libraries installed, let’s import the below libraries in a filed named app.py :

import dash

import dash_html_components as html

import dash_core_components as dcc

from assets import patient_demographics, patient_med_readmit

We can initialize the dash app just by calling dash class. If you are not familiar with any web framework or don’t have web development background, you might find these links very useful: w3schools and codepen. Both links will give you fair idea about web pages and their components.

Since Dash is a web framework you can design a web page using its out of the box python structures. A Dash application application layout has typically two parts:

dash-html-components

dash_core_components

dash-html-components library would help you to implement html features and components directly in your application with minimum coding effort. Similarly dash_core_components library is packed with components such as graph, tab, slider, dropdown, input, textarea, checkbox, radio items, button etc. that would let you design interactive user interfaces with ease. We will be using graph component for plotting interactive graphs which uses plotly.js behind the scene. We will learn more about styling and aesthetics aspects of graphs in part 2.

Here, we are referring to external stylesheet from website codepen.io in our dash app. As we need to render different graphs in different tabs, the config parameter suppress_callback_exceptions set to True lets us do that.

The above code snippet shows the app layout code part and how we can create different tabs using core components of Dash. Different attributes of html components and core components gives you more freedom and flexibility to design an intuitive dashboard. Please take a note that html and core components have their own id’s so that they can be rendered appropriately on dashboard.

Interactive Components — Dash Callbacks

The dash.dependencies enables application to perform callback operations of different components.

from dash.dependencies import Input, Output

@app.callback(Output('tabs-content', 'children'),

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

When tabs are clicked by a user, the tab associated graphs need to be rendered and displayed using a class definition as shown below.

def render_content(tab):

if tab == 'dem_tab':

return patient_demographics.tab_1_layout

elif tab == 'med_tab':

return patient_med_readmit.tab_2_layout

We have created two files, patient_demographics.py and patient_med_readmit.py, one for each tab.

Below is the code snippet from patient_demographics.py file. As you can see we are using html components such as div and class name attributes to achieve grid layout on the web page. The core component Graph is used to plot the graph in respective div of html. For the sake of simplicity I have just named the graphs in a sequence (graph 1–6). As you can notice, the graphs data attribute is empty for each graph and they will just produce the empty graphs (for now). In part 2 we will cover data acquisition, data wrangling and will populate the graphs with their respective data.

Similarly, patient_med_readmit.py contains two separate graphs for medical specialty and readmissions.

If you are familiar with Flask, this would be the most easiest part as Dash is built on top of Flask.

if __name__ == '__main__':

app.run_server(debug=True)

The server parameter app.run_server(debug=True) automatically refreshes the local web browser whenever the code is modified locally.

In order to run the application, just type in app.py from your terminal and you will see something like below.



* Serving Flask app “app” (lazy loading)

* Environment: production

WARNING: Do not use the development server in a production environment.

Use a production WSGI server instead.

* Debug mode: on

Running on

Debugger PIN: 452–637–956 Debugger PIN: 178–973–589* Serving Flask app “app” (lazy loading)* Environment: productionWARNING: Do not use the development server in a production environment.Use a production WSGI server instead.* Debug mode: onRunning on http://127.0.0.1:8050/ Debugger PIN: 452–637–956

Just click on the http://127.0.0.1:8050 and your dashboard application will be launched. Alternatively, you can also type in http://localhost:8050/ in your web browser.