Creating Interactive Quarto Dashboards with Observable JS, GitHub Actions, and GitHub Pages

In this video, we'll learn how to use Observable JS (Observable JavaScript) to create interactive Quarto dashboards. This is all free, and is powered completely by Observable JS, GitHub Actions, and GitHub Pages -- no need for a Shiny server. We'll see an example of how to create a dynamic dropdown menu, where the dropdown options are populated based on a variable in a data frame. When the value selected in the dropdown menu changes, the content on the dashboard updates itself accordingly. This video is video #5 of a six-video series (there's only six, not seven, oops - I misspoke in the video intro) aimed at making complex dashboard projects accessible and reproducible. Video 1 (Publishing Quarto Dashboards for FREE using GitHub Actions and GitHub Pages): https://youtu.be/5zYrgRylkH0 Video 2 (How to securely store passwords as environment variables using GitHub Actions): https://youtu.be/RNqsqcOYDp0 Video 3 (How to access Spotify data using R): https://youtu.be/MLs0f9vNk9c Video 4 (Embedding media in Quarto projects using iframes): https://youtu.be/y7ZdBUtQxqg Video 5 (Creating interactive Quarto dashboards with Observable JS, GitHub Actions, and GitHub Pages): https://youtu.be/1k1ExCgzXl0 Video 6 (Creating and styling the table): https://youtu.be/27Njh1i9-oM Links: Completed dashboard: https://melissavanbussel.github.io/spotify-dashboard/dashboard.html Code repo for dashboard: https://github.com/melissavanbussel/spotify-dashboard Observable Plot tutorial (Allison Horst): https://www.youtube.com/watch?v=0srggostAko Want to support my channel or connect? ☕Buy me a coffee: https://ko-fi.com/melissavanbussel 💼 LinkedIn: https://www.linkedin.com/in/melissavanbussel/ 🐦 Twitter: https://twitter.com/melvanbussel 🌐 Website: https://www.melissavanbussel.com/ 💻 GitHub: https://github.com/melissavanbussel *Please note: it’s helpful for me if you send me a message on LinkedIn when you add me letting me know you’re adding me because of YouTube, so that I can keep track of how I know each person in my network😊 00:00 Introduction 02:25 Goal: Create a dynamic dropdown menu 04:13 Including Observable JS chunks in your Quarto documents 05:47 Using the ojs_define function 06:52 Creating the dropdown menu 08:34 Updating the dashboard based on the dropdown value