Flexdashboard Layout: "Over Time" Section

Shiny Web Applications Part 1

Welcome to Shiny Web Application Development (Level 1)

Building Web Applications that Deliver Business Value! (2:15)
Course Roadmap - Building Production-Ready Web Apps Fast! (1:54)
Private Slack Channel: How to Join
Video Subtitles (Captions)
Course Certificate - Instructions
Would You Like To Become An Affiliate (And Earn 20% On Your Sales)?

Prerequisites

Prerequisites

Getting Help

Getting Help (IMPORTANT!!!)

1.0 Getting Started

Overview

1.1 Business Case & Course Roadmap

Why Pricing Products Consistently Is Important (0:57)
Course Objective - Product Price Prediction App with Shiny & Flexdashboard (1:17)

1.2 Tools In Our Toolbox

Resource #1: The Ultimate R Cheat Sheet - Version 2.0 (File Download) (2:51)

1.3 Data Science Project Setup

Installing R (Optional) (3:06)
Installing RStudio IDE (Optional) (3:03)
Setting Up The Project (File Download) (2:34)
Installing R Packages (File Download) (3:03)

1.4 Transactional Data Introduction - Bike Sales (Recap from 101)

Transactional Data - What Is It? (1:41)
Orders: The Building Blocks of Transactional Data (3:53)
Data Model: Entity Relationship Diagram (2:14)
Understanding Database Relationships (6:18)

Part 1 - Sales Dashboard

Part 1 - Learning Shiny By Building A Sales Dashboard! (2:02)

2.0 Making A Sales Dashboard with Flexdashboard

What You Build In This Section (0:54)

2.1 Flexdashboard Primer

Resource #2: Flexdashboard Documentation & Key Resources (6:30)
Flexdashboard: Introduction & Layout Basics (3:05)
Orientation: Column vs Row (1:24)
Vertical Layout: Fill vs Scroll (3:49)
Tabsets (2:50)
Multiple Pages (4:01)
Code Checkpoint

2.2 Sales Dashboard - Integrating a Plotly Chloropleth Map

Flexdashboard Setup (1:35)
Libraries (1:23)
Database Connection (4:02)
Joining Data Using The SQLite Backend - Part 1 (5:00)
Joining The Data Using The Database Backend - Part 2 (4:12)
Processing Data: Final Preparations for the Map (2:20)
Adding A Section To The App (1:59)
Making the Plotly Map, Part 1: Plotly Chloropleth Maps (1:39)
Making The Plotly Map, Part 2: Aggregation By State (3:01)
Making The Plotly Map, Part 3: plot_geo() (2:37)
Making the Plotly Map, Part 4: add_trace() (3:27)
Making the Plotly Map, Part 5: layout() (3:14)
Code Checkpoint

3.0 Adding Shiny Reactive Components to the Sales Dashboard

What You Build In This Section (0:41)
Setup (File Download) (1:47)

3.1 Shiny Tutorial

Resources #3: Shiny Cheat Sheet (8:18)
Resource #4: Shiny Widgets Gallery (1:40)
Resource #5: HTML Widgets Showcase (4:47)
Resource #6: shinyjs (2:05)
Shiny Tutorial App - Overview (5:18)
Checkbox - checkboxGroupInput() (5:37)
Checkbox - renderPrint() & textOutput() (7:19)
Date Range - dateRangeInput() (5:12)
Date Range - renderPrint() & textOutput() (2:41)
Slider - sliderInput() (3:49)
Slider - renderPrint() & textOutput() (2:34)
Reactive Filtering - reactive() (5:48)
Data Table - Interactive Tables with DT (5:26)
Reactive Expressions: Adding More Inputs to reactive() (5:27)
Reactive Summarization: DT (5:17)
Reset Button, Part 1: actionButton() (2:29)
Resource #7: Font Awesome (1:16)
Reset Button, Part 2: observeEvent() (7:31)
Code Checkpoint (File Download)

3.2 Integrating Shiny into the Sales Dashboard

