class: middle, center # Reproducible Shiny Apps with Shinymeta ### Carson Sievert ### Slides: https://bit.ly/sdss2020 <i class="fab fa-twitter "></i> [@cpsievert](https://twitter.com/cpsievert) <i class="fab fa-github "></i> [@cpsievert](https://github.com/cpsievert) <i class="fas fa-globe "></i> [cpsievert.me](https://cpsievert.me) <i class="fas fa-envelope "></i> <cpsievert1@gmail.com> .footnote[ Slides released under <a href='https://github.com/cpsievert/talks/blob/gh-pages/LICENSE'>Creative Commons</a> ] --- class: middle, center # ~~Reproducible Shiny Apps with Shinymeta~~ #### [Here's my rstudio::conf talk on shinymeta](https://rstudio.com/speakers/carson-sievert/); instead, I'd like to present # thematic: plot theming made easieR <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Pacifico);body{font-family:Roboto Condensed}h1,h2,h3{font-family:Roboto Condensed}.remark-slide-content{background-color:#002B36;color:#FDF6E3}.remark-slide-content a{color:#2AA198}.remark-slide-content.darkly{background-color:#222;color:#FFF}.remark-slide-content.darkly a{color:#0CE3AC}.remark-slide-content.dark-mode{background-color:#444;color:#e4e4e4}.remark-slide-content.dark-mode a{color:#e39777}.remark-slide-content.lucid{background-color:#3D4752;color:#FFFFFF}.remark-slide-content.large{font-size:1.5rem}.remark-slide-content.contrast{background-color:#FFFFFF;color:black} </style> --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming for **ggplot2**, **lattice**, and **base** R graphics Not yet on CRAN, but install it now with: ```r remotes::install_github("rstudio/thematic") library(thematic) ``` For auto-theming in **shiny**, you'll currently need: ```r remotes::install_github("rstudio/shiny") ``` For auto-theming in **rmarkdown**, you'll currently need: ```r remotes::install_github("rstudio/rmarkdown#1706") ``` #### Learn more <https://rstudio.github.io/thematic/> --- class: contrast ### R graphics can be made interactive w/ **shiny** (and/or **plotly**)! <div align="center"> <img src="isee.gif" width="95%" /> </div> #### <https://shiny.rstudio.com/gallery/isee.html> --- class: contrast ### Another example <div align="center"> <img src="ames-explorer.gif" width="95%" /> </div> #### <https://github.com/rpodcast/ames_explorer> --- class: contrast ### A big problem: R plots are unaware of CSS <img src="cranwhales.svg" width="88%" /> --- class: contrast ### ...but they can be with thematic's auto-theming! <div align="center"> <img src="cranwhales-themed.png" width="72%" /> </div> --- class: contrast ### Another problem: R plots are unaware of RStudio themes <div align="center"> <img src="rstudio.png" width="100%"> </div> --- class: contrast ### ...but they can be with thematic's auto-theming! <div align="center"> <img src="rstudio-thematic.png" width="100%"> </div> --- class: middle, center ## RStudio Cloud Demo Visit the demo at <https://bit.ly/thematic-cloud> <div> <a href="https://rstudio.cloud/project/1208127" target="_blank"> <img src="thematic-cloud.svg" alt="RStudio Cloud Example" height="80px" style="display: block; margin: 0 auto;"> </a> </div> --- class: large, contrast, middle ## When should I use auto-theming? * Best used in a **shiny** runtime. * Works regardless of _how_ you style the page. * Some other scenarios where it can work: * In RStudio's plot viewer pane * In `rmarkdown::html_document()` * Use **bslib**, not inline CSS, to style the page * Auto value "defaults" are provided via `auto_config_set()` * Useful for custom non-HTML output formats * When auto-theming "fails", it defaults to the usual white background + black foreground. * Auto-theming is optional, avoid it entirely by providing colors (and/or fonts) directly in `thematic_on()`. --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots The main color settings are `bg`, `fg`, `accent` (they default to `"auto"`). .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span><br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) + <br> geom_point() + <br> geom_smooth()</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-3-1.svg" width="100%" style="display: block; margin: auto;" /> ] (BTW, the values here intentionally match the CSS of my slides) --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Also specify any `font` known to R or any [Google Font](https://fonts.google.com/)<sup>1</sup> (e.g., <span style="font-family:Pacifico">Pacifico</span>) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "<span style='background-color:#ffff7f'>Pacifico</span>"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) + <br> geom_point() + <br> geom_smooth()</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-5-1.svg" width="100%" style="display: block; margin: auto;" /> ] .footnote[ 1. Requires **showtext** or **ragg** to be installed, and potential other "setup" (for details, see <https://rstudio.github.io/thematic>) ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Use `font_spec()` to control other font settings (e.g., `scale`) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font=font_spec("Pacifico", <span style='background-color:#ffff7f'>scale=2</span>)<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) + <br> geom_point() + <br> geom_smooth()</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-7-1.svg" width="100%" style="display: block; margin: auto;" /> ] .footnote[ 1. Requires **showtext** or **ragg** to be installed, and potential other "setup" (for details, see <https://rstudio.github.io/thematic>) ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots **thematic** informs `theme()` _defaults_ (i.e., plot specific code takes priority) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Pacifico"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) + <br> geom_point() + <br> geom_smooth() + <br> theme(axis.title = element_text(color = <span style='background-color:#6C71C4;color:white'>"#6C71C4"</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-9-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots **thematic** informs `theme()` _and geom_ defaults .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#D33682;color:white'>"#D33682"</span>,<br> font = "Pacifico"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) + <br> geom_point(color = <span style='background-color:#586E75;color:white'>"#586E75"</span>) + <br> geom_smooth() + <br> theme(axis.title = element_text(color = <span style='background-color:#6C71C4;color:white'>"#6C71C4"</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-11-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Uses `bg`, `fg`, `accent` to construct a new default for sequential colorscales. .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(<span style='background-color:#ffff7f'>color = cyl</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-13-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Customize with `sequential_gradient()` (here is `fg` -> `accent`) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed",<br> <span style='background-color:#ffff7f'>sequential=sequential_gradient(1,0)</span><br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(<span style='background-color:#ffff7f'>color = cyl</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-15-1.svg" width="100%" style="display: block; margin: auto;" /> ] .footnote[ For more examples, see the [customization article](http://rstudio.github.io/thematic/articles/customize.html). ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Opt-out with `NA`. .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed",<br> <span style='background-color:#ffff7f'>sequential = NA</span><br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(color = cyl))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-17-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Also sets qualitative colorscale defaults to [Okabe-Ito](https://jfly.uni-koeln.de/color/) (colour-blind safe) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(<span style='background-color:#ffff7f'>color=factor(cyl)</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-19-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Customize with any vector of color codes .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed",<br> qualitative = c(<br> <span style='background-color:#1B9E77;color:white'>"#1B9E77"</span>, <span style='background-color:#D95F02;color:white'>"#D95F02"</span>, <span style='background-color:#7570B3;color:white'>"#7570B3"</span><br> )<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(<span style='background-color:#ffff7f'>color=factor(cyl)</span>))</code> For **ggplot2**, `qualitative` is only relevant if there are enough colors to encode the levels. ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-21-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Opt-out with `NA` .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed",<br> <span style='background-color:#ffff7f'>qualitative = NA</span><br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> geom_point(aes(<span style='background-color:#ffff7f'>color=factor(cyl)</span>))</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-23-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots [**thematic**](https://github.com/rstudio/thematic) works with **ggplot2** (and extensions) .pull-left[ <code class ='r hljs remark-code'>thematic_on(<br> bg = <span style='background-color:#002B36;color:white'>"#002B36"</span>, <br> fg = "#FDF6E3", <br> accent = <span style='background-color:#2AA198;color:white'>"#2AA198"</span>,<br> font = "Roboto Condensed"<br>)<br>library(ggplot2)<br>ggplot(mtcars, aes(wt, mpg)) +<br> <span style='background-color:#ffff7f'>ggrepel::geom_text_repel</span>(<br> aes(color = factor(cyl), label = row.names(mtcars))<br> )</code> ] .pull-right[ <img src="index_files/figure-html/unnamed-chunk-25-1.svg" width="100%" style="display: block; margin: auto;" /> ] --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Also **lattice** graphics: <code class ='r hljs remark-code'><span style='background-color:#ffff7f'>lattice</span>::show.settings()</code> <img src="index_files/figure-html/unnamed-chunk-27-1.svg" width="80%" style="display: block; margin: auto;" /> --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots Also **base** graphics: ```r par(mfrow = c(1, 2)) hist(rnorm(100)) plot(rep(1:5, each = 5), rep(1:5, 5), col = 1:25, pch = 1:25) ``` <img src="index_files/figure-html/unnamed-chunk-28-1.svg" width="80%" style="display: block; margin: auto;" /> --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots ...but, for accents, you'll have to inform `col` <code class ='r hljs remark-code'>plot(cars, main = "Stopping Distance versus Speed")<br>lines(stats::lowess(cars), <span style='background-color:#ffff7f'>col = thematic_get_option("accent")</span>)</code> <img src="index_files/figure-html/unnamed-chunk-30-1.svg" width="80%" style="display: block; margin: auto;" /> --- ## [**thematic**](https://github.com/rstudio/thematic): simplified theming of R plots ...and same for sequential colorscales <code class ='r hljs remark-code'>par(mfrow = c(1, 2))<br>image(volcano)<br>image(volcano, <span style='background-color:#ffff7f'>col = thematic_get_option("sequential")</span>)</code> <img src="index_files/figure-html/unnamed-chunk-32-1.svg" width="80%" style="display: block; margin: auto;" /> --- class: contrast ## Future work for thematic * Get **thematic** to play nicely with "complete" **ggplot2** themes (e.g., `theme_minimal()`, `ggthemes::theme_tufte()`, `ggthemes::theme_fivethirtyeight()`, etc). * Get `plotly::ggplotly()` (and maybe `plotly::plot_ly()`) playing nicely with **thematic**. * Documentation improvements * Submit to CRAN --- class: large ### Summary * `thematic_on()` (and `thematic_off()`) to use **thematic** in a global fashion * `thematic_shiny()`/`thematic_rmd()` to use globally for a particular **shiny** app or **rmarkdown** document * Check out `thematic_with_theme()` to use **thematic** in a local fashion * By default, `"auto"` colors are enabled...this generally works when: * A **shiny** runtime is generating the plots * Inside `rmarkdown::html_document()` (custom styling should to be done via **bslib**, not inline CSS) * Inside RStudio * Use `thematic_on(font = "auto")` to enable auto fonts...this generally works if it resolves to a Google Font (or font known to R) * If auto-theming "fails", provide non-auto values directly to `thematic_on()` and/or `auto_config_set()` --- class: center, middle ## Thank you! Any questions? ### Slides: <https://bit.ly/sdss2020> ### Learn more: <https://rstudio.github.io/thematic> #### Contact <i class="fab fa-twitter "></i> <a href='https://twitter.com/cpsievert'>@cpsievert</a> <br /> <i class="fab fa-github "></i> <a href='https://github.com/cpsievert'>@cpsievert</a> <br /> <i class="fas fa-envelope "></i> <cpsievert1@gmail.com> <br /> <i class="fas fa-globe "></i> <https://cpsievert.me/> .footnote[ Slides made possible thanks to [**xaringan**](https://github.com/yihui/xaringan) and [**flair**](https://github.com/kbodwin/flair) ]