Dash — Your Simple yet Powerful Data-Vis Dashboard

Nowadays, there are a lot of data scientists that use python as their programming language to ease their job in analysing, processing, and predicting insight from their datasets. In order to present their job pretty well to their clients, they need to visualise it on a dashboard or power point so that the clients can gain the information they want.

However, creating a dashboard from scratch is time consuming — considering there are several stacks that you have to learn.

But wait, don’t you want to discuss about an easy way to build a dashboard Ay? Well, it’s written on your post title :|

Yeap! I do!

So, worry not my data scientist fellas, here I’d like to give you some short tutorial and explanation about Dash, an open source python library for creating a reactive web-based application. If you want to delve more about Dash, you can read more about it on its official introduction by plotly on medium!

Create A Simple Reactive Web-app Dashboard

Setting Up

The only mandatory thing that you need to do before we begin this tutorial is that you have python3 installed in your laptop. But, if you haven’t had your python3 yet, you can check this link for its easy installation.

Good. Now you have your python3 within your laptop and we are ready to go.

Before you create your dashboard, it is better for you to set up your python virtual environment so that every library that you install with pip will be installed locally. To set your virtual environment, on your terminal, please type

python3 -m venv venv

And to activate your virtual environment, on the directory where your venv is created, please type

source venv/bin/activate

After your virtual environment is activated, you have to install dash and pandas python library. But, before that, if you want to make sure whether you already installed dash or pandas, you can type pip freeze and search for dash and pandas. If you haven’t had dash and/or pandas installed yet, type pip install dash and/or pip install pandas to get your laptop ready.

Get Your Hands Dirty With Code

Without any further a do, let’s dive into code :D

Well, if you are not patient enough to follow along this tutorial, you can check the final result here.

Before you start coding, this tutorial use Coronavirus-Dataset obtained from Kaggle.

First thing first, you need to import all the libraries needed within this tutorial and upload the dataset with pd.read_csv

By using dash_core_components and dash_html_components, you can write your html code and bar chart graph visualisation as below

Dash uses Flask as its backend and React.js as its frontend. Dash has several useful components that is built in React.js such as dropdowns, sliders, calendar pickers, and any other components that you can check here. What is really awesome about dash is that you can even create your own component within this tutorial.

In order to make your dashboard interactive, dash also provides app callbacks which is neatly written as below

Dash renders charts with plotly.js. Plotly.js is an open source charting library that is built on top D3.js and stack.gl. As an open source library, plotly.js provides lots of models and styles of charts that you can freely use with lots of nice and neat tutorials.

To make sure that your dashboard code is ready to be running, you can check the final code in here.

Run Your Dashboard

To run your dashboard, you just simply need to type this on your terminal

python3 [YOUR DASHBOARD FILE NAME].py

and there will be this output showing

Running on http://127.0.0.1:8050/
Debugger PIN: 775-976-572
 * Serving Flask app "dash_tutorial" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Click or type the link and you will see your dashboard running!

That’s it! Now you have your simple yet neat and beautiful data visualisation dashboard running :D