Creating a WORDLE app in Shiny:
https://www.youtube.com/watch?v=quvz4xLbW88
The app: https://winston.shinyapps.io/wordle/
Look what I found
Before we start…
Your project: code it progressively & continuously! Ask me questions along the way. Next session is about deployment: it’s better if you have an app to deploy :)
About the next sessions… :
- S5 (today): lots of tips for UI organization - a bit of time at the end for questions
- S6 (next time): light! (styling & deployment) \(\rightarrow\) time to help on projects
- S7: Geocomputing & Twitter example: API & text mining
- S8: chatGPT / modelling (clustering) / stats (regression-tests) / python…?
About the exercises: usually the outcome is pretty ugly. They are intended to make you practice! Up to you to make YOUR project look good!
Idea: post for the best app(s).
Great projects
Great projects require 2 components: technical skills (coding) + UI/UX acumen.
Common issues
Commas & brackets! => use Cmd + I (mac) or Ctrl + I (PC) to indent.
INDENTATION !!!
COMMAS (and brackets) in the UI !!!
Back to UI & Server
Dialog: sidebar to server
Dialog: server to body
The full cycle (one last time)
Organizing the dashboard: simple structures
Rows and columns
Columns: 12 units in what is called the Bootstrap grid system.
In shiny(dashboard), most width are computed on this scale (versus pixels). Sometimes, pixels are available. 
Embed content in rows
Via fluidRow()! 
Embed content in rows (body)
dashboardBody(
fluidRow(
column(6,valueBoxOutput("box1", width = 12)),
column(6,infoBoxOutput("box2", width = 12))
)
)
Embed content in rows (sidebar)
fluidRow(
column(6, checkboxGroupInput("season", h4("Season"),
choices = list("Summer" = "Summer",
"Winter" = "Winter"),
selected = c("Summer", "Winter"))
),
column(6, checkboxGroupInput("gender", h4("Gender"),
choices = list("Women" = "Women",
"Men" = "Men"),
selected = c("Women", "Men"))
)
)
Tables
With the DT (DataTable) package, you can customize the number of rows.
\(\rightarrow\) Test the search feature!
More options:
https://rstudio.github.io/DT/shiny.html
https://rstudio.github.io/DT/options.html
https://rstudio.github.io/DT/010-style.html
output$pt <- DT::renderDataTable({data()},
options = list(
lengthMenu = list(c(5, 12, 19), c('5', '12', '19')),
pageLength = 5
))
Tabs: example
Tabs: code
dashboardBody(
tabBox(
title = "Results", height = "920px", width = 12, # Width in bootstrap, height in px
tabPanel("Countries through time",
plotOutput("plot", height = 300),
DT::dataTableOutput("pt")
)
)
)
Menus (1): example
Menus show material in the body OR in the sidebar, but not in both!
Resources:
https://rstudio.github.io/shinydashboard/behavior.html
https://rstudio.github.io/shinydashboard/get_started.html
Menus (1): code
dashboardSidebar(
sidebarMenu(
menuItem("Plot", tabName = "plot", icon = icon("images", lib = "font-awesome")),
menuItem("Table", tabName = "table", icon = icon("table", lib = "font-awesome"))
)
),
dashboardBody(
tabItems(
tabItem(tabName ="plot",
plotOutput("plot", height = 300)
),
tabItem(tabName ="table",
DT::dataTableOutput("pt")
)
)
)
Part of the code is located in the Sidebar (layout), and part in the body (content).
The link is the tabName.
Menus (2): simplify the sidebar
menuItem("Display options",
numericInput("max_country", h4("Max number countries"),
min = 2, max = 12, step = 1, value = 6)
)
Navbar
The code stacks panels with proper names and then displays some object. Below, the objects plot, pt and text are defined in the server.
# Inside the body
navlistPanel(
"Stuff A",
tabPanel("Graph 1", plotOutput("plot")),
tabPanel("Table 2", DT::dataTableOutput("pt")),
"Header B",
tabPanel("Text 3", h1(textOutput("text"))),
tabPanel("Component 4"),
"-----",
tabPanel("Component 5"),
widths = c(2,10)
)
Navbars are usually used in pure Shiny (not in shinydashboards). They are a bit redundant with sidebars.
The reference pages for dashboard structure
- for dashboard structure: https://rstudio.github.io/shinydashboard/structure.html
Notably, I have not mentioned simple “boxes” which can wrap some content… via box(…) - for dahsboard appearance: https://rstudio.github.io/shinydashboard/appearance.html
Formatting: going further
Boxes for KPIs
infoBox & valueBox!
From server with renderInfoBox() \(\rightarrow\) to UI via infoBoxOutput()
From server with renderValueBox() \(\rightarrow\) to UI via valueBoxOutput()
See also tabBox().
Boxes: syntax
output$box1 <- renderValueBox({
valueBox(
value = sum(data()$Medal=="Gold"),
subtitle = "Gold",
icon = icon("medal", lib = "font-awesome"),
color = "yellow"
)
})
Be careful, for infoBoxes, there is a title & a subtitle.
Static boxes: https://rstudio.github.io/bslib/articles/value-boxes.html.
For icons: https://fontawesome.com/search.
Available colors for boxes
Sadly, the choice is limited…
See also: https://rinterface.github.io/bs4Dash/reference/infoBox.html https://rinterface.github.io/bs4Dash/reference/valueBox.html
Plotly is back: fully integrable into shiny
It’s always better to resort to plotly: https://plot.ly/r/ It’s incredibly simple and very effective!
1. In the server: renderPlot() \(\rightarrow\) renderPlotly()
2. In the server, save the ggplot in a variable and then use ggplotly()
3. In the UI (body): plotOutput() \(\rightarrow\) plotlyOutput()
library(plotly) g <- ggplot(diamonds, aes(x = color, fill = color)) + geom_bar() ggplotly(g)
Include images
Two options:
- the image comes from the web, in this case, use:
img(src = 'https://serverblabla/my_Image.png',
width = "50%", height = "50%", align = "center")
- the image is stored locally. In this case create a “www” folder in the app repo where you keep the images and:
img(src ='image_name.png')
Recommended file types: png, jpeg, svg.
What are your questions?
A ‘bad’ question is better than no question (there are no bad questions).
Even the best make errors: https://twitter.com/hadleywickham/status/1188516615635324928?s=11
Next time is the last pure Shiny session: make progress if you want me to help you!
Also, I will talk about app online deployment. If you don’t have an app that works, use one from the course.