Shiny is an R library for building interactive webapps. Shiny allows rapid prototyping and quick production of dashboards and interactive data visualisations. This is especially important in situations where putting a real data-driven prototype in the hands of the end user allows for better refining of requirements before passing off to a web development team. This allows to speed up the delivery process and reducing the dependencies on other teams. Code and solution to exercises available on github: https://github.com/amguedes/ShinySeminar

2. 1. Importance of data visualisation
2. Understand the structure of a Shiny app
3. Create a Shiny app
2

3. I

4. 4
http://r4ds.had.co.nz/introduction.html
Import
Wrangle/
Tidy
Explore Transform
Model
Visualise
Communicate
Data visualisation is crucial in various steps of the data
science process

5. 5
• More engaging and better user experience
• Empowers the user
• Telling a story through data
• Easier to understand and remember
• Succinct communication of data

6. Web application framework for R that helps turn data analyses into interactive web applications
• Open source and big community
• Develop for the web using the same language as for data exploration and modelling
• No HTML, CSS, or JavaScript knowledge required!
• Pre-built widgets, allowing to build elegant and powerful applications with minimal effort
6

7. 7
http://shiny.rstudio.com/gallery/

8. • Web app: application program stored on a remote server and accessed via a web browser.
8
https://bookdown.org/weicheng/shinyTutorial/web-development.html
Front-end
• Producing HTML, CSS and JavaScript for a
website or web application so that a user
can see and interact with them directly
Back-end
• Creates the logical back-end and core
computational logic of a website

9. A Shiny app is composed of 2 parts:
ü UI: web document that the user gets to see
ü Server: set of instructions that tell the web page what to show when the user
interacts with the page
9
https://deanattali.com/blog/building-shiny-apps-tutorial/
How does a Shiny app work?
ØThe Server keeps monitoring the UI. Whenever there is a change in the UI, the Server will follow
some instructions (run some R code) accordingly and update the UI (concept of reactivity)

10. https://shiny.rstudio.com/gallery/movie-explorer.html
• Shiny apps are built around
inputs and outputs
10

11. 1. Layout
• Panels: group elements
together into a single
‘panel’.
• Layouts: organize panels
and elements
11
https://shiny.rstudio.com/reference/shiny/1.0.5/
https://bookdown.org/weicheng/shinyTutorial/ui.html

12. 2. Input
• Create with an *Input() functions
• Adding widgets/inputs
§ Name (id)
§ Label
§ Called using input$name
12
https://shiny.rstudio.com/reference/shiny/1.0.5/
https://bookdown.org/weicheng/shinyTutorial/ui.html
sliderInput(inputId = “myid”, label = “this will show in the UI”, …)

13. 3. Output
• Create with *Output()
functions
• *Output() adds a space in
the ui.R for an R object
13
https://shiny.rstudio.com/reference/shiny/1.0.5/
https://bookdown.org/weicheng/shinyTutorial/ui.html
plotOutput(“histogram”)

14. • Tells the server how to
render logic using render*()
• Works together with
*output()
14
https://shiny.rstudio.com/reference/shiny/1.0.5/
https://bookdown.org/weicheng/shinyTutorial/ui.html
Output$histogram =
renderPlot({
hist(rnorm(100))
})

15. 15
ShinyServer(function(input, output) {
output$squareNum = renderText({
paste("The square of your number is: ",
input$numInput^2)
})
})
ShinyUI(fluidPage(
titlePanel("Dummy app"),
mainPanel(
numericInput(id = "numInput", label = "A numeric input:",
value = 7, min = 1, max = 30),
textOutput("squareNum")
)
))
Watch out for ,, ( ) { }
When your component is as an argument to a function, you should use ,,
otherwise don’t!
Use ,, inside a fluidRow. Don’t use ,, to separate elements in server.R file.

16. Reactivity is what enables your outputs to react to changes in inputs. If x is a reactive variable, this
means that when the value of a variable x changes, then anything that relies on x gets re-evaluated
• In Shiny all inputs are automatically reactive.
• Reactive variables can only be used inside reactive contexts. Any render* function is a reactive
context
• Besides render*(), there are other 2 common reactive contexts: reactive({ }) and observe({ })
16
http://rstudio.github.io/shiny/tutorial/#reactivity
https://deanattali.com/blog/building-shiny-apps-tutorial/#10-reactivity-101
Whenever you want to print a reactive
variable for debug you need to
remember to wrap it in an observe({ }):
observe({ print(input$x )})

