garrick
/
xaringanthemer
镜像来自 https://github.com/gadenbuie/xaringanthemer.git
關註 1
收藏 0
複製 0
程式碼 問題管理 0 版本發佈 10 Wiki Activity
😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
523 Commit
5 分支
目錄樹: cdc18d5a87
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from 'cdc18d5a87'
${ noResults }
xaringanthemer/dev/articles/ggplot2-themes.html

467 line
40KB
原始文件 Blame 文件歷史 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <meta charset="utf-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8. <title>ggplot2 Themes • xaringanthemer</title>

  9. <!-- favicons --><link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">

  10. <link rel="icon" type="”image/svg+xml”" href="../favicon.svg">

  11. <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">

  12. <link rel="icon" sizes="any" href="../favicon.ico">

  13. <link rel="manifest" href="../site.webmanifest">

  14. <script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  15. <link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">

  16. <script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.10/font.css" rel="stylesheet">

  17. <link href="../deps/Outfit-0.4.10/font.css" rel="stylesheet">

  18. <link href="../deps/font-awesome-6.5.2/css/all.min.css" rel="stylesheet">

  19. <link href="../deps/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet">

  20. <script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">

  21. <meta property="og:title" content="ggplot2 Themes">

  22. <meta name="robots" content="noindex">

  23. </head>

  24. <body>

  25.     <a href="#main" class="visually-hidden-focusable">Skip to contents</a>

  26. 

  27. 

  28.     <nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">

  29. 

  30.     <a class="navbar-brand me-2" href="../index.html">xaringanthemer</a>

  31. 

  32.     <small class="nav-text text-danger me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="In-development version">0.4.4.9000</small>

  33. 

  34. 

  35.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

  36.       <span class="navbar-toggler-icon"></span>

  37.     </button>

  38. 

  39.     <div id="navbar" class="collapse navbar-collapse ms-3">

  40.       <ul class="navbar-nav me-auto">

  41. <li class="nav-item"><a class="nav-link" href="../articles/xaringanthemer.html">Features</a></li>

  42. <li class="nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>

  43. <li class="active nav-item dropdown">

  44.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>

  45.   <ul class="dropdown-menu" aria-labelledby="dropdown-themes">

  46. <li><h6 class="dropdown-header" data-toc-skip>Themes</h6></li>

  47.     <li><a class="dropdown-item" href="../articles/themes.html">Slide Themes</a></li>

  48.     <li><a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a></li>

  49.     <li><hr class="dropdown-divider"></li>

  50.     <li><h6 class="dropdown-header" data-toc-skip>More Customization</h6></li>

  51.     <li><a class="dropdown-item" href="../articles/fonts.html">Fonts</a></li>

  52.     <li><a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a></li>

  53.   </ul>

  54. </li>

  55.       </ul>

  56. <ul class="navbar-nav">

  57. <li class="nav-item dropdown">

  58.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="fa far fa-newspaper fa-lg"></span> </button>

  59.   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-">

  60. <li><a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a></li>

  61.     <li><hr class="dropdown-divider"></li>

  62.     <li><a class="dropdown-item" href="../news/index.html">Changelog</a></li>

  63.   </ul>

  64. </li>

  65. <li class="nav-item"><a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer"><span class="fa fab fa-github fa-lg"></span></a></li>

  66. <li class="nav-item"><a class="external-link nav-link" href="https://twitter.com/grrrck"><span class="fa fab fa-twitter fa-lg"></span></a></li>

  67. <li class="nav-item"><a class="external-link nav-link" href="https://www.garrickadenbuie.com"><span class="fa fas fa-home fa-lg"></span></a></li>

  68.       </ul>

  69. </div>

  70. 

  71. 

  72.   </div>

  73. </nav><div class="container template-article">

  74. 

  75. 

  76. 

  77. 

  78. <div class="row">

  79.   <main id="main" class="col-md-9"><div class="page-header">

  80.       <img src="../logo.png" class="logo" alt=""><h1>ggplot2 Themes</h1>

  81.             

  82.       

  83.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/main/vignettes/ggplot2-themes.Rmd" class="external-link"><code>vignettes/ggplot2-themes.Rmd</code></a></small>

  84.       <div class="d-none name"><code>ggplot2-themes.Rmd</code></div>

  85.     </div>

  86. 

  87.     

  88.     

  89. <style type="text/css">

  90. img { max-width: 100%; border: none; }

  91. </style>

  92. <p><strong>xaringanthemer</strong> provides two <a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a> themes for your <a href="https://github.com/yihui/xaringan" class="external-link">xaringan</a> slides to help

  93. your data visualizations blend seamlessly into your slides. Use

  94. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to create plots that match your primary

  95. slide style or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to match the style

  96. of your inverse slides.</p>

  97. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/theme-xaringan-inverse.png" alt="Examples slides with ggplot2 plots that match the xaringanthemer theme" data-external="1"></p>

  98. <div class="section level3">

  99. <h3 id="key-features">Key Features<a class="anchor" aria-label="anchor" href="#key-features"></a>

  100. </h3>

  101. <ul>

  102. <li><p>The ggplot2 themes <a href="#setup-your-theme">uses the colors

  103. and themes</a> from the <strong>xaringanthemer</strong> style functions,

  104. if you set your theme inside your slides. Otherwise, it <a href="#using-xaringan-themer-css">draws from the

  105. <code>xaringan-themer.css</code> file</a>.</p></li>

  106. <li><p>The themes <a href="#colors">pick appropriate colors</a> for

  107. titles, grid lines, and axis text, and also sets the default colors of

  108. geoms like <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">ggplot2::geom_point()</a></code> and

  109. <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">ggplot2::geom_text()</a></code>. There are also monotone <a href="#scale-xaringan">color and fill scales</a> based around the

  110. primary accent color used in your xaringan theme.</p></li>

  111. <li><p>If you use Google Fonts in your slides, the ggplot2 themes use

  112. the showtext package to <a href="#fonts">automatically match the title

  113. and axis text fonts</a> of your plots to the heading and text fonts in

  114. your xaringan theme.</p></li>

  115. <li><p>I’ve done my best to set up everything so that <em>it just

  116. works</em>, but sometimes the showtext package adds a bit of

  117. complication to the routine data visualization workflow. At the end of

  118. this vignette I include <a href="#tips">a few tips</a> for working with

  119. showtext.</p></li>

  120. </ul>

  121. </div>

  122. <div class="section level2">

  123. <h2 id="setup-your-theme">Setup Your Theme<a class="anchor" aria-label="anchor" href="#setup-your-theme"></a>

  124. </h2>

  125. <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is designed to automatically use the

  126. fonts and colors you used for your slides’ style theme. Here I’m going

  127. to use a moderately customized color theme based on

  128. <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code>, that results in the xaringan theme

  129. previewed in the slides above.</p>

  130. <p>I’ve also picked out a few fonts from <a href="https://fonts.google.com" class="external-link">Google Fonts</a> that I would probably

  131. never use in a real presentation, but they’re flashy enough to make it

  132. easy to see that we’re not using the standard default fonts.</p>

  133. <div class="sourceCode" id="cb1"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="in">```{r xaringan-themer, include=FALSE, warning=FALSE}</span></span>

  134. <span id="cb1-2"><a href="#cb1-2" tabindex="-1"></a><span class="in">library(xaringanthemer)</span></span>

  135. <span id="cb1-3"><a href="#cb1-3" tabindex="-1"></a><span class="in">style_mono_accent(</span></span>

  136. <span id="cb1-4"><a href="#cb1-4" tabindex="-1"></a><span class="in">  base_color = "#DC322F",               # bright red</span></span>

  137. <span id="cb1-5"><a href="#cb1-5" tabindex="-1"></a><span class="in">  inverse_background_color = "#002B36", # dark dark blue</span></span>

  138. <span id="cb1-6"><a href="#cb1-6" tabindex="-1"></a><span class="in">  inverse_header_color = "#31b09e",     # light aqua green</span></span>

  139. <span id="cb1-7"><a href="#cb1-7" tabindex="-1"></a><span class="in">  inverse_text_color = "#FFFFFF",       # white</span></span>

  140. <span id="cb1-8"><a href="#cb1-8" tabindex="-1"></a><span class="in">  title_slide_background_color = "var(--base)",</span></span>

  141. <span id="cb1-9"><a href="#cb1-9" tabindex="-1"></a><span class="in">  text_font_google = google_font("Kelly Slab"),</span></span>

  142. <span id="cb1-10"><a href="#cb1-10" tabindex="-1"></a><span class="in">  header_font_google = google_font("Oleo Script")</span></span>

  143. <span id="cb1-11"><a href="#cb1-11" tabindex="-1"></a><span class="in">)</span></span>

  144. <span id="cb1-12"><a href="#cb1-12" tabindex="-1"></a><span class="in">```</span></span></code></pre></div>

  145. <p>If you use a hidden chunk like this one inside your slides’ R

  146. Markdown source file, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will know which

  147. colors and fonts you’ve picked.</p>

  148. <p>Adding <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to a ggplot, like this

  149. demonstration plot using the <code>mpg</code> dataset from ggplot2,

  150. changes the colors and fonts of your plot theme.</p>

  151. <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">

  152. <code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a></span><span class="op">)</span></span>

  153. <span></span>

  154. <span><span class="va">g_base</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">mpg</span><span class="op">)</span> <span class="op">+</span></span>

  155. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span><span class="va">hwy</span>, <span class="va">cty</span><span class="op">)</span> <span class="op">+</span></span>

  156. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">geom_point</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  157. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span></span>

  158. <span></span>

  159. <span><span class="co"># Basic plot with default theme</span></span>

  160. <span><span class="va">g_base</span></span></code></pre></div>

  161. <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">

  162. <code class="sourceCode R"><span><span class="co"># Fancy slide-matching themed plot</span></span>

  163. <span><span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  164. <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-1-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"></p>

  165. <p>With <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> the fonts and colors match the

  166. slide theme. The default colors of points (like other geometries) has

  167. been changed as well to match the slide colors.</p>

  168. <p>To restore the previous default colors of ggplot2 geoms, call</p>

  169. <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">

  170. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  171. <p>Add <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to automatically create a

  172. plot that matches the inverse slide style.</p>

  173. <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">

  174. <code class="sourceCode R"><span><span class="co"># theme_xaringan() on the left, theme_xaringan_inverse() on the right</span></span>

  175. <span><span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  176. <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-inverse-1.png" width="48%"></p>

  177. </div>

  178. <div class="section level2">

  179. <h2 id="using-xaringan-themer-css">Using <code>theme_xaringan()</code> without calling a style

  180. function<a class="anchor" aria-label="anchor" href="#using-xaringan-themer-css"></a>

  181. </h2>

  182. <p>Once you’ve set up your custom xaringan theme, you might want to use

  183. the theme’s CSS file for new presentations instead of rebuilding your

  184. theme with every new slide deck.</p>

  185. <p>In these cases, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will look for a CSS

  186. file written by <strong>xaringanthemer</strong> in your slides’

  187. directory or in a sub-folder under the same directory that it can use to

  188. determine the colors and fonts used in your slides.</p>

  189. <p>If you happen to have multiple slide themes written by

  190. <strong>xaringanthemer</strong> in the same directory, the one named

  191. <code>xaringan-themer.css</code> will be used. If xaringanthemer picks

  192. the wrong file, you can use the <code>css_file</code> in

  193. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to specify exactly which CSS file to

  194. use.</p>

  195. <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">

  196. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>css_file <span class="op">=</span> <span class="st">"my-slide-style.css"</span><span class="op">)</span></span></code></pre></div>

  197. <p>Note that you can use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> anywhere you

  198. want, not just in xaringan slides! (For example,

  199. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is working great in these vignettes!) This

  200. means that you can use your plot theme in reports and websites while

  201. maintaining a consistent look and feel or brand.</p>

  202. <p>Finally, you don’t even need a xaringanthemer CSS file. You can

  203. specify the key ingredients for the theme as arguments to

  204. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, namely text, background, and accent

  205. colors as well as text and title fonts.</p>

  206. <p>The R chunk below replicated the demonstrated theme, but doesn’t

  207. require a slide style to be set or stored in a CSS file.</p>

  208. <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">

  209. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  210. <span>  text_color <span class="op">=</span> <span class="st">"#3D3E38"</span>,</span>

  211. <span>  background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span>,</span>

  212. <span>  accent_color <span class="op">=</span> <span class="st">"#DC322F"</span>,</span>

  213. <span>  text_font <span class="op">=</span> <span class="st">"Kelly Slab"</span>,</span>

  214. <span>  text_font_use_google <span class="op">=</span> <span class="cn">TRUE</span>,</span>

  215. <span>  title_font <span class="op">=</span> <span class="st">"Oleo Script"</span>,</span>

  216. <span>  title_font_use_google <span class="op">=</span> <span class="cn">TRUE</span></span>

  217. <span><span class="op">)</span></span></code></pre></div>

  218. </div>

  219. <div class="section level2">

  220. <h2 id="colors">Colors<a class="anchor" aria-label="anchor" href="#colors"></a>

  221. </h2>

  222. <p>As demonstrated above, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and

  223. <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> modify the default colors and

  224. fonts of geometries. This means that <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">geom_point()</a></code>,

  225. <code><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">geom_text()</a></code> and other geoms used

  226. in your plots will reasonably match your slide themes with no extra

  227. work.</p>

  228. <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">

  229. <code class="sourceCode R"><span><span class="va">g_diamonds</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  230. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  231. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="cn">NULL</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span></span>

  232. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/lims.html" class="external-link">ylim</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">25000</span><span class="op">)</span></span>

  233. <span></span>

  234. <span><span class="va">g_diamonds</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  235. <p><img src="ggplot2-themes_files/figure-html/demo-geom-defaults-1.png" width="960"></p>

  236. <p>Whenever <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or

  237. <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> are called, the default values of

  238. many of ggplot2 geoms are set by default. You can opt out of this by

  239. setting <code>set_ggplot_defaults = FALSE</code> when using either

  240. theme. You can also restore the geom aesthetic defaults to their

  241. original values before the first time <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or

  242. <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> were used by running</p>

  243. <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">

  244. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  245. <div class="section level3">

  246. <h3 id="scale-xaringan">Custom Color and Fill Scales<a class="anchor" aria-label="anchor" href="#scale-xaringan"></a>

  247. </h3>

  248. <p>xaringanthemer includes monotone color and fill scales to match your

  249. ggplot2 theme. The scale functions all follow the naming pattern

  250. <code>scale_xaringan_&lt;aes&gt;_&lt;data_type&gt;()</code>, where

  251. <code>&lt;aes&gt;</code> is replaced with either <code>color</code> or

  252. <code>fill</code> and <code>&lt;data_type&gt;</code> is one of

  253. <code>discrete</code> or <code>continuous</code>.</p>

  254. <p>These scales use <code><a href="https://colorspace.R-Forge.R-project.org/reference/hcl_palettes.html" class="external-link">colorspace::sequential_hcl()</a></code> to create

  255. a sequential, monotone color scale based on the primary accent color in

  256. your slides. Color scales matching the inverse slides are possible by

  257. setting the argument <code>inverse = TRUE</code>.</p>

  258. <div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">

  259. <code class="sourceCode R"><span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  260. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>fill <span class="op">=</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" class="external-link">after_stat</a></span><span class="op">(</span><span class="va">count</span><span class="op">)</span><span class="op">)</span>, show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  261. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="st">"Count"</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span></span>

  262. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  263. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_continuous</a></span><span class="op">(</span><span class="op">)</span></span>

  264. <span></span>

  265. <span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">hwy</span>, y <span class="op">=</span> <span class="va">cty</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  266. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_count.html" class="external-link">geom_count</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>color <span class="op">=</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" class="external-link">after_stat</a></span><span class="op">(</span><span class="va">n</span><span class="op">)</span><span class="op">)</span>, show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  267. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> <span class="op">+</span></span>

  268. <span>  <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  269. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_color_continuous</a></span><span class="op">(</span>breaks <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/seq.html" class="external-link">seq</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">12</span>, <span class="fl">2</span><span class="op">)</span>, inverse <span class="op">=</span> <span class="cn">TRUE</span>, begin <span class="op">=</span> <span class="fl">1</span>, end <span class="op">=</span> <span class="fl">0</span><span class="op">)</span></span></code></pre></div>

  270. <p><img src="ggplot2-themes_files/figure-html/scale-xaringan-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/scale-xaringan-2.png" width="48%"></p>

  271. <p>In general, these color scales aren’t great at representing the

  272. underlying data. In both examples above, the color and fill scales

  273. duplicate information displayed via other aesthetics (the height of the

  274. bar or the size of the point). I recommend using these scales primarily

  275. for style, although the scales can be more or less effective depending

  276. on your color scheme.</p>

  277. <p>The scales come with a few more options:</p>

  278. <ul>

  279. <li><p>Choose a different primary color using the <code>color</code>

  280. argument.</p></li>

  281. <li><p>Use the inverse color slide theme color with

  282. <code>inverse = TRUE</code> (only applies when <code>color</code> is not

  283. supplied).</p></li>

  284. <li><p>Invert the direction of the discrete scales with

  285. <code>direction = -1</code>.</p></li>

  286. <li><p>Control the range of the continuous color scale used with

  287. <code>begin</code> and <code>end</code>. You can also invert the

  288. direction of the continuous color scale by setting

  289. <code>begin = 1</code> and <code>end = 0</code>.</p></li>

  290. </ul>

  291. </div>

  292. </div>

  293. <div class="section level2">

  294. <h2 id="fonts">Fonts<a class="anchor" aria-label="anchor" href="#fonts"></a>

  295. </h2>

  296. <div class="section level3">

  297. <h3 id="automatically-match-slide-and-plot-fonts">Automatically match slide and plot fonts<a class="anchor" aria-label="anchor" href="#automatically-match-slide-and-plot-fonts"></a>

  298. </h3>

  299. <p>xaringanthemer uses the <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> and <a href="https://github.com/yixuan/sysfonts" class="external-link">sysfonts</a> packages by

  300. Yixuan Qiu to automatically download and register <a href="https://fonts.google.com" class="external-link">Google Fonts</a> for use with your

  301. ggplot2 plots.</p>

  302. <p>In your slide theme, use the <code>&lt;type&gt;_font_google</code>

  303. argument with the <code>google_font("&lt;font name&gt;")</code> helper

  304. (or the default xaringanthemer fonts) and <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>

  305. will handle the rest. In our demo theme, we used

  306. <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code> with</p>

  307. <ul>

  308. <li>

  309. <code>text_font_google = google_font("Kelley Slab")</code> and</li>

  310. <li>

  311. <code>header_font_google = google_font("Oleo Script")</code>.</li>

  312. </ul>

  313. <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">

  314. <code class="sourceCode R"><span><span class="va">g_diamonds_with_text</span> <span class="op">&lt;-</span></span>

  315. <span>  <span class="va">g_diamonds</span> <span class="op">+</span></span>

  316. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">geom_text</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>y <span class="op">=</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" class="external-link">after_stat</a></span><span class="op">(</span><span class="va">count</span><span class="op">)</span>, label <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/format.html" class="external-link">format</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" class="external-link">after_stat</a></span><span class="op">(</span><span class="va">count</span><span class="op">)</span>, big.mark <span class="op">=</span> <span class="st">","</span><span class="op">)</span><span class="op">)</span>,</span>

  317. <span>    vjust <span class="op">=</span> <span class="op">-</span><span class="fl">0.30</span>, size <span class="op">=</span> <span class="fl">8</span>, stat <span class="op">=</span> <span class="st">"count"</span><span class="op">)</span> <span class="op">+</span></span>

  318. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Cut"</span>, y <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span></span>

  319. <span></span>

  320. <span><span class="va">g_diamonds_with_text</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  321. <p><img src="ggplot2-themes_files/figure-html/text%20demo-1.png" width="960"></p>

  322. <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> applies the header font to the plot and

  323. axis titles and the text font to the axis ticks labels and any text

  324. geoms or annotations.</p>

  325. </div>

  326. <div class="section level3">

  327. <h3 id="manually-specify-plot-fonts">Manually specify plot fonts<a class="anchor" aria-label="anchor" href="#manually-specify-plot-fonts"></a>

  328. </h3>

  329. <p>You can also specify specific fonts for your plot theme. Both

  330. <code>text_font</code> and <code>title_font</code> in

  331. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code>

  332. accept <code><a href="../reference/google_font.html">google_font()</a></code>s directly.</p>

  333. <div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">

  334. <code class="sourceCode R"><span><span class="va">g_diamonds_with_text</span> <span class="op">+</span></span>

  335. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  336. <span>    text_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Ranga"</span><span class="op">)</span>,</span>

  337. <span>    title_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Holtwood One SC"</span><span class="op">)</span></span>

  338. <span>  <span class="op">)</span></span></code></pre></div>

  339. <p><img src="ggplot2-themes_files/figure-html/text-demo-2-1.png" width="960"></p>

  340. </div>

  341. <div class="section level3">

  342. <h3 id="using-fonts-not-in-google-fonts">Using fonts not in Google Fonts<a class="anchor" aria-label="anchor" href="#using-fonts-not-in-google-fonts"></a>

  343. </h3>

  344. <p>If you want to use a font that isn’t in the Google Fonts collection,

  345. you need to manually register the font with sysfonts so that it can be

  346. used in your plots.</p>

  347. <p>I found a nice open source font called <strong>Glacial

  348. Indifference</strong> by Alfredo Marco Pradil available at <a href="https://fontlibrary.org" class="external-link">fontlibrary.org</a>. In my theme style

  349. function, I would use</p>

  350. <pre><code><span><span class="fu"><a href="../reference/style_mono_accent.html">style_mono_accent</a></span><span class="op">(</span></span>

  351. <span>  text_font_family <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>,</span>

  352. <span>  text_font_url <span class="op">=</span> <span class="st">"https://fontlibrary.org/face/glacial-indifference"</span></span>

  353. <span><span class="op">)</span></span></code></pre>

  354. <p>but sysfonts won’t know where to find the TTF font files for this

  355. font.</p>

  356. <p>To register the font with sysfonts, we use

  357. <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">sysfonts::font_add()</a></code>, but first we need to download the

  358. font file — the <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">sysfonts::font_add()</a></code> function requires the

  359. font file to be local.</p>

  360. <p>By inspecting the CSS file at the link I used in

  361. <code>text_font_url</code>, I found a direct URL for the

  362. <code>.ttf</code> files for <em>GlacialIndifferenceRegular</em>. I’ve

  363. included <em>Glacial Indifference</em> in the xaringanthemer

  364. package.</p>

  365. <div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">

  366. <code class="sourceCode R"><span><span class="co"># Path to the local custom font file</span></span>

  367. <span><span class="va">font_temp</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/system.file.html" class="external-link">system.file</a></span><span class="op">(</span></span>

  368. <span>  <span class="st">"fonts/GlacialIndifferenceRegular.ttf"</span>, package <span class="op">=</span> <span class="st">"xaringanthemer"</span></span>

  369. <span><span class="op">)</span></span>

  370. <span></span>

  371. <span><span class="co"># Register the font with sysfonts/showtext</span></span>

  372. <span><span class="fu">sysfonts</span><span class="fu">::</span><span class="fu"><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">font_add</a></span><span class="op">(</span>family <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>, regular <span class="op">=</span> <span class="va">font_temp</span><span class="op">)</span></span>

  373. <span></span>

  374. <span><span class="co"># Now it's available for use!</span></span>

  375. <span><span class="va">g_diamonds_with_text</span> <span class="op">+</span></span>

  376. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  377. <span>    text_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>,</span>

  378. <span>    title_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span></span>

  379. <span>  <span class="op">)</span></span></code></pre></div>

  380. <p><img src="ggplot2-themes_files/figure-html/sysfonts-custom-font-1.png" width="960"></p>

  381. </div>

  382. </div>

  383. <div class="section level2">

  384. <h2 id="tips">Tips for using the showtext package<a class="anchor" aria-label="anchor" href="#tips"></a>

  385. </h2>

  386. <p>Working with fonts is notoriously frustrating, but <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> and <a href="https://github.com/yixuan/sysfonts" class="external-link">sysfonts</a> do a great job

  387. ensuring that Google Fonts and custom fonts work on all platforms. As

  388. you’ve seen in the examples above, the process is mostly seamless, but

  389. there are a few caveats and places where the methods used by these

  390. packages may interrupt a typical ggplot2 workflow.</p>

  391. <div class="section level3">

  392. <h3 id="r-markdown">R Markdown<a class="anchor" aria-label="anchor" href="#r-markdown"></a>

  393. </h3>

  394. <p>To use the showtext package in R Markdown, knitr requires that the

  395. <code>fig.showtext</code> chunk option be set to <code>TRUE</code>,

  396. either in the chunk producing the figure or globally in the

  397. document.</p>

  398. <p>xaringanthemer tries to set this chunk option for you, but in some

  399. circumstances it’s possible to call <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> in a

  400. way that xaringanthemer can’t set this option for you. When this

  401. happens, xaringanthemer will produce an error:</p>

  402. <pre><code>Error in verify_fig_showtext(fn) :

  403.   To use theme_xaringan_base() with knitr, you need to set the chunk

  404.   option `fig.showtext = TRUE` for this chunk. Or you can set this option

  405.   globally with `knitr::opts_chunk$set(fig.showtext = TRUE)`.</code></pre>

  406. <p>If you find yourself facing this error, follow the instructions and

  407. choose one of the two suggestions:</p>

  408. <ol style="list-style-type: decimal">

  409. <li><p>Add <code>fig.showtext = TRUE</code> to the chunk producing the

  410. figure</p></li>

  411. <li><p>Or set the option globally in your <code>setup</code> chunk with

  412. <code>knitr::opts_chunk$set(fig.showtext = TRUE)</code>.</p></li>

  413. </ol>

  414. </div>

  415. <div class="section level3">

  416. <h3 id="macos">MacOS<a class="anchor" aria-label="anchor" href="#macos"></a>

  417. </h3>

  418. <p>On MacOS, you’ll need to have <code>xquartz</code> installed for

  419. <code>sysfonts</code> to work properly. If you use <a href="https://brew.sh/" class="external-link">homebrew</a>, you can install

  420. <code>xquartz</code> with</p>

  421. <div class="sourceCode" id="cb16"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb16-1"><a href="#cb16-1" tabindex="-1"></a><span class="ex">brew</span> cask install xquartz</span></code></pre></div>

  422. </div>

  423. <div class="section level3">

  424. <h3 id="in-rstudio">In RStudio<a class="anchor" aria-label="anchor" href="#in-rstudio"></a>

  425. </h3>

  426. <p>showtext and RStudio’s graphic device don’t always work well

  427. together. Depending on your version of RStudio, if you try to preview

  428. plots that use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, the fonts in the preview

  429. will still be the default sans font or you may not see a plot at

  430. all.</p>

  431. <p>To work around this, open a new <code><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz()</a></code> (MacOS) or

  432. <code><a href="https://rdrr.io/r/grDevices/x11.html" class="external-link">x11()</a></code> (Windows/Unix) plot device. The plots will then

  433. render in a separate window. I usually create a <code><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz()</a></code>

  434. device with a similar size ratio to my slides.</p>

  435. <div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">

  436. <code class="sourceCode R"><span><span class="co">## On Windows</span></span>

  437. <span><span class="co"># x11(width = 16 * 2/3, height = 9 * 2/3)</span></span>

  438. <span></span>

  439. <span><span class="co">## On MacOS</span></span>

  440. <span><span class="fu"><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">16</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span>, height <span class="op">=</span> <span class="fl">9</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span><span class="op">)</span></span>

  441. <span><span class="co">## run plot code to preview in separate window</span></span>

  442. <span><span class="fu"><a href="https://rdrr.io/r/grDevices/dev.html" class="external-link">dev.off</a></span><span class="op">(</span><span class="op">)</span> <span class="co"># call when done to close the device</span></span></code></pre></div>

  443. </div>

  444. </div>

  445.   </main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>

  446.     </nav></aside>

  447. </div>

  448. 

  449. 

  450. 

  451.     <footer><div class="pkgdown-footer-left">

  452.   <p>Developed by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a>.</p>

  453. </div>

  454. 

  455. <div class="pkgdown-footer-right">

  456.   <p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.3.</p>

  457. </div>

  458. 

  459.     </footer>

  460. </div>

  461. 

  462. 

  463. 

  464.   <script src="../doc-versions.js"></script>

  465. </body>

  466. </html>