class: center, middle, inverse, title-slide # {flexdashboards} ## Data visuals. On a board. ### Akhila Nekkanti ### Winter 2021 --- layout: true <script> feather.replace() </script> <div class="slides-footer"> <span> <a class = "footer-icon-link" href = "https://github.com/uo-datasci-specialization/c2-dataviz-2021/raw/main/static/slides/w7p1.pdf"> <i class = "footer-icon" data-feather="download"></i> </a> <a class = "footer-icon-link" href = "https://dataviz-2021.netlify.app/slides/w7p1.html"> <i class = "footer-icon" data-feather="link"></i> </a> <a class = "footer-icon-link" href = "https://github.com/uo-datasci-specialization/c2-dataviz-2021"> <i class = "footer-icon" data-feather="github"></i> </a> </span> </div> <style type="text/css"> div.slides-footer { position: absolute; bottom: 15px; left: 81%; height: 20px; width: 100%; } </style> --- class: center, left #Why use a dashboard? https://ramikrispin.github.io/coronavirus_dashboard/  --- #Why use a dashboard? http://jkunst.com/flexdashboard-highcharter-examples/pokemon/  --- #Why use a dashboard? https://jim-wright90.github.io/data_sci_capstone_project/  --- #Why use a dashboard? https://github.com/akhilanekkanti1/FlexDashboards  --- # The ultimate source https://rmarkdown.rstudio.com/flexdashboard/  --- #Where to start? -- Workflow! -- We want to make sure we have the *option* to make our dashboard public. -- 1. Create a new Project -- 2. Create a new Rmarkdown from template {flexdashboards} -- 3. Knit right away -- 4. Create a github Repo -- 5. Link your local and remote repos with GitKraken --- #Mise en place: Set yourself up. -- Open: - R - GitKraken - Github --- class: center, middle ##1. Create a new Project File > New Project > New Directory  --- class: center, middle ##2. Create a new Rmarkdown from template and (#3) Knit ```r #One time only install.packages("flexdashboard") ```  --- class: center, middle ##4. Create a GitHub repo and (#5) Link it with your local  --- class: center, middle # Ready to PUBLISH!  --- class: center, middle ## Now let's play around with our dashboard! --- ## Let's start with the YAML. ```r --- title: "Coolest DEMO EVER" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill * social: menu * source_code: https://github.com/akhilanekkanti1/dashboard_demo --- ```  --- ## Let's add a new page. ```r *Weird Flex *========================= Column {data-width=650} ----------------------------------------------------------------------- ### Chart A < r code chunk > Column {data-width=350} ----------------------------------------------------------------------- ### Chart B < r code chunk > *But Okay *======================== ### Chart C < r code chunk > ```  --- ##Play around! - Change the name of each square - Try adding a different plot in each square - Can you change the number of squares in each page? - Can you change the size of each square? Plot example: ```r library(tidyverse) mtcars %>% ggplot(aes(wt, mpg, col=as_factor(cyl))) + geom_point() + facet_grid(~cyl) ``` ## 5 minutes :) --- ##Want to add some text? Just add it in like you would for a typical Rmarkdown doc. ```r # Page 1 Check out this plot I made. ### Plot A <R code for your plot> ``` --- ##Columns - Create a new column with ```{} Column -------------------------------------- ``` - Change the width of each column - Notice there are NO spaces around the '=' ```{} Column {data-width=400} -------------------------------------- ``` - Add a new square within each column ```{} Column {data-width=400} -------------------------------------- ### New Square ``` --- ##Columns vs. Rows - If you want all rows: ```r --- title: "Coolest DEMO EVER" output: flexdashboard::flex_dashboard: * orientation: rows vertical_layout: fill social: menu source_code: https://github.com/akhilanekkanti1/dashboard_demo --- ``` --- ##Columns vs. Rows - If you want rows for some pages and columns for other pages: - don't specify the orientation - **do** add 'data-orientation' when you name your pages. In this example, Page 1 will have rows and Page 2 will have columns. ```r #change your yaml --- title: "Coolest DEMO EVER" output: flexdashboard::flex_dashboard: * vertical_layout: fill * horizontal_layout: fill social: menu source_code: https://github.com/akhilanekkanti1/dashboard_demo --- *Page 1 {data-orientation=rows} *=============================== *Page 2 *=============================== ``` --- ##Rows - Create a new row with ```{} Row -------------------------------------- ``` - Change the width of each row - Notice there are NO spaces around the '=' ```{} Row {data-height=400} -------------------------------------- ``` - Add a new square within each row ```{} Row {data-height=400} -------------------------------------- ### New Square ``` --- # You can also add a sidebar! Here's an example from my dashboard.  --- # You can also add a sidebar! If you want the sidebar on all pages: ```{} Sidebar Title {.sidebar} =================================== This Dashboard is Important. RMarkdown syntax works here! [Click here](https://youtu.be/dQw4w9WgXcQ). ``` If you want the sidebar on just one page: ```{} Sidebar Title {.sidebar} ------------------------------ ``` --- #What if you want to organize your columns even more? You can use tabs:  --- ## Use tabset to split your columns or rows into tabs. ```r *Column {.tabset} ------------------------------------- *### Part 1 <r code chunk> *### Part 2 <r code chunk> Column {data-width=650} ----------------------------------------------------------------------- ### OH la la, Final Plot ``` **For multiple arguments, there's no comma in between.** ```{} Column {.tabset data-width=350} ------------------------------------- ``` --- #Interactivity! You can use {reactable} or {plotly} to make your tables or plots interactive! Here's a simple example: ```r p <- mtcars %>% ggplot(aes(wt, mpg)) + geom_point() plotly::ggplotly(p) ``` <div id="htmlwidget-5877f4bc8bc561a17f66" style="width:504px;height:504px;" class="plotly html-widget"></div> <script type="application/json" data-for="htmlwidget-5877f4bc8bc561a17f66">{"x":{"data":[{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"text":["wt: 2.62<br />mpg: 21.0","wt: 2.88<br />mpg: 21.0","wt: 2.32<br />mpg: 22.8","wt: 3.21<br />mpg: 21.4","wt: 3.44<br />mpg: 18.7","wt: 3.46<br />mpg: 18.1","wt: 3.57<br />mpg: 14.3","wt: 3.19<br />mpg: 24.4","wt: 3.15<br />mpg: 22.8","wt: 3.44<br />mpg: 19.2","wt: 3.44<br />mpg: 17.8","wt: 4.07<br />mpg: 16.4","wt: 3.73<br />mpg: 17.3","wt: 3.78<br />mpg: 15.2","wt: 5.25<br />mpg: 10.4","wt: 5.42<br />mpg: 10.4","wt: 5.34<br />mpg: 14.7","wt: 2.20<br />mpg: 32.4","wt: 1.61<br />mpg: 30.4","wt: 1.83<br />mpg: 33.9","wt: 2.46<br />mpg: 21.5","wt: 3.52<br />mpg: 15.5","wt: 3.44<br />mpg: 15.2","wt: 3.84<br />mpg: 13.3","wt: 3.85<br />mpg: 19.2","wt: 1.94<br />mpg: 27.3","wt: 2.14<br />mpg: 26.0","wt: 1.51<br />mpg: 30.4","wt: 3.17<br />mpg: 15.8","wt: 2.77<br />mpg: 19.7","wt: 3.57<br />mpg: 15.0","wt: 2.78<br />mpg: 21.4"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,0,0,1)","opacity":1,"size":15.1181102362205,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,0,0,1)"}},"hoveron":"points","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":25.9626400996264,"r":9.9626400996264,"b":50.8094645080946,"l":50.8094645080946},"font":{"color":"rgba(0,0,0,1)","family":"","size":19.9252801992528},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[1.31745,5.61955],"tickmode":"array","ticktext":["2","3","4","5"],"tickvals":[2,3,4,5],"categoryorder":"array","categoryarray":["2","3","4","5"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":4.9813200498132,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":15.9402241594022},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.905694554511491,"zeroline":false,"anchor":"y","title":{"text":"wt","font":{"color":"rgba(0,0,0,1)","family":"","size":19.9252801992528}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[9.225,35.075],"tickmode":"array","ticktext":["10","15","20","25","30","35"],"tickvals":[10,15,20,25,30,35],"categoryorder":"array","categoryarray":["10","15","20","25","30","35"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":4.9813200498132,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":15.9402241594022},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.905694554511491,"zeroline":false,"anchor":"x","title":{"text":"mpg","font":{"color":"rgba(0,0,0,1)","family":"","size":19.9252801992528}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":false,"legend":{"bgcolor":null,"bordercolor":null,"borderwidth":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":15.9402241594022}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"8d095c55b988":{"x":{},"y":{},"type":"scatter"}},"cur_data":"8d095c55b988","visdat":{"8d095c55b988":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script> ```r reactable::reactable(mtcars) ``` <!-- --><div id="htmlwidget-c61d59a5129068496fc6" class="reactable html-widget" style="width:auto;height:auto;"></div> <script type="application/json" data-for="htmlwidget-c61d59a5129068496fc6">{"x":{"tag":{"name":"Reactable","attribs":{"data":{".rownames":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],"mpg":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"cyl":[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],"disp":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],"hp":[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],"drat":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],"wt":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"qsec":[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],"vs":[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],"am":[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],"gear":[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],"carb":[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]},"columns":[{"accessor":".rownames","name":"","type":"character","sortable":false,"filterable":false},{"accessor":"mpg","name":"mpg","type":"numeric"},{"accessor":"cyl","name":"cyl","type":"numeric"},{"accessor":"disp","name":"disp","type":"numeric"},{"accessor":"hp","name":"hp","type":"numeric"},{"accessor":"drat","name":"drat","type":"numeric"},{"accessor":"wt","name":"wt","type":"numeric"},{"accessor":"qsec","name":"qsec","type":"numeric"},{"accessor":"vs","name":"vs","type":"numeric"},{"accessor":"am","name":"am","type":"numeric"},{"accessor":"gear","name":"gear","type":"numeric"},{"accessor":"carb","name":"carb","type":"numeric"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"8ba9bd00ac0228f5482fccf7b7156c21"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script> --- #Interactivity! If you have more than one page, make it *shiny*! [{shiny}](https://shiny.rstudio.com/tutorial/*) allows you to make interactive web applications with R. First, change your YAML. ```r --- title: "Coolest DEMO EVER" *runtime: shiny output: flexdashboard::flex_dashboard: ``` Next, assign your interactive plot or table to an object, and **render**. ```r renderPlotly(plot1) renderReactable(table1) ``` --- #I know what you're thinking. Interactivity isn't enough. How can I make my dashboard even cooler? ### I have the answer. Icons. I recommend using [Fontawesome icons](https://fontawesome.com/icons?d=gallery).But you can also use [ionicons](https://ionicons.com/). ```r #Use the prefix "fa" for fontawesome icons or "ion" for ionicons. Weird Flex {data-icon="fa-code-branch"} ================================= ```  --- # Want a logo? So simple, my friends. Download a fontawesome icon to your project folder, and change your YAML. Check the size of your png file! ```r --- title: "Coolest DEMO EVER" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill * logo: coolpic.png * favicon: coolicon.png social: menu source_code: https://github.com/akhilanekkanti1/dashboard_demo --- ``` --- # Storyboards  --- # Storyboard all the way. 1. First, change your YAML. 2. Use level 3 headers (###) for each frame in your storyboard. ```r --- title: "Storyboard" output: flexdashboard::flex_dashboard: * storyboard: true --- *### Frame 1 *### Frame 2 *### Frame 3 ``` --- # Storyboard all the way.  --- # Storyboards on just one page. 1. Just add {.storyboard} to your page title. ```r *Cool Story {.storyboard} *========================== *### Frame 1 *### Frame 2 ```  --- #Last but not least, [themes](https://rmarkdown.rstudio.com/flexdashboard/using.html#themes)! https://rmarkdown.rstudio.com/flexdashboard/using.html#themes ```r --- title: "Coolest DEMO EVER" output: flexdashboard::flex_dashboard: orientation: columns vertical_layout: fill * theme: united social: menu source_code: https://github.com/akhilanekkanti1/dashboard_demo --- ``` --- class: center, middle # Thanks! Slides created via the R package [**xaringan**](https://github.com/yihui/xaringan). The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.org/knitr), and [R Markdown](https://rmarkdown.rstudio.com).