5 Dashboard for Visualization

Learning Objectives of the Chapter

At the End of the Chapter, Students should be Able to -

Learn about the Meaning of Dashboard for Visualization
Understand the Importance of Dashboard Visualization
Learn about Different R and Python Packages for Dashboard Creation
Create Dashboard using Quarto and Vizro

5.1 What is Dashboard?

A dashboard for visualization is a user interface that displays a collection of visual data representations, such as charts, graphs, tables, and metrics, to provide users with an interactive and comprehensive overview of key information. Dashboards are commonly used in business, data science, finance, healthcare, and other fields to monitor performance, track metrics, and explore data trends in real time.

The main goal of a dashboard is to present complex data in an easy-to-understand format, enabling users to quickly grasp insights and make data-driven decisions. Dashboards often combine multiple visual elements into a single screen or page, allowing users to view different aspects of the data simultaneously. They typically include interactive features like filters, drill-downs, and tooltips, which allow users to interact with the data and explore deeper insights without needing to understand the underlying data structures. Some benefits of dashboards are -

Data Aggregation: Dashboards bring together data from various sources, providing a unified view of different datasets.
Visualization Elements: They use visual elements such as bar charts, line graphs, pie charts, heatmaps, and more to represent data in a visually appealing and informative way.
Interactivity: Users can interact with the visual elements, applying filters, adjusting time frames, or drilling down into specific data points to gain more detailed insights.
Real-Time Data: Dashboards can display real-time data, updating visualizations dynamically to reflect the latest information, which is especially useful for monitoring live systems or business performance.
Customization: Dashboards are highly customizable, allowing users to tailor the layout, visualizations, and data to meet their specific needs.

Dashboards for visualization are widely used for performance monitoring (e.g., tracking KPIs), data exploration (e.g., identifying trends), and decision-making (e.g., comparing metrics). They make data analysis more accessible to a wider audience by simplifying the complexity of raw data into clear and actionable insights.

5.2 Importance of Dashboard

5.3 Interactive Dashboard

For interactive visualization, see Figure 5.3.

5.4 `Quarto` - R and Python Dashboard

Quarto Dashboard is a powerful and flexible open-source tool to create interactive dashboard in R or Python. Quarto dashboards are easy to create and support a wide variety of visualization and interactive components¹. More about quarto dashboard can be learned from Quarto Dashboard Website. To learn more about interactivity on quarto dashboard using Shiny, please visit webpages for R and Python. However, it is recommended to use Python for quarto dashboard if you want to include interactive applications on your dashboard.

There are several components of quarto dashboard:

