add source code to tutorial topics

This commit is contained in:
JJ Allaire
2012-07-26 09:45:29 -07:00
parent a676f906df
commit aaa299d418
8 changed files with 508 additions and 2 deletions

View File

@@ -1,2 +1,60 @@
![Hello Shiny Screenshot](screenshots/hello-shiny.png)
![Hello Shiny Screenshot](screenshots/hello-shiny.png)
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">&gt; library(shiny)
&gt; runExample(&quot;01_hello&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
# Define UI for application that plots random distributions
shinyUI(pageWithSidebar(
# Application title
headerPanel(&quot;Hello Shiny!&quot;),
# Sidebar with a slider input for number of observations
sidebarPanel(
sliderInput(&quot;obs&quot;,
&quot;Number of observations:&quot;,
min = 0,
max = 1000,
value = 500)
),
# Show a plot of the generated distribution
mainPanel(
plotOutput(&quot;distPlot&quot;)
)
))
</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 &quot;reactive&quot; and therefore should be automatically
# re-executed when inputs change
# 2) Its output type is a plot
#
output$distPlot &lt;- reactivePlot(function() {
# convert string input to an integer
obs &lt;- as.integer(input$obs)
# generate an rnorm distribution and plot it
dist &lt;- rnorm(obs)
hist(dist)
})
})
</code></pre>

View File

@@ -1,3 +1,96 @@
![HTML UI Screenshot](screenshots/html-ui.png)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;08_html&quot;)
</code></pre>
#### www/index.html
<pre style='color:#000000;background:#ffffff;'><code><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>html</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>head</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>script</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>script</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>head</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>body</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>h1</span><span style='color:#7f0055; '>></span>HTML UI<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>h1</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span>Distribution type:<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>br</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>option</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>select</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span>Number of observations:<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>label</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; font-weight:bold; '>br</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>p</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>pre</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>div</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</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; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>div</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; font-weight:bold; '>body</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;/</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 &lt;- reactive(function() {
dist &lt;- 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 &lt;- reactivePlot(function() {
dist &lt;- input$dist
n &lt;- input$n
hist(data(),
main=paste(&#39;r&#39;, dist, &#39;(&#39;, n, &#39;)&#39;, sep=&#39;&#39;))
})
# Generate a summary of the data
output$summary &lt;- reactivePrint(function() {
summary(data())
})
# Generate an HTML table view of the data
output$table &lt;- reactiveTable(function() {
data.frame(x=data())
})
})
</code></pre>

View File

@@ -1,3 +1,82 @@
![More Widgets Screenshot](screenshots/more-widgets.png)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;07_widgets&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
# Define UI for dataset viewer application
shinyUI(pageWithSidebar(
# Application title.
headerPanel(&quot;More Widgets&quot;),
# 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(&quot;dataset&quot;, &quot;Choose a dataset:&quot;,
choices = c(&quot;rock&quot;, &quot;pressure&quot;, &quot;cars&quot;)),
numericInput(&quot;obs&quot;, &quot;Number of observations to view:&quot;, 10),
helpText(&quot;Note: while the data view will show only the specified&quot;,
&quot;number of observations, the summary will still be based&quot;,
&quot;on the full dataset.&quot;),
submitButton(&quot;Update View&quot;)
),
# 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(&quot;Summary&quot;),
verbatimTextOutput(&quot;summary&quot;),
h4(&quot;Observations&quot;),
tableOutput(&quot;view&quot;)
)
))
</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 &lt;- reactive(function() {
switch(input$dataset,
&quot;rock&quot; = rock,
&quot;pressure&quot; = pressure,
&quot;cars&quot; = cars)
})
# Generate a summary of the dataset
output$summary &lt;- reactivePrint(function() {
dataset &lt;- datasetInput()
summary(dataset)
})
# Show the first &quot;n&quot; observations
output$view &lt;- reactiveTable(function() {
obs &lt;- as.integer(input$obs)
head(datasetInput(), n = obs)
})
})
</code></pre>

View File

@@ -3,3 +3,99 @@
![Reactivity Screenshot](screenshots/reactivity.png)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;03_reactivity&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
# Define UI for dataset viewer application
shinyUI(pageWithSidebar(
# Application title
headerPanel(&quot;Reactivity&quot;),
# 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(&quot;caption&quot;, &quot;Caption:&quot;, &quot;Data Summary&quot;),
selectInput(&quot;dataset&quot;, &quot;Choose a dataset:&quot;,
choices = c(&quot;rock&quot;, &quot;pressure&quot;, &quot;cars&quot;)),
numericInput(&quot;obs&quot;, &quot;Number of observations to view:&quot;, 10)
),
# Show the caption, a summary of the dataset and an HTML table with
# the requested number of observations
mainPanel(
h3(textOutput(&quot;caption&quot;)),
verbatimTextOutput(&quot;summary&quot;),
tableOutput(&quot;view&quot;)
)
))
</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 &lt;- reactive(function() {
switch(input$dataset,
&quot;rock&quot; = rock,
&quot;pressure&quot; = pressure,
&quot;cars&quot; = cars)
})
# The output$caption is computed based on a reactive function that
# returns input$caption. When the user changes the &quot;caption&quot; 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&#39;t
# depend on input$caption, those functions are NOT called when
# input$caption changes.
output$caption &lt;- 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 &lt;- reactivePrint(function() {
dataset &lt;- 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 &lt;- reactiveTable(function() {
obs &lt;- as.integer(input$obs)
head(datasetInput(), n = obs)
})
})
</code></pre>

View File

@@ -1,3 +1,69 @@
![Tabsets Screenshot](screenshots/shiny-text.png)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;02_text&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
# Define UI for dataset viewer application
shinyUI(pageWithSidebar(
# Application title
headerPanel(&quot;Shiny Text&quot;),
# Sidebar with controls to select a dataset and specify the number
# of observations to view
sidebarPanel(
selectInput(&quot;dataset&quot;, &quot;Choose a dataset:&quot;,
choices = c(&quot;rock&quot;, &quot;pressure&quot;, &quot;cars&quot;)),
numericInput(&quot;obs&quot;, &quot;Number of observations to view:&quot;, 10)
),
# Show a summary of the dataset and an HTML table with the requested
# number of observations
mainPanel(
verbatimTextOutput(&quot;summary&quot;),
tableOutput(&quot;view&quot;)
)
))
</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 &lt;- reactive(function() {
switch(input$dataset,
&quot;rock&quot; = rock,
&quot;pressure&quot; = pressure,
&quot;cars&quot; = cars)
})
# Generate a summary of the dataset
output$summary &lt;- reactivePrint(function() {
dataset &lt;- datasetInput()
summary(dataset)
})
# Show the first &quot;n&quot; observations
output$view &lt;- reactiveTable(function() {
obs &lt;- as.integer(input$obs)
head(datasetInput(), n = obs)
})
})
</code></pre>

View File

@@ -1,4 +1,25 @@
### Sliders
## (Under Construction)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;05_sliders&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
</code></pre>
#### server.R
<pre><code class="r">library(shiny)
</code></pre>

View File

@@ -2,3 +2,93 @@
![Tabsets Screenshot](screenshots/tabsets.png)
To run the example type:
<pre><code class="console">&gt; library(shiny)
&gt; runExample(&quot;06_tabsets&quot;)
</code></pre>
#### ui.R
<pre><code class="r">library(shiny)
# Define UI for random distribution application
shinyUI(pageWithSidebar(
# Application title
headerPanel(&quot;Tabsets&quot;),
# 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(&quot;dist&quot;, &quot;Distribution type:&quot;,
list(&quot;Normal&quot; = &quot;norm&quot;,
&quot;Uniform&quot; = &quot;unif&quot;,
&quot;Log-normal&quot; = &quot;lnorm&quot;,
&quot;Exponential&quot; = &quot;exp&quot;)),
br(),
sliderInput(&quot;n&quot;,
&quot;Number of observations:&quot;,
value = 500,
min = 1,
max = 1000)
),
# Show a tabset that includes a plot, summary, and table view
# of the generated distribution
mainPanel(
tabsetPanel(
tabPanel(&quot;Plot&quot;, plotOutput(&quot;plot&quot;)),
tabPanel(&quot;Summary&quot;, verbatimTextOutput(&quot;summary&quot;)),
tabPanel(&quot;Table&quot;, tableOutput(&quot;table&quot;))
)
)
))
</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 &lt;- reactive(function() {
dist &lt;- 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 &lt;- reactivePlot(function() {
dist &lt;- input$dist
n &lt;- input$n
hist(data(),
main=paste(&#39;r&#39;, dist, &#39;(&#39;, n, &#39;)&#39;, sep=&#39;&#39;))
})
# Generate a summary of the data
output$summary &lt;- reactivePrint(function() {
summary(data())
})
# Generate an HTML table view of the data
output$table &lt;- reactiveTable(function() {
data.frame(x=data())
})
})
</code></pre>

View File

@@ -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">