Sales Dashboard: Setting Up For Shiny (4:25)
shinyWidgets (2:08)
Data Preparation (7:10)
Bike Type Selector - shinyWidgets::checkboxGroupButtons() (6:26)
Bike Type Selector - reactive() & renderPlotly() (6:34)
Bike Family Selector - shinyWidgets::pickerInput() (7:03)
Bike Family Selector - reactive() filter (1:20)
Reset Button: actionButton() (6:22)
Code Checkpoint (File Download)

3.3 Challenge 1 - Add Date Range Input

Challenge 1 - Add Date Range Input (File Download) (1:37)
Challenge 1 - Solution, Part 1 (5:32)
Challenge 1 - Solution, Part 2 (7:50)
Code Checkpoint (File Download)

Course Survey

Quick Course Survey

4.0 Extending The Sales Dashboard with Time Series & shinyjs

What You Build In this Section (1:02)
Setup (File Download) (1:38)

4.1 Time Series Plot

Time Series Plot: Game Plan (1:03)
Flexdashboard Layout: "Over Time" Section (1:35)
Data Preparation (6:56)
Making the ggplot Geometries (5:45)
Formatting the ggplot (2:53)
Adding Interactivity: ggplotly() (1:26)
Parameterizing The Time Unit (2:02)
Next Steps: Reactivity (0:55)
Code Checkpoint (File Download)

4.2 Adding Reactivity to the Time Series Plot

Adding Reactivity: Game Plan (1:32)
Adding Reactivity, Part 1: Date Range Input (5:55)
Adding Reactivity, Part 2: renderPlotly() (2:04)
Adding Reactivity, Part 3: Connecting the Category 1 & 2 Inputs (4:46)
Adding Reactivity, Part 4: Date Aggregation with Radio Group Buttons (8:40)
Adding Reactivity, Part 5: Connecting the Date Aggregation Buttons (0:40)
Finishing Touches (2:24)
Next Steps (0:45)
Code Checkpoint (File Download)

4.3 Integrating an Apply Button & shinyjs

Apply Button: Reactive Programming Overview (2:09)
Adding the Apply Button: actionButton() (1:56)
Reactive Button Click: eventReactive() (5:19)
Loading Plots When Firing Up The Application (3:07)
Welcome to shinyjs (0:59)
Setting Up shinyjs in RMarkdown (2:25)
Reset Button: Update Time Aggregation Buttons (2:39)
Reset Button: Click "Apply" with shinyjs (4:05)
Reset Button: Delay "Apply" Click with shinyjs (2:30)
Recap (1:12)
Code Checkpoint (File Download)

4.4 BONUS - Adding Value Boxes to Your Dashboard

What You Build (0:53)
Setup & Layout (3:30)
Making Value Boxes: valueBox() (3:33)
Data Summarization, Part 1 (7:24)
Data Summarization, Part 2 (4:20)
Reactive Data Summarization (2:23)
Healthy Value Box (4:35)
Wealthy Value Box (2:59)
Wise Value Box (3:00)
Code Checkpoint (File Download)

Part 2 - Product Pricing Prediction App

Part 2 - Making A Predictive Web Application that Helps Your Organization (2:10)

5.0 Predictive Analysis - XGBoost + Parsnip

Predictive Analysis Goals (4:10)
Setup (File Download) (3:32)
Preprocessing the Bikes Table (7:06)
Training Data Set: Getting Ready for parsnip + XGBoost (3:12)
Machine Learning Algorithm: parsnip + XGBoost (6:36)
Code Checkpoint #1 (File Download)
Modularizing the Preprocessing Code, Part 1: Separate Bike Description (9:06)
Modularizing the Preprocessing Code, Part 2: Separate Model Description (5:03)
Code Checkpoint #2 (File Download)
Making Predictions from User Input (6:02)
Modularizing the Prediction: Generating New Bikes (8:12)
Code Checkpoint #3 (File Download)
Formatted Table (5:18)
Modularizing the Table Output: format_table() (1:08)
Bike Prediction Plot: Data Preparation (7:03)
Bike Prediction Plot: ggplot, Part 1 (7:16)
Bike Prediction Plot: ggplot, Part 2 (4:47)
Modularize the Bike Prediction Plot: plot_bike_prediction() (5:05)
Code Checkpoint #4 (File Download)

6.0 Prediction App - Getting The Analysis Into The Flexdashboard Layout

