TL;DR: This is a guide on creating interactive web apps in Shiny. It covers the user interface, server logic, and running the application. It also includes helpful links and a GitHub repository for further exploration. Keep reading to learn how to make your own interactive web apps!

Shiny is a library for the R programming language that is used to bring your analysis to life by combining interactivity, markup language and reactive programming to create beautiful visualizations as an example these ones in their gallery.

https://shiny.rstudio.com/gallery/

Rocking 🤘right? Don't forget to visit their website to learn more.

Shiny

Shiny is great! Let's try making an application with it. That's the goal for this blog post. Make a visualization that the reader can manipulate to suit their needs. Before jumping right in let's cover the components you'll need to get started with making something, they are only two:

UI (User Interface)

This is what your user will interact with in the application. In other words, this is where visual elements are placed and it controls the layout and the application appearance. Here's the application you'll try to make.

Complete application you'll build. This is being served on shinyapps.io. Continue reading to get the full repository.

Complete application you'll build. This is being served on shinyapps.io. Continue reading to get the full repository.

Notice if you try change something in the drop-downs, the slider and the checkbox in the left panel the plots updates to the right you can also call that the main panel. Try it out! Then wait for the magic to happen 🤞🏿🙏🏿.

Let's go over the code.

# Defines UI for application: consists of various things the user will interract with
# in the shiny application
ui <- fluidPage(
   h1("Interractive YT data viz tool"),  # Application title in HTML
   br(), # line break
  # simply used for arranging inputs in a panel which you can see in the application 
  ui <- fluidPage(
    themeSelector(), # controls theme changes dropdown
    sidebarLayout(position = "left",
      sidebarPanel(
      # placeholders to handle input typed in by the user
      selectInput(inputId = "property", label = "Channel property", choices = levels(df_transformed$channel_properties), selected = "views"),
      selectInput(inputId = "property2", label = "Second channel property", choices = levels(df2_transformed$channel_properties), selected = "views"),
      
      # placeholder to input
      sliderInput(inputId = "alpha1", label = "Line Transparency", min = 0, max = 1, value = 0.5),
      checkboxInput(inputId = "fit", label = "Add line of best fit", value = FALSE),
      
      br(),
      # more HTML to draw the logos in the left panel
      h4("Built with",
     img(src = "<https://www.rstudio.com/wp-content/uploads/2014/04/shiny.png>", height = "30px"),
      "by",
      img(src = "<https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gray.png>",
      height = "30px"))),
     
     # what appears in the main panel of the layout   
     # Title of plot text
     # tabs to hold the plot, data tables and references
      mainPanel("Comparing properties of two YT channels Sliceace (left) and James channel (right) from 2011 to 2017", 
                tabsetPanel(type = "tabs",
                            tabPanel("Plot", plotlyOutput("lineplot")),
                            tabPanel("YT channel", DT::dataTableOutput("table")),
                            tabPanel("Another YT channel", DT::dataTableOutput("table2")),
                            tabPanel("Codebook", 
                                     br(),
                                     tags$a("Codebook the description of columns", href = "<https://github.com/Shuyib/YT_dataviz/blob/master/codebook.txt>")
                            ),
                            tabPanel("Reference",
                                    br(),
                                    tags$a("Dean Attali course on datacamp", href = "<https://www.datacamp.com/courses/building-web-applications-in-r-with-shiny-case-studies>"), 
                                    br(),
                                    tags$a("Mine Çentikaya Rundel courses", href = "<https://resources.rstudio.com/webinars/intro-to-shiny?prevItm=NaN&prevCol=&ts=258978>"),
                                    br(),
                                    tags$a("Mine's Github", href = "<https://github.com/mine-cetinkaya-rundel>"),
                                    br(),
                                    tags$a("Plotly documentation", href = "<https://plot.ly/r/>"),
                                    br(),
                                    tags$a("Tidyverse documentation (dplyr, stringr, readr, ggplot)", href = "<https://www.tidyverse.org/>"),
                                    br(),
                                    tags$a("Shiny documentation", href = "<https://shiny.rstudio.com/>"))
                           )
                                            
                      
  ))))

Notice everything is placed in the fluidpage function. According to the shiny documentation, it creates a page with a fluidlayout 🤔💡. It maybe best if you run the examples in the documentation before continuing we'll wait for you.

<aside> 📌 I mean just tinker with the app and see how things are changing when you remove or add something.

</aside>