17. • Modularize code with reactive()
• Reactive expression
1. Call a reactive expression like a function. ex. data()
2. Reactive expression cache their values to avoid unnecessary computation
17
http://rstudio.github.io/shiny/tutorial/#reactivity
https://deanattali.com/blog/building-shiny-apps-tutorial/#10-reactivity-101
input$numInput
data = reactive({
rnorm(input$numInput)
})
output$hist =
renderPlot({
hist(data())
})
output$stats =
renderPrint({
summary(data())
})

18. 18
• Create some inputs
• Create a space for output
• Choose a reactive function that will
accept our input
• Assign the reactive function to an output
that will update the user interface

19. • shinyapps.io – a server maintained by Rstudio
http://docs.rstudio.com/shinyapps.io/getting-started.html
• Shiny Server – build your own server
https://shiny.rstudio.com/articles/shiny-server.html
• Docker container – deploy and share anywhere
(wait for one of our next workshops to know learn more about docker!)
19

20. II
Repo available here: https://github.com/amguedes/ShinySeminar

21. • Create a Shiny app to visualise the 500 best albums of all time by Rolling Stone
21
https://www.kaggle.com/notgibs/500-greatest-albums-of-all-time-rolling-stone
What do we want to know?
ü What’s the best artist of all time? And in a specific date interval?
ü Which years/artists were more prolific in best albums?
ü How has genre/artist popularity evolved along time?

22. 3. Create an empty Shiny app
3.1 File à New à Shiny Web App à Multiple File
3.2 Run the app
1. Open RStudio
2.install.packages("shiny")
library(shiny)
22

23. 23
Myapp
<folder, directory path>
ui.R
global.R
Somedata.csv
server.R
• There are 2 different ways to organize your shiny app (single file vs multiple files)
• We will be using the following:
ui.R and server.R need to
have that exact name

24. 24
Repo available here: https://github.com/royalmail-datascience/Meetup1_DataVisualisationShiny.git

25. 25
• This file is read before launching the app
→ After launching the app, both the ui.R and server.R will have access to all objects and any of
the global variables that were defined
→ global.R needs to be sourced in ui.R and server.R
DEMO
>

26. Navbar page title
Tab panel title
sliderInput
Radio buttons
Main panel
plotOutput
dataTableOutput
textOutput
Sidebar panel

27. 27
• Layout
• Input
• Output
sliderInput(inputId = “myid”,
label = “this will show in the
UI”, …)
plotOutput(“histogram”)
DEMO
>

28. 28
DEMO
>
• Render output
• Data manipulation

29. Tab panel title
sliderInput
Action button
Main panel
plotOutput
dataTableOutput
Sidebar panel

30. Tab panel title
Tabset panels Main panel
plotOutput

31. • http://rstudio.github.io/shinythemes/
• http://rstudio.github.io/leaflet/shiny.html
• http://shiny.rstudio.com/reference/shiny/1.1.0/
• https://github.com/rstudio/shiny-examples
• https://rstudio.github.io/shinydashboard/
• https://shiny.rstudio.com/tutorial/
• http://rstudio.github.io/shiny/tutorial/
• http://shiny.rstudio.com/articles/html-tags.html
• https://shiny.rstudio.com/images/shiny-cheatsheet.pdf
• https://shiny.rstudio.com/articles/layout-guide.html
• https://shiny.rstudio.com/gallery/
• https://www.showmeshiny.com/
31
• https://plot.ly/r/shiny-gallery/
• https://shinyapps-recent.appspot.com/recent.html
• https://deanattali.com/blog/building-shiny-apps-tutorial/
• https://bookdown.org/weicheng/shinyTutorial/resources.html
• http://stcorp.nl/R_course/tutorial_shiny.html
• http://zevross.com/blog/2016/04/19/r-powered-web-applications-
with-shiny-a-tutorial-and-cheat-sheet-with-40-example-apps/
• https://www.rstudio.com/resources/webinars/shiny-developer-
conference/

32. III
Repo available here: https://github.com/amguedes/ShinySeminar

33. 33
• Now that you have your shiny app up and running try to play with it by doing the following tasks (solutions
can be found in the repository)
1. Add the Year option on “Home” panel à X-axis (and update the plot accordingly)
2. Add two new tabsets on “Time series analysis” for Artist and Artist evolution (use Genre tabs as
templates)

34. 34
1. Add the Year option on “Home” panel à X-axis (and update the plot accordingly)

35. 35
2. Add two new tabs on “Time series analysis” for Artist and Artist evolution (use Genre tabs as
templates)