{"id":382573,"date":"2024-03-10T10:00:00","date_gmt":"2024-03-10T16:00:00","guid":{"rendered":"https:\/\/zahier-nasrudin.netlify.app\/posts\/2024-03-11-dosm-dashboard\/dosm_dashboard.html"},"modified":"2024-03-10T10:00:00","modified_gmt":"2024-03-10T16:00:00","slug":"building-a-malaysian-population-dashboard-with-quarto-in-r","status":"publish","type":"post","link":"https:\/\/www.r-bloggers.com\/2024\/03\/building-a-malaysian-population-dashboard-with-quarto-in-r\/","title":{"rendered":"Building a Malaysian Population Dashboard with Quarto in R"},"content":{"rendered":"<!-- \r\n<div style=\"min-height: 30px;\">\r\n[social4i size=\"small\" align=\"align-left\"]\r\n<\/div>\r\n-->\r\n\r\n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 12px;\">\r\n[This article was first published on  <strong><a href=\"https:\/\/zahier-nasrudin.netlify.app\/posts\/2024-03-11-dosm-dashboard\/dosm_dashboard.html\"> ZAHIER NASRUDIN<\/a><\/strong>, and kindly contributed to <a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers<\/a>].  (You can report issue about the content on this page <a href=\"https:\/\/www.r-bloggers.com\/contact-us\/\">here<\/a>)\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>\n \n\n\n\n\n<section id=\"what-is-quarto-dashboard\" class=\"level2\">\n<h2 class=\"anchored\" data-anchor-id=\"what-is-quarto-dashboard\">What is quarto dashboard<\/h2>\n<blockquote class=\"blockquote\">\n<p><a href=\"https:\/\/quarto.org\/docs\/dashboards\/\" rel=\"nofollow\" target=\"_blank\">Quarto Dashboards<\/a> make it easy to create interactive dashboards using Python, R, Julia, and Observable<\/p>\n<\/blockquote>\n<section id=\"benefits\" class=\"level3\">\n<h3 class=\"anchored\" data-anchor-id=\"benefits\">Benefits<\/h3>\n<ul>\n<li><p><strong>Flexibility:<\/strong> Easy to create. Able to use any programming language supported by Quarto (like R, Python, Observable).<\/p><\/li>\n<li><p><strong>Interactive:<\/strong> Able to use interactive elements such as Plotly and htmlwidgets.<\/p><\/li>\n<li><p><strong>Deploy\/Share:<\/strong> From quarto dashboards website itself: <em>Dashboards can be deployed as static web pages (no special server required) or you can optionally integrate a backend <a href=\"https:\/\/quarto.org\/docs\/dashboards\/interactivity\/shiny-python\/\" rel=\"nofollow\" target=\"_blank\">Shiny Server<\/a> for enhanced interactivity.<\/em><\/p><\/li>\n<\/ul>\n<\/section>\n<section id=\"my-population-dashboard\" class=\"level3\">\n<h3 class=\"anchored\" data-anchor-id=\"my-population-dashboard\">My population dashboard<\/h3>\n<blockquote class=\"blockquote\">\n<p>If you prefer to skip the explanation and go straight to my source code, you can find it here: <a href=\"https:\/\/zahiernasrudin.github.io\/dosm_population_dashboard\/\" rel=\"nofollow\" target=\"_blank\">link<\/a><\/p>\n<\/blockquote>\n<p>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:<\/p>\n<ul>\n<li><strong>Testing out Quarto dashboards<\/strong>: This project serves as a practical introduction to building interactive dashboards with Quarto.<\/li>\n<\/ul>\n<p><img src=\"https:\/\/i2.wp.com\/zahier-nasrudin.netlify.app\/posts\/2024-03-11-dosm-dashboard\/image\/dashboard_page.PNG?w=578&#038;ssl=1\" class=\"img-fluid\" data-recalc-dims=\"1\"><\/p>\n<\/section>\n<\/section>\n<section id=\"data-cleaning-and-preparation\" class=\"level2\">\n<h2 class=\"anchored\" data-anchor-id=\"data-cleaning-and-preparation\"><strong>Data Cleaning and Preparation<\/strong><\/h2>\n<p>The cleaned and formatted datasets are available in the <a href=\"https:\/\/github.com\/zahiernasrudin\/dosm_population_dashboard\/tree\/main\/file\" rel=\"nofollow\" target=\"_blank\">repository<\/a> for your reference.<\/p>\n<\/section>\n<section id=\"my-quarto-dashboard-structure\" class=\"level2\">\n<h2 class=\"anchored\" data-anchor-id=\"my-quarto-dashboard-structure\">My Quarto Dashboard Structure<\/h2>\n<pre>\u251c\u2500\u2500 dosm_population_dashboard.Rproj\n  \u251c\u2500\u2500 file\n  \u251c\u2500\u2500 function\n  \u251c\u2500\u2500 styles\n  \u251c\u2500\u2500 index.qmd\n  \u2514\u2500\u2500 index.html<\/pre>\n<ul>\n<li><p>The \u2018file\u2019 directory is where the input files are located.<\/p><\/li>\n<li><p>The \u2018function\u2019 directory is where the function scripts are located.<\/p><\/li>\n<li><p>The \u2018styles\u2019 directory is where we place our SCSS file.<\/p><\/li>\n<li><p>\u2018index.qmd\u2019 is the file where we do our work.<\/p><\/li>\n<li><p>\u2018index.html\u2019 is generated from \u2018index.qmd\u2019 in HTML format<\/p><\/li>\n<\/ul>\n<hr>\n<p><strong>Visualizing Population Data<\/strong><\/p>\n<p>Our dashboard aims to visualize population data in Malaysia. Here\u2019s how we\u2019ll achieve this:<\/p>\n<ul>\n<li><p><strong>Interactive Map with Leaflet:<\/strong> Leaflet, a popular R package, is perfect for creating interactive maps. We\u2019ll use it to visualize population distribution across different states in Malaysia. This allows users to explore the data geographically.<\/p><\/li>\n<li><p><strong>Charts and Graphs with ggplot2 and ggiraph:<\/strong> For other types of population data visualizations, we\u2019ll leverage the power of <code>ggplot2<\/code> and <code>ggiraph<\/code>.<\/p><\/li>\n<li><p><strong>Customizing Layout with SCSS:<\/strong> During development, you might encounter situations where <code>ggiraph<\/code> visualizations don\u2019t 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.<\/p><\/li>\n<\/ul>\n<pre>.girafe_container_std  {\n    height: 100%;\n    width: 100%;\n    position: relative; \n    margin-left: 10px; \/* Adjust the value as needed for the left margin *\/\n    margin-right: 10px; \/* Adjust the value as needed for the right margin *\/\n}<\/pre>\n<\/section>\n<section id=\"layout-and-design\" class=\"level2\">\n<h2 class=\"anchored\" data-anchor-id=\"layout-and-design\">Layout and Design<\/h2>\n<p>I have created 6 pages:<\/p>\n<ol type=\"1\">\n<li><p><strong>Overview:<\/strong> General population and density by state in Malaysia.<\/p><\/li>\n<li><p><strong>By Ethnicity<\/strong>: Distribution and gender ratio of the population (female to male).<\/p><\/li>\n<li><p><strong>By Age:<\/strong> Distribution and gender ratio of the population (female to male).<\/p><\/li>\n<li><p><strong>By Marital Status:<\/strong> Distribution and gender ratio of the population (female to male).<\/p><\/li>\n<li><p><strong>By Religion:<\/strong> Distribution and gender ratio of the population (female to male).<\/p><\/li>\n<li><p><strong>About:<\/strong> Disclaimer and remarks<\/p><\/li>\n<\/ol>\n<\/section>\n<section id=\"deployment\" class=\"level2\">\n<h2 class=\"anchored\" data-anchor-id=\"deployment\">Deployment<\/h2>\n<p>This dashboard is currently deployed to Github Pages and the open source can be found here: <a href=\"https:\/\/zahiernasrudin.github.io\/dosm_population_dashboard\/\" class=\"uri\" rel=\"nofollow\" target=\"_blank\">https:\/\/zahiernasrudin.github.io\/dosm_population_dashboard\/<\/a><\/p>\n<p>Refer to the official Quarto documentation for detailed instructions on publishing to GitHub Pages: <a href=\"https:\/\/quarto.org\/docs\/publishing\/github-pages.html\" class=\"uri\" rel=\"nofollow\" target=\"_blank\">https:\/\/quarto.org\/docs\/publishing\/github-pages.html<\/a><\/p>\n\n\n<\/section>\n\n \n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 13px;\">\r\n<div style=\"text-align: center;\">To <strong>leave a comment<\/strong> for the author, please follow the link and comment on their blog: <strong><a href=\"https:\/\/zahier-nasrudin.netlify.app\/posts\/2024-03-11-dosm-dashboard\/dosm_dashboard.html\"> ZAHIER NASRUDIN<\/a><\/strong>.<\/div>\r\n<hr \/>\r\n<a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers.com<\/a> offers <strong><a href=\"https:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=RBloggers\" rel=\"nofollow\">daily e-mail updates<\/a><\/strong> about <a title=\"The R Project for Statistical Computing\" href=\"https:\/\/www.r-project.org\/\" rel=\"nofollow\">R<\/a> news and tutorials about <a title=\"R tutorials\" href=\"https:\/\/www.r-bloggers.com\/how-to-learn-r-2\/\" rel=\"nofollow\">learning R<\/a> and many other topics. <a title=\"Data science jobs\" href=\"https:\/\/www.r-users.com\/\" rel=\"nofollow\">Click here if you're looking to post or find an R\/data-science job<\/a>.\r\n\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>","protected":false},"excerpt":{"rendered":"<div style = \"width:60%; display: inline-block; float:left; \">\n<p>What is quarto dashboard<\/p>\n<p>Quarto Dashboards make it easy to create interactive dashboards using Python, R, Julia, and Observable<\/p>\n<p>Benefits<\/p>\n<p>Flexibility: Easy to create. Able to use any programming language supported by Quarto (like R, Python, O&#8230;<\/p><\/div>\n<div style = \"width: 40%; display: inline-block; float:right;\"><\/div>\n<div style=\"clear: both;\"><\/div>\n","protected":false},"author":2858,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"aioseo_notices":[],"jetpack-related-posts":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/382573"}],"collection":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/users\/2858"}],"replies":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/comments?post=382573"}],"version-history":[{"count":1,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/382573\/revisions"}],"predecessor-version":[{"id":382574,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/382573\/revisions\/382574"}],"wp:attachment":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/media?parent=382573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/categories?post=382573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/tags?post=382573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}