What is Dash?
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.
- 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.
- 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.
- Browse, and select the folder for installation. Then click Install
- Once, installation is complete, go to the Environment variable, and add C:\Python3\Scripts to the path
- Open the command prompt and change directory to the C:\Python3\Scripts folder, and type python –v
- To install Dash, the following commands need to be entered in order.
pip install dash==0.39.0
pip install dash-daq==0.1.0
- The version of Dash installed could be checked with the below commands
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 –
- 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
- 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.
In the backend, this code looks as below.
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.
- 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
A state is an advanced Callback feature which allows cross-filtering, and interactive graphing. It allows for entering extra values.
Basic callback code
Callback 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:
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.
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.