Navigation Bar - Top page bar with icon, title of the dashboard, name of author and links to sub-pages
Pages, Rows, Columns, and Tabsets - Using markdown headings (#) - pages, rows and columns are defined. Tabsets are used to further divide the content within a row or column
Cards, Sidebar, and Toolbars - Cards are containers for text, images, charts, and interactive elements and useful for organizing information into distinct sections within a dashboard. Typically, the contents of cards map to cells in the dashboard. Sidebar is another layout component of quarto dashboard, which contain navigation menus, filters, and controls that allow users to adjust or explore the data presented in the main content. Toolbars ….

The first step to create a quarto dashboard is to structure YAML in .qmd file. A quarto dashboard YAML look like -

In quarto dashboard, each level 1 header (#) introduces a new page, each level 2 header (##) introduces a new row within the given page, and each code chunk within a given row introduces a new column.

Some other attributes (Table 5.1) that can be added to the quarto dashboard’s rows or columns include -

Table 5.1: Some Additional Attributes

Attribute	Explanation
`{width=}` and `{height=}`	Set the size of columns, rows, and boxes
`{orientation=}`	sets the dashboard layout to either rows or columns. This is a global option set in the `YAML`. However, if your dashboard has multiple pages and you want to specify the orientation for each page, remove `orientation:` from the YAML and use this attribute instead
`{.tabset}`	divide columns, rows, or charts into tabs
`{.sidebar}`	typically creates a sidebar on the page
`{.hidden}`	excludes a specific page from the navigation bar

5.5 `Vizro` - Python Dashboard

Built on top of Dash and Plottly, Vizro is a powerful python module to create a dashboard. A vizro dashboard consists of several objects. The first object is Page. Each page contains several other sub-objects such as Comonents, which can include Graphs and Tables, Filters, which can be sliders, dropdown boxes and other buttons, and optional Actions. To learn more about Vizro, we can explore Vizro document website and developer website. The key benefits of Vizro include:

Low-code and Configuration - Vizro only needs a few lines of code code, thus replacing thousand lines of codes and saving valuable time
In-built Best Practices - Vizro already incorporates standards for visual design and software development.
Self-service Visualization - Vizro readily assemble dashboards without advanced design or coding experience
Optional High-code Extensions - Vizro enables limitless customization for advanced users with complex needs
Modularity - Vizro leverage components that are simple to swap, reuse, maintain, share and scale
Flexibilit and Scalability - Vizro enables data science ready and to develop python based data visualization applications

# Dashboard Creation 
from vizro import Vizro
import vizro.models as vm
import vizro.plotly.express as px

# Data Visualization 
import seaborn as sns
import matplotlib.pyplot as plt
import pandas as pd
import numpy as np

# loading dataset 
import palmerpenguins
df = palmerpenguins.load_penguins()

5.5.1 Standalone Page on Vizro Dashboard (Example # 01)

Vizro._reset()

first_page = vm.Page(
    title= " ", 
    components= [
        vm.Graph(
            id = 'boxplot', 
            figure = px.box (df, x = 'species', y = 'bill_length_mm', 
            color = 'species', 
            labels={'species':'Species', 'bill_length_mm':'Bill Length (mm)'})
        ),
    ],
)

dashboard = vm.Dashboard(pages=[first_page])
Vizro().build(dashboard).run()

Figure 5.3: A Sample of Vizro Dashboard

5.5.2 Standalone Page on Vizro Dashboard (Example # 02)

# loading dataset 
df = px.data.gapminder()
gapminder_data = (
        df.groupby(by=["continent", "year"]).
            agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index()
    )

Vizro._reset()
second_page = vm.Page(
    title="First Page",
    components=[
        vm.Card(
            text="""
                # First dashboard page
                This pages shows the inclusion of markdown text in a page and how components
                can be structured using Layout.
            """,
        ),
        vm.Graph(
            figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
                            labels={"lifeExp": "Life Expectancy", "continent": "Continent"}),
        ),
        vm.Graph(
            figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                            labels={"year": "Year", "continent": "Continent",
                            "gdpPercap":"GDP Per Cap"}, title=''),
        ),

    ],
)

dashboard2 = vm.Dashboard(pages=[second_page])
Vizro().build(dashboard2).run()

5.5.3 Multiple Pages on Vizro Dashboard

Vizro._reset()

third_page = vm.Page(
    title="First Page",
    layout=vm.Layout(grid=[[0, 0], [1, 2], [1, 2], [1, 2]]),
    components=[
        vm.Card(
            text="""
                # First dashboard page
                This pages shows the inclusion of markdown text in a page and how components
                can be structured using Layout.
            """,
        ),
        vm.Graph(
            figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
                            labels={"lifeExp": "Life Expectancy", "continent": "Continent"}),
        ),
        vm.Graph(
            figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                            labels={"year": "Year", "continent": "Continent",
                            "gdpPercap":"GDP Per Cap"}),
            ),
    ],
)

dashboard3 = vm.Dashboard(pages=[third_page])
Vizro().build(dashboard3).run()

Vizro._reset()

second_page = vm.Page(
    title="Second Page",
    components=[
        vm.Card(
            text="""
                # First dashboard page
                This pages shows the inclusion of markdown text in a page and how components
                can be structured using Layout.
            """,
        ),
        vm.Graph(
            figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
                            labels={"lifeExp": "Life Expectancy", "continent": "Continent"}),
        ),
        vm.Graph(
            figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                            labels={"year": "Year", "continent": "Continent",
                            "gdpPercap":"GDP Per Cap"}, title=''),
        ),

    ],
)

third_page = vm.Page(
    title="Third Page",
    layout=vm.Layout(grid=[[0, 0], [1, 2], [1, 2], [1, 2]]),
    components=[
        vm.Card(
            text="""
                # First dashboard page
                This pages shows the inclusion of markdown text in a page and how components
                can be structured using Layout.
            """,
        ),
        vm.Graph(
            figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent",
                            labels={"lifeExp": "Life Expectancy", "continent": "Continent"}),
        ),
        vm.Graph(
            figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                            labels={"year": "Year", "continent": "Continent",
                            "gdpPercap":"GDP Per Cap"}),
            ),
    ],
)

dashboard4 = vm.Dashboard(pages=[second_page, third_page])
Vizro().build(dashboard4).run()

5.6 Conclusions

5.7 Exercises

Create a dashboard from Adidas (Ticker:ADR) sales data (Adidas US Sales Datasets.csv).

Shiny widgets and functionality can be incorporated in the quarto dashboard. Therefore, quarto dashboard is a powerful tool for creating interactive visualization.↩︎