Communicating data with interactive web apps
Lecturer: Emi Tanaka
Department of Econometrics and Business Statistics
Aim
shiny
Why
Interactive web apps can
Open-ended dialogue between the user and the computer
Image from Spencer (2022, Feb. 17). Data in Wonderland. Retrieved from https://ssp3nc3r.github.io/data_in_wonderland
Image from Spencer (2022, Feb. 17). Data in Wonderland. Retrieved from https://ssp3nc3r.github.io/data_in_wonderland
Tominski, Christian, and Heidrun Schumann (2020) Interactive Visual Data Analysis. CRC Press.
Expressiveness (Mandatory Condition)
An interactive visual representation is expressive if it allows the user to carry out the actions needed to acquire the desired information in the data.
Effectiveness (Goal-Oriented Condition)
A measure of how well the user can convey an interaction intent to the computer.
Efficiency (Desired Condition)
The balance of benefits and costs for using an interactive visualisation approach. E.g. does the human effort of building the interactive visualisation outweigh its benefits? Are the efforts of users to interact with it offset the information gained for users?
https://climate.nasa.gov/vital-signs/global-temperature/
https://flowingdata.com/2016/01/19/how-you-will-die/
shiny
?shiny
?shinyapp
and Shift + Tablibrary(shiny) # exported from `htmltools`
tags$html(
tags$body(
h1('My first heading'),
p('My first paragraph, with some ', strong('bold'), ' text.'),
div(id = 'myDiv', class = 'simpleDiv',
'Here is a div with some attributes.')
)
)
includeCSS()
and includeScript()
to include CSS and JS filesfluidRow
+ columns
This is using bootstrap
fluidPage(
fluidRow(column(width = 4,
h3("Some informative table"),
tableOutput("mytable")),
column(width = 4, offset = 3,
h3("Fancy plot"),
plotOutput("myplot"))),
fluidRow(column(width = 12,
"Minimum width is 1 and maximum width is 12"))
)
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Some informative table</h3>
<div id="mytable" class="shiny-html-output"></div>
</div>
<div class="col-sm-4 offset-md-3 col-sm-offset-3">
<h3>Fancy plot</h3>
<div id="myplot" class="shiny-plot-output" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Minimum width is 1 and maximum width is 12</div>
</div>
</div>
sidebarLayout
fluidPage(sidebarLayout(
sidebarPanel(h3("User control"),
actionButton("id1", "Push")),
mainPanel(h3("Main Panel"),
plotOutput("myplot"))
))
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<form class="well" role="complementary">
<h3>User control</h3>
<button id="id1" type="button" class="btn btn-default action-button">Push</button>
</form>
</div>
<div class="col-sm-8" role="main">
<h3>Main Panel</h3>
<div id="myplot" class="shiny-plot-output" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
server | ui |
---|---|
renderDataTable |
dataTableOutput |
renderImage |
imageOutput |
renderPlot |
plotOutput |
renderPrint |
verbatimTextOutput |
renderTable |
tableOutput |
renderText |
textOutput |
renderUI |
uiOutput or htmlOutput |
reactiveValues
creates your own reactive valuesisolate
prevents reactionsreactive
caches its value to reduce computation and notifies its dependencies when it has been invalidatedobserveEvent
runs code when the first argument changesobserve
runs code when any reactive elements within it changesbrowser()
+ breaking pointsSummary
shiny
Resources
ETC5523 Week 3