What You Build In This Section (0:52)
Setup: dir_create() & flexdashboard creation (2:47)
Setting Up The Flexdashboard Layout (3:25)
Load Libraries (3:35)
Data: Connect to SQLite and Load Bikes Table Into Memory (3:19)
Scripts: Source Our Modular Prediction Functions (3:00)
Machine Learning Model: Loading Our XGBoost Algorithm (1:51)
Generating Bike Predictions (3:33)
The Prediction Table: format_table() (0:40)
The Price Prediction Plot: plot_bike_prediction() (2:26)
Aside - The Difference Between Flexdashboard With & Without runtime: shiny (1:37)
Code Checkpoint (File Download)

7.0 Prediction App - Adding User Input with Shiny!

What You Build In This Section (0:59)
Setup (File Download) (0:47)

7.1 Adding Shiny To The Predictive Web Application

Adding Shiny To Our App - runtime: shiny (1:33)
Adding A Text Input: textInput() (2:09)
Adding An Apply Button: actionButton() (2:09)
Adding Reactivity To The Apply Button: eventReactive() (4:21)
Rendering The Prediction Plot: renderPlotly() (2:31)
Rendering The Prediction Table: renderTable() (1:49)
Render On Load: Prediction Plot & Table (1:26)
Code Checkpoint (File Download)

7.2 Challenge 2 - Reset Button

Challenge #2: Reset Button (File Download) (1:29)
Challenge #2 Solution (File Download) (6:22)

8.0 Completing the Predictive Web App - More Shiny!

What You Build In This Section (0:54)
Setup (File Download) (0:43)
Organizing Our UI & Adding The shinyWidgets Library (2:04)
Getting The Unique Categories: distinct() (3:00)
Adding Bike Family UI: pickerInput() (3:58)
Connecting Bike Family UI To The Apply Button (2:07)
Connecting Bike Family UI To The Reset Button (2:00)
Generate Bike Type From Bike Family (6:22)
Update Bike Family In Bike Prediction (3:17)
Adding Frame Material UI: pickerInput() (2:17)
Connecting Frame Material UI To Apply, Reset, & Generate New Bike Prediction (3:37)
Code Checkpoint (File Download)

Part 3 - Customizing The Application Theme

Part 3 - Customizing The App To Your Organizations Brand! (1:07)

9.1 HTML & CSS Crash Courses

Training for Web Developers - Traversy Media
1 Hour HTML Crash Course for Beginners - Traversy Media
1.5 Hour CSS Crash Course - Traversy Media

9.2 Customizing The Appearance Of Your App

Setup (File Download) (1:44)
Resource #8: Chrome DevTools - Browser Web Development Tools (10:10)
[OPTIONAL / ADVANCED] 1 Hour Chrome DevTools Crash Course - Traversy Media
CSS Setup & Coloring the Navbar (7:07)
Coloring the Sidebar (3:49)
Adding a Logo (4:53)
Resource #9: Google Fonts (8:03)
Navbar - Montserrat (5:01)
Headers - Montserrat (4:31)
Body - Roboto (2:25)
Coloring the Buttons (9:15)
Code Checkpoint (File Download)

9.3 Challenge 3 - Matching Cannondale's Brand Appearance

Challenge #3: Cannondale Challenge! (File Downloads) (4:18)
Challenge #3 Solution, Part 1 (File Download) (14:10)
Challenge #3 Solution, Part 2 (15:28)

9.4 Bonus - Adding Images To Your Cannondale App

Displaying Product Images in Your Shiny App (1:20)
Setup (File Downloads) (4:52)
Connect the Script & Model Paths (4:09)
Image Placeholder (1:20)
Extracting the Model Base (5:58)
Generate New Bike: To Speed Up Debugging (4:01)
Detecting & Retrieving the Image Path (5:20)
Expose the Image Path to the App (2:36)
Rendering Images: renderImage() (4:58)
Handling Bike Models with Numbers in their Names (5:38)
Code Checkpoint (File Download)

Part 4 - Add Demand Forecasting & Customizing Your Sales Dashboard

Part 4 - Adding Demand Forecasting & Customizing Your Sales Dashboard (0:59)
App Setup (File Download) (4:04)

10.1 Demand Forecast Analysis - Parnsip + XGBoost

