class: center, middle, inverse, title-slide # How to Shiny? 🤩 ### Tatjana Kecojevic --- class: inverse, center, middle #Get Started 🤫😴 <img src=https://media.giphy.com/media/mMSE6MfkXzLLa/giphy.gif align="middle" img width="90%"> --- class: inverse, center, middle #Let's Shiny with R ## 🌞😎🤩 --- ##How does it work? <img src="images/Shiny1.png" width="700px" style="display: block; margin: auto;" /> --- ##There are two elements <img src="images/Shiny2.png" width="700px" style="display: block; margin: auto;" /> --- ##App Template <img src="images/Shiny3.png" width="700px" style="display: block; margin: auto;" /> --- ##Run & Stop <img src="images/Shiny4.png" width="700px" style="display: block; margin: auto;" /> --- ##Adding elements ### as arguments to `fluidPage()` <img src="images/Shiny4.1.png" width="700px" style="display: block; margin: auto;" /> --- ##UI: Inputs & Outputs <img src="images/Shiny5.png" width="700px" style="display: block; margin: auto;" /> --- ##Adding elements *as arguments to `fluidPage()`* <img src="images/Shiny5.1.png" width="400px" style="display: block; margin: auto;" /> ###Create an input with an input function <img src="images/Shiny5.2.png" width="700px" style="display: block; margin: auto;" /> --- ###Create an input with an input function .pull-left[ **code** <img src="images/Shiny5.3.1.png" width="700px" style="display: block; margin: auto;" /> ] .pull-right[ **app** <img src="images/Shiny5.3.2.png" width="900px" style="display: block; margin: auto;" /> ] --- ##Input Objects <img src="images/Shiny6.png" width="700px" style="display: block; margin: auto;" /> --- ##Syntax <img src="images/Shiny7.png" width="1000px" style="display: block; margin: auto;" /> <https://shiny.rstudio.com/reference/shiny/latest/selectInput.html> --- ##Output Objects <img src="images/Shiny8.png" width="1000px" style="display: block; margin: auto;" /> --- ###Output: plot <img src="images/Shiny10.png" width="600px" style="display: block; margin: auto;" /> --- ###Remember 💡 <img src="images/Shiny11.png" width="700px" style="display: block; margin: auto;" /> --- ###<span style="color:red">3 Rules</span> to write the server function 😎 <img src="images/Shiny12.png" width="750px" style="display: block; margin: auto;" /> --- ###You can <span style="color:red">render*()</span> different types of output you wish to make. <img src="images/Shiny13.png" width="750px" style="display: block; margin: auto;" /> --- ###<span style="color:red">render*()</span> <img src="images/Shiny14.png" width="750px" style="display: block; margin: auto;" /> --- <img src="images/Shiny14.1.png" width="700px" style="display: block; margin: auto;" /> --- ###Code <img src="images/Shiny15.png" width="500px" style="display: block; margin: auto;" /> --- ###The App <img src="images/Shiny16.png" width="700px" style="display: block; margin: auto;" /> <https://datateka.shinyapps.io/How2Shine/> --- class: inverse, center, middle #Let's Look at the portal: #[Open Data SR](https://data.gov.rs/sr/datasets/) ## 📑📊📈📉 --- class: inverse, middle #Example: [Подаци о саобраћајним незгодама за територију Града Београда](https://data.gov.rs/sr/datasets/podatsi-o-saobratshajnim-nezgodama-za-teritoriju-grada-beograda/) ##[Подаци о саобраћајним незгодама до 28.02.2019. године за територију Града Београда](https://data.gov.rs/sr/datasets/r/7a10c1d4-3707-4c5a-93ca-b8e7baf77303) ### Note 💡: You should open and `File -> Save As...` data as a `csv` file! --- class: inverse, center, middle # Access the RProject with the App Go to Tanja's GitHub and download `OpenDataPlay` repo by clicking on the green button `Clone or Download::Download ZIP`. <https://github.com/TanjaKec/OpenDataPlay> <img src="images/GitHub1.png" width="500px" style="display: block; margin: auto;" /> --- # What is in the repo? After unzipping the downloaded file you should have the following in your directory, ie folder: <img src="images/GitHub2.png" width="600px" style="display: block; margin: auto;" /> --- # How does it look like? - How many Input and Output Objects are there? - What does it do? <img src="images/TrafficAccApp.png" width="700px" style="display: block; margin: auto;" /> --- # Let's open the app code Open the project with the App by clicking on `OpenDataPlay.Rproj` file. In the bottom left window click on `app.R` file. <img src="images/Shiny17.png" width="700px" style="display: block; margin: auto;" /> --- # app.R The code has two parts: 1) **global code** - uploading the packages; accessing and tailoring data 2) **app code** - remember the app templete!🤔💡: user interface -> server -> running the app We can see the app in action ☀️😎 at <https://tatjana.shinyapps.io/TrafficAccidents/> --- class: inverse, center, middle ##Do the Cosmo Dance?! 🤪🎵🎶 <img src="images/Cosmo_Dance.gif" width="500px" /> --- class: center, middle ##Thanks! To Yihui (ninja warrior) and RStudio for the [RMarkdown](https://bookdown.org/yihui/rmarkdown/) package::[xaringan](https://bookdown.org/yihui/rmarkdown/xaringan.html) package <img src="images/yuhui_xie.png" width="100px" style="display: block; margin: auto;" /> [www.sisteranalyst.org](https://sisteranalyst.org/) @sisteranalyst @Tatjana_Kec Slides created via `R` package [**xaringan**](https://github.com/yihui/xaringan). The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com).