Introduction to dash for data visualization | EduGrad

What is Dash?

Dash is a framework which is built on top of Plotly.js and used to build analytical web-applications without the need for JavaScript. It allows building user-interface in a very short period of time. Being rendered in the web-browser, the apps could be deployed through servers and shared through URLs.

Why use Dash?

A Data Scientist is always involved in visualizing the data to make accurate predictions. Also, turning data into dashboard makes easy for businessman, and shareholders to make sense of the data which otherwise is difficult to understand. Thus, the data could be analyzed by creating interactive web-applications with Dash framework which is maintained by plotly. The framework is also very easy to use. It just needs to be imported into the Python file after installation which eliminates the need to use any other language.

Dash Installation

  • To install Dash, you need to make sure that Python is installed in your operating system. To install Python, visit https://www.python.org/downloads/ and Download the latest version based on your OS.

How to Install Dash

  • Once downloaded, double click on the .exe file to begin the installation. Select custom installation and choose the path of installation and then proceed to finish.

Getting started with Installing Python for Dash

  • Browse, and select the folder for installation. Then click Install

Advanced options in Installing Python for Dash

  • Once, installation is complete, go to the Environment variable, and add C:\Python3\Scripts to the path

Setting up the path after Installing Python

  • Open the command prompt and change directory to the C:\Python3\Scripts folder, and type python –v

Specifying directory to the Python Folder

  • To install Dash, the following commands need to be entered in order.

     pip install dash==0.39.0

pip Install Dash

     pip install dash-daq==0.1.0

pip install Dash2

  • The version of Dash installed could be checked with the below commands

command to check the version of Installed Dash

Architecture of Dash

Dash runs Flask which allows communicating JSON files via HTTP requests. The frontend of Dash is rendered by components which use React.js. All the underlying instances and the configurable properties of Flask could be accessed by Dash app developers, and its’s apps could be modified using the Flash plugins.

The benefit of Dash is that it takes both the features of Reach and Flask together, making life easy for a Data Scientist who are not familiar with web development.

There are two parts in a Dash app –

  1. The layout which describes the look of an application, the dash_html_components which describes the HTML attributes, and the dash_core_components which consists of graphs and controls.

Below are some of the pointers pertaining to the design of a Dash app.

  • The Dash layout could compose of components like Graph.
  • Each HTML tag in the dash_html_components library has a component, but not all are pure HTML.
  • The components described by the dash_html_components are higher-level, interactive, and generated through the React.js library.
  • Any update in the code would automatically refresh the browser with the help of the feature called hot-reloading, used in Dash.
  • The Graph component in the dash_core_components library is used to plot interactive visualizations. The plotly.js which is used by the Graph supports chart types of SVG and WebGL.

Using Dash components to create a scatter plot

Creating scatter plot using Dash components

Scatter plot using Dash components

  • The Markdown component in dash_core_components is used to prevent the tedious task of writing the HTML codes.
  • The list of all the core components of Dash – https://github.com/plotly/dash-core-components. It includes components like Dropdown, Slider, DatePickerRange, Graphs,e tc.
  • The dash_html_components allows composing the layout using a Python structure. This GitHub repository consists of its source – https://github.com/plotly/dash-html-components
  • A sample HTML structure in Dash.

sample HTML structure in Dash

In the backend, this code looks as below.

Back-end structure of code in Dash

2. The Interactive nature of the app is described by Callbacks

The apps built through Dash follows a powerful principle, and are reactive in nature. The attributes could be updated, and its subsets could be edited as well.

Interactive nature of Dash App

  • The app.callback decorator declares the input and the output of the application
  • The wrapper function automatically gets called whenever there is a change in the input property
  • In the above code, the input and the output is the ‘value’, and ‘children’ property respectively
  • The dash.dependencies.Input is only used in callbacks
  • Using the callback function, Dash allows to dynamically update properties

State

A state is an advanced Callback feature which allows cross-filtering, and interactive graphing. It allows for entering extra values.

Basic callback code

Basic callback code in Dash

Callback using State

Callback code using state

Here clicking the button would fire the callback instead of changing the text in dcc.Input

Interactive Data Visualization

The Graph component in Dash which uses the plotly.js graphing library allows plotting over thirty-five chart types. The four components in dcc.Graph – hoverData, click data, selected data, and relayoutData changes with user-interaction.

Below are some of the chart-types in Dash:

Chart types in Dash

Dash has a variety of 3-D scatter plots, ribbon plots, – https://plot.ly/python/3d-charts/?_ga=2.17289713.995692810.1552290254-1457117396.1552060168

Advantages of Dash

  • Dash maintains a concurrency in the application which allows multiple users with independent sessions to interact with the app at the same time.
  • The application code built with Dash is functional, i.e., it ensures no side-effects during inputs and outputs.
  • Dash follows a core-style guide which allows developers to add style to the apps according to the needs.
  • Dash allows a multitude of data visualizations using its Graph library.

Conclusion

Dash is one of the coolest Python built feature that provides declarative and reactive apps. https://blog.edugrad.com/ has a list of articles and tutorials provided for those who want to learn Data Visualizations and create interactive dashboards for analysis.

Explore our Tutorials –

Learn Regression Analysis in 2 min | EduGrad        Learn Natural Language Processing tutorial | EduGrad

Data Visualization tools and start creating your own Dashboards | EduGrad        Maths for Machine Learning Tutorial | EduGrad

Popular Data Science courses –

Data Analytics courses - Learn Data Analytics tools from scratch | EduGrad        

Learn Python Programming for Data science online course | EduGrad       Learn Introduction to Database tools for Data science | EduGrad

LEAVE A REPLY

Please enter your comment!
Please enter your name here