Forecast Analysis: Setup & Overview (4:04)
Data Processing (5:16)
Time Series Aggregation: aggregate_time_series() (7:04)
Time Series Plot: plot_time_series() (5:16)
Time Series ML vs ARIMA: Why We Are Using ML For Our App (1:45)
timetk, Part 1: A toolkit for time series ML prep (6:21)
timetk Part 2: A Toolkit for Time Series ML Prep (3:14)
Making Training & Future Data (8:47)
XGBoost Forecast Model (File Download) (7:51)
Making Predictions & Outputting in the Format for Our New Forecast Plot (8:22)
Modularizing the XGBoost Forecast: generate_forecast() (6:02)
Interactive Forecast Plot (6:45)
plot_forecast() (2:30)
Code Checkpoint (File Download)

10.2 Visual Forecast Inspection & Model Adjustment

Visual Forecast Inspection (6:10)
Preparing for the Model Change (4:08)
Add Logic: Separating the Yearly Data from the Other Time Aggregations (2:32)
Making a Linear Regression Model for Yearly Data (5:01)
Updating the Plot Forecast Function, Part 1 (5:28)
Updating the Plot Forecast Function, Part 2 (5:40)
Saving Our Functions (1:21)
Code Checkpoint (File Download)

10.3 Forecasting - What About Trend? (XGBoost vs GLMNet)

Setup (File Download) (3:23)
Trend Evaluation (3:07)
Experiment #1: Exploring Trend w/ XGBoost Forecast (3:09)
Experiment #2: Comparing XGBoost & GLMNet (13:53)

10.4 Forecast Mode - Integrating the ML Forecast into our App!

Overview (2:02)
Setup (2:24)
Toggle Switch: switchInput() [with CSS Copy-Paste] (5:46)
Showing & Hiding the Forecast Horizon: conditionalPanel() (4:07)
Link the Forecast Toggle Switch to Reset & Update Buttons (2:59)
Integrating the Forecast (8:34)
Producing the Forecast Plot (4:20)
Connecting the Forecast to the Time Unit Radio Buttons: observeEvent() (3:25)
Connecting the Forecast to the Forecast Mode Toggle Switch: observeEvent() (3:26)
Value Boxes, Part 1: Update Colors with Changing Data Filters (6:04)
Value Boxes, Part 2: Update Colors with Changing Data Filters (6:51)
Customer Selection: pickerInput() (6:00)
Connecting the Customer Selection to the Data Filter (4:50)
Recap (0:58)
Code Checkpoint (File Download)

10.5 Customization - Business Science Light Theme

Creating a CSS Theme for Our Shiny App (1:09)
Setup (File Download) (1:14)
Connecting Our CSS & Logo (2:59)
Adjusting the Sidebar Width (8:34)
Coloring the Forecast Mode Toggle Switch (4:54)
Coloring the Time Series Radio Buttons (10:59)
Coloring the Value Boxes (5:51)
Updating the CSS to Make Responsive for Mobile Devices (2:35)
Enabling Scroll Capability on the UI Sidebar for Mobile Devices (3:16)
Code Checkpoint (File Download)

10.6 Customization - Business Science Dark Theme

Making a Dark Theme! (0:45)
Adding A View Mode Toggle Switch (9:19)
Creating The Dark Theme (6:05)
Switching Themes with includeCSS() & renderUI() (5:39)
Adjusting the Theme for Mobile Devices (3:14)
Final Shiny Sales Dashboard with Forecasting & Dark Theme! (1:10)
Code Checkpoint (File Download)

Part 5: Production & Deployment

Publishing Your Shiny Web Application (0:29)
Publishing Options (6:03)

11.1 Publishing Your Shiny Web App!

Setup: Shinyapps.io & App Files (3:40)
Connecting To Shinyapps.io & Publishing (3:04)
Troubleshooting Error #1: Files are Outside of App Directory (5:20)
Troubleshooting Error #2: xgboost package is not being installed (1:54)
Shiny App Deployed!!! (0:26)

11.2 Challenge

Challenge #4: Create & Deploy Your Own App (1:36)

Congratulations!!!

You Did It! I'm So Happy For You!! (1:38)

Flexdashboard Layout: "Over Time" Section

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock