mirror of
https://github.com/rstudio/shiny.git
synced 2026-02-03 11:15:07 -05:00
add source code to tutorial topics
This commit is contained in:
@@ -1,2 +1,60 @@
|
||||
|
||||

|
||||

|
||||
|
||||
The Hello Shiny example is a simple application that generates a random distribution with a configurable number of observations and then plots it. To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("01_hello")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define UI for application that plots random distributions
|
||||
shinyUI(pageWithSidebar(
|
||||
|
||||
# Application title
|
||||
headerPanel("Hello Shiny!"),
|
||||
|
||||
# Sidebar with a slider input for number of observations
|
||||
sidebarPanel(
|
||||
sliderInput("obs",
|
||||
"Number of observations:",
|
||||
min = 0,
|
||||
max = 1000,
|
||||
value = 500)
|
||||
),
|
||||
|
||||
# Show a plot of the generated distribution
|
||||
mainPanel(
|
||||
plotOutput("distPlot")
|
||||
)
|
||||
))
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define server logic required to generate and plot a random distribution
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# Function that generates a plot of the distribution. The function
|
||||
# is wrapped in a call to reactivePlot to indicate that:
|
||||
#
|
||||
# 1) It is "reactive" and therefore should be automatically
|
||||
# re-executed when inputs change
|
||||
# 2) Its output type is a plot
|
||||
#
|
||||
output$distPlot <- reactivePlot(function() {
|
||||
|
||||
# convert string input to an integer
|
||||
obs <- as.integer(input$obs)
|
||||
|
||||
# generate an rnorm distribution and plot it
|
||||
dist <- rnorm(obs)
|
||||
hist(dist)
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
@@ -1,3 +1,96 @@
|
||||
|
||||
|
||||

|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("08_html")
|
||||
</code></pre>
|
||||
|
||||
#### www/index.html
|
||||
|
||||
<pre style='color:#000000;background:#ffffff;'><code><span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>html</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>head</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>script src="shared/jquery.js" type="text/javascript"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>script</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>script src="shared/shiny.js" type="text/javascript"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>script</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>link</span> rel=<span style='color:#2a00ff; '>"stylesheet"</span> type=<span style='color:#2a00ff; '>"text/css"</span> href=<span style='color:#2a00ff; '>"shared/shiny.css"</span><span style='color:#7f0055; '>/></span>
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>head</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>body</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>h1</span><span style='color:#7f0055; '>></span>HTML UI<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>h1</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span>Distribution type:<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>br</span> <span style='color:#7f0055; '>/></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>select</span> name=<span style='color:#2a00ff; '>"dist"</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>option</span> value=<span style='color:#2a00ff; '>"norm"</span><span style='color:#7f0055; '>></span>Normal<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>option</span> value=<span style='color:#2a00ff; '>"unif"</span><span style='color:#7f0055; '>></span>Uniform<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>option</span> value=<span style='color:#2a00ff; '>"lnorm"</span><span style='color:#7f0055; '>></span>Log-normal<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>option</span> value=<span style='color:#2a00ff; '>"exp"</span><span style='color:#7f0055; '>></span>Exponential<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>select</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span>Number of observations:<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>br</span> <span style='color:#7f0055; '>/></span>
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>input</span> type=<span style='color:#2a00ff; '>"number"</span> name=<span style='color:#2a00ff; '>"n"</span> value=<span style='color:#2a00ff; '>"500"</span> min=<span style='color:#2a00ff; '>"1"</span> max=<span style='color:#2a00ff; '>"1000"</span> <span style='color:#7f0055; '>/></span>
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>pre</span> id=<span style='color:#2a00ff; '>"summary"</span> class=<span style='color:#2a00ff; '>"shiny-text-output"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>pre</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>div</span> id=<span style='color:#2a00ff; '>"plot"</span> class=<span style='color:#2a00ff; '>"shiny-plot-output"</span>
|
||||
style=<span style='color:#2a00ff; '>"</span><span style='color:#7f0055; font-weight:bold; '>width</span>: 100%; <span style='color:#7f0055; font-weight:bold; '>height</span>: 400px<span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>div</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '><</span><span style='color:#7f0055; font-weight:bold; '>div</span> id=<span style='color:#2a00ff; '>"table"</span> class=<span style='color:#2a00ff; '>"shiny-html-output"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>div</span><span style='color:#7f0055; '>></span>
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>body</span><span style='color:#7f0055; '>></span>
|
||||
|
||||
<span style='color:#7f0055; '></</span><span style='color:#7f0055; font-weight:bold; '>html</span><span style='color:#7f0055; '>></span>
|
||||
</code></pre>
|
||||
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define server logic for random distribution application
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# Reactive function to generate the requested distribution. This is
|
||||
# called whenever the inputs change. The output functions defined
|
||||
# below then all used the value computed from this function
|
||||
data <- reactive(function() {
|
||||
dist <- switch(input$dist,
|
||||
norm = rnorm,
|
||||
unif = runif,
|
||||
lnorm = rlnorm,
|
||||
exp = rexp,
|
||||
rnorm)
|
||||
|
||||
dist(as.integer(input$n))
|
||||
})
|
||||
|
||||
# Generate a plot of the data. Also uses the inputs to build the
|
||||
# plot label. Note that the dependencies on both the inputs and
|
||||
# the data reactive function are both tracked, and all functions
|
||||
# are called in the sequence implied by the dependency graph
|
||||
output$plot <- reactivePlot(function() {
|
||||
dist <- input$dist
|
||||
n <- input$n
|
||||
|
||||
hist(data(),
|
||||
main=paste('r', dist, '(', n, ')', sep=''))
|
||||
})
|
||||
|
||||
# Generate a summary of the data
|
||||
output$summary <- reactivePrint(function() {
|
||||
summary(data())
|
||||
})
|
||||
|
||||
# Generate an HTML table view of the data
|
||||
output$table <- reactiveTable(function() {
|
||||
data.frame(x=data())
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,82 @@
|
||||
|
||||
|
||||

|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("07_widgets")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define UI for dataset viewer application
|
||||
shinyUI(pageWithSidebar(
|
||||
|
||||
# Application title.
|
||||
headerPanel("More Widgets"),
|
||||
|
||||
# Sidebar with controls to select a dataset and specify the number
|
||||
# of observations to view. The helpText function is also used to
|
||||
# include clarifying text. Most notably, the inclusion of a
|
||||
# submitButton defers the rendering of output until the user
|
||||
# explicitly clicks the button (rather than doing it immediately
|
||||
# when inputs change). This is useful if the computations required
|
||||
# to render output are inordinately time-consuming.
|
||||
sidebarPanel(
|
||||
selectInput("dataset", "Choose a dataset:",
|
||||
choices = c("rock", "pressure", "cars")),
|
||||
|
||||
numericInput("obs", "Number of observations to view:", 10),
|
||||
|
||||
helpText("Note: while the data view will show only the specified",
|
||||
"number of observations, the summary will still be based",
|
||||
"on the full dataset."),
|
||||
|
||||
submitButton("Update View")
|
||||
),
|
||||
|
||||
# Show a summary of the dataset and an HTML table with the requested
|
||||
# number of observations. Note the use of the h4 function to provide
|
||||
# an additional header above each output section.
|
||||
mainPanel(
|
||||
h4("Summary"),
|
||||
verbatimTextOutput("summary"),
|
||||
|
||||
h4("Observations"),
|
||||
tableOutput("view")
|
||||
)
|
||||
))
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
library(datasets)
|
||||
|
||||
# Define server logic required to summarize and view the selected dataset
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# Return the requested dataset
|
||||
datasetInput <- reactive(function() {
|
||||
switch(input$dataset,
|
||||
"rock" = rock,
|
||||
"pressure" = pressure,
|
||||
"cars" = cars)
|
||||
})
|
||||
|
||||
# Generate a summary of the dataset
|
||||
output$summary <- reactivePrint(function() {
|
||||
dataset <- datasetInput()
|
||||
summary(dataset)
|
||||
})
|
||||
|
||||
# Show the first "n" observations
|
||||
output$view <- reactiveTable(function() {
|
||||
obs <- as.integer(input$obs)
|
||||
head(datasetInput(), n = obs)
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
@@ -3,3 +3,99 @@
|
||||

|
||||
|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("03_reactivity")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define UI for dataset viewer application
|
||||
shinyUI(pageWithSidebar(
|
||||
|
||||
# Application title
|
||||
headerPanel("Reactivity"),
|
||||
|
||||
# Sidebar with controls to provide a caption, select a dataset, and
|
||||
# specify the number of observations to view. Note that changes made
|
||||
# to the caption in the textInput control are updated in the output
|
||||
# area immediately as you type
|
||||
sidebarPanel(
|
||||
textInput("caption", "Caption:", "Data Summary"),
|
||||
|
||||
selectInput("dataset", "Choose a dataset:",
|
||||
choices = c("rock", "pressure", "cars")),
|
||||
|
||||
numericInput("obs", "Number of observations to view:", 10)
|
||||
),
|
||||
|
||||
|
||||
# Show the caption, a summary of the dataset and an HTML table with
|
||||
# the requested number of observations
|
||||
mainPanel(
|
||||
h3(textOutput("caption")),
|
||||
|
||||
verbatimTextOutput("summary"),
|
||||
|
||||
tableOutput("view")
|
||||
)
|
||||
))
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
library(datasets)
|
||||
|
||||
# Define server logic required to summarize and view the selected dataset
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# By declaring databaseInput as a reactive function we ensure that:
|
||||
#
|
||||
# 1) It is only called when the inputs it depends on changes
|
||||
# 2) The computation and result are shared by all the callers (it
|
||||
# only executes a single time)
|
||||
# 3) When the inputs change and the function is re-executed, the
|
||||
# new result is compared to the previous result; if the two are
|
||||
# identical, then the callers are not notified
|
||||
#
|
||||
datasetInput <- reactive(function() {
|
||||
switch(input$dataset,
|
||||
"rock" = rock,
|
||||
"pressure" = pressure,
|
||||
"cars" = cars)
|
||||
})
|
||||
|
||||
# The output$caption is computed based on a reactive function that
|
||||
# returns input$caption. When the user changes the "caption" field:
|
||||
#
|
||||
# 1) This function is automatically called to recompute the output
|
||||
# 2) The new caption is pushed back to the browser for re-display
|
||||
#
|
||||
# Note that because the data-oriented reactive functions below don't
|
||||
# depend on input$caption, those functions are NOT called when
|
||||
# input$caption changes.
|
||||
output$caption <- reactiveText(function() {
|
||||
input$caption
|
||||
})
|
||||
|
||||
# The output$summary depends on the datasetInput reactive function,
|
||||
# so will be re-executed whenever datasetInput is re-executed
|
||||
# (i.e. whenever the input$dataset changes)
|
||||
output$summary <- reactivePrint(function() {
|
||||
dataset <- datasetInput()
|
||||
summary(dataset)
|
||||
})
|
||||
|
||||
# The output$view depends on both the databaseInput reactive function
|
||||
# and input$obs, so will be re-executed whenever input$dataset or
|
||||
# input$obs is changed.
|
||||
output$view <- reactiveTable(function() {
|
||||
obs <- as.integer(input$obs)
|
||||
head(datasetInput(), n = obs)
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
@@ -1,3 +1,69 @@
|
||||
|
||||

|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("02_text")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define UI for dataset viewer application
|
||||
shinyUI(pageWithSidebar(
|
||||
|
||||
# Application title
|
||||
headerPanel("Shiny Text"),
|
||||
|
||||
# Sidebar with controls to select a dataset and specify the number
|
||||
# of observations to view
|
||||
sidebarPanel(
|
||||
selectInput("dataset", "Choose a dataset:",
|
||||
choices = c("rock", "pressure", "cars")),
|
||||
|
||||
numericInput("obs", "Number of observations to view:", 10)
|
||||
),
|
||||
|
||||
# Show a summary of the dataset and an HTML table with the requested
|
||||
# number of observations
|
||||
mainPanel(
|
||||
verbatimTextOutput("summary"),
|
||||
|
||||
tableOutput("view")
|
||||
)
|
||||
))
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
library(datasets)
|
||||
|
||||
# Define server logic required to summarize and view the selected dataset
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# Return the requested dataset
|
||||
datasetInput <- reactive(function() {
|
||||
switch(input$dataset,
|
||||
"rock" = rock,
|
||||
"pressure" = pressure,
|
||||
"cars" = cars)
|
||||
})
|
||||
|
||||
# Generate a summary of the dataset
|
||||
output$summary <- reactivePrint(function() {
|
||||
dataset <- datasetInput()
|
||||
summary(dataset)
|
||||
})
|
||||
|
||||
# Show the first "n" observations
|
||||
output$view <- reactiveTable(function() {
|
||||
obs <- as.integer(input$obs)
|
||||
head(datasetInput(), n = obs)
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,25 @@
|
||||
|
||||
|
||||
### Sliders
|
||||
## (Under Construction)
|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("05_sliders")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
@@ -2,3 +2,93 @@
|
||||
|
||||

|
||||
|
||||
To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("06_tabsets")
|
||||
</code></pre>
|
||||
|
||||
#### ui.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define UI for random distribution application
|
||||
shinyUI(pageWithSidebar(
|
||||
|
||||
# Application title
|
||||
headerPanel("Tabsets"),
|
||||
|
||||
# Sidebar with controls to select the random distribution type
|
||||
# and number of observations to generate. Note the use of the br()
|
||||
# element to introduce extra vertical spacing
|
||||
sidebarPanel(
|
||||
radioButtons("dist", "Distribution type:",
|
||||
list("Normal" = "norm",
|
||||
"Uniform" = "unif",
|
||||
"Log-normal" = "lnorm",
|
||||
"Exponential" = "exp")),
|
||||
br(),
|
||||
|
||||
sliderInput("n",
|
||||
"Number of observations:",
|
||||
value = 500,
|
||||
min = 1,
|
||||
max = 1000)
|
||||
),
|
||||
|
||||
# Show a tabset that includes a plot, summary, and table view
|
||||
# of the generated distribution
|
||||
mainPanel(
|
||||
tabsetPanel(
|
||||
tabPanel("Plot", plotOutput("plot")),
|
||||
tabPanel("Summary", verbatimTextOutput("summary")),
|
||||
tabPanel("Table", tableOutput("table"))
|
||||
)
|
||||
)
|
||||
))
|
||||
</code></pre>
|
||||
|
||||
#### server.R
|
||||
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
# Define server logic for random distribution application
|
||||
shinyServer(function(input, output) {
|
||||
|
||||
# Reactive function to generate the requested distribution. This is
|
||||
# called whenever the inputs change. The output functions defined
|
||||
# below then all use the value computed from this function
|
||||
data <- reactive(function() {
|
||||
dist <- switch(input$dist,
|
||||
norm = rnorm,
|
||||
unif = runif,
|
||||
lnorm = rlnorm,
|
||||
exp = rexp,
|
||||
rnorm)
|
||||
|
||||
dist(as.integer(input$n))
|
||||
})
|
||||
|
||||
# Generate a plot of the data. Also uses the inputs to build the
|
||||
# plot label. Note that the dependencies on both the inputs and
|
||||
# the data reactive function are both tracked, and all functions
|
||||
# are called in the sequence implied by the dependency graph
|
||||
output$plot <- reactivePlot(function() {
|
||||
dist <- input$dist
|
||||
n <- input$n
|
||||
|
||||
hist(data(),
|
||||
main=paste('r', dist, '(', n, ')', sep=''))
|
||||
})
|
||||
|
||||
# Generate a summary of the data
|
||||
output$summary <- reactivePrint(function() {
|
||||
summary(data())
|
||||
})
|
||||
|
||||
# Generate an HTML table view of the data
|
||||
output$table <- reactiveTable(function() {
|
||||
data.frame(x=data())
|
||||
})
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
@@ -17,6 +17,9 @@ title: "Tutorial: Building 'shiny' Web Applications with R"
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
.console {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
|
||||
Reference in New Issue
Block a user