Building a Malaysian Population Dashboard with Quarto in R

A tutorial blog

R
Quarto
Author

Zahier Nasrudin

Published

March 11, 2024

What is quarto dashboard

Quarto Dashboards make it easy to create interactive dashboards using Python, R, Julia, and Observable

Benefits

  • Flexibility: Easy to create. Able to use any programming language supported by Quarto (like R, Python, Observable).

  • Interactive: Able to use interactive elements such as Plotly and htmlwidgets.

  • Deploy/Share: From quarto dashboards website itself: Dashboards can be deployed as static web pages (no special server required) or you can optionally integrate a backend Shiny Server for enhanced interactivity.

My population dashboard

If you prefer to skip the explanation and go straight to my source code, you can find it here: link

In this blog, I am building a population dashboard for Malaysia using data from the 2020 Census provided by the Department of Statistics Malaysia (DOSM). This dashboard aims to:

  • Testing out Quarto dashboards: This project serves as a practical introduction to building interactive dashboards with Quarto.

Data Cleaning and Preparation

The cleaned and formatted datasets are available in the repository for your reference.

My Quarto Dashboard Structure

├── dosm_population_dashboard.Rproj
  ├── file
  ├── function
  ├── styles
  ├── index.qmd
  └── index.html

  • The ‘file’ directory is where the input files are located.

  • The ‘function’ directory is where the function scripts are located.

  • The ‘styles’ directory is where we place our SCSS file.

  • ‘index.qmd’ is the file where we do our work.

  • ‘index.html’ is generated from ‘index.qmd’ in HTML format

Visualizing Population Data

Our dashboard aims to visualize population data in Malaysia. Here’s how we’ll achieve this:

  • Interactive Map with Leaflet: Leaflet, a popular R package, is perfect for creating interactive maps. We’ll use it to visualize population distribution across different states in Malaysia. This allows users to explore the data geographically.

  • Charts and Graphs with ggplot2 and ggiraph: For other types of population data visualizations, we’ll leverage the power of ggplot2 and ggiraph.

  • Customizing Layout with SCSS: During development, you might encounter situations where ggiraph visualizations don’t fit perfectly within the Quarto dashboard container. To address this, we can utilize SCSS (a CSS preprocessor) to define custom styles and fine-tune the layout of our visualizations within the dashboard.

.girafe_container_std  {
    height: 100%;
    width: 100%;
    position: relative; 
    margin-left: 10px; /* Adjust the value as needed for the left margin */
    margin-right: 10px; /* Adjust the value as needed for the right margin */
}

Layout and Design

I have created 6 pages:

  1. Overview: General population and density by state in Malaysia.

  2. By Ethnicity: Distribution and gender ratio of the population (female to male).

  3. By Age: Distribution and gender ratio of the population (female to male).

  4. By Marital Status: Distribution and gender ratio of the population (female to male).

  5. By Religion: Distribution and gender ratio of the population (female to male).

  6. About: Disclaimer and remarks

Deployment

This dashboard is currently deployed to Github Pages and the open source can be found here: https://zahiernasrudin.github.io/dosm_population_dashboard/

Refer to the official Quarto documentation for detailed instructions on publishing to GitHub Pages: https://quarto.org/docs/publishing/github-pages.html