Build an Interactive, Modern Dashboard With Dash

Enhance user experience with attractive data visualization and high performance

Uditha Maduranga
Aug 11 · 8 min read
Photo by Benjamin Child on Unsplash

Have you ever wanted to display a set of information graphically? Or in an easy to understand manner in any form of application?

Dash, a productive Python framework, has made is much easier for you now. It doesn’t really matter whether you’re a front-end developer, back-end developer, data scientist, or a complete newbie. Dash has made visualization of data sets much more comfortable and easy.

So, let’s have a close look at Dash.


What is Dash?

Dash is a Python-based framework which is predominantly used to create web applications that include intense data visualizations.

As the name suggests, Dash is specialized for creating web-based dashboard applications. But this is achieved by using purely Python with the help of some Python libraries.

Dash not only helps you to create interactive graphs, but also to embed those graphs into a user-friendly UI. As it’s written on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces.

It’s particularly suited to anyone who works with data in Python. And Dash abstracts away all of the technologies and protocols that are required to build an interactive web-based application, so it makes it much more convenient for the developers.


What Can Be Done With Dash?

If you’re a person who has used Mathematica before, you’ll know that we can build really cool widgets and controllers in a dashboard-type application.

Even in those applications, the interfaces are not portable and less customizable. We cannot use it unless we have a Mathematica license. As they are not portable we can’t use them to embed into a web application.

So, what Dash brings is portable, attractive, and much more customizable.

For example, if there’s a need for the creation of a graph that showcases the stock price of a certain company in the stock exchange, it can be easily done using Dash.

It doesn’t matter whether it’s a live data feed or data is extracted from a CSV file. Dash lets you go forward and create your own web application with the interactive graphs, which will give real-time updates to the users.

As soon as you finish creating your Dash app, it’s ready to be sent to servers and then shared through URLs. As Dash apps are viewed in the web browser, it is inherently cross-platform and mobile-ready, which is a huge advantage when we consider today’s context.

If not for Dash, data visualizations in scientific data analysis would have been done using JavaScript. But the problem is that data analysis tools in that language are not there yet, as they are for Python or R.


Dash Installation

You can install Dash on your computer by simply typing these commands into the terminal. The prerequisites are:

  • Python 2.x or 3.x should be installed.
  • Pip (Python Package Installer) should be installed.

Specifying the version, such as “1.0.2”, is optional.

To check which version you have installed, you can run the below in the Python shell.

This will print the version of the Dash that you are currently using.


Building a Dash App

Any Dash app is divided into two main parts:

1. Layout — Considers the static appearance of the app in the UI.

2. Callback functions — Considers the interactivity of the app.

Having a Python class for each and every HTML class is just another example of how easy Dash has made it to build web-based front ends using Python.

They maintain a set of components in the dash_core_components and the dash_html_components library but you can also build your own with JavaScript and React.js.

You can use any IDE as per your preference and you can simply name your file “app.py” and start using the Dash framework.

Here is a basic example of a graph that can be used in the Dash framework.

Here, “Dash Core Components” were imported as dcc and form the Graph component to plot this graph.

Again, the format of the data feed is quite simple. x represents the values of the x-axis while y represents the respective values of the y-axis.

So, as you can see, we only have to give our data as two Python lists so that Dash will take care of the rest and plot an eye-catching graph for you.

Furthermore, there are plenty of customizations which can be done, such as in type, names of the axes, colors, grids, background colors, etc.

Dash includes “hot-reloading”. This feature is activated by default when you run your app with app.run_server(debug=True). This means that Dash will automatically refresh your browser when you make a change in your code. This will make your life far easier if you’re a developer.

The dash_html_components library has a component for every HTML tag. You can use any HTML element in the format html.<element>. But there is a slight difference in the notation.

If you want to use <div> in Dash you have to use the html.Div instead of html.div. The html.H1(children='Hello Dash’) component generates a <h1>Hello Dash</h1> HTML element in your application.

The children property is special. By convention, it’s always the first attribute, which means that you can omit it: html.H1(children='Hello Dash’) is the same as html.H1('Hello Dash’).

Also, it can contain a string, a number, a single component, or a list of components. For the dash_html_components, each component matches the associated HTML component exactly.

From the documentation, you can get further information. If you’re using HTML components, you also access properties, such as style, class, and id. All of these attributes are available in the Python classes.

The HTML elements and Dash classes are mostly the same but there are a few key differences:

  • The style property is a dictionary.
  • Properties in the style dictionary are camelCased.
  • The class key is renamed as className.
  • Style properties in pixel units can be supplied as just numbers without the px unit.

Not all components are pure HTML. The dash_core_components describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.

For dash_core_components, there are many examples and a reference guide. See this link for a dropdown example.

For dash_core_components.Graph, the syntax of the figure matches that of the Plotly.py library and the Plotly.js library. So, any examples that you see in https://plot.ly/python/ apply and all of the available attributes can be found in the documentation.

Styling the elements

Styling the elements is achieved with CSS through the style property. An example from the documentation:

These key-value pairs in the style property can be found in any CSS tutorial online, they aren’t in the Dash documentation yet. The community has been compiling some nice resources for this.

The fonts in your application will look a little bit different than what is displayed here. This application using a custom CSS stylesheet to modify the default styles of the elements.

There are various kinds of dashboard templates which are already available in Dash. So, we can use one and customize according to our needs. These templates can be found in the Dash App Gallery.

A graph component has many arguments where most of them are optional. If you want more insight about those you can refer to the community.

Sample dashboard from the Dash App Gallery

Callbacks

The inputs and outputs of a Dash application interface are described declaratively through the app.callback decorator.

In Dash, the inputs and outputs of the above application are simply the properties of a particular component. In this example, input is the value property of the component that has the ID my-id.

The output is the children property of the component with the ID my-div.

Whenever an input property changes, the function that the callback decorator wraps will get called automatically. Dash provides the function with the new value of the input property as an input argument and Dash updates the property of the output component with whatever was returned by the function.

The component_id and component_property keywords are optional (there are only two arguments for each of those objects). Don’t confuse the dash.dependencies.Input object from the dash_core_components.Input object.

The former is just used in these callbacks and the latter is an actual component.

Notice how it hasn’t set a value for the children property of the my-div component in the layout. When the Dash app starts, it automatically calls all of the callbacks with the initial values of the input components to populate the initial state of the output components.

In this example, if you specified something like html.Div(id='my-div',children='Hello world'), it would get overwritten when the app starts.

It’s sort of like programming with Microsoft Excel — whenever an input cell changes, all of the cells that depend on that cell will get updated automatically. This is called reactive programming.


Performance

As Dash’s callbacks are functional in nature, it’s easy to add memoization caching. Memoization stores the results of a function after it is called and re-uses the result if the function is called with the same arguments.

Dash applications are usually dashboards which will be deployed across multiple platforms. Furthermore, they are frequently deployed across multiple processes or threads.

In these cases, we can use the Flask Caching library which saves the results in a shared memory database, such as Redis, or as a file in your filesystem.

Flask Caching also has other nice features like time-based expiry. Time-based expiry is helpful if you want to update your data (clear your cache) every hour or every day.

So, when we consider the Dash framework as a way of creating dashboards, it makes the developers’ lives much easier, and, at the same time, enhances the user experience by giving attractive data visualizations with high performance.

It gives programmers a way of creating interactive web applications using just Python. As Python will be a front running programming language in the future, Dash will be a big step forward.

Next time you want to create a dashboard, try Dash!

Better Programming

Advice for programmers.

Uditha Maduranga

Written by

Computer Science and Engineering Undergratuate

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade