Permalink
Browse files

update source files for shiny lecture. Did not compile the source mar…

…kdowns!
  • Loading branch information...
1 parent bc9e8e0 commit 26a9d5ae076aca9f1c6777da799eba65472f9b0b @daattali daattali committed Nov 14, 2016
@@ -1,7 +1,6 @@
---
title: "Building Shiny apps - Homework"
author: "Dean Attali"
-date: '2015-12-03'
output:
html_document:
toc: yes
@@ -10,11 +9,11 @@ output:
## Deadline
-The homework is due Friday, December 11 2015.
+The homework is due Friday, November 25 2016.
## What we've done
-We made a Shiny app that lets you search for products from the BC Liquor Store based on price, alcohol type, and country. We used [this dataset](https://github.com/STAT545-UBC/STAT545-UBC.github.io/blob/master/shiny_supp/2015/bcl-data.csv) and [this code](./shiny01_activity.html#final-shiny-app-code) for our app.
+We created a Shiny app that lets you search for products from the BC Liquor Store based on price, alcohol type, and country. We used [this dataset](https://github.com/STAT545-UBC/STAT545-UBC.github.io/blob/master/shiny_supp/2016/bcl-data.csv) and [this code](./shiny01_activity.html#final-shiny-app-code) for our app.
## What you need to do
View
@@ -1,231 +0,0 @@
-<!DOCTYPE html>
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-
-<meta charset="utf-8">
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="pandoc" />
-
-<meta name="author" content="Dean Attali" />
-
-<meta name="date" content="2015-12-03" />
-
-<title>Building Shiny apps - Homework</title>
-
-<script src="libs/jquery-1.11.0/jquery.min.js"></script>
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<link href="libs/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet" />
-<script src="libs/bootstrap-3.3.1/js/bootstrap.min.js"></script>
-<script src="libs/bootstrap-3.3.1/shim/html5shiv.min.js"></script>
-<script src="libs/bootstrap-3.3.1/shim/respond.min.js"></script>
-<script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
- ga('create', 'UA-68219208-1', 'auto');
- ga('send', 'pageview');
-
-</script>
-
-<style type="text/css">code{white-space: pre;}</style>
-<link rel="stylesheet"
- href="libs/highlight/default.css"
- type="text/css" />
-<script src="libs/highlight/highlight.js"></script>
-<style type="text/css">
- pre:not([class]) {
- background-color: white;
- }
-</style>
-<script type="text/javascript">
-if (window.hljs && document.readyState && document.readyState === "complete") {
- window.setTimeout(function() {
- hljs.initHighlighting();
- }, 0);
-}
-</script>
-
-
-<link rel="stylesheet" href="libs/local/main.css" type="text/css" />
-<link rel="stylesheet" href="libs/local/nav.css" type="text/css" />
-<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" />
-
-</head>
-
-<body>
-
-<style type = "text/css">
-.main-container {
- max-width: 940px;
- margin-left: auto;
- margin-right: auto;
-}
-code {
- color: inherit;
- background-color: rgba(0, 0, 0, 0.04);
-}
-img {
- max-width:100%;
- height: auto;
-}
-</style>
-<div class="container-fluid main-container">
-
-<header>
- <div class="nav">
- <a class="nav-logo" href="index.html">
- <img src="static/img/stat545-logo-s.png" width="70px" height="70px"/>
- </a>
- <ul>
- <li class="home"><a href="index.html">Home</a></li>
- <li class="faq"><a href="faq.html">FAQ</a></li>
- <li class="syllabus"><a href="syllabus.html">Syllabus</a></li>
- <li class="topics"><a href="topics.html">Topics</a></li>
- <li class="people"><a href="people.html">People</a></li>
- </ul>
- </div>
-</header>
-
-<div id="header">
-<h1 class="title">Building Shiny apps - Homework</h1>
-<h4 class="author"><em>Dean Attali</em></h4>
-<h4 class="date"><em>2015-12-03</em></h4>
-</div>
-
-<div id="TOC">
-<ul>
-<li><a href="#deadline">Deadline</a></li>
-<li><a href="#what-weve-done">What we’ve done</a></li>
-<li><a href="#what-you-need-to-do">What you need to do</a></li>
-<li><a href="#resources">Resources</a></li>
-<li><a href="#rubric">Rubric</a></li>
-</ul>
-</div>
-
-<div id="deadline" class="section level2">
-<h2>Deadline</h2>
-<p>The homework is due Friday, December 11 2015.</p>
-</div>
-<div id="what-weve-done" class="section level2">
-<h2>What we’ve done</h2>
-<p>We made a Shiny app that lets you search for products from the BC Liquor Store based on price, alcohol type, and country. We used <a href="https://github.com/STAT545-UBC/STAT545-UBC.github.io/blob/master/shiny_supp/2015/bcl-data.csv">this dataset</a> and <a href="./shiny01_activity.html#final-shiny-app-code">this code</a> for our app.</p>
-</div>
-<div id="what-you-need-to-do" class="section level2">
-<h2>What you need to do</h2>
-<p>The app we developed is functional, but there are plenty of improvements that can be made. You can compare the app we developed to <a href="http://daattali.com/shiny/bcl/">my version of this app</a> to get an idea of what a more functional app could include. For the homework, you need to either develop a new Shiny app that uses a different dataset, or add 3 or more features to the BC Liquor Store app.</p>
-<p>Regardless of whether you create a new app or just add new features to our BC Liquor Store app, you <strong>must</strong> do the following 4 things:</p>
-<ol style="list-style-type: decimal">
-<li><p>Your app should be split into a <code>ui.R</code> file and a <code>server.R</code> file. Note that so far in class we only had our apps inside an <code>app.R</code> file. You can read <a href="http://shiny.rstudio.com/articles/app-formats.html">this official Shiny help page</a> if you need more help with this part.</p></li>
-<li>Your app should be deployed online on <a href="http://www.shinyapps.io">shinyapps.io</a>. Make sure your app actually works online (sometimes your app will work in RStudio but will have errors on shinyapps.io - make sure you deploy early and often to make debugging easier).
-<ul>
-<li>Alternatively, if you want to aim higher, you can contact us once your app is finished and work with us to deploy your app on the UBC Stats Shiny Server.</li>
-<li>If you want to really challenge yourself, you can try getting your own Shiny Server and host your app yourself. Read <a href="http://deanattali.com/2015/05/09/setup-rstudio-shiny-server-digital-ocean/">this tutorial</a> for help on setting that up.</li>
-</ul></li>
-<li><p>Add a <code>README.md</code> file to your Shiny app folder in your course repository. In the <code>README.md</code> you should describe your app and add a link to the URL where the app is hosted.</p></li>
-<li><p>Include the code for your Shiny app in your repository, as the marker will need to review your code.</p></li>
-</ol>
-<p>If you decide to create a new app, then you are free to do whatever you want - get creative! If you want to use the BC Liquor Store app, you need to add at least 3 new features to it. There are countless possibilities, but here are just a few ideas. You can choose any 3 or more ideas from this list or do anything else.</p>
-<ul>
-<li>Add an option to sort the results table by price.
-<ul>
-<li><strong>Hint:</strong> Use <code>checkboxInput()</code> to get TRUE/FALSE values from the user.</li>
-</ul></li>
-<li>Add an image of the BC Liquor Store to the UI.
-<ul>
-<li><strong>Hint:</strong> Place the image in a folder named <code>www</code>, and use <code>img(src = &quot;imagename.png&quot;)</code> to add the image.</li>
-</ul></li>
-<li>Use the <code>DT</code> package to turn the current results table into an interactive table.
-<ul>
-<li><strong>Hint:</strong> Install the <code>DT</code> package, replace <code>tableOutput()</code> with <code>DT::dataTableOutput()</code> and replace <code>renderTable()</code> with <code>DT::renderDataTable()</code>.</li>
-</ul></li>
-<li>Add parameters to the plot.
-<ul>
-<li><strong>Hint:</strong> You will need to add input functions that will be used as parameters for the plot. You could use <code>shinyjs::colourInput()</code> to let the user decide on the colours of the bars in the plot.</li>
-</ul></li>
-<li>The app currently behaves strangely when the user selects filters that return 0 results. For example, try searching for wines from Belgium. There will be an empty plot and empty table generated, and there will be a warning message in the R console. Try to figure out why this warning message is appearing, and how to fix it.
-<ul>
-<li><strong>Hint:</strong> The problem happens because <code>renderPlot()</code> and <code>renderTable()</code> are trying to render an empty data frame. To fix this issue, the <code>filtered</code> reactive expression should check for the number of rows in the filtered data, and if that number is 0 then return <code>NULL</code> instead of a 0-row data frame.</li>
-</ul></li>
-<li>Place the plot and the table in separate tabs.
-<ul>
-<li><strong>Hint:</strong> Use <code>tabsetPanel()</code> to create an interface with multiple tabs.</li>
-</ul></li>
-<li>If you know CSS, add CSS to make your app look nicer.
-<ul>
-<li><strong>Hint:</strong> Add a CSS file under <code>www</code> and use the function <code>includeCSS()</code> to use it in your app.</li>
-</ul></li>
-<li>Experiment with packages that add extra features to Shiny, such as <code>shinyjs</code>, <code>leaflet</code>, <code>shinydashboard</code>, <code>shinythemes</code>, <code>ggvis</code>.
-<ul>
-<li><strong>Hint:</strong> Each package is unique and has a different purpose, so you need to read the documentation of each package in order to know what it provides and how to use it.</li>
-</ul></li>
-<li>Show the number of results found whenever the filters change. For example, when searching for Italian wines $20-$40, the app would show the text “We found 122 options for you”.
-<ul>
-<li><strong>Hint:</strong> Add a <code>textOutput()</code> to the UI, and in its corresponding <code>renderText()</code> use the number of rows in the <code>filtered()</code> object.</li>
-</ul></li>
-<li>Allow the user to download the results table as a .<code>.csv</code> file.
-<ul>
-<li><strong>Hint:</strong> Look into the <code>downloadButton()</code> and <code>downloadHandler()</code> functions.</li>
-</ul></li>
-<li>When the user wants to see only wines, show a new input that allows the user to filter by sweetness level. Only show this input if wines are selected.
-<ul>
-<li><strong>Hint:</strong> Create a new input function for the sweetness level, and use it in the server code that filters the data. Use <code>conditionalPanel()</code> to conditionally show this new input. The <code>condition</code> argument of <code>conditionalPanel</code> should be something like <code>input.typeInput == &quot;WINE&quot;</code>.</li>
-</ul></li>
-<li>Allow the user to search for multiple alcohol types simultaneously, instead of being able to choose only wines/beers/etc.
-<ul>
-<li><strong>Hint:</strong> There are two approaches to do this. Either change the <code>typeInput</code> radio buttons into checkboxes (<code>checkboxGroupInput()</code>) since checkboxes support choosing multiple items, or change <code>typeInput</code> into a select box (<code>selectInput()</code>) with the argument <code>multiple = TRUE</code> to support choosing multiple options.</li>
-</ul></li>
-<li>If you look at the dataset, you’ll see that each product has a “type” (beer, wine, spirit, or refreshment) and also a “subtype” (red wine, rum, cider, etc.). Add an input for “subtype” that will let the user filter for only a specific subtype of products. Since each type has different subtype options, the choices for subtype should get re-generated every time a new type is chosen. For example, if “wine” is selected, then the subtypes available should be white wine, red wine, etc.
-<ul>
-<li><strong>Hint:</strong> Use <code>uiOutput()</code> to create this input in the server code.</li>
-</ul></li>
-<li>Provide a way for the user to show results from <em>all</em> countries (instead of forcing a filter by only one specific country).
-<ul>
-<li><strong>Hint:</strong> There are two ways to approach this. You can either add a value of “All” to the dropdown list of country options, you can include a checkbox for “Filter by country” and only show the dropdown when it is unchecked (see <a href="http://daattali.com/shiny/bcl/">my version of this app</a> to see this option in action). In both cases you’ll still need to update the server code appropriately to filter by country only when the user chooses to.</li>
-</ul></li>
-</ul>
-</div>
-<div id="resources" class="section level2">
-<h2>Resources</h2>
-<p>Don’t forget to check out some of the <a href="./shiny01_activity.html#resources">awesome resources</a> for Shiny, they can really help you out.</p>
-</div>
-<div id="rubric" class="section level2">
-<h2>Rubric</h2>
-<p>Your peer reviewer will evaluate your app based only on the Shiny app that you deploy and on the <code>README.md</code> file that described what you app does. Your peer reviewer will not download your code. Therefore, you really need to make sure your app works on shinyapps.io, otherwise your reviewer will not be able to give you a mark.</p>
-<p>The course TA that will mark your assignment will also look at your code, so make sure you include the code for the app.</p>
-<p>Check minus: The deployed app does not work or results in many errors. There is no <code>README</code> file describing what app does.</p>
-<p>Check: Shiny app runs. The <code>README</code> file describes either a new app or 3+ additions to our BC Liquor Store app. Whatever is described in the README is actually implemented in the app.</p>
-<p>Check plus: Amazing Shiny app. Lots of new features or a very cool new app idea. App looks great visually. App is deployed on a Shiny Server instead of on shinyapps.io.</p>
-<p>Recall the <a href="http://stat545-ubc.github.io/peer-review01_marking-rubric.html">general homework rubric</a>.</p>
-</div>
-
-<div class="footer">
-This work is licensed under the <a href="http://creativecommons.org/licenses/by-nc/3.0/">CC BY-NC 3.0 Creative Commons License</a>.
-</div>
-
-</div>
-
-<script>
-
-// add bootstrap table styles to pandoc tables
-$(document).ready(function () {
- $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
-});
-
-</script>
-
-<!-- dynamically load mathjax for compatibility with self-contained -->
-<script>
- (function () {
- var script = document.createElement("script");
- script.type = "text/javascript";
- script.src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
- document.getElementsByTagName("head")[0].appendChild(script);
- })();
-</script>
-
-</body>
-</html>
Oops, something went wrong.

0 comments on commit 26a9d5a

Please sign in to comment.