-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
575b109
commit 57b79b7
Showing
2 changed files
with
231 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,202 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="" xml:lang=""> | ||
| <head> | ||
| <title>Interactive web apps ⭐</title> | ||
| <meta charset="utf-8" /> | ||
| <meta name="author" content="S. Mason Garrison" /> | ||
| <script src="libs/header-attrs/header-attrs.js"></script> | ||
| <link href="libs/font-awesome/css/all.css" rel="stylesheet" /> | ||
| <link href="libs/font-awesome/css/v4-shims.css" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="../slides.css" type="text/css" /> | ||
| </head> | ||
| <body> | ||
| <textarea id="source"> | ||
| class: center, middle, inverse, title-slide | ||
|
|
||
| # Interactive web apps <br> ⭐ | ||
| ### S. Mason Garrison | ||
|
|
||
| --- | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| layout: true | ||
|
|
||
| <div class="my-footer"> | ||
| <span> | ||
| <a href="https://DataScience4Psych.github.io/DataScience4Psych/" target="_blank">Data Science for Psychologists</a> | ||
| </span> | ||
| </div> | ||
|
|
||
| --- | ||
|
|
||
|
|
||
|
|
||
| ## Shiny | ||
|
|
||
| .pull-left[ | ||
| - Shiny is an R package that makes it easy to build interactive web apps straight from R | ||
| - You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards | ||
| - You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions | ||
| - Learn more at [shiny.rstudio.com](https://shiny.rstudio.com/) | ||
| ] | ||
| .pull-right[ | ||
| <img src="img/shiny.png" width="60%" style="display: block; margin: auto auto auto 0;" /> | ||
| ] | ||
|
|
||
| --- | ||
|
|
||
| ## High level view | ||
|
|
||
| - Every Shiny app has a webpage that the user visits, and behind this webpage there is a computer that serves this webpage by running R | ||
| - When running your app locally, the computer serving your app is your computer | ||
| - When your app is deployed, the computer serving your app is a web server | ||
|
|
||
| --- | ||
|
|
||
| ## Anatomy of a Shiny app | ||
|
|
||
| - User interface | ||
| - controls the layout and appearance of app | ||
| - Server function | ||
| - contains instructions needed to build app | ||
|
|
||
|
|
||
| ```r | ||
| library(shiny) | ||
| # User interface | ||
| ui <- fluidPage() | ||
|
|
||
| # Server function | ||
| server <- function(input, output) {} | ||
| shinyApp(ui = ui, server = server) | ||
| ``` | ||
|
|
||
|
|
||
| </textarea> | ||
| <style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style> | ||
| <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script> | ||
| <script>var slideshow = remark.create({ | ||
| "ratio": "16:9", | ||
| "highlightLines": true, | ||
| "highlightStyle": "solarized-light", | ||
| "countIncrementalSlides": false, | ||
| "slideNumberFormat": "" | ||
| }); | ||
| if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) { | ||
| window.dispatchEvent(new Event('resize')); | ||
| }); | ||
| (function(d) { | ||
| var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler"); | ||
| if (!r) return; | ||
| s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }"; | ||
| d.head.appendChild(s); | ||
| })(document); | ||
|
|
||
| (function(d) { | ||
| var el = d.getElementsByClassName("remark-slides-area"); | ||
| if (!el) return; | ||
| var slide, slides = slideshow.getSlides(), els = el[0].children; | ||
| for (var i = 1; i < slides.length; i++) { | ||
| slide = slides[i]; | ||
| if (slide.properties.continued === "true" || slide.properties.count === "false") { | ||
| els[i - 1].className += ' has-continuation'; | ||
| } | ||
| } | ||
| var s = d.createElement("style"); | ||
| s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }"; | ||
| d.head.appendChild(s); | ||
| })(document); | ||
| // delete the temporary CSS (for displaying all slides initially) when the user | ||
| // starts to view slides | ||
| (function() { | ||
| var deleted = false; | ||
| slideshow.on('beforeShowSlide', function(slide) { | ||
| if (deleted) return; | ||
| var sheets = document.styleSheets, node; | ||
| for (var i = 0; i < sheets.length; i++) { | ||
| node = sheets[i].ownerNode; | ||
| if (node.dataset["target"] !== "print-only") continue; | ||
| node.parentNode.removeChild(node); | ||
| } | ||
| deleted = true; | ||
| }); | ||
| })(); | ||
| (function() { | ||
| "use strict" | ||
| // Replace <script> tags in slides area to make them executable | ||
| var scripts = document.querySelectorAll( | ||
| '.remark-slides-area .remark-slide-container script' | ||
| ); | ||
| if (!scripts.length) return; | ||
| for (var i = 0; i < scripts.length; i++) { | ||
| var s = document.createElement('script'); | ||
| var code = document.createTextNode(scripts[i].textContent); | ||
| s.appendChild(code); | ||
| var scriptAttrs = scripts[i].attributes; | ||
| for (var j = 0; j < scriptAttrs.length; j++) { | ||
| s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value); | ||
| } | ||
| scripts[i].parentElement.replaceChild(s, scripts[i]); | ||
| } | ||
| })(); | ||
| (function() { | ||
| var links = document.getElementsByTagName('a'); | ||
| for (var i = 0; i < links.length; i++) { | ||
| if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) { | ||
| links[i].target = '_blank'; | ||
| } | ||
| } | ||
| })(); | ||
| // adds .remark-code-has-line-highlighted class to <pre> parent elements | ||
| // of code chunks containing highlighted lines with class .remark-code-line-highlighted | ||
| (function(d) { | ||
| const hlines = d.querySelectorAll('.remark-code-line-highlighted'); | ||
| const preParents = []; | ||
| const findPreParent = function(line, p = 0) { | ||
| if (p > 1) return null; // traverse up no further than grandparent | ||
| const el = line.parentElement; | ||
| return el.tagName === "PRE" ? el : findPreParent(el, ++p); | ||
| }; | ||
|
|
||
| for (let line of hlines) { | ||
| let pre = findPreParent(line); | ||
| if (pre && !preParents.includes(pre)) preParents.push(pre); | ||
| } | ||
| preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted")); | ||
| })(document);</script> | ||
|
|
||
| <script> | ||
| slideshow._releaseMath = function(el) { | ||
| var i, text, code, codes = el.getElementsByTagName('code'); | ||
| for (i = 0; i < codes.length;) { | ||
| code = codes[i]; | ||
| if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) { | ||
| text = code.textContent; | ||
| if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) || | ||
| /^\$\$(.|\s)+\$\$$/.test(text) || | ||
| /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) { | ||
| code.outerHTML = code.innerHTML; // remove <code></code> | ||
| continue; | ||
| } | ||
| } | ||
| i++; | ||
| } | ||
| }; | ||
| slideshow._releaseMath(document); | ||
| </script> | ||
| <!-- dynamically load mathjax for compatibility with self-contained --> | ||
| <script> | ||
| (function () { | ||
| var script = document.createElement('script'); | ||
| script.type = 'text/javascript'; | ||
| script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML'; | ||
| if (location.protocol !== 'file:' && /^https?:/.test(script.src)) | ||
| script.src = script.src.replace(/^https?:/, ''); | ||
| document.getElementsByTagName('head')[0].appendChild(script); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |