When you’re a Data Scientist and want to create web dashboards.

Building a web dashboard is now easier than ever, all you need to know is python, no HTML, CSS or JS required. Unless you want some extra features or want to make it look pretty.

Let me introduce you to Dash an open source productive python web framework built on top of Flask, Plotly.js, and React.js.

Dash is ideal for building Dashboards with custom user interfaces in pure Python. It’s particularly suited for anyone who works with data in Python.

Before digging into it let’s look at some examples.

Stock Ticker — https://stock-dash-app.herokuapp.com/

Object Detection — https://dash-gallery.plotly.host/dash-object-detection/

Image Processing — https://dash-gallery.plotly.host/dash-image-processing/

Spotify Analyzer — https://discover-spotify-app.herokuapp.com/

Github — https://github.com/bharatk101/spotify_discover (Feel Free to Fork)

Dash is not limited to analytical dashboards but it can also used for ML , Computer Vision, control robots, and track sensors data etc.

Let’s get started

Import Libraries

• dash_html_components library has a component for every HTML tag.
• dash_core_components library has higher-level components that are interactive.

Create Instance of the app

Dash HTML

The html.H1(children='Hello Dash') component generates a <h1>Hello Dash</h1> HTML element in your application.

which gets converted (behind the scenes) into the following HTML in your web-app:

Dash Core Components

Dash has some cool interactive components built in such as Graphs, Date Picker, Slider, Button, Input Box, Radio Button, Check Box etc,

The ID is required for graph, and we can use this later to manipulate the graph. We then have the figure element, which contains the data and layout for the graph. Here is where we pass all the data and what type of graph we want, along with other bits of information. Inside of layout, we can add things like the title we've added here.

Now let’s build the Stock Ticker app

The layout of a Dash app describes what the app looks like. The layout is a hierarchical tree of components. The dash_html_components library provides classes for all the HTML tags and the keyword arguments describe the HTML attributes like style, className, and id.

The dash_core_components library generates higher-level components like controls and graphs.

The new imports here being the Input and Output , which we'll use by wrapping a function that will handle input and output.

Next we create a layout with Header, Drop-down and graph component.

Notice that we haven’t added data in graph, that’s where Input and Output import comes into play.

To make the graph Interactive we write callback functions, where we pass the Input and Output component ID and their property to update it.

The callback function outputs whatever we want based on the input. In this case, the stock closing price of the company with date.

Now it’s all done, run this Python file and you should see your stock ticker app.

All the above code is on my Github — bharatk101