Building a customized dashboard using SQL Server and Dash. (Part 2: Dash)
In this part, we will be discussing Dash and the various visualization tools it provides. Dash is an Open Source Python library for creating reactive, Web-based applications. Dash is written on top of Flask, Plotly.js, and React.js, Dash and is ideal for building data visualization apps with highly custom user interfaces in Python.
It allows us to build Build beautiful, web-based analytic apps with no requirement of knowledge in JavaScript or as a matter of fact CSS (though it’s better to learn this bit).
Dash is Declarative which means that we need not define the control flow. We only need to define what we want to do via the predefined attributes.
Tools like Dash allows us to focus on our development and not to worry about maintaining a whole another framework just to visualize what we have done.
You can learn more about the library here.
Any Dash application is composed of 2 parts,
- Layout — It defines what an application looks like.
- Callbacks- It defines the interactivity of an application. How different components react and what action to perform when something updates.
Let’s Talk about Layout —
All of the Layout components in Dash are maintained within 2 libraries -
- dash_html_components (Handles all HTML Tags and their attributes)
- dash_core_components (Handles the graphical components of Dash)
Importing basic libraries.
‘dash_html_components’ allows us to implement any HTML tag in a more pythonic way. Rather than writing an entire HTML file, we can simply use this library to create the structure of our file.
Below are a couple of examples of its implementation-
1. Basic HTML Tags
Each HTML tag can be accessed by referencing the dash_html_components (html) library. When working on a page we must define a parent tag and within that, we should be working on the page structure. In the above example, the parent tag we choose is the Div tag.
2. Working with attributes.
Since HTML tags are nothing more than function calls within Dash, we can access every attribute for a tag by just declaring it.
Seeing the above code, it’s evident that we can access attributes like arguments of any method. For ‘A’ tag we provided a ‘href’ attribute and also provided some styling information (more on this later).
For the ‘Img’ tag we provided ‘src’ attribute and the results are shown below.
3. Styling
Just like a normal web application, we have 3 ways of importing a style sheet -
- Inline-Style- In this, we use the ‘style’ attribute of the HTML tag.
- External Style Sheets- In this, the style sheet is imported from an external source.
- Assets Folder: We can also create a custom style sheet and place it within the ‘Assets’ folder.
‘dash_core_components’ allows us to implement the graphical part of Dash Library. It describes higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.
To work with the core or graphical component of Dash we need to use Graph() method. Every graphical component is defined within this method.
Below are a few examples of its implementation-
1. Bar Graph
To define a bar graph we must understand that Dash expects its ‘data’ inputs in a list of dictionary format. We need to specify what type of graph are we going to use (which in this case is ‘bar’) and the inputs for the x-axis and y-axis.
2. Pie Chart
For Pie Chart we need to import the graph_objects method which is a part of the Dash library. This enables us to define core pie chart components as shown and with the help of an already imported dash_core_component library, we can position the chart on our screen.
3. Scatter Plot
To plot a scatter plot we have used NumPy's random integer generator and generated 50 data points. As we can see the implementation is similar to Pie Chart (with an exception of go.Scatter()).
The scatter plot that has been shown above can be modified to show more data by modifying ‘mode’ in the trace.
There are 3 modes that you can define
- Markers — Only show the registered points.
- Lines — Show points and connect them with straight lines.
- Text- Show points with a text value.
4. Data Table
For displaying the data table we need structured data. For that, we can use any excel object, padas data frame or even SQL table. In the below example, we are using a pandas data frame.
Now Let’s Talk about some of the pre-styled HTML components in the dash_core_components library.
1. Drop Down
Defining a dropdown is pretty similar to defining a <select> tag. We need to define the options in the form of a list of a dictionary.
2. Sliders
Core components library allows us to create 2 types of sliders- Normal (select single value) and Range (select a range of values) sliders.
So there our intro to Dash library. With this article, we have barely scraped the abilities of this library. I recommend you to explore more components on the Dash website.
Happy Learning!
