<?xml version="1.0" encoding="UTF-8"?>
<rss  xmlns:atom="http://www.w3.org/2005/Atom" 
      xmlns:media="http://search.yahoo.com/mrss/" 
      xmlns:content="http://purl.org/rss/1.0/modules/content/" 
      xmlns:dc="http://purl.org/dc/elements/1.1/" 
      version="2.0">
<channel>
<title>Data Visualization (Summer PMAP 8101) News</title>
<link>https://datavizs23.classes.andrewheiss.com/news/index.html</link>
<atom:link href="https://datavizs23.classes.andrewheiss.com/news/index.xml" rel="self" type="application/rss+xml"/>
<description>Updates and FAQs for PMAP 8101 at Georgia State University, Summer 2023</description>
<generator>quarto-1.3.433</generator>
<lastBuildDate>Fri, 21 Jul 2023 13:48:00 GMT</lastBuildDate>
<item>
  <title>Final deadlines for things</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-21_final-deadlines.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>Remember <a href="../syllabus.html#late-work">from the syllabus</a> that there aren’t really any official deadlines:</p>
<blockquote class="blockquote">
<p>With the exception of the mini projects and the final project, <strong>there’s no penalty for late work</strong>. There’s no such thing as late work. I would <strong>highly recommend</strong> staying caught up as much as possible, but if you need to turn something in late, that’s fine—there’s <strong>no penalty</strong>. I might not be able to give you good feedback if you turn something in late, but that’s really the only practical penalty—there’s no harm to your grade.</p>
</blockquote>
<p><strong>Two deadlines do matter though:</strong></p>
<ol type="1">
<li>Everything except the final project needs to be turned in by <strong>11:59 PM on Wednesday, July 26</strong> (that’s the day after the last day of classes)</li>
<li>The final project has to be submitted by <strong>11:59 PM on Sunday, July 30</strong> (I have to submit grades shortly thereafter)</li>
</ol>



 ]]></description>
  <category>course details</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-21_final-deadlines.html</guid>
  <pubDate>Fri, 21 Jul 2023 13:48:00 GMT</pubDate>
</item>
<item>
  <title>Slow down, simplify and do small things</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>As we’re nearing the end of the course, your plots and data manipulation are becoming way more detailed and complex, which is good! Remember exercise 1, so long ago? All you had to do was this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb1-2"></span>
<span id="cb1-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>That’s all! Literally 3 lines of code.</p>
<p>But now with interactivity, maps, text analysis, your mini projects, your final project, and so on, your code is getting longer and more complex. You’ll have lots and lots of ggplot layers and functions chained together with <code>%&gt;%</code>. You’ve learned so much!</p>
<p>It is <em>incredibly</em> tempting to write out all the code you want in one go and then try to run a complete chunk and hope that you got it all correct. And then when it’s not correct, you try to change a bunch of things, hoping that they’ll fix it and then they don’t and you stay stuck and frustrated.</p>
<p>Over the weekend while helping you all on Slack and e-mail, this was a very common sight! You’d have a chunk of code that was 20–30 lines with an error somewhere and couldn’t find what went wrong or what was broken.</p>
<p><strong>Don’t do this!</strong></p>
<p>Here’s my best piece of advice for making more complex plots and for figuring out how to fix errors:</p>
<blockquote class="blockquote">
<p><strong>Slow down, simplify, and do small things</strong></p>
</blockquote>
<p>Run your code incrementally (see <a href="../news/2023-07-05_messy-broken-code-tips.html">this past post here</a> for some video examples about how to run stuff incrementally.). Start with a super basic plot and run it, then add a layer for labels and run it, then add a layer to change the fill gradient and run it, then add a layer to change the theme and run it, and so on. It feels slow, but it helps you understand what’s going on and helps you fix things when they break.</p>
<p>This is not just my advice. <a href="https://jvns.ca/">Julia Evans’s</a> fantastic <a href="https://wizardzines.com/zines/debugging-guide/"><em>The Pocket Guide to Debugging</em></a> has the same piece of advice:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/pocket-debugging.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Page 39 from Julia Evans’s <em>The Pocket Guide to Debugging</em></figcaption>
</figure>
</div>
<p>When something doesn’t work as expected, change just one thing at a time. Or even better, simplify it and then change one thing at a time.</p>
<p>Here’s a quick common example. Let’s say you have a plot like this and you want to use the <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html#the-color-scales">plasma viridis scale</a> for the colors of the points. It looks like it should work, but the colors aren’t right! Those are just the default colors!</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb2-2"></span>
<span id="cb2-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>,</span>
<span id="cb2-6">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Highway MPG"</span>,</span>
<span id="cb2-7">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_viridis_d</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">option =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"plasma"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">end =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.9</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/example-broken-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Here’s the process I would go through to figure out what’s wrong and fix it:</p>
<div class="tabset-margin-container"></div><div class="panel-tabset nav-pills">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" aria-controls="tabset-1-1" aria-selected="true">1. Strip it down to a basic plot</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" aria-controls="tabset-1-2" aria-selected="false">2. Add simplified broken part</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-3-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-3" aria-controls="tabset-1-3" aria-selected="false">3. Figure out broken part</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-4-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-4" aria-controls="tabset-1-4" aria-selected="false">4. Add some parts back in</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-5-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-5" aria-controls="tabset-1-5" aria-selected="false">5. Add the rest back in</a></li></ul>
<div class="tab-content nav-pills">
<div id="tabset-1-1" class="tab-pane active" aria-labelledby="tabset-1-1-tab">
<p>Right now there are a bunch of other layers (themes, labels, etc.). Maybe one of those is messing stuff up? We want to make sure the underlying plot works fine, so we’ll strip down the plot to its simplest form—just the geoms</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/step-1-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-2" class="tab-pane" aria-labelledby="tabset-1-2-tab">
<p>Good, that works. Next we want to change the colors so that they use the viridis plasma palette. We used <code>scale_fill_viridis_d()</code> originally, but we also included a bunch of extra options (<code>option = "plamsa", end = 0.9</code>). Before using those, let’s simplify it down and just use the default settings:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_viridis_d</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/step-2-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-3" class="tab-pane" aria-labelledby="tabset-1-3-tab">
<p>The colors still didn’t change. But now we have a simplified working example of our broken code and we can examine it without worrying about the labels, themes, extra options, and all those other things. This should make it easier to see what’s going on.</p>
<p>The issue here is that we used the color aesthetic (<code>color = drv</code>) and we’re trying to change it with <code>scale_fill_*()</code>. That lets us control filled things (i.e.&nbsp;<code>fill = drv</code>). Since we’re working with the color aesthetic, we need to use <code>scale_color_*()</code>. Let’s try <code>scale_color_viridis_d()</code> and see if that fixes it:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_viridis_d</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/step-3-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-4" class="tab-pane" aria-labelledby="tabset-1-4-tab">
<p>That fixed it! It’s still not exactly what we wanted yet—we want the plasma palette and <code>end = 0.9</code>—but it’s working now and we can add that back in:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_viridis_d</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">option =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"plasma"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">end =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.9</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/step-4-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-5" class="tab-pane" aria-labelledby="tabset-1-5-tab">
<p>Cool, the palette changed and the other settings worked. The problem seems to be fixed now, so we can re-add all those other layers from the original plot. It’s fixed!</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>,</span>
<span id="cb7-4">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Highway MPG"</span>,</span>
<span id="cb7-5">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_viridis_d</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">option =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"plasma"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">end =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.9</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things_files/figure-html/step-5-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>



 ]]></description>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-19_slow-down-do-small-things.html</guid>
  <pubDate>Wed, 19 Jul 2023 16:33:00 GMT</pubDate>
</item>
<item>
  <title>Sessions 11 and 12 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>Just a few quick tips from the past couple sessions:</p>
<section id="can-i-use-geom_label_repel-with-maps" class="level3">
<h3 class="anchored" data-anchor-id="can-i-use-geom_label_repel-with-maps">Can I use <code>geom_label_repel()</code> with maps?</h3>
<p>You learned about the {ggrepel} package in <a href="../example/09-example.html">session 9</a>, with its <code>geom_text_repel()</code> and <code>geom_label_repel()</code> functions that make sure none of your labels overlap:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb1-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(sf)</span>
<span id="cb1-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(ggrepel)</span>
<span id="cb1-4"></span>
<span id="cb1-5">small_mpg <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> mpg <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-6">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Only use the first 10 rows</span></span>
<span id="cb1-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">slice</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">:</span><span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">10</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-8">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make a label column</span></span>
<span id="cb1-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fancy_label =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">paste0</span>(manufacturer, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">" "</span>, model, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">" ("</span>, year, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">")"</span>))</span>
<span id="cb1-10"></span>
<span id="cb1-11"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(small_mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_label_repel</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> fancy_label), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">seed =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1234</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/libraries-data-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>In <a href="../example/12-example.html">session 12</a>, you learned about <code>geom_sf_text()</code> and <code>geom_sf_label()</code> for adding text and labels to maps. But what if your map labels overlap, like this?</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Download cb_2022_us_county_5m.zip under "County" from</span></span>
<span id="cb2-2"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html</span></span>
<span id="cb2-3">ga_counties <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">read_sf</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"data/cb_2022_us_county_5m/cb_2022_us_county_5m.shp"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb2-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(STATEFP <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">13</span>)</span></code></pre></div>
</div>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1">ga_places <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tribble</span>(</span>
<span id="cb3-2">  <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span>city, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span>lat, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span>long,</span>
<span id="cb3-3">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Atlanta"</span>, <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">33.748955</span>, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">-</span><span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">84.388099</span>,</span>
<span id="cb3-4">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Alpharetta"</span>, <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">34.075318</span>, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">-</span><span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">84.294105</span>,</span>
<span id="cb3-5">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Duluth"</span>, <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">34.002262</span>, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">-</span><span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">84.143614</span></span>
<span id="cb3-6">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb3-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">st_as_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">coords =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"long"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"lat"</span>), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">crs =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">st_crs</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"EPSG:4326"</span>))</span>
<span id="cb3-8"></span>
<span id="cb3-9"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_counties, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">linewidth =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.1</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_places) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf_label</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_places, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> city)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/ga-places-label-overlap-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Unfortunately there’s no such thing as <code>geom_sf_label_repel()</code>. BUT there’s still a way to use <code>geom_label_repel()</code> and <code>geom_text_repel()</code> with maps, with a couple little tweaks:</p>
<ol type="1">
<li>You have to map the <code>geometry</code> column in the data to the <code>geometry</code> aesthetic in <code>geom_text/label_repel()</code></li>
<li>You have to tell <code>geom_text/label_repel()</code> to use the “sf_coordinates” stat so that it uses the latitude and longitude coordinates for x/y</li>
</ol>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_counties, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">linewidth =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.1</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_places) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_label_repel</span>(</span>
<span id="cb4-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> ga_places,</span>
<span id="cb4-6">    <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> city, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geometry =</span> geometry),</span>
<span id="cb4-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">stat =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"sf_coordinates"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">seed =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1234</span></span>
<span id="cb4-8">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/ga-places-label-fixed-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="i-tried-to-make-a-map-and-countries-are-missingwhy" class="level3">
<h3 class="anchored" data-anchor-id="i-tried-to-make-a-map-and-countries-are-missingwhy">I tried to make a map and countries are missing—why?</h3>
<p>Many of you were brave and made a map of refugee counts for mini project 2. That’s fantastic!</p>
<p>If you did, you likely ran into an issue with plotting the countries and getting an incomplete map. Here’s an example with our beloved gapminder data.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(countrycode)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># For dealing with country names, abbreviations, and codes</span></span>
<span id="cb5-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gapminder)    <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Global health and wealth</span></span>
<span id="cb5-3"></span>
<span id="cb5-4"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Add an ISO country code column to gapminder for joining</span></span>
<span id="cb5-5">gapminder_clean <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ISO_A3 =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">countrycode</span>(country, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"country.name"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"iso3c"</span>))</span>
<span id="cb5-7"></span>
<span id="cb5-8"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Load the world map data from exercise 12</span></span>
<span id="cb5-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Download "Admin 0 – Countries" from</span></span>
<span id="cb5-10"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># https://www.naturalearthdata.com/downloads/110m-cultural-vectors/</span></span>
<span id="cb5-11">world_map <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">read_sf</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"data/ne_110m_admin_0_countries/ne_110m_admin_0_countries.shp"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(ISO_A3 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"ATA"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span>  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Bye penguins</span></span>
<span id="cb5-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ISO3 =</span> ADM0_A3)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use ADM0_A3 as the main country code column</span></span></code></pre></div>
</div>
<p>Let’s take just 2007 from gapminder and map life expectancy. To do this we’ll need to combine or join the two datasets. One logical way to do this would be to take gapminder, join the world map data to it, and then plot it:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1">gapminder_with_map <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(world_map, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(ISO3))</span>
<span id="cb6-4"></span>
<span id="cb6-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> gapminder_with_map, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> lifeExp))</span>
<span id="cb6-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Error in `geom_sf()`:</span></span>
<span id="cb6-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! Problem while computing stat.</span></span>
<span id="cb6-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ℹ Error occurred in the 1st layer.</span></span>
<span id="cb6-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Caused by error in `compute_layer()`:</span></span>
<span id="cb6-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! `stat_sf()` requires the following missing aesthetics: geometry</span></span></code></pre></div>
</div>
<p>oh no there’s an error! When we joined the map data, the special attributes of the <code>geometry</code> column in <code>world_map</code> got lost. The column is still there, but it won’t automatically plot with <code>geom_sf()</code>. We can fix that by specifying that the column named “geometry” does indeed contain all the geographic data with <code>st_set_geometry()</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1">gapminder_with_map <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(world_map, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(ISO3)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Fix the geometry column</span></span>
<span id="cb7-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">st_set_geometry</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"geometry"</span>)</span>
<span id="cb7-6"></span>
<span id="cb7-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> gapminder_with_map, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> lifeExp)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/gapminder-2007-missing-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>We have a… map? It’s missing a bunch of countries (Russia is the most glaringly obvious hole!). That’s because those countries aren’t in gapminder, so their corresponding maps didn’t come over when using <code>left_join()</code>. We can confirm by counting rows. The original map data has maps for 176 countries. Gapminder has 142 countries in 2007. The combined <code>gapminder_with_map</code> dataset only has 142 rows—we’re not plotting 34 countries, since they’re not in gapminder.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">nrow</span>(world_map)</span>
<span id="cb8-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] 176</span></span>
<span id="cb8-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">nrow</span>(gapminder_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>))</span>
<span id="cb8-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] 142</span></span>
<span id="cb8-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">nrow</span>(gapminder_with_map)</span>
<span id="cb8-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] 142</span></span></code></pre></div>
</div>
<p>One quick and easy way to fix this is to use two <code>geom_sf()</code> layers: one with the whole world and one with the partial gapminder-only map:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> world_map) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> gapminder_with_map, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> lifeExp)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/two-geom-sf-layers-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>The <em>better</em> way to fix this is to join the two datasets in a different order—start with the full map data and then add gapminder to it. This maintains the specialness of the geometry column and keeps all the original rows in <code>world_map</code>. For countries that are in the map data but not in gapminder, they’ll still be in the final <code>map_with_gapminder</code> data, but they’ll have NA for life expectancy:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1">map_with_gapminder <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> world_map <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(gapminder_clean, year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(ISO3))</span>
<span id="cb10-3"></span>
<span id="cb10-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> map_with_gapminder, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> lifeExp)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-7">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make the countries with missing data a different color</span></span>
<span id="cb10-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_gradient</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.value =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"grey90"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/gapminder-2007-good-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>What if we want to facet though? This is just one year—what if we want to show panels for multiple years? This gets a little tricky. The gapminder data has rows for different country/year combinations (Afghanistan 1952, Afghanistan 1957, Albania 1952, etc.), but the world map data only has rows for countries. If we join the gapminder data to the world map data and gapminder has multiple rows for years, there’s no clear place for the gapminder rows to connect with the world map rows. R will try to make it work and repeat world_map rows for each of the repeated years, but it can be unpredictable.</p>
<p>The best approach I’ve found for doing this is to create what I call a “skeleton” data frame that has all the possible combinations of (1) unique countries in the map data and (2) unique years in gapminder (or the refugee data if you’re using that). The <code>expand_grid()</code> function does this automatically. Like, look what happens if we tell it to make rows for every combination of A, B, C and 1, 2, 3—we get A1, A2, A3, B1, B2, and so on:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">expand_grid</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">column_1 =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"A"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"B"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"C"</span>),</span>
<span id="cb11-2">            <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">column_2 =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>))</span>
<span id="cb11-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 9 × 2</span></span>
<span id="cb11-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   column_1 column_2</span></span>
<span id="cb11-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;       &lt;dbl&gt;</span></span>
<span id="cb11-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 A               1</span></span>
<span id="cb11-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 A               2</span></span>
<span id="cb11-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 A               3</span></span>
<span id="cb11-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 B               1</span></span>
<span id="cb11-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 B               2</span></span>
<span id="cb11-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 6 B               3</span></span>
<span id="cb11-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 7 C               1</span></span>
<span id="cb11-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 8 C               2</span></span>
<span id="cb11-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 9 C               3</span></span></code></pre></div>
</div>
<p>We’ll make a similar skeleton with all the countries in the map and all the years we care about in gapminder. We’ll just show two panels—1952 and 2007—so we’ll make a little filtered dataset first. Then we’ll use <code>expand_grid()</code> to make a dataset with all those combinations: Afghanistan 1952, Afghanistan 2007, Albania 1952, Albania 2007, and so on:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1">gapminder_smaller <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb12-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%in%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1952</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>))</span>
<span id="cb12-3"></span>
<span id="cb12-4">skeleton <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">expand_grid</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ISO3 =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">unique</span>(world_map<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span>ISO3),</span>
<span id="cb12-5">                        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">year =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">unique</span>(gapminder_smaller<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span>year))</span>
<span id="cb12-6">skeleton</span>
<span id="cb12-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 352 × 2</span></span>
<span id="cb12-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    ISO3   year</span></span>
<span id="cb12-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;chr&gt; &lt;int&gt;</span></span>
<span id="cb12-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 FJI    1952</span></span>
<span id="cb12-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 FJI    2007</span></span>
<span id="cb12-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 TZA    1952</span></span>
<span id="cb12-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 TZA    2007</span></span>
<span id="cb12-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 SAH    1952</span></span>
<span id="cb12-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 SAH    2007</span></span>
<span id="cb12-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 CAN    1952</span></span>
<span id="cb12-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 CAN    2007</span></span>
<span id="cb12-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 USA    1952</span></span>
<span id="cb12-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 USA    2007</span></span>
<span id="cb12-20"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 342 more rows</span></span></code></pre></div>
</div>
<p>Neat, that works. There’s Fiji in 1952 and 2007, Tanzania in 1952 and 2007, and so on. Those are all the possible countries in <code>world_map</code> with all the possible years in <code>gapminder_smaller</code>.</p>
<p>Next we can join in the gapminder data for each country and year, and join in the map data for each country. Notice how it has the same number of rows as <code>skeleton</code> (352). If a country doesn’t have gapminder data (like Fiji here), it gets an NA for <code>lifeExp</code> and <code>pop</code> and <code>gdpPercap</code>. But it still has map data for both 1952 and 2007, so it’ll show up in a plot.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1">full_gapminder_map <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> skeleton <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb13-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(gapminder_smaller, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(ISO3, year)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(world_map, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(ISO3)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb13-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># The geometry column lost its magic powers after joining, so add it back</span></span>
<span id="cb13-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">st_set_geometry</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"geometry"</span>)</span>
<span id="cb13-6">full_gapminder_map</span>
<span id="cb13-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Simple feature collection with 352 features and 175 fields</span></span>
<span id="cb13-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Geometry type: MULTIPOLYGON</span></span>
<span id="cb13-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Dimension:     XY</span></span>
<span id="cb13-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Bounding box:  xmin: -180 ymin: -55.61183 xmax: 180 ymax: 83.64513</span></span>
<span id="cb13-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Geodetic CRS:  WGS 84</span></span>
<span id="cb13-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 352 × 176</span></span>
<span id="cb13-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    ISO3   year country  continent lifeExp     pop gdpPercap featurecla scalerank</span></span>
<span id="cb13-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;chr&gt; &lt;int&gt; &lt;fct&gt;    &lt;fct&gt;       &lt;dbl&gt;   &lt;int&gt;     &lt;dbl&gt; &lt;chr&gt;          &lt;int&gt;</span></span>
<span id="cb13-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 FJI    1952 &lt;NA&gt;     &lt;NA&gt;         NA   NA            NA  Admin-0 c…         1</span></span>
<span id="cb13-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 FJI    2007 &lt;NA&gt;     &lt;NA&gt;         NA   NA            NA  Admin-0 c…         1</span></span>
<span id="cb13-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 TZA    1952 Tanzania Africa       41.2  8.32e6      717. Admin-0 c…         1</span></span>
<span id="cb13-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 TZA    2007 Tanzania Africa       52.5  3.81e7     1107. Admin-0 c…         1</span></span>
<span id="cb13-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 SAH    1952 &lt;NA&gt;     &lt;NA&gt;         NA   NA            NA  Admin-0 c…         1</span></span>
<span id="cb13-20"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 SAH    2007 &lt;NA&gt;     &lt;NA&gt;         NA   NA            NA  Admin-0 c…         1</span></span>
<span id="cb13-21"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 CAN    1952 Canada   Americas     68.8  1.48e7    11367. Admin-0 c…         1</span></span>
<span id="cb13-22"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 CAN    2007 Canada   Americas     80.7  3.34e7    36319. Admin-0 c…         1</span></span>
<span id="cb13-23"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 USA    1952 United … Americas     68.4  1.58e8    13990. Admin-0 c…         1</span></span>
<span id="cb13-24"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 USA    2007 United … Americas     78.2  3.01e8    42952. Admin-0 c…         1</span></span>
<span id="cb13-25"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 342 more rows</span></span>
<span id="cb13-26"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 167 more variables: LABELRANK &lt;int&gt;, SOVEREIGNT &lt;chr&gt;, SOV_A3 &lt;chr&gt;,</span></span>
<span id="cb13-27"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## #   ADM0_DIF &lt;int&gt;, LEVEL &lt;int&gt;, TYPE &lt;chr&gt;, TLC &lt;chr&gt;, ADMIN &lt;chr&gt;,</span></span>
<span id="cb13-28"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## #   ADM0_A3 &lt;chr&gt;, GEOU_DIF &lt;int&gt;, GEOUNIT &lt;chr&gt;, GU_A3 &lt;chr&gt;, SU_DIF &lt;int&gt;,</span></span>
<span id="cb13-29"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## #   SUBUNIT &lt;chr&gt;, SU_A3 &lt;chr&gt;, BRK_DIFF &lt;int&gt;, NAME &lt;chr&gt;, NAME_LONG &lt;chr&gt;,</span></span>
<span id="cb13-30"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## #   BRK_A3 &lt;chr&gt;, BRK_NAME &lt;chr&gt;, BRK_GROUP &lt;chr&gt;, ABBREV &lt;chr&gt;, POSTAL &lt;chr&gt;,</span></span>
<span id="cb13-31"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## #   FORMAL_EN &lt;chr&gt;, FORMAL_FR &lt;chr&gt;, NAME_CIAWF &lt;chr&gt;, NOTE_ADM0 &lt;chr&gt;, …</span></span></code></pre></div>
</div>
<p>Now we can plot it and we’ll have consistent countries in each panel:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_sf</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> full_gapminder_map, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> lifeExp)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_gradient</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.value =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"grey90"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_void</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12_files/figure-html/gapminder-map-fixed-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Perfect!</p>
</section>
<section id="saving-data-that-takes-a-long-time-to-make" class="level3">
<h3 class="anchored" data-anchor-id="saving-data-that-takes-a-long-time-to-make">Saving data that takes a long time to make</h3>
<p>In these later sessions, I’ve had you do things with data from different places on the internet. In <a href="../example/13-example.html">session 13</a> you’ll grab books from Project Gutenberg. Some of you used <a href="https://www.andrewheiss.com/blog/2023/06/01/geocoding-routing-openstreetmap-r/#routing"><code>osrmRoute()</code></a> in exercise 12 to create a mapped route between cities. Some of you used <a href="../example/12-example.html#automatic-geocoding-by-address">{tidygeocoder}</a> to geocode addresses in exercise 12. In past sessions you’ve used <code>WDI()</code> to download data from the World Bank.</p>
<p>When you knit a document, R starts with a brand new empty session without any packages or data loaded, and then it runs all your chunks to load packages, load data, and run all your other code. If you have code that grabs data from the internet, <strong>it will run every time you knit your document</strong>. <a href="../news/2023-07-12_cleaner-nicer-rmd-output.html#knit-often">Remember my suggestion to knit often</a>? You’ll re-download the data, re-create routes, re-geocode addresses, and so on every time you keep re-knitting. This is excessive, slow, and—most especially—bad R etiquette. You don’t want to keep accessing those servers and recalculate things and redownload things you don’t need to update.</p>
<p>BUT at the same time, you should care about reproducibility. You want others—and future you—to be able to run your code and create the same plots and tables and get the same data. But you don’t want to do all that excessively and impolitely.</p>
<p>The solution is to be a little tricky with your R Markdown file. If you have code that needs to grab something from the internet, put it in a chunk that doesn’t run—use <code>eval=FALSE</code> in its chunk options. Then, in an invisible chunk (with <code>include=FALSE</code>) load the pre-downloaded data manually. I showed this in <a href="../example/08-example.html#load-and-clean-data">example 8</a> (with {WDI}) and <a href="../example/11-example.html#get-data">example 11</a> (with {tidyquant}) and <a href="../example/13-example.html#get-data">example 13</a> (with {gutenberger})</p>
<p>Here’s a quick basic example with Project Gutenberg book data. There are two chunks: <code>get-book-fake</code> and <code>load-book-real</code>:</p>
<div class="sourceCode" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb15-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r get-book-fake, eval=FALSE}</span></span>
<span id="cb15-2">little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gutenberg_download</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">514</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">meta_fields =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"title"</span>)</span>
<span id="cb15-3"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span>
<span id="cb15-4"></span>
<span id="cb15-5"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r load-book-data-real, include=FALSE}</span></span>
<span id="cb15-6">little_women_file <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"data/little_women_raw.csv"</span></span>
<span id="cb15-7"></span>
<span id="cb15-8"><span class="cf" style="color: #003B4F;
background-color: null;
font-style: inherit;">if</span> (<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">file.exists</span>(little_women_file)) {</span>
<span id="cb15-9">  little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">read_csv</span>(little_women_file)</span>
<span id="cb15-10">} <span class="cf" style="color: #003B4F;
background-color: null;
font-style: inherit;">else</span> {</span>
<span id="cb15-11">  little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gutenberg_download</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">514</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">meta_fields =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"title"</span>)</span>
<span id="cb15-12">  </span>
<span id="cb15-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">write_csv</span>(little_women_raw, little_women_file)</span>
<span id="cb15-14">}</span>
<span id="cb15-15"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
<ol type="1">
<li>The first chunk (<code>get-book-fake</code>) contains the code for downloading data with <code>gutenberg_download()</code>. It will appear in the document, but <strong>it will not run</strong> since it has <code>eval=FALSE</code> on. It will not try to grab anything from the internet. If someone were to follow along with the code in your document, they could run that code and get the book (good!), and it won’t run repeatedly on your end (also good!).</li>
<li>The second chunk (<code>load-book-data-real</code>) does a neat little trick. It first checks to see if a CSV file named <code>data/little_women_raw.csv</code> exists. If it does, it’ll just load it with <code>read_csv()</code>. If it doesn’t, it’ll grab data from the internet with <code>gutenberg_download()</code> and then it will save that as <code>data/little_women_raw.csv</code>. This is really neat stuff. If you’re knitting your document for the first time, you won’t have the Little Women data yet, so the code will connect to Project Gutenberg and get it. The code will then save that data to your computer as a CSV file. The next time you knit, R won’t need to connect to the internet again—it’ll load the CSV file instead of grabbing it from Project Gutenberg. You can knit as many times as you want—you won’t need to reconnect to any remote servers again.</li>
</ol>
<p>Again, the general pattern for this is to create two chunks: (1) a fake one that people will see in the document but won’t run, and (2) a real one that will run and load data locally if it exists, but that people won’t see.</p>
<div class="callout callout-style-default callout-note callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
How should you save your intermediate data?
</div>
</div>
<div class="callout-body-container callout-body">
<p>In the example above, I saved the Little Women data from Project Gutenberg as a CSV file. This is fine—a CSV file is plain text, so it can store any kind of text-based data like numbers and text without any problems.</p>
<p>But sometimes you’ll work with slightly more complex types of data. For instance, with geographic data, the magical <code>geometry</code> column contains a whole host of extra metadata, like projection details and multiple points (if it’s something like country boundaries). If you save a data frame with a <code>geometry</code> column as a CSV file you’ll lose all that data—CSVs can’t store that extra nested metadata.</p>
<p>Similarly, if you have a factor or categorical variable (i.e.&nbsp;something like “Strongly disagree”, “Disagree”, “Agree”, “Strongly agree”), behind the scenes R stores those as numbers (i.e.&nbsp;1, 2, 3, 4) with labels attached to the numbers (1 = “Strongly disagree”, 2 = “Disagree”, etc.). If you save a data frame with a categorical column like that as a CSV, by default R will only store the numbers and you’ll lose the labels. You <em>could</em> convert the categorical column to text before saving as CSV and then the text labels would get stored, but if the variable is ordered (i.e.&nbsp;“Strongly disagree” is lower than “disagree”, etc.), you’ll lose that ordering when saving as CSV.</p>
<p>The safest way to save intermediate files like this is to actually not use CSV, but instead use a special kind of file called .rds, which lets you take an entire object from your Environment panel and save it as a file. The .rds file will keep all the extra metadata and attributes (i.e.&nbsp;the projection details and nested points inside a <code>geometry</code> column; factor labels and ordering for categorical variables, and so on).</p>
<p>So instead of saving that Little Women book as a CSV file, the better approach is to use <code>saveRDS()</code> and <code>readRDS()</code> to store it and load it as an .rds file, like this:</p>
<div class="sourceCode" id="cb16" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb16-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r get-book-fake, eval=FALSE}</span></span>
<span id="cb16-2">little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gutenberg_download</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">514</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">meta_fields =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"title"</span>)</span>
<span id="cb16-3"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span>
<span id="cb16-4"></span>
<span id="cb16-5"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r load-book-data-real, include=FALSE}</span></span>
<span id="cb16-6">little_women_file <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"data/little_women_raw.rds"</span></span>
<span id="cb16-7"></span>
<span id="cb16-8"><span class="cf" style="color: #003B4F;
background-color: null;
font-style: inherit;">if</span> (<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">file.exists</span>(little_women_file)) {</span>
<span id="cb16-9">  little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">readRDS</span>(little_women_file)</span>
<span id="cb16-10">} <span class="cf" style="color: #003B4F;
background-color: null;
font-style: inherit;">else</span> {</span>
<span id="cb16-11">  little_women_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gutenberg_download</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">514</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">meta_fields =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"title"</span>)</span>
<span id="cb16-12">  </span>
<span id="cb16-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">saveRDS</span>(little_women_raw, little_women_file)</span>
<span id="cb16-14">}</span>
<span id="cb16-15"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
</div>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
The fancy pro version of all this
</div>
</div>
<div class="callout-body-container callout-body">
<p>If you want to be super cool, check out <a href="https://books.ropensci.org/targets/">the {targets} package</a>, which is like the professional version of this approach to caching data. {targets} lets you keep track of all your different objects and it will only re-run stuff if absolutely necessary.</p>
<p>For instance, imagine that in a document you load data, clean it, and plot it. Standard stuff. There’s a linear relationship between all this—the raw data leads to the clean data, which leads to a plot. If you change code in your plot, the data cleaning and loading code didn’t change, so there’s no real reason to need to re-run it. If you change your data cleaning code, your downstream plot will be affected and its code would need to be re-run.</p>
<p>{targets} keeps track of all these dependencies and re-runs code only when there are upstream changes. It’s great for plots and models that take a long time to run, or for grabbing data from the internet.</p>
<p>The best way to learn {targets} is to play with <a href="https://books.ropensci.org/targets/walkthrough.html">their short little walkthrough tutorial here</a>, which has you make a simple document that loads data, builds a regression model, and makes a plot.</p>
<p>I use {targets} for all my projects (<a href="https://github.com/andrewheiss/datavizs23.classes.andrewheiss.com#targets-pipeline">including this course website!</a>) and it makes life a ton easier for any kind of project that involves more than one .Rmd file or R script (<a href="https://stats.andrewheiss.com/mountainous-mackerel/analysis/targets.html">see this for an example</a>). I <em>highly</em> recommend checking it out.</p>
</div>
</div>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-18_faqs_session-11-12.html</guid>
  <pubDate>Tue, 18 Jul 2023 14:55:00 GMT</pubDate>
</item>
<item>
  <title>Mini project 1 feedback</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>Great work with your first mini projects! You successfully took real world data, cleaned it up, made a plot with it, and told a story about rats in New York!</p>
<p>I left some similar comments for a lot of you, so I figured I’d compile those here along with examples of how to address them.</p>
<p>First, I’ll load and clean the data so I can illustrate stuff below:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb1-2"></span>
<span id="cb1-3">rats_raw <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">read_csv</span>(</span>
<span id="cb1-4">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"https://datavizs23.classes.andrewheiss.com/files/data/external_data/Rat_Sightings.csv"</span>, </span>
<span id="cb1-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">""</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"NA"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"N/A"</span>)</span>
<span id="cb1-6">)</span>
<span id="cb1-7"></span>
<span id="cb1-8">rats_clean <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> rats_raw <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb1-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">rename</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">created_date =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">Created Date</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span>,</span>
<span id="cb1-10">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">location_type =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">Location Type</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span>,</span>
<span id="cb1-11">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">borough =</span> Borough) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb1-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">created_date =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mdy_hms</span>(created_date)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb1-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">sighting_year =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">year</span>(created_date),</span>
<span id="cb1-14">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">sighting_month =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">month</span>(created_date),</span>
<span id="cb1-15">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">sighting_day =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">day</span>(created_date),</span>
<span id="cb1-16">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">sighting_weekday =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">wday</span>(created_date, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">abbr =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb1-17">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(borough <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Unspecified"</span>)</span></code></pre></div>
</div>
<section id="warnings-and-messages" class="level3">
<h3 class="anchored" data-anchor-id="warnings-and-messages">Warnings and messages</h3>
<blockquote class="blockquote">
<p>Your knitted document has warnings and package loading messages.</p>
</blockquote>
<p>You should turn off those warnings and messages. See <a href="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04.html#how-can-i-hide-warnings-and-messages">this</a> and <a href="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_cleaner-nicer-rmd-output.html#clean-up-warnings-and-messages">this</a> for more about how.</p>
</section>
<section id="all-caps" class="level3">
<h3 class="anchored" data-anchor-id="all-caps">ALL CAPS</h3>
<blockquote class="blockquote">
<p>Consider converting the borough names to NOT ALL CAPS, since you don’t repeat all caps anywhere else</p>
</blockquote>
<p>In the data, the borough names are all spelled with ALL CAPS:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1">rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb2-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">select</span>(created_date, borough)</span>
<span id="cb2-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 101,913 × 2</span></span>
<span id="cb2-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    created_date        borough      </span></span>
<span id="cb2-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;dttm&gt;              &lt;chr&gt;        </span></span>
<span id="cb2-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 2015-09-04 00:00:00 MANHATTAN    </span></span>
<span id="cb2-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 2015-09-04 00:00:00 STATEN ISLAND</span></span>
<span id="cb2-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 2015-09-04 00:00:00 STATEN ISLAND</span></span>
<span id="cb2-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 2015-09-04 00:00:00 BROOKLYN     </span></span>
<span id="cb2-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 2015-09-04 00:00:00 BRONX        </span></span>
<span id="cb2-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 2015-09-04 00:00:00 BROOKLYN     </span></span>
<span id="cb2-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 2015-09-04 00:00:00 QUEENS       </span></span>
<span id="cb2-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 2015-09-04 00:00:00 BROOKLYN     </span></span>
<span id="cb2-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 2015-09-04 00:00:00 MANHATTAN    </span></span>
<span id="cb2-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 2015-09-04 00:00:00 STATEN ISLAND</span></span>
<span id="cb2-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 101,903 more rows</span></span></code></pre></div>
</div>
<p>You can convert that to not all caps with one of two functions from the {stringr} package (which is one of the nine that R loads when you run <code>library(tidyverse)</code>): <code>str_to_title()</code> changes text to title case (where each word is capitalized) while <code>str_to_sentence()</code> changes text to sentence case (where the first letter in a sentence is capitalized):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_to_title</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"OH NO! RATS IN NEW YORK"</span>)</span>
<span id="cb3-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] "Oh No! Rats In New York"</span></span>
<span id="cb3-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_to_sentence</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"OH NO! RATS IN NEW YORK"</span>)</span>
<span id="cb3-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] "Oh no! Rats in new york"</span></span></code></pre></div>
</div>
<p>You can use it with <code>mutate()</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1">rats_clean <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">borough =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_to_title</span>(borough))</span>
<span id="cb4-3"></span>
<span id="cb4-4">rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb4-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">select</span>(created_date, borough)</span>
<span id="cb4-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 101,913 × 2</span></span>
<span id="cb4-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    created_date        borough      </span></span>
<span id="cb4-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;dttm&gt;              &lt;chr&gt;        </span></span>
<span id="cb4-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 2015-09-04 00:00:00 Manhattan    </span></span>
<span id="cb4-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 2015-09-04 00:00:00 Staten Island</span></span>
<span id="cb4-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 2015-09-04 00:00:00 Staten Island</span></span>
<span id="cb4-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 2015-09-04 00:00:00 Brooklyn     </span></span>
<span id="cb4-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 2015-09-04 00:00:00 Bronx        </span></span>
<span id="cb4-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 2015-09-04 00:00:00 Brooklyn     </span></span>
<span id="cb4-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 2015-09-04 00:00:00 Queens       </span></span>
<span id="cb4-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 2015-09-04 00:00:00 Brooklyn     </span></span>
<span id="cb4-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 2015-09-04 00:00:00 Manhattan    </span></span>
<span id="cb4-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 2015-09-04 00:00:00 Staten Island</span></span>
<span id="cb4-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 101,903 more rows</span></span></code></pre></div>
</div>
<p>(I’d use <code>str_to_title()</code> here since Staten Island is two words; if you use <code>str_to_sentence()</code> it’ll turn into “Staten island”.)</p>
<p>Now your plots will have nicer borough names:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1">rats_summarized <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(borough) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>())</span>
<span id="cb5-4"></span>
<span id="cb5-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_summarized, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/plot-with-better-capitalization-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="sorting-and-ordering" class="level3">
<h3 class="anchored" data-anchor-id="sorting-and-ordering">Sorting and ordering</h3>
<blockquote class="blockquote">
<p>Consider sorting the locations by number of sightings instead of alphabetically</p>
</blockquote>
<p>In the plot above, the boroughs on the x-axis are in alphabetic order. If we want to tell a better story, though, it’s helpful to reorder them so that we can more easily see which boroughs have the most and least rats. <a href="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08.html#i-want-my-bars-to-be-sorted-in-my-plot.-how-can-i-control-their-order">See here for more about reordering categories</a>. We can sort the data and then use <code>fct_inorder()</code> from the {forcats} package (also one of the nine that gets loaded with <code>library(tidyverse)</code>) to lock these borough names in the right order:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1">rats_summarized <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(borough) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Sort by total in descending order</span></span>
<span id="cb6-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-6">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Lock bhe borough names in place</span></span>
<span id="cb6-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">borough =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(borough))</span>
<span id="cb6-8"></span>
<span id="cb6-9"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_summarized, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/plot-better-order-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="unbalanced-facets" class="level3">
<h3 class="anchored" data-anchor-id="unbalanced-facets">Unbalanced facets</h3>
<blockquote class="blockquote">
<p>The facets are a little unbalanced given that there are 8 panels. Consider adding… something?… to that empty panel, like explanatory text or information about the data source. Or make it use 4 columns and 2 rows, or 2 columns and 4 rows so there’s no empty space</p>
</blockquote>
<p>Lots of you used facets to show trends over time. By default R tries to make the grid as square as possible, so here there are 3 rows and 3 columns, but that leaves an empty panel in the bottom right corner.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1">rats_by_year <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> rats_clean <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(borough, sighting_year) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>())</span>
<span id="cb7-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `summarise()` has grouped output by 'borough'. You can override using the</span></span>
<span id="cb7-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `.groups` argument.</span></span>
<span id="cb7-6"></span>
<span id="cb7-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/plot-facets-unbalanced-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>For the sake of balance, you can get rid of that panel by changing the layout. There are 8 panels here, so we could make a rectangle that’s 4 wide and 2 tall (or 2 wide and 4 tall if you want a tall rectangle instead) using the <code>nrow</code> or <code>ncol</code> arguments to <code>facet_wrap()</code>:</p>
<div class="tabset-margin-container"></div><div class="panel-tabset">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" aria-controls="tabset-1-1" aria-selected="true">4 columns</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" aria-controls="tabset-1-2" aria-selected="false">4 rows</a></li></ul>
<div class="tab-content">
<div id="tabset-1-1" class="tab-pane active" aria-labelledby="tabset-1-1-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/facet-4-cols-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-2" class="tab-pane" aria-labelledby="tabset-1-2-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">nrow =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/facet-4-rows-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<p>Alternatively you can stick something in that empty panel like your legend (though in this example it’s better to not even have a legend because <a href="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06.html#double-encoding-and-excessive-legends">it’s redundant with the x-axis</a>). The <code>reposition_legend()</code> function from the {lemon} package makes this really easy:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(lemon)</span>
<span id="cb10-2"></span>
<span id="cb10-3">p <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> borough)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guide_legend</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"top"</span>))</span>
<span id="cb10-7"></span>
<span id="cb10-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">reposition_legend</span>(p, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom left"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">panel =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"panel-3-3"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/plot-legend-corner-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>You can even be fancy and add some explanatory text to that corner. It takes a big of extra work—you essentially have to create a fake text-only plot using <code>grid::textGrob()</code> and then use <code>inset_element()</code> from the {patchwork} to place it on top of the main plot:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(grid)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># For making custom grid grobs</span></span>
<span id="cb11-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(patchwork)</span>
<span id="cb11-3"></span>
<span id="cb11-4"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make a little text-only plot</span></span>
<span id="cb11-5">extra_note <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">textGrob</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Here's some text</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">\n</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">about rats. Neato."</span>, </span>
<span id="cb11-6">                       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gp =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gpar</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fontface =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bold"</span>))</span>
<span id="cb11-7"></span>
<span id="cb11-8"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Run this if you want to see it by itself:</span></span>
<span id="cb11-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># grid.draw(extra_note)</span></span>
<span id="cb11-10"></span>
<span id="cb11-11">p <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb11-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb11-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year))</span>
<span id="cb11-14"></span>
<span id="cb11-15"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Add the text-only plot as an inset plot with patchwork</span></span>
<span id="cb11-16">p <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">inset_element</span>(extra_note, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">left =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.7</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">bottom =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.0</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">right =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">top =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.3</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/plot-note-corner-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="overlapping-text" class="level3">
<h3 class="anchored" data-anchor-id="overlapping-text">Overlapping text</h3>
<blockquote class="blockquote">
<p>The labels along the x-axis are unreadable and overlapping.</p>
</blockquote>
<p>There are lots of ways to fix this—<a href="https://www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/">see this whole blog post for some different options</a>. Here are some quick examples (none of these are fabulous, but they’re a start):</p>
<div class="tabset-margin-container"></div><div class="panel-tabset">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-2-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-2-1" aria-controls="tabset-2-1" aria-selected="true">Swap x- and y-axes</a></li><li class="nav-item"><a class="nav-link" id="tabset-2-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-2-2" aria-controls="tabset-2-2" aria-selected="false">Rotate labels</a></li><li class="nav-item"><a class="nav-link" id="tabset-2-3-tab" data-bs-toggle="tab" data-bs-target="#tabset-2-3" aria-controls="tabset-2-3" aria-selected="false">Dodge labels</a></li></ul>
<div class="tab-content">
<div id="tabset-2-1" class="tab-pane active" aria-labelledby="tabset-2-1-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> total, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> borough)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb12-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb12-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/overlap-swap-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-2-2" class="tab-pane" aria-labelledby="tabset-2-2-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">axis.text.x =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">angle =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">30</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">vjust =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/overlap-rotate-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-2-3" class="tab-pane" aria-labelledby="tabset-2-3-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_by_year, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sighting_year), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ncol =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_discrete</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">guide =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guide_axis</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">n.dodge =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/overlap-dodge-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="commas" class="level3">
<h3 class="anchored" data-anchor-id="commas">Commas</h3>
<blockquote class="blockquote">
<p>Consider adding automatic commas to the x-axis by including <code>library(scales)</code> and adding <code>scale_x_continuous(labels = label_comma())</code></p>
</blockquote>
<p>You can make nicer labels by formatting them with <code>label_comma()</code> (or any of the other <code>label_*()</code> functions) from the {scales} package. <a href="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06.html#i-have-numbers-like-20000-and-want-them-formatted-with-commas-like-20000.-can-i-do-that-automatically">See here for a lot more details</a>.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(scales)</span>
<span id="cb15-2"></span>
<span id="cb15-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(rats_summarized, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> borough, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_y_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01_files/figure-html/comma-example-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>


</section>

 ]]></description>
  <category>faq</category>
  <category>feedback</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-12_feedback_mini-project-01.html</guid>
  <pubDate>Wed, 12 Jul 2023 21:17:00 GMT</pubDate>
</item>
<item>
  <title>Making cleaner, nicer R Markdown output</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-12_cleaner-nicer-rmd-output.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>Now that we’re nearing the end of the semester and you’re more familiar with working with R and R Markdown, I have a bunch of helpful tips to make sure your documents look as nice and readable as possible. Here we go!</p>
<section id="knit-often" class="level3">
<h3 class="anchored" data-anchor-id="knit-often">Knit often</h3>
<p>Don’t wait until you’ve finished typing your entire document before knitting. Knit to HTML occasionally to make sure all your code runs from a fresh session and to make sure all the extra warnings and messages and any other strange output is taken care of.</p>
<p>Even if your final document won’t be an HTML file, I recommend knitting to HTML often because (1) it’s fast and (2) you can see the output in an easily-refreshable web browser immediately. When you knit to PDF, you have to wait a few extra seconds for LaTeX to compile the rendered Markdown file into PDF, and then you have to reopen the PDF file if you had it open previously. When you knit to Word, if you have a previous version of the .docx file open already, your computer will get mad (especially on Windows), so you have to remember to always close the knitted document in Word before reknitting it, and that’s annoying and you’ll inevitably forget.</p>
<p>So knit to HTML often. Then at the end, once you know everything is working right and the document looks nice and clean, knit to PDF or Word or whatever your final output will be.</p>
</section>
<section id="check-that-your-text-looks-okay" class="level3">
<h3 class="anchored" data-anchor-id="check-that-your-text-looks-okay">Check that your text looks okay</h3>
<p>When knitting, you should also check your text to make sure it looks okay. Here are some common issues that you’ll see with your text:</p>
<section id="headings-that-arent-headings" class="level4">
<h4 class="anchored" data-anchor-id="headings-that-arent-headings">Headings that aren’t headings</h4>
<p>Often you’ll want to make a heading for one of your sections and you’ll type this:</p>
<div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb1-1">#Task 1: Reflection</span></code></pre></div>
<p>When you knit that, though, it’ll look like this:</p>
<blockquote class="blockquote">
<p>#Task 1: Reflection</p>
</blockquote>
<p>That’s not a heading—that’s just a regular paragraph. For a <code>#</code>-style heading to turn into an actual heading, you need a space after the <code>#</code> and an empty line after the heading text:</p>
<div class="sourceCode" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb2-1"># Task 1: Reflection</span>
<span id="cb2-2"></span>
<span id="cb2-3">Some text</span>
<span id="cb2-4"></span>
<span id="cb2-5">## A subheading</span>
<span id="cb2-6"></span>
<span id="cb2-7">Some more text</span></code></pre></div>
</section>
<section id="paragraphs-that-arent-paragraphs" class="level4">
<h4 class="anchored" data-anchor-id="paragraphs-that-arent-paragraphs">Paragraphs that aren’t paragraphs</h4>
<p>You’re used to indenting paragraphs in Word or Google Docs. First-line indentation is a normal thing with word processors.</p>
<p>Indenting lines is <strong>unnecessary</strong> with Markdown and will mess up your text.</p>
<p>For example, let’s say you type something like this:</p>
<div class="sourceCode" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb3-1">    It was the best of times, it was the worst of times, it was the age of </span>
<span id="cb3-2">wisdom, it was the age of foolishness, it was the epoch of belief, it was the </span>
<span id="cb3-3">epoch of incredulity, it was the season of Light, it was the season of Darkness, </span>
<span id="cb3-4">it was the spring of hope, it was the winter of despair, we had everything </span>
<span id="cb3-5">before us, we had nothing before us, we were all going direct to Heaven, we were </span>
<span id="cb3-6">all going direct the other way—in short, the period was so far like the present </span>
<span id="cb3-7">period, that some of its noisiest authorities insisted on its being received, </span>
<span id="cb3-8">for good or for evil, in the superlative degree of comparison only.</span>
<span id="cb3-9"></span>
<span id="cb3-10">    There were a king with a large jaw and a queen with a plain face, on the </span>
<span id="cb3-11">throne of England; there were a king with a large jaw and a queen with a fair </span>
<span id="cb3-12">face, on the throne of France. In both countries it was clearer than crystal to </span>
<span id="cb3-13">the lords of the State preserves of loaves and fishes, that things in general </span>
<span id="cb3-14">were settled for ever. </span></code></pre></div>
<p>That looks like Word-style text, with indented paragraphs. When you knit it, though, it’ll turn into code-formatted monospaced text that runs off the edge of the page:</p>
<blockquote class="blockquote">
<pre><code>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever. </code></pre>
</blockquote>
<p>That’s because Markdown treats anything that is indented with four spaces as <em>code</em>, not as text.</p>
<p><strong>You shouldn’t indent your text.</strong> Instead, add an empty line between each paragraph to separate them.</p>
</section>
<section id="lists-that-arent-lists" class="level4">
<h4 class="anchored" data-anchor-id="lists-that-arent-lists">Lists that aren’t lists</h4>
<p>Due to esoteric historical reasons, the end of lines (i.e.&nbsp;what happens when you press <kbd>enter</kbd> when typing) is different on Macs and Windows. I use a Mac, and I typed the exercise templates on a Mac, so they have Mac-style line endings. That means that on Windows, you’ll sometimes see text that looks normal like this:</p>
<div class="sourceCode" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb5-1">- Here's a list</span>
<span id="cb5-2">- Stuff goes here</span>
<span id="cb5-3">- Neato</span></code></pre></div>
<p>That should theoretically turn into a list, but when you knit it, you see this:</p>
<blockquote class="blockquote">
<ul>
<li>Here’s a list - Stuff goes here - Neato</li>
</ul>
</blockquote>
<p>That’s not a list! The easiest way to fix that is to delete the line break at the end of “list” in that first line and then press enter (and so on), so that it turns in to this when knitting:</p>
<blockquote class="blockquote">
<ul>
<li>Here’s a list</li>
<li>Stuff goes here</li>
<li>Neato</li>
</ul>
</blockquote>
</section>
</section>
<section id="dont-install-packages-in-your-document" class="level3">
<h3 class="anchored" data-anchor-id="dont-install-packages-in-your-document">Don’t install packages in your document</h3>
<p>Make sure you don’t include code to install packages in your Rmd files. Like, don’t include <code>install.packages("ggtext")</code> or whatever. If you do, R will reinstall that package every time you knit your document, which is excessive. All you need to do is load the package with <code>library()</code></p>
<p>To help myself remember to not include package installation code in my document, I make an effort to either install packages with my mouse by clicking on the “Install” button in the Packages panel in RStudio, or only ever typing (or copying/pasting) code like <code>install.packages("whatever")</code> directly in the R console and never putting it in a chunk.</p>
</section>
<section id="clean-up-warnings-and-messages" class="level3">
<h3 class="anchored" data-anchor-id="clean-up-warnings-and-messages">Clean up warnings and messages</h3>
<p>Ideally, your document shouldn’t have any errors, warnings, or messages in it. Some packages are talkative, like {tidyverse}:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb6-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ── Attaching core tidyverse packages ──────────────────────── tidyverse 2.0.0 ──</span></span>
<span id="cb6-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ dplyr     1.1.2     ✔ readr     2.1.4</span></span>
<span id="cb6-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ forcats   1.0.0     ✔ stringr   1.5.0</span></span>
<span id="cb6-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ ggplot2   3.4.2     ✔ tibble    3.2.1</span></span>
<span id="cb6-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ lubridate 1.9.2     ✔ tidyr     1.3.0</span></span>
<span id="cb6-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ purrr     1.0.1     </span></span>
<span id="cb6-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──</span></span>
<span id="cb6-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✖ dplyr::filter() masks stats::filter()</span></span>
<span id="cb6-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✖ dplyr::lag()    masks stats::lag()</span></span>
<span id="cb6-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ℹ Use the conflicted package (&lt;http://conflicted.r-lib.org/&gt;) to force all conflicts to become errors</span></span></code></pre></div>
</div>
<p>Some functions are talkative, like <code>summarize()</code> after working on more than one group:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1">mpg <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, drv) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(hwy))</span>
<span id="cb7-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `summarise()` has grouped output by 'year'. You can override using the</span></span>
<span id="cb7-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `.groups` argument.</span></span>
<span id="cb7-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 6 × 3</span></span>
<span id="cb7-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # Groups:   year [2]</span></span>
<span id="cb7-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    year drv     avg</span></span>
<span id="cb7-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;int&gt; &lt;chr&gt; &lt;dbl&gt;</span></span>
<span id="cb7-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1  1999 4      18.8</span></span>
<span id="cb7-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2  1999 f      27.9</span></span>
<span id="cb7-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3  1999 r      20.6</span></span>
<span id="cb7-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4  2008 4      19.5</span></span>
<span id="cb7-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5  2008 f      28.4</span></span>
<span id="cb7-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 6  2008 r      21.3</span></span></code></pre></div>
</div>
<p>Or <code>geom_smooth()</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_smooth</span>()</span>
<span id="cb8-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `geom_smooth()` using method = 'loess' and formula = 'y ~ x'</span></span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-12_cleaner-nicer-rmd-output_files/figure-html/mpg-smooth-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>When you have code that you know will return some sort of message, add <code>message=FALSE</code> to the chunk options for it. When you have code that you know will make some sort of warning, (1) try to fix it so that the warning doesn’t happen, or (2) add <code>warning=FALSE</code> to the chunk options for it.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb9-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r load-packages, warning=FALSE, message=FALSE}</span></span>
<span id="cb9-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb9-3"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
<p>Knitting often and scrolling through the rendered document will help you check that you don’t have any extra output like warnings, messages, and errors too.</p>
</section>
<section id="global-chunk-options" class="level3">
<h3 class="anchored" data-anchor-id="global-chunk-options">Global chunk options</h3>
<p>You can control the settings for all the chunks in your document by using <code>knitr::opts_chunk$set()</code>. You can use any knitr chunk options (see <a href="https://www.rstudio.com/wp-content/uploads/2015/03/rmarkdown-reference.pdf">here</a> or <a href="https://yihui.org/knitr/options/">here</a> for a complete list).</p>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Let R make the code for you
</div>
</div>
<div class="callout-body-container callout-body">
<p>I never remember the full name of that function, but you can get it if you go to “File &gt; New File &gt; R Markdown”; it’s part of the Rmd template RStudio makes for you.</p>
</div>
</div>
<p>For instance, if you want to hide all the code in your document, you could either go add <code>echo=FALSE</code> to each chunk individually, or you could add it to the global chunk options:</p>
<div class="sourceCode" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1">knitr<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">::</span>opts_chunk<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">set</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">echo =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)</span></code></pre></div>
<p>You could hide all warnings and messages there too:</p>
<div class="sourceCode" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1">knitr<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">::</span>opts_chunk<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">set</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">warning =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">message =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)</span></code></pre></div>
<p><strong><em>BUT</em></strong> I don’t recommend doing that ↑ normally. Warnings are helpful—when you get them, you’ll typically want to try to deal with them. Instead of hiding them, try to fix them. If you can’t fix them (like when you run <code>library(tidyverse)</code>), then you can hide them for that chunk.</p>
<p>You can also set default figure dimensions and lots of other settings. I typically include something like this at the start of my documents:</p>
<div class="sourceCode" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1">knitr<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">::</span>opts_chunk<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">set</span>(</span>
<span id="cb12-2">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.width =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span>, </span>
<span id="cb12-3">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.height =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.618</span>,  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Golden rectangles!</span></span>
<span id="cb12-4">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.align =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"center"</span>, </span>
<span id="cb12-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">out.width =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"80%"</span></span>
<span id="cb12-6">)</span></code></pre></div>
<p>Make sure you hide the chunk that contains those settings with something like <code>include=FALSE</code>, otherwise you’ll see it in your document:</p>
<div class="sourceCode" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb13-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r document-chunk-options, include=FALSE}</span></span>
<span id="cb13-2">knitr<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">::</span>opts_chunk<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">set</span>(</span>
<span id="cb13-3">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.width =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span>, </span>
<span id="cb13-4">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.height =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.618</span>,  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Golden rectangles!</span></span>
<span id="cb13-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fig.align =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"center"</span>, </span>
<span id="cb13-6">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">out.width =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"80%"</span></span>
<span id="cb13-7">)</span>
<span id="cb13-8"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</section>
<section id="fancy-document-settings" class="level3">
<h3 class="anchored" data-anchor-id="fancy-document-settings">Fancy document settings</h3>
<p>You can make your documents prettier by changing the settings for different outputs (<a href="https://bookdown.org/yihui/rmarkdown/documents.html">see this for complete documentation</a>).</p>
<p>For example, if you want a different font in PDFs, you can include something like this in your frontmatter. <a href="https://bookdown.org/yihui/rmarkdown/pdf-document.html">See here for complete details.</a></p>
<div class="sourceCode" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb14-1"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span>
<span id="cb14-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">title</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb14-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">date</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb14-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">output</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb14-5"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">pdf_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb14-6"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">latex_engine</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> xelatex</span><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">  # This lets LaTeX work with different fonts</span></span>
<span id="cb14-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mainfont</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> Garamond</span></span>
<span id="cb14-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fontsize</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> 10pt</span></span>
<span id="cb14-9"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span></code></pre></div>
<p>If you want a different template for HTML (<a href="https://bootswatch.com/3/">you can use these</a>, or if you know HTML and CSS, you can make your own), you can do something like this. <a href="https://bookdown.org/yihui/rmarkdown/html-document.html">See here for complete details.</a></p>
<div class="sourceCode" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb15-1"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span>
<span id="cb15-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">title</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb15-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">date</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb15-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">output</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb15-5"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">html_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb15-6"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> united</span></span>
<span id="cb15-7"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span></code></pre></div>
<p>You can’t do much with Word because Microsoft makes it hard to do anything to .docx files, but you can create a .docx file where you define a bunch of style settings (e.g., make Heading 1 a specific sans serif font, left-aligned, bold; make Heading 2 the same font and not bold; make main paragraphs an 11pt serif font; and so on), and then you can inject those styles into the knitted document like this. <a href="https://bookdown.org/yihui/rmarkdown/word-document.html">See here for complete details.</a></p>
<div class="sourceCode" id="cb16" style="background: #f1f3f5;"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb16-1"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span>
<span id="cb16-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">title</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb16-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">date</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb16-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">output</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb16-5"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">word_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb16-6"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">reference_docx</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> my-neat-styles.docx</span></span>
<span id="cb16-7"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span></code></pre></div>
<p>You can keep all those output-specific settings in the same document—knitr will only use the settings required for each output (i.e.&nbsp;if you knit to PDF it’ll ignore the HTML settings):</p>
<div class="sourceCode" id="cb17" style="background: #f1f3f5;"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb17-1"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span>
<span id="cb17-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">title</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb17-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">date</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> </span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Whatever"</span></span>
<span id="cb17-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">output</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb17-5"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">pdf_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb17-6"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">latex_engine</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> xelatex</span><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">  # This lets LaTeX work with different fonts</span></span>
<span id="cb17-7"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">html_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb17-8"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> united</span></span>
<span id="cb17-9"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">  </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">word_document</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span></span>
<span id="cb17-10"><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">    </span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">reference_docx</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> my-neat-styles.docx</span></span>
<span id="cb17-11"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mainfont</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> Garamond</span></span>
<span id="cb17-12"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fontsize</span><span class="kw" style="color: #003B4F;
background-color: null;
font-style: inherit;">:</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;"> 10pt</span></span>
<span id="cb17-13"><span class="pp" style="color: #AD0000;
background-color: null;
font-style: inherit;">---</span></span></code></pre></div>
<p>You can get really fancy with this stuff. For example, <a href="https://github.com/andrewheiss/cautioning-canary/blob/master/manuscript/manuscript.Rmd">this Rmd file</a> creates four different kinds of customized output (<a href="https://stats.andrewheiss.com/cautioning-canary/">see here</a>):</p>
<ul>
<li><a href="https://stats.andrewheiss.com/cautioning-canary/output/manuscript.pdf">PDF</a></li>
<li><a href="https://stats.andrewheiss.com/cautioning-canary/output/manuscript-ms.pdf">Manuscripty PDF</a></li>
<li><a href="https://stats.andrewheiss.com/cautioning-canary/output/manuscript.html">HTML</a></li>
<li><a href="https://stats.andrewheiss.com/cautioning-canary/output/manuscript.docx">Word</a></li>
</ul>
</section>
<section id="quarto" class="level3">
<h3 class="anchored" data-anchor-id="quarto">Quarto</h3>
<p>If you want even fancier documents, try the next generation of R Markdown called <a href="https://quarto.org/">Quarto</a>. It makes it a billion times easier to do things like change fonts, use cross references (i.e.&nbsp;write things like “see Figure 1” or “see Table 3”), use citations (automatic APA or Chicago citation styles!), use fancier layouts, and so on.</p>
<p>This course website is built with Quarto. Check out this for an example of an academic paper written with Quarto:</p>
<ul>
<li><a href="https://github.com/andrewheiss/mountainous-mackerel/blob/main/manuscript/manuscript.qmd">.qmd file</a></li>
<li><a href="https://stats.andrewheiss.com/mountainous-mackerel/analysis/paper.html">PDF, manuscripty PDF, and HTML output for that .qmd file</a></li>
</ul>
<p><a href="https://quarto.org/docs/guide/">Quarto has great documentation</a>, it’s fully supported in RStudio already, and you basically already know how to use it. It’s just .Rmd with fancier, newer features.</p>
</section>
<section id="chunk-names" class="level3">
<h3 class="anchored" data-anchor-id="chunk-names">Chunk names</h3>
<p><a href="../resource/rmarkdown.html#chunk-names">Labeling your R chunks is a good thing to do</a>, since it helps with document navigation and is generally good practice. If you’re using chunk labels <strong>make sure you don’t use spaces</strong> in them. R will still knit a document with spaceful names, but it converts the spaces to underscores before doing it. So instead of naming chunks like <code>{r My Neat Chunk, message=FALSE}</code>, use something like <code>{r my-neat-chunk}</code> or <code>{r my_neat_chunk}</code>.</p>


</section>

 ]]></description>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-12_cleaner-nicer-rmd-output.html</guid>
  <pubDate>Wed, 12 Jul 2023 18:24:00 GMT</pubDate>
</item>
<item>
  <title>Sessions 9 and 10 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>I just finished grading your mini projects and exercises 9 and 10 and I’m super happy with how you all are doing and how much you’ve learned so far! Keep up the great work!</p>
<p>I have a few FAQs and tips/tricks/suggestions based exercises 9 and 10. I’ll do a separate post with my most common feedback from mini project 1.</p>
<section id="in-my-coefficient-plot-the-coefficient-for-per_capita_income-didnt-have-error-bars-around-it.-why" class="level3">
<h3 class="anchored" data-anchor-id="in-my-coefficient-plot-the-coefficient-for-per_capita_income-didnt-have-error-bars-around-it.-why">In my coefficient plot, the coefficient for <code>per_capita_income</code> didn’t have error bars around it. Why?</h3>
<p>(Technically this was from session 7, but I got a lot of questions about it after I posted the FAQs for sessions 7 and 8, so here it is.)</p>
<p>In <a href="../assignment/07-exercise.html">exercise 7</a> you created a coefficient plot for a regression model predicting Democratic vote share in the 2016 presidential election based on a bunch of county-level characteristics:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb1-2">results_2016 <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">read_csv</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"https://datavizs23.classes.andrewheiss.com/files/data/external_data/results_2016.csv"</span>)</span></code></pre></div>
</div>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(broom)</span>
<span id="cb2-2"></span>
<span id="cb2-3">model <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">lm</span>(percent_dem <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> median_age <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> percent_white <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> </span>
<span id="cb2-4">              per_capita_income <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> median_rent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> state,</span>
<span id="cb2-5">            <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> results_2016)</span>
<span id="cb2-6"></span>
<span id="cb2-7">results <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tidy</span>(model, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">conf.int =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb2-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_detect</span>(term, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"state"</span>))</span>
<span id="cb2-9"></span>
<span id="cb2-10">results</span>
<span id="cb2-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 5 × 7</span></span>
<span id="cb2-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   term               estimate std.error statistic   p.value  conf.low conf.high</span></span>
<span id="cb2-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;                 &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;</span></span>
<span id="cb2-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 (Intercept)       58.5      1.66          35.3  5.73e-229 55.2      61.8     </span></span>
<span id="cb2-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 median_age         0.166    0.0368         4.52 6.33e-  6  0.0942    0.238   </span></span>
<span id="cb2-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 percent_white     -0.682    0.0110       -61.9  0         -0.704    -0.661   </span></span>
<span id="cb2-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 per_capita_income  0.000271 0.0000497      5.46 5.18e-  8  0.000174  0.000369</span></span>
<span id="cb2-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 median_rent        0.0200   0.00163       12.3  6.23e- 34  0.0168    0.0232</span></span></code></pre></div>
</div>
<p>The point ranges in the plot show the coefficient and the confidence interval around the coefficient. Median rent and per capita income here are just dots, though. Did something go wrong? Why is there no confidence interval?</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(results, term <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"(Intercept)"</span>), </span>
<span id="cb3-2">       <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> estimate, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> term)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_pointrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> conf.low, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> conf.high))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-model-original-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>There is a confidence interval, it’s just really tiny! That’s because of how these variables are measured in the data. Each county has a dollar amount recorded for rent and income:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1">results_2016 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">select</span>(state, county, per_capita_income, median_rent)</span>
<span id="cb4-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 3,158 × 4</span></span>
<span id="cb4-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    state   county   per_capita_income median_rent</span></span>
<span id="cb4-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;chr&gt;   &lt;chr&gt;                &lt;dbl&gt;       &lt;dbl&gt;</span></span>
<span id="cb4-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 Alabama Autauga              24571         668</span></span>
<span id="cb4-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 Alabama Baldwin              26766         693</span></span>
<span id="cb4-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 Alabama Barbour              16829         382</span></span>
<span id="cb4-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 Alabama Bibb                 17427         351</span></span>
<span id="cb4-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 Alabama Blount               20730         403</span></span>
<span id="cb4-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 Alabama Bullock              18628         276</span></span>
<span id="cb4-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 Alabama Butler               17403         331</span></span>
<span id="cb4-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 Alabama Calhoun              20828         422</span></span>
<span id="cb4-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 Alabama Chambers             19291         374</span></span>
<span id="cb4-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 Alabama Cherokee             22030         375</span></span>
<span id="cb4-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 3,148 more rows</span></span></code></pre></div>
</div>
<p>When looking at the regression coefficient, we interpret then using single dollars. We’d say something like “A $1 increase in per capita income is associated with a 0.00027 percentage point increase in Democratic vote share, on average.”</p>
<p>Talking about $1 changes, though, is weird because that kind of change in income really isn’t detectable. That’d be like looking at what happens to voting patterns if income in a county goes from $30,000 to $30,001 or $65,000 to $65,001. Nothing’s going to happen to voting patterns! If the original democratic vote share was 60%, a $1 increase in income would increase that by 0.00027 percentage points to 60.00027%.</p>
<p>To make that coefficient more interpretable we can scale down the income column and think of it as hundreds or thousands of dollars instead. We can do that by making a new column in the data…</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1">results_2016 <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> results_2016 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">per_capita_income_1000 =</span> per_capita_income <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">/</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1000</span>)</span>
<span id="cb5-3"></span>
<span id="cb5-4">results_2016 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">select</span>(state, county, per_capita_income_1000, per_capita_income)</span>
<span id="cb5-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 3,158 × 4</span></span>
<span id="cb5-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    state   county   per_capita_income_1000 per_capita_income</span></span>
<span id="cb5-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;chr&gt;   &lt;chr&gt;                     &lt;dbl&gt;             &lt;dbl&gt;</span></span>
<span id="cb5-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 Alabama Autauga                    24.6             24571</span></span>
<span id="cb5-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 Alabama Baldwin                    26.8             26766</span></span>
<span id="cb5-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 Alabama Barbour                    16.8             16829</span></span>
<span id="cb5-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 Alabama Bibb                       17.4             17427</span></span>
<span id="cb5-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 Alabama Blount                     20.7             20730</span></span>
<span id="cb5-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 Alabama Bullock                    18.6             18628</span></span>
<span id="cb5-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 Alabama Butler                     17.4             17403</span></span>
<span id="cb5-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 Alabama Calhoun                    20.8             20828</span></span>
<span id="cb5-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 Alabama Chambers                   19.3             19291</span></span>
<span id="cb5-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 Alabama Cherokee                   22.0             22030</span></span>
<span id="cb5-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 3,148 more rows</span></span></code></pre></div>
</div>
<p>…and then using that new <code>per_capita_income_1000</code> in the model instead:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1">model <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">lm</span>(percent_dem <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> median_age <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> percent_white <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> </span>
<span id="cb6-2">              per_capita_income_1000 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> median_rent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> state,</span>
<span id="cb6-3">            <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> results_2016)</span>
<span id="cb6-4"></span>
<span id="cb6-5">results <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tidy</span>(model, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">conf.int =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_detect</span>(term, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"state"</span>))</span>
<span id="cb6-7"></span>
<span id="cb6-8">results</span>
<span id="cb6-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 5 × 7</span></span>
<span id="cb6-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   term                 estimate std.error statistic   p.value conf.low conf.high</span></span>
<span id="cb6-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;                   &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;     &lt;dbl&gt;    &lt;dbl&gt;     &lt;dbl&gt;</span></span>
<span id="cb6-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 (Intercept)           58.5      1.66        35.3  5.73e-229  55.2      61.8   </span></span>
<span id="cb6-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 median_age             0.166    0.0368       4.52 6.33e-  6   0.0942    0.238 </span></span>
<span id="cb6-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 percent_white         -0.682    0.0110     -61.9  0          -0.704    -0.661 </span></span>
<span id="cb6-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 per_capita_income_1…   0.271    0.0497       5.46 5.18e-  8   0.174     0.369 </span></span>
<span id="cb6-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 median_rent            0.0200   0.00163     12.3  6.23e- 34   0.0168    0.0232</span></span></code></pre></div>
</div>
<p>Now the coefficient is bigger and we have a more visible confidence interval:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(results, term <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"(Intercept)"</span>), </span>
<span id="cb7-2">       <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> estimate, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> term)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb7-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_pointrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> conf.low, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> conf.high))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-model-new-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Now we can say something like “A $1,000 increase in per capita income is associated with a 0.27 percentage point increase in Democratic vote share, on average” (or going from something like 60% to 60.27%)</p>
</section>
<section id="the-importance-of-layer-order" class="level3">
<h3 class="anchored" data-anchor-id="the-importance-of-layer-order">The importance of layer order</h3>
<p>So far this semester, most of your plots have involved one or two <code>geom_*</code> layers. At one point in some video (I think), I mentioned that layer order doesn’t matter with ggplot. These two chunks of code create identical plots:</p>
<div class="sourceCode" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_viridis_c</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(...)</span>
<span id="cb8-7"></span>
<span id="cb8-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_fill_viridis_c</span>(...)</span></code></pre></div>
<p>All those functions can happen in whatever order you want, <strong>with one exception</strong>. The order of the geom layers matters. The first geom layer you specify will be plotted first, the second will go on top of it, and so on.</p>
<p>Let’s say you want to have a violin plot with jittered points on top. If you put <code>geom_point()</code> first, the points will be hidden by the violins:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(palmerpenguins)</span>
<span id="cb9-2">penguins <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> penguins <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">drop_na</span>(sex)</span>
<span id="cb9-3"></span>
<span id="cb9-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> species, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">position =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">position_jitter</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">seed =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1234</span>), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb9-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_violin</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> species))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-violin-top-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>To fix it, make sure <code>geom_violin()</code> comes first:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> species, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_violin</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb10-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">position =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">position_jitter</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">seed =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1234</span>), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-violin-bottom-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>You saw this back in exercise 7 too when you plotted the predicted values of your regression model with <code>geom_line()</code> and a confidence interval with <code>geom_ribbon()</code>. If you put the line first, then the ribbon, the ribbon covers up the line—here that line should be bright red, but the grey of the ribbon makes it darker:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(marginaleffects)</span>
<span id="cb11-2"></span>
<span id="cb11-3">my_predictions <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">predictions</span>(</span>
<span id="cb11-4">  model,</span>
<span id="cb11-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">newdata =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">datagrid</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">median_age =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">seq</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">21</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">60</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>),</span>
<span id="cb11-6">                     <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Georgia"</span>))</span>
<span id="cb11-7"></span>
<span id="cb11-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(my_predictions, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> median_age, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> estimate)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb11-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_line</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">linewidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"red"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb11-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_ribbon</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> conf.low, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> conf.high), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-ribbon-top-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>If you put the ribbon first and then the line, the line is the correct shade of red:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(my_predictions, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> median_age, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> estimate)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb12-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_ribbon</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> conf.low, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> conf.high), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb12-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_line</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">linewidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"red"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-ribbon-bottom-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>This layer order applies to annotation layers too. If you want to highlight an area of the plot (or highlight a recession, like in session 11), adding a rectangle after the geom layers will cover things up, like this ugly yellow rectangle here:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"rect"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">40</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">60</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5000</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6100</span>,</span>
<span id="cb13-4">           <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"yellow"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.75</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-rect-top-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>To fix that, put that <code>annotate()</code> layer first, then add other geoms on top:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"rect"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">40</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">60</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5000</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6100</span>,</span>
<span id="cb14-3">           <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"yellow"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.75</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-rect-bottom-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>This doesn’t mean <em>all</em> <code>annotate()</code> layers should come first—if you want an extra label on top of a geom, make sure it comes after:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Yellow rectangle behind everything</span></span>
<span id="cb15-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"rect"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">40</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">60</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5000</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6100</span>,</span>
<span id="cb15-4">           <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"yellow"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.75</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-5">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Points</span></span>
<span id="cb15-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-7">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Label on top of the points and the rectangle</span></span>
<span id="cb15-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"label"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">50</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5500</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"chonky birds"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/plot-rect-bottom-label-top-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
My personal preferred general layer order
</div>
</div>
<div class="callout-body-container callout-body">
<p>When I make my plots, I try to keep my layers in logical groups. I’ll do my geoms and annotations first, then scale adjustments, then guide adjustments, then labels, then facets (if any), and end with theme adjustments, like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb16" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb16-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(scales)</span>
<span id="cb16-2"></span>
<span id="cb16-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Annotations and geoms</span></span>
<span id="cb16-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"rect"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">40</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">xmax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">60</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymin =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5000</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ymax =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6100</span>,</span>
<span id="cb16-6">           <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"yellow"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.75</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"label"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">50</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5500</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"chonky birds"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-9">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Scale adjustments</span></span>
<span id="cb16-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_si</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"mm"</span>))) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_y_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_si</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"g"</span>))) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_viridis_d</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">option =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"plasma"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">end =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.6</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-13">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Guide adjustments</span></span>
<span id="cb16-14">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guide_legend</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"left"</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-15">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Labels</span></span>
<span id="cb16-16">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Bill length"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Body mass"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Species:"</span>,</span>
<span id="cb16-17">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Some title"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">subtitle =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Penguins!"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">caption =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Blah"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-18">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Facets</span></span>
<span id="cb16-19">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(sex)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-20">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Theme stuff</span></span>
<span id="cb16-21">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-22">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">plot.title =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">face =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bold"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">rel</span>(<span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">1.4</span>)),</span>
<span id="cb16-23">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">plot.caption =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"grey50"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>),</span>
<span id="cb16-24">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">axis.title.x =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>),</span>
<span id="cb16-25">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">axis.title.y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>),</span>
<span id="cb16-26">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">strip.text =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">face =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bold"</span>),</span>
<span id="cb16-27">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom"</span>,</span>
<span id="cb16-28">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.justification =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">-</span><span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.04</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>),</span>
<span id="cb16-29">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.title =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">rel</span>(<span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.9</span>)))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10_files/figure-html/example-ordering-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>This is totally arbitrary though! All that really matters is that the geoms and annotations are in the right order and that any theme adjustments you make with <code>theme()</code> come after a more general theme like <code>theme_grey()</code> or <code>theme_minimal()</code>, etc.. I’d recommend you figure out your own preferred style and try to stay consistent—it’ll make your life easier and more predictable.</p>
</div>
</div>
</section>
<section id="my-plot-didnt-translate-perfectly-to-ggplotlywhy" class="level3">
<h3 class="anchored" data-anchor-id="my-plot-didnt-translate-perfectly-to-ggplotlywhy">My plot didn’t translate perfectly to ggplotly—why?</h3>
<p>In session 10 you used <code>ggplotly()</code> to convert a ggplot object into an interactive plot, which I think is magical:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb17" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb17-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(plotly)</span>
<span id="cb17-2"></span>
<span id="cb17-3">basic_plot <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb17-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span>
<span id="cb17-5"></span>
<span id="cb17-6"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplotly</span>(basic_plot)</span></code></pre></div>
<div class="cell-output-display">
<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-7a53dcc2a94e577f8966" style="width:90%;height:355.968px;"></div>
<script type="application/json" data-for="htmlwidget-7a53dcc2a94e577f8966">{"x":{"data":[{"x":[39.1,39.5,40.3,36.7,39.3,38.9,39.2,41.1,38.6,34.6,36.6,38.7,42.5,34.4,46,37.8,37.7,35.9,38.2,38.8,35.3,40.6,40.5,37.9,40.5,39.5,37.2,39.5,40.9,36.4,39.2,38.8,42.2,37.6,39.8,36.5,40.8,36,44.1,37,39.6,41.1,36,42.3,39.6,40.1,35,42,34.5,41.4,39,40.6,36.5,37.6,35.7,41.3,37.6,41.1,36.4,41.6,35.5,41.1,35.9,41.8,33.5,39.7,39.6,45.8,35.5,42.8,40.9,37.2,36.2,42.1,34.6,42.9,36.7,35.1,37.3,41.3,36.3,36.9,38.3,38.9,35.7,41.1,34,39.6,36.2,40.8,38.1,40.3,33.1,43.2,35,41,37.7,37.8,37.9,39.7,38.6,38.2,38.1,43.2,38.1,45.6,39.7,42.2,39.6,42.7,38.6,37.3,35.7,41.1,36.2,37.7,40.2,41.4,35.2,40.6,38.8,41.5,39,44.1,38.5,43.1,36.8,37.5,38.1,41.1,35.6,40.2,37,39.7,40.2,40.6,32.1,40.7,37.3,39,39.2,36.6,36,37.8,36,41.5],"y":[3750,3800,3250,3450,3650,3625,4675,3200,3800,4400,3700,3450,4500,3325,4200,3400,3600,3800,3950,3800,3800,3550,3200,3150,3950,3250,3900,3300,3900,3325,4150,3950,3550,3300,4650,3150,3900,3100,4400,3000,4600,3425,3450,4150,3500,4300,3450,4050,2900,3700,3550,3800,2850,3750,3150,4400,3600,4050,2850,3950,3350,4100,3050,4450,3600,3900,3550,4150,3700,4250,3700,3900,3550,4000,3200,4700,3800,4200,3350,3550,3800,3500,3950,3600,3550,4300,3400,4450,3300,4300,3700,4350,2900,4100,3725,4725,3075,4250,2925,3550,3750,3900,3175,4775,3825,4600,3200,4275,3900,4075,2900,3775,3350,3325,3150,3500,3450,3875,3050,4000,3275,4300,3050,4000,3325,3500,3500,4475,3425,3900,3175,3975,3400,4250,3400,3475,3050,3725,3000,3650,4250,3475,3450,3750,3700,4000],"text":["bill_length_mm: 39.1<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 40.3<br />body_mass_g: 3250<br />species: Adelie","bill_length_mm: 36.7<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 39.3<br />body_mass_g: 3650<br />species: Adelie","bill_length_mm: 38.9<br />body_mass_g: 3625<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4675<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 34.6<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 36.6<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 38.7<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.5<br />body_mass_g: 4500<br />species: Adelie","bill_length_mm: 34.4<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 46.0<br />body_mass_g: 4200<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 35.9<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 38.2<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 35.3<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 40.5<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 37.9<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 40.5<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3250<br />species: Adelie","bill_length_mm: 37.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 40.9<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.4<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 42.2<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 39.8<br />body_mass_g: 4650<br />species: Adelie","bill_length_mm: 36.5<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 40.8<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3100<br />species: Adelie","bill_length_mm: 44.1<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 37.0<br />body_mass_g: 3000<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 4600<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3425<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.3<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 40.1<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 35.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.0<br />body_mass_g: 4050<br />species: Adelie","bill_length_mm: 34.5<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 41.4<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 36.5<br />body_mass_g: 2850<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 41.3<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4050<br />species: Adelie","bill_length_mm: 36.4<br />body_mass_g: 2850<br />species: Adelie","bill_length_mm: 41.6<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 35.5<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4100<br />species: Adelie","bill_length_mm: 35.9<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 41.8<br />body_mass_g: 4450<br />species: Adelie","bill_length_mm: 33.5<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 45.8<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 35.5<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 42.8<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 40.9<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 37.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 42.1<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 34.6<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 42.9<br />body_mass_g: 4700<br />species: Adelie","bill_length_mm: 36.7<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 35.1<br />body_mass_g: 4200<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.3<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 36.3<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 36.9<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 38.3<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 38.9<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 34.0<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 4450<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 40.8<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 40.3<br />body_mass_g: 4350<br />species: Adelie","bill_length_mm: 33.1<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 43.2<br />body_mass_g: 4100<br />species: Adelie","bill_length_mm: 35.0<br />body_mass_g: 3725<br />species: Adelie","bill_length_mm: 41.0<br />body_mass_g: 4725<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3075<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 37.9<br />body_mass_g: 2925<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 38.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3175<br />species: Adelie","bill_length_mm: 43.2<br />body_mass_g: 4775<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3825<br />species: Adelie","bill_length_mm: 45.6<br />body_mass_g: 4600<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 42.2<br />body_mass_g: 4275<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 42.7<br />body_mass_g: 4075<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3775<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 41.4<br />body_mass_g: 3875<br />species: Adelie","bill_length_mm: 35.2<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3275<br />species: Adelie","bill_length_mm: 41.5<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 44.1<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 38.5<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 43.1<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 36.8<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 37.5<br />body_mass_g: 4475<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3425<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 35.6<br />body_mass_g: 3175<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3975<br />species: Adelie","bill_length_mm: 37.0<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3475<br />species: Adelie","bill_length_mm: 32.1<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 40.7<br />body_mass_g: 3725<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3000<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3650<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 36.6<br />body_mass_g: 3475<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 41.5<br />body_mass_g: 4000<br />species: Adelie"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(248,118,109,1)"}},"hoveron":"points","name":"Adelie","legendgroup":"Adelie","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[46.5,50,51.3,45.4,52.7,45.2,46.1,51.3,46,51.3,46.6,51.7,47,52,45.9,50.5,50.3,58,46.4,49.2,42.4,48.5,43.2,50.6,46.7,52,50.5,49.5,46.4,52.8,40.9,54.2,42.5,51,49.7,47.5,47.6,52,46.9,53.5,49,46.2,50.9,45.5,50.9,50.8,50.1,49,51.5,49.8,48.1,51.4,45.7,50.7,42.5,52.2,45.2,49.3,50.2,45.6,51.9,46.8,45.7,55.8,43.5,49.6,50.8,50.2],"y":[3500,3900,3650,3525,3725,3950,3250,3750,4150,3700,3800,3775,3700,4050,3575,4050,3300,3700,3450,4400,3600,3400,2900,3800,3300,4150,3400,3800,3700,4550,3200,4300,3350,4100,3600,3900,3850,4800,2700,4500,3950,3650,3550,3500,3675,4450,3400,4300,3250,3675,3325,3950,3600,4050,3350,3450,3250,4050,3800,3525,3950,3650,3650,4000,3400,3775,4100,3775],"text":["bill_length_mm: 46.5<br />body_mass_g: 3500<br />species: Chinstrap","bill_length_mm: 50.0<br />body_mass_g: 3900<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 45.4<br />body_mass_g: 3525<br />species: Chinstrap","bill_length_mm: 52.7<br />body_mass_g: 3725<br />species: Chinstrap","bill_length_mm: 45.2<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.1<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3750<br />species: Chinstrap","bill_length_mm: 46.0<br />body_mass_g: 4150<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 46.6<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 51.7<br />body_mass_g: 3775<br />species: Chinstrap","bill_length_mm: 47.0<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 45.9<br />body_mass_g: 3575<br />species: Chinstrap","bill_length_mm: 50.5<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 50.3<br />body_mass_g: 3300<br />species: Chinstrap","bill_length_mm: 58.0<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 46.4<br />body_mass_g: 3450<br />species: Chinstrap","bill_length_mm: 49.2<br />body_mass_g: 4400<br />species: Chinstrap","bill_length_mm: 42.4<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 48.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 43.2<br />body_mass_g: 2900<br />species: Chinstrap","bill_length_mm: 50.6<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 46.7<br />body_mass_g: 3300<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4150<br />species: Chinstrap","bill_length_mm: 50.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.5<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 46.4<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 52.8<br />body_mass_g: 4550<br />species: Chinstrap","bill_length_mm: 40.9<br />body_mass_g: 3200<br />species: Chinstrap","bill_length_mm: 54.2<br />body_mass_g: 4300<br />species: Chinstrap","bill_length_mm: 42.5<br />body_mass_g: 3350<br />species: Chinstrap","bill_length_mm: 51.0<br />body_mass_g: 4100<br />species: Chinstrap","bill_length_mm: 49.7<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 47.5<br />body_mass_g: 3900<br />species: Chinstrap","bill_length_mm: 47.6<br />body_mass_g: 3850<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4800<br />species: Chinstrap","bill_length_mm: 46.9<br />body_mass_g: 2700<br />species: Chinstrap","bill_length_mm: 53.5<br />body_mass_g: 4500<br />species: Chinstrap","bill_length_mm: 49.0<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.2<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 50.9<br />body_mass_g: 3550<br />species: Chinstrap","bill_length_mm: 45.5<br />body_mass_g: 3500<br />species: Chinstrap","bill_length_mm: 50.9<br />body_mass_g: 3675<br />species: Chinstrap","bill_length_mm: 50.8<br />body_mass_g: 4450<br />species: Chinstrap","bill_length_mm: 50.1<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.0<br />body_mass_g: 4300<br />species: Chinstrap","bill_length_mm: 51.5<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 49.8<br />body_mass_g: 3675<br />species: Chinstrap","bill_length_mm: 48.1<br />body_mass_g: 3325<br />species: Chinstrap","bill_length_mm: 51.4<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 45.7<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 50.7<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 42.5<br />body_mass_g: 3350<br />species: Chinstrap","bill_length_mm: 52.2<br />body_mass_g: 3450<br />species: Chinstrap","bill_length_mm: 45.2<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 49.3<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 50.2<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 45.6<br />body_mass_g: 3525<br />species: Chinstrap","bill_length_mm: 51.9<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.8<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 45.7<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 55.8<br />body_mass_g: 4000<br />species: Chinstrap","bill_length_mm: 43.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.6<br />body_mass_g: 3775<br />species: Chinstrap","bill_length_mm: 50.8<br />body_mass_g: 4100<br />species: Chinstrap","bill_length_mm: 50.2<br />body_mass_g: 3775<br />species: Chinstrap"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,186,56,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,186,56,1)"}},"hoveron":"points","name":"Chinstrap","legendgroup":"Chinstrap","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[46.1,50,48.7,50,47.6,46.5,45.4,46.7,43.3,46.8,40.9,49,45.5,48.4,45.8,49.3,42,49.2,46.2,48.7,50.2,45.1,46.5,46.3,42.9,46.1,47.8,48.2,50,47.3,42.8,45.1,59.6,49.1,48.4,42.6,44.4,44,48.7,42.7,49.6,45.3,49.6,50.5,43.6,45.5,50.5,44.9,45.2,46.6,48.5,45.1,50.1,46.5,45,43.8,45.5,43.2,50.4,45.3,46.2,45.7,54.3,45.8,49.8,49.5,43.5,50.7,47.7,46.4,48.2,46.5,46.4,48.6,47.5,51.1,45.2,45.2,49.1,52.5,47.4,50,44.9,50.8,43.4,51.3,47.5,52.1,47.5,52.2,45.5,49.5,44.5,50.8,49.4,46.9,48.4,51.1,48.5,55.9,47.2,49.1,46.8,41.7,53.4,43.3,48.1,50.5,49.8,43.5,51.5,46.2,55.1,48.8,47.2,46.8,50.4,45.2,49.9],"y":[4500,5700,4450,5700,5400,4550,4800,5200,4400,5150,4650,5550,4650,5850,4200,5850,4150,6300,4800,5350,5700,5000,4400,5050,5000,5100,5650,4600,5550,5250,4700,5050,6050,5150,5400,4950,5250,4350,5350,3950,5700,4300,4750,5550,4900,4200,5400,5100,5300,4850,5300,4400,5000,4900,5050,4300,5000,4450,5550,4200,5300,4400,5650,4700,5700,5800,4700,5550,4750,5000,5100,5200,4700,5800,4600,6000,4750,5950,4625,5450,4725,5350,4750,5600,4600,5300,4875,5550,4950,5400,4750,5650,4850,5200,4925,4875,4625,5250,4850,5600,4975,5500,5500,4700,5500,4575,5500,5000,5950,4650,5500,4375,5850,6000,4925,4850,5750,5200,5400],"text":["bill_length_mm: 46.1<br />body_mass_g: 4500<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 4450<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 47.6<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4550<br />species: Gentoo","bill_length_mm: 45.4<br />body_mass_g: 4800<br />species: Gentoo","bill_length_mm: 46.7<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 43.3<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 5150<br />species: Gentoo","bill_length_mm: 40.9<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 49.0<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 45.8<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 49.3<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 42.0<br />body_mass_g: 4150<br />species: Gentoo","bill_length_mm: 49.2<br />body_mass_g: 6300<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 4800<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 50.2<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 46.3<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 42.9<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.1<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 47.8<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 48.2<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.3<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 42.8<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 59.6<br />body_mass_g: 6050<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 5150<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 42.6<br />body_mass_g: 4950<br />species: Gentoo","bill_length_mm: 44.4<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 44.0<br />body_mass_g: 4350<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 42.7<br />body_mass_g: 3950<br />species: Gentoo","bill_length_mm: 49.6<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 45.3<br />body_mass_g: 4300<br />species: Gentoo","bill_length_mm: 49.6<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 43.6<br />body_mass_g: 4900<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 44.9<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 46.6<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 48.5<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 50.1<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4900<br />species: Gentoo","bill_length_mm: 45.0<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 43.8<br />body_mass_g: 4300<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 43.2<br />body_mass_g: 4450<br />species: Gentoo","bill_length_mm: 50.4<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 45.3<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 45.7<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 54.3<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 45.8<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 49.8<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 49.5<br />body_mass_g: 5800<br />species: Gentoo","bill_length_mm: 43.5<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 50.7<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.7<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 46.4<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 48.2<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 46.4<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 48.6<br />body_mass_g: 5800<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 51.1<br />body_mass_g: 6000<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5950<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 4625<br />species: Gentoo","bill_length_mm: 52.5<br />body_mass_g: 5450<br />species: Gentoo","bill_length_mm: 47.4<br />body_mass_g: 4725<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 44.9<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 50.8<br />body_mass_g: 5600<br />species: Gentoo","bill_length_mm: 43.4<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 51.3<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4875<br />species: Gentoo","bill_length_mm: 52.1<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4950<br />species: Gentoo","bill_length_mm: 52.2<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 49.5<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 44.5<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 50.8<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 49.4<br />body_mass_g: 4925<br />species: Gentoo","bill_length_mm: 46.9<br />body_mass_g: 4875<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 4625<br />species: Gentoo","bill_length_mm: 51.1<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 48.5<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 55.9<br />body_mass_g: 5600<br />species: Gentoo","bill_length_mm: 47.2<br />body_mass_g: 4975<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 41.7<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 53.4<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 43.3<br />body_mass_g: 4575<br />species: Gentoo","bill_length_mm: 48.1<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 49.8<br />body_mass_g: 5950<br />species: Gentoo","bill_length_mm: 43.5<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 51.5<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 4375<br />species: Gentoo","bill_length_mm: 55.1<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 48.8<br />body_mass_g: 6000<br />species: Gentoo","bill_length_mm: 47.2<br />body_mass_g: 4925<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 50.4<br />body_mass_g: 5750<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 49.9<br />body_mass_g: 5400<br />species: Gentoo"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(97,156,255,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(97,156,255,1)"}},"hoveron":"points","name":"Gentoo","legendgroup":"Gentoo","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":27.8219030308404,"r":7.30593607305936,"b":41.7762409303838,"l":48.9497716894977},"plot_bgcolor":"rgba(235,235,235,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[30.725,60.975],"tickmode":"array","ticktext":["40","50","60"],"tickvals":[40,50,60],"categoryorder":"array","categoryarray":["40","50","60"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"bill_length_mm","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2520,6480],"tickmode":"array","ticktext":["3000","4000","5000","6000"],"tickvals":[3000,4000,5000,6000],"categoryorder":"array","categoryarray":["3000","4000","5000","6000"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"body_mass_g","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"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":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.88976377952756,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895},"title":{"text":"species","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"799754c0442":{"x":{},"y":{},"colour":{},"type":"scatter"}},"cur_data":"799754c0442","visdat":{"799754c0442":["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>
</div>
</div>
<p>&nbsp;</p>
<p>However, lots of you discovered that Plotly does not translate everything perfectly. Plotly is a separate Javascript library and it doesn’t support every option ggplot does. <code>ggplotly()</code> tries its best to translate between R and Javascript, but it can’t get everything. For instance, subtitles, captions, and labels disappear:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb18" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb18-1">fancy_plot <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(penguins, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"label"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">50</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5500</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"chonky birds"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Penguin bill length and weight"</span>,</span>
<span id="cb18-5">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">subtitle =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Neato"</span>, </span>
<span id="cb18-6">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">caption =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Here's a caption"</span>)</span>
<span id="cb18-7"></span>
<span id="cb18-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplotly</span>(fancy_plot)</span></code></pre></div>
<div class="cell-output-display">
<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-90b6008ecac515657141" style="width:90%;height:355.968px;"></div>
<script type="application/json" data-for="htmlwidget-90b6008ecac515657141">{"x":{"data":[{"x":[39.1,39.5,40.3,36.7,39.3,38.9,39.2,41.1,38.6,34.6,36.6,38.7,42.5,34.4,46,37.8,37.7,35.9,38.2,38.8,35.3,40.6,40.5,37.9,40.5,39.5,37.2,39.5,40.9,36.4,39.2,38.8,42.2,37.6,39.8,36.5,40.8,36,44.1,37,39.6,41.1,36,42.3,39.6,40.1,35,42,34.5,41.4,39,40.6,36.5,37.6,35.7,41.3,37.6,41.1,36.4,41.6,35.5,41.1,35.9,41.8,33.5,39.7,39.6,45.8,35.5,42.8,40.9,37.2,36.2,42.1,34.6,42.9,36.7,35.1,37.3,41.3,36.3,36.9,38.3,38.9,35.7,41.1,34,39.6,36.2,40.8,38.1,40.3,33.1,43.2,35,41,37.7,37.8,37.9,39.7,38.6,38.2,38.1,43.2,38.1,45.6,39.7,42.2,39.6,42.7,38.6,37.3,35.7,41.1,36.2,37.7,40.2,41.4,35.2,40.6,38.8,41.5,39,44.1,38.5,43.1,36.8,37.5,38.1,41.1,35.6,40.2,37,39.7,40.2,40.6,32.1,40.7,37.3,39,39.2,36.6,36,37.8,36,41.5],"y":[3750,3800,3250,3450,3650,3625,4675,3200,3800,4400,3700,3450,4500,3325,4200,3400,3600,3800,3950,3800,3800,3550,3200,3150,3950,3250,3900,3300,3900,3325,4150,3950,3550,3300,4650,3150,3900,3100,4400,3000,4600,3425,3450,4150,3500,4300,3450,4050,2900,3700,3550,3800,2850,3750,3150,4400,3600,4050,2850,3950,3350,4100,3050,4450,3600,3900,3550,4150,3700,4250,3700,3900,3550,4000,3200,4700,3800,4200,3350,3550,3800,3500,3950,3600,3550,4300,3400,4450,3300,4300,3700,4350,2900,4100,3725,4725,3075,4250,2925,3550,3750,3900,3175,4775,3825,4600,3200,4275,3900,4075,2900,3775,3350,3325,3150,3500,3450,3875,3050,4000,3275,4300,3050,4000,3325,3500,3500,4475,3425,3900,3175,3975,3400,4250,3400,3475,3050,3725,3000,3650,4250,3475,3450,3750,3700,4000],"text":["bill_length_mm: 39.1<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 40.3<br />body_mass_g: 3250<br />species: Adelie","bill_length_mm: 36.7<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 39.3<br />body_mass_g: 3650<br />species: Adelie","bill_length_mm: 38.9<br />body_mass_g: 3625<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4675<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 34.6<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 36.6<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 38.7<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.5<br />body_mass_g: 4500<br />species: Adelie","bill_length_mm: 34.4<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 46.0<br />body_mass_g: 4200<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 35.9<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 38.2<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 35.3<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 40.5<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 37.9<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 40.5<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3250<br />species: Adelie","bill_length_mm: 37.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 39.5<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 40.9<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.4<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 42.2<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 39.8<br />body_mass_g: 4650<br />species: Adelie","bill_length_mm: 36.5<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 40.8<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3100<br />species: Adelie","bill_length_mm: 44.1<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 37.0<br />body_mass_g: 3000<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 4600<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3425<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.3<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 40.1<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 35.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 42.0<br />body_mass_g: 4050<br />species: Adelie","bill_length_mm: 34.5<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 41.4<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 36.5<br />body_mass_g: 2850<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 41.3<br />body_mass_g: 4400<br />species: Adelie","bill_length_mm: 37.6<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4050<br />species: Adelie","bill_length_mm: 36.4<br />body_mass_g: 2850<br />species: Adelie","bill_length_mm: 41.6<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 35.5<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4100<br />species: Adelie","bill_length_mm: 35.9<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 41.8<br />body_mass_g: 4450<br />species: Adelie","bill_length_mm: 33.5<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 45.8<br />body_mass_g: 4150<br />species: Adelie","bill_length_mm: 35.5<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 42.8<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 40.9<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 37.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 42.1<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 34.6<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 42.9<br />body_mass_g: 4700<br />species: Adelie","bill_length_mm: 36.7<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 35.1<br />body_mass_g: 4200<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.3<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 36.3<br />body_mass_g: 3800<br />species: Adelie","bill_length_mm: 36.9<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 38.3<br />body_mass_g: 3950<br />species: Adelie","bill_length_mm: 38.9<br />body_mass_g: 3600<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 34.0<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 4450<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3300<br />species: Adelie","bill_length_mm: 40.8<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 40.3<br />body_mass_g: 4350<br />species: Adelie","bill_length_mm: 33.1<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 43.2<br />body_mass_g: 4100<br />species: Adelie","bill_length_mm: 35.0<br />body_mass_g: 3725<br />species: Adelie","bill_length_mm: 41.0<br />body_mass_g: 4725<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3075<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 37.9<br />body_mass_g: 2925<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3550<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 38.2<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3175<br />species: Adelie","bill_length_mm: 43.2<br />body_mass_g: 4775<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3825<br />species: Adelie","bill_length_mm: 45.6<br />body_mass_g: 4600<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 3200<br />species: Adelie","bill_length_mm: 42.2<br />body_mass_g: 4275<br />species: Adelie","bill_length_mm: 39.6<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 42.7<br />body_mass_g: 4075<br />species: Adelie","bill_length_mm: 38.6<br />body_mass_g: 2900<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3775<br />species: Adelie","bill_length_mm: 35.7<br />body_mass_g: 3350<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 36.2<br />body_mass_g: 3150<br />species: Adelie","bill_length_mm: 37.7<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 41.4<br />body_mass_g: 3875<br />species: Adelie","bill_length_mm: 35.2<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 38.8<br />body_mass_g: 3275<br />species: Adelie","bill_length_mm: 41.5<br />body_mass_g: 4300<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 44.1<br />body_mass_g: 4000<br />species: Adelie","bill_length_mm: 38.5<br />body_mass_g: 3325<br />species: Adelie","bill_length_mm: 43.1<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 36.8<br />body_mass_g: 3500<br />species: Adelie","bill_length_mm: 37.5<br />body_mass_g: 4475<br />species: Adelie","bill_length_mm: 38.1<br />body_mass_g: 3425<br />species: Adelie","bill_length_mm: 41.1<br />body_mass_g: 3900<br />species: Adelie","bill_length_mm: 35.6<br />body_mass_g: 3175<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3975<br />species: Adelie","bill_length_mm: 37.0<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 39.7<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 40.2<br />body_mass_g: 3400<br />species: Adelie","bill_length_mm: 40.6<br />body_mass_g: 3475<br />species: Adelie","bill_length_mm: 32.1<br />body_mass_g: 3050<br />species: Adelie","bill_length_mm: 40.7<br />body_mass_g: 3725<br />species: Adelie","bill_length_mm: 37.3<br />body_mass_g: 3000<br />species: Adelie","bill_length_mm: 39.0<br />body_mass_g: 3650<br />species: Adelie","bill_length_mm: 39.2<br />body_mass_g: 4250<br />species: Adelie","bill_length_mm: 36.6<br />body_mass_g: 3475<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3450<br />species: Adelie","bill_length_mm: 37.8<br />body_mass_g: 3750<br />species: Adelie","bill_length_mm: 36.0<br />body_mass_g: 3700<br />species: Adelie","bill_length_mm: 41.5<br />body_mass_g: 4000<br />species: Adelie"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(248,118,109,1)"}},"hoveron":"points","name":"Adelie","legendgroup":"Adelie","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[46.5,50,51.3,45.4,52.7,45.2,46.1,51.3,46,51.3,46.6,51.7,47,52,45.9,50.5,50.3,58,46.4,49.2,42.4,48.5,43.2,50.6,46.7,52,50.5,49.5,46.4,52.8,40.9,54.2,42.5,51,49.7,47.5,47.6,52,46.9,53.5,49,46.2,50.9,45.5,50.9,50.8,50.1,49,51.5,49.8,48.1,51.4,45.7,50.7,42.5,52.2,45.2,49.3,50.2,45.6,51.9,46.8,45.7,55.8,43.5,49.6,50.8,50.2],"y":[3500,3900,3650,3525,3725,3950,3250,3750,4150,3700,3800,3775,3700,4050,3575,4050,3300,3700,3450,4400,3600,3400,2900,3800,3300,4150,3400,3800,3700,4550,3200,4300,3350,4100,3600,3900,3850,4800,2700,4500,3950,3650,3550,3500,3675,4450,3400,4300,3250,3675,3325,3950,3600,4050,3350,3450,3250,4050,3800,3525,3950,3650,3650,4000,3400,3775,4100,3775],"text":["bill_length_mm: 46.5<br />body_mass_g: 3500<br />species: Chinstrap","bill_length_mm: 50.0<br />body_mass_g: 3900<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 45.4<br />body_mass_g: 3525<br />species: Chinstrap","bill_length_mm: 52.7<br />body_mass_g: 3725<br />species: Chinstrap","bill_length_mm: 45.2<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.1<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3750<br />species: Chinstrap","bill_length_mm: 46.0<br />body_mass_g: 4150<br />species: Chinstrap","bill_length_mm: 51.3<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 46.6<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 51.7<br />body_mass_g: 3775<br />species: Chinstrap","bill_length_mm: 47.0<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 45.9<br />body_mass_g: 3575<br />species: Chinstrap","bill_length_mm: 50.5<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 50.3<br />body_mass_g: 3300<br />species: Chinstrap","bill_length_mm: 58.0<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 46.4<br />body_mass_g: 3450<br />species: Chinstrap","bill_length_mm: 49.2<br />body_mass_g: 4400<br />species: Chinstrap","bill_length_mm: 42.4<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 48.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 43.2<br />body_mass_g: 2900<br />species: Chinstrap","bill_length_mm: 50.6<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 46.7<br />body_mass_g: 3300<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4150<br />species: Chinstrap","bill_length_mm: 50.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.5<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 46.4<br />body_mass_g: 3700<br />species: Chinstrap","bill_length_mm: 52.8<br />body_mass_g: 4550<br />species: Chinstrap","bill_length_mm: 40.9<br />body_mass_g: 3200<br />species: Chinstrap","bill_length_mm: 54.2<br />body_mass_g: 4300<br />species: Chinstrap","bill_length_mm: 42.5<br />body_mass_g: 3350<br />species: Chinstrap","bill_length_mm: 51.0<br />body_mass_g: 4100<br />species: Chinstrap","bill_length_mm: 49.7<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 47.5<br />body_mass_g: 3900<br />species: Chinstrap","bill_length_mm: 47.6<br />body_mass_g: 3850<br />species: Chinstrap","bill_length_mm: 52.0<br />body_mass_g: 4800<br />species: Chinstrap","bill_length_mm: 46.9<br />body_mass_g: 2700<br />species: Chinstrap","bill_length_mm: 53.5<br />body_mass_g: 4500<br />species: Chinstrap","bill_length_mm: 49.0<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.2<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 50.9<br />body_mass_g: 3550<br />species: Chinstrap","bill_length_mm: 45.5<br />body_mass_g: 3500<br />species: Chinstrap","bill_length_mm: 50.9<br />body_mass_g: 3675<br />species: Chinstrap","bill_length_mm: 50.8<br />body_mass_g: 4450<br />species: Chinstrap","bill_length_mm: 50.1<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.0<br />body_mass_g: 4300<br />species: Chinstrap","bill_length_mm: 51.5<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 49.8<br />body_mass_g: 3675<br />species: Chinstrap","bill_length_mm: 48.1<br />body_mass_g: 3325<br />species: Chinstrap","bill_length_mm: 51.4<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 45.7<br />body_mass_g: 3600<br />species: Chinstrap","bill_length_mm: 50.7<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 42.5<br />body_mass_g: 3350<br />species: Chinstrap","bill_length_mm: 52.2<br />body_mass_g: 3450<br />species: Chinstrap","bill_length_mm: 45.2<br />body_mass_g: 3250<br />species: Chinstrap","bill_length_mm: 49.3<br />body_mass_g: 4050<br />species: Chinstrap","bill_length_mm: 50.2<br />body_mass_g: 3800<br />species: Chinstrap","bill_length_mm: 45.6<br />body_mass_g: 3525<br />species: Chinstrap","bill_length_mm: 51.9<br />body_mass_g: 3950<br />species: Chinstrap","bill_length_mm: 46.8<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 45.7<br />body_mass_g: 3650<br />species: Chinstrap","bill_length_mm: 55.8<br />body_mass_g: 4000<br />species: Chinstrap","bill_length_mm: 43.5<br />body_mass_g: 3400<br />species: Chinstrap","bill_length_mm: 49.6<br />body_mass_g: 3775<br />species: Chinstrap","bill_length_mm: 50.8<br />body_mass_g: 4100<br />species: Chinstrap","bill_length_mm: 50.2<br />body_mass_g: 3775<br />species: Chinstrap"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,186,56,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,186,56,1)"}},"hoveron":"points","name":"Chinstrap","legendgroup":"Chinstrap","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[46.1,50,48.7,50,47.6,46.5,45.4,46.7,43.3,46.8,40.9,49,45.5,48.4,45.8,49.3,42,49.2,46.2,48.7,50.2,45.1,46.5,46.3,42.9,46.1,47.8,48.2,50,47.3,42.8,45.1,59.6,49.1,48.4,42.6,44.4,44,48.7,42.7,49.6,45.3,49.6,50.5,43.6,45.5,50.5,44.9,45.2,46.6,48.5,45.1,50.1,46.5,45,43.8,45.5,43.2,50.4,45.3,46.2,45.7,54.3,45.8,49.8,49.5,43.5,50.7,47.7,46.4,48.2,46.5,46.4,48.6,47.5,51.1,45.2,45.2,49.1,52.5,47.4,50,44.9,50.8,43.4,51.3,47.5,52.1,47.5,52.2,45.5,49.5,44.5,50.8,49.4,46.9,48.4,51.1,48.5,55.9,47.2,49.1,46.8,41.7,53.4,43.3,48.1,50.5,49.8,43.5,51.5,46.2,55.1,48.8,47.2,46.8,50.4,45.2,49.9],"y":[4500,5700,4450,5700,5400,4550,4800,5200,4400,5150,4650,5550,4650,5850,4200,5850,4150,6300,4800,5350,5700,5000,4400,5050,5000,5100,5650,4600,5550,5250,4700,5050,6050,5150,5400,4950,5250,4350,5350,3950,5700,4300,4750,5550,4900,4200,5400,5100,5300,4850,5300,4400,5000,4900,5050,4300,5000,4450,5550,4200,5300,4400,5650,4700,5700,5800,4700,5550,4750,5000,5100,5200,4700,5800,4600,6000,4750,5950,4625,5450,4725,5350,4750,5600,4600,5300,4875,5550,4950,5400,4750,5650,4850,5200,4925,4875,4625,5250,4850,5600,4975,5500,5500,4700,5500,4575,5500,5000,5950,4650,5500,4375,5850,6000,4925,4850,5750,5200,5400],"text":["bill_length_mm: 46.1<br />body_mass_g: 4500<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 4450<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 47.6<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4550<br />species: Gentoo","bill_length_mm: 45.4<br />body_mass_g: 4800<br />species: Gentoo","bill_length_mm: 46.7<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 43.3<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 5150<br />species: Gentoo","bill_length_mm: 40.9<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 49.0<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 45.8<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 49.3<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 42.0<br />body_mass_g: 4150<br />species: Gentoo","bill_length_mm: 49.2<br />body_mass_g: 6300<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 4800<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 50.2<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 46.3<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 42.9<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.1<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 47.8<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 48.2<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.3<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 42.8<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 59.6<br />body_mass_g: 6050<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 5150<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 42.6<br />body_mass_g: 4950<br />species: Gentoo","bill_length_mm: 44.4<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 44.0<br />body_mass_g: 4350<br />species: Gentoo","bill_length_mm: 48.7<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 42.7<br />body_mass_g: 3950<br />species: Gentoo","bill_length_mm: 49.6<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 45.3<br />body_mass_g: 4300<br />species: Gentoo","bill_length_mm: 49.6<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 43.6<br />body_mass_g: 4900<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 44.9<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 46.6<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 48.5<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 45.1<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 50.1<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 4900<br />species: Gentoo","bill_length_mm: 45.0<br />body_mass_g: 5050<br />species: Gentoo","bill_length_mm: 43.8<br />body_mass_g: 4300<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 43.2<br />body_mass_g: 4450<br />species: Gentoo","bill_length_mm: 50.4<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 45.3<br />body_mass_g: 4200<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 45.7<br />body_mass_g: 4400<br />species: Gentoo","bill_length_mm: 54.3<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 45.8<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 49.8<br />body_mass_g: 5700<br />species: Gentoo","bill_length_mm: 49.5<br />body_mass_g: 5800<br />species: Gentoo","bill_length_mm: 43.5<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 50.7<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.7<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 46.4<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 48.2<br />body_mass_g: 5100<br />species: Gentoo","bill_length_mm: 46.5<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 46.4<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 48.6<br />body_mass_g: 5800<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 51.1<br />body_mass_g: 6000<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5950<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 4625<br />species: Gentoo","bill_length_mm: 52.5<br />body_mass_g: 5450<br />species: Gentoo","bill_length_mm: 47.4<br />body_mass_g: 4725<br />species: Gentoo","bill_length_mm: 50.0<br />body_mass_g: 5350<br />species: Gentoo","bill_length_mm: 44.9<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 50.8<br />body_mass_g: 5600<br />species: Gentoo","bill_length_mm: 43.4<br />body_mass_g: 4600<br />species: Gentoo","bill_length_mm: 51.3<br />body_mass_g: 5300<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4875<br />species: Gentoo","bill_length_mm: 52.1<br />body_mass_g: 5550<br />species: Gentoo","bill_length_mm: 47.5<br />body_mass_g: 4950<br />species: Gentoo","bill_length_mm: 52.2<br />body_mass_g: 5400<br />species: Gentoo","bill_length_mm: 45.5<br />body_mass_g: 4750<br />species: Gentoo","bill_length_mm: 49.5<br />body_mass_g: 5650<br />species: Gentoo","bill_length_mm: 44.5<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 50.8<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 49.4<br />body_mass_g: 4925<br />species: Gentoo","bill_length_mm: 46.9<br />body_mass_g: 4875<br />species: Gentoo","bill_length_mm: 48.4<br />body_mass_g: 4625<br />species: Gentoo","bill_length_mm: 51.1<br />body_mass_g: 5250<br />species: Gentoo","bill_length_mm: 48.5<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 55.9<br />body_mass_g: 5600<br />species: Gentoo","bill_length_mm: 47.2<br />body_mass_g: 4975<br />species: Gentoo","bill_length_mm: 49.1<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 41.7<br />body_mass_g: 4700<br />species: Gentoo","bill_length_mm: 53.4<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 43.3<br />body_mass_g: 4575<br />species: Gentoo","bill_length_mm: 48.1<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 50.5<br />body_mass_g: 5000<br />species: Gentoo","bill_length_mm: 49.8<br />body_mass_g: 5950<br />species: Gentoo","bill_length_mm: 43.5<br />body_mass_g: 4650<br />species: Gentoo","bill_length_mm: 51.5<br />body_mass_g: 5500<br />species: Gentoo","bill_length_mm: 46.2<br />body_mass_g: 4375<br />species: Gentoo","bill_length_mm: 55.1<br />body_mass_g: 5850<br />species: Gentoo","bill_length_mm: 48.8<br />body_mass_g: 6000<br />species: Gentoo","bill_length_mm: 47.2<br />body_mass_g: 4925<br />species: Gentoo","bill_length_mm: 46.8<br />body_mass_g: 4850<br />species: Gentoo","bill_length_mm: 50.4<br />body_mass_g: 5750<br />species: Gentoo","bill_length_mm: 45.2<br />body_mass_g: 5200<br />species: Gentoo","bill_length_mm: 49.9<br />body_mass_g: 5400<br />species: Gentoo"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(97,156,255,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(97,156,255,1)"}},"hoveron":"points","name":"Gentoo","legendgroup":"Gentoo","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":45.3561496061829,"r":7.30593607305936,"b":41.7762409303838,"l":48.9497716894977},"plot_bgcolor":"rgba(235,235,235,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"title":{"text":"Penguin bill length and weight","font":{"color":"rgba(0,0,0,1)","family":"","size":17.5342465753425},"x":0,"xref":"paper"},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[30.725,60.975],"tickmode":"array","ticktext":["40","50","60"],"tickvals":[40,50,60],"categoryorder":"array","categoryarray":["40","50","60"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"bill_length_mm","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2520,6480],"tickmode":"array","ticktext":["3000","4000","5000","6000"],"tickvals":[3000,4000,5000,6000],"categoryorder":"array","categoryarray":["3000","4000","5000","6000"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"body_mass_g","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"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":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.88976377952756,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895},"title":{"text":"species","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"7997ec5490a":{"x":{},"y":{},"colour":{},"type":"scatter"},"7994a3e708b":{"x":{},"y":{}}},"cur_data":"7997ec5490a","visdat":{"7997ec5490a":["function (y) ","x"],"7994a3e708b":["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>
</div>
</div>
<p>&nbsp;</p>
<p>That’s just a limitation with ggplot and plotly. If you want a perfect translation, you’ll need to hack into the guts of the translated Javascript and HTML and edit it manually to add those things.</p>
<p>Alternatively, you can check out other interactive plot packages. <a href="https://davidgohel.github.io/ggiraph/">{ggiraph}</a> makes really great and customizable interactive plots (and it supports things liek subtitles and captions and labels and other annotations ggplotly can’t), but with slightly different syntax:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb19" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb19-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(ggiraph)</span>
<span id="cb19-2"></span>
<span id="cb19-3">plot_thing <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> penguins) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point_interactive</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species,</span>
<span id="cb19-5">                             <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">tooltip =</span> species, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data_id =</span> species)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">annotate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">geom =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"label"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">50</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5500</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"chonky birds"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Penguin bill length and weight"</span>,</span>
<span id="cb19-8">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">subtitle =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Neato"</span>, </span>
<span id="cb19-9">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">caption =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Here's a caption"</span>)</span>
<span id="cb19-10"></span>
<span id="cb19-11"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">girafe</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">ggobj =</span> plot_thing)</span></code></pre></div>
<div class="cell-output-display">
<div class="girafe html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-edd9ffe7113690037c8a" style="width:90%;height:355.968px;"></div>
<script type="application/json" data-for="htmlwidget-edd9ffe7113690037c8a">{"x":{"html":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' class='ggiraph-svg' role='img' id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa' viewBox='0 0 432 266.98'>\n <defs id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_defs'>\n  <clipPath id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_c1'>\n   <rect x='0' y='0' width='432' height='266.98'/>\n  <\/clipPath>\n  <clipPath id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_c2'>\n   <rect x='43.06' y='39.14' width='301.13' height='182.36'/>\n  <\/clipPath>\n <\/defs>\n <g id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_rootg' class='ggiraph-svg-rootg'>\n  <g clip-path='url(#svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_c1)'>\n   <rect x='0' y='0' width='432' height='266.98' fill='#FFFFFF' fill-opacity='1' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.75' stroke-linejoin='round' stroke-linecap='round' class='ggiraph-svg-bg'/>\n   <rect x='0' y='0' width='432' height='266.98' fill='#FFFFFF' fill-opacity='1' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='round'/>\n  <\/g>\n  <g clip-path='url(#svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_c2)'>\n   <rect x='43.06' y='39.14' width='301.13' height='182.36' fill='#EBEBEB' fill-opacity='1' stroke='none'/>\n   <polyline points='43.06,176.37 344.19,176.37' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,130.32 344.19,130.32' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,84.27 344.19,84.27' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='85.62,221.50 85.62,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='185.16,221.50 185.16,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='284.71,221.50 284.71,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,199.40 344.19,199.40' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,153.35 344.19,153.35' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,107.30 344.19,107.30' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='43.06,61.24 344.19,61.24' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='135.39,221.50 135.39,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='234.94,221.50 234.94,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='334.48,221.50 334.48,39.14' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e1' cx='126.43' cy='164.86' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e2' cx='130.41' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e3' cx='138.38' cy='187.89' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e4' cx='102.54' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e5' cx='128.42' cy='169.47' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e6' cx='124.44' cy='170.62' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e7' cx='127.43' cy='122.26' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e8' cx='146.34' cy='190.19' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e9' cx='121.45' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e10' cx='81.63' cy='134.93' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e11' cx='101.54' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e12' cx='122.45' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e13' cx='160.28' cy='130.32' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e14' cx='79.64' cy='184.43' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e15' cx='195.12' cy='144.14' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e16' cx='113.49' cy='180.98' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e17' cx='112.49' cy='171.77' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e18' cx='94.57' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e19' cx='117.47' cy='155.65' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e20' cx='123.44' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e21' cx='88.6' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e22' cx='141.36' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e23' cx='140.37' cy='190.19' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e24' cx='114.48' cy='192.49' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e25' cx='140.37' cy='155.65' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e26' cx='130.41' cy='187.89' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e27' cx='107.52' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e28' cx='130.41' cy='185.58' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e29' cx='144.35' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e30' cx='99.55' cy='184.43' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e31' cx='127.43' cy='146.44' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e32' cx='123.44' cy='155.65' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e33' cx='157.29' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e34' cx='111.5' cy='185.58' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e35' cx='133.4' cy='123.41' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e36' cx='100.55' cy='192.49' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e37' cx='143.35' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e38' cx='95.57' cy='194.79' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e39' cx='176.2' cy='134.93' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e40' cx='105.52' cy='199.4' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e41' cx='131.41' cy='125.72' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e42' cx='146.34' cy='179.83' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e43' cx='95.57' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e44' cx='158.28' cy='146.44' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e45' cx='131.41' cy='176.37' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e46' cx='136.38' cy='139.53' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e47' cx='85.62' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e48' cx='155.3' cy='151.05' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e49' cx='80.64' cy='204' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e50' cx='149.33' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e51' cx='125.43' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e52' cx='141.36' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e53' cx='100.55' cy='206.31' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e54' cx='111.5' cy='164.86' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e55' cx='92.58' cy='192.49' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e56' cx='148.33' cy='134.93' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e57' cx='111.5' cy='171.77' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e58' cx='146.34' cy='151.05' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e59' cx='99.55' cy='206.31' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e60' cx='151.32' cy='155.65' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e61' cx='90.59' cy='183.28' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e62' cx='146.34' cy='148.74' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e63' cx='94.57' cy='197.1' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e64' cx='153.31' cy='132.62' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e65' cx='70.68' cy='171.77' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e66' cx='132.4' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e67' cx='131.41' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e68' cx='193.13' cy='146.44' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e69' cx='90.59' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e70' cx='163.26' cy='141.84' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e71' cx='144.35' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e72' cx='107.52' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e73' cx='97.56' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e74' cx='156.29' cy='153.35' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e75' cx='81.63' cy='190.19' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e76' cx='164.26' cy='121.11' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e77' cx='102.54' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e78' cx='86.61' cy='144.14' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e79' cx='108.51' cy='183.28' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e80' cx='148.33' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e81' cx='98.56' cy='162.56' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e82' cx='104.53' cy='176.37' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e83' cx='118.47' cy='155.65' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e84' cx='124.44' cy='171.77' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e85' cx='92.58' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e86' cx='146.34' cy='139.53' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e87' cx='75.66' cy='180.98' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e88' cx='131.41' cy='132.62' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e89' cx='97.56' cy='185.58' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e90' cx='143.35' cy='139.53' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e91' cx='116.47' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e92' cx='138.38' cy='137.23' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e93' cx='66.7' cy='204' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e94' cx='167.24' cy='148.74' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e95' cx='85.62' cy='166.01' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e96' cx='145.34' cy='119.96' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e97' cx='112.49' cy='195.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e98' cx='113.49' cy='141.84' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e99' cx='114.48' cy='202.85' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e100' cx='132.4' cy='174.07' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e101' cx='121.45' cy='164.86' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e102' cx='117.47' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e103' cx='116.47' cy='191.34' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e104' cx='167.24' cy='117.66' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e105' cx='116.47' cy='161.41' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e106' cx='191.13' cy='125.72' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e107' cx='132.4' cy='190.19' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e108' cx='157.29' cy='140.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e109' cx='131.41' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e110' cx='162.27' cy='149.89' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e111' cx='121.45' cy='204' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e112' cx='108.51' cy='163.71' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e113' cx='92.58' cy='183.28' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e114' cx='146.34' cy='184.43' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e115' cx='97.56' cy='192.49' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e116' cx='112.49' cy='176.37' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e117' cx='137.38' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e118' cx='149.33' cy='159.1' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e119' cx='87.61' cy='197.1' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e120' cx='141.36' cy='153.35' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e121' cx='123.44' cy='186.74' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e122' cx='150.32' cy='139.53' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e123' cx='125.43' cy='197.1' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e124' cx='176.2' cy='153.35' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e125' cx='120.46' cy='184.43' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e126' cx='166.25' cy='176.37' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e127' cx='103.53' cy='176.37' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e128' cx='110.5' cy='131.47' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e129' cx='116.47' cy='179.83' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e130' cx='146.34' cy='157.95' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e131' cx='91.59' cy='191.34' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e132' cx='137.38' cy='154.5' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e133' cx='105.52' cy='180.98' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e134' cx='132.4' cy='141.84' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e135' cx='137.38' cy='180.98' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e136' cx='141.36' cy='177.52' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e137' cx='56.75' cy='197.1' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e138' cx='142.36' cy='166.01' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e139' cx='108.51' cy='199.4' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e140' cx='125.43' cy='169.47' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e141' cx='127.43' cy='141.84' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e142' cx='101.54' cy='177.52' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e143' cx='95.57' cy='178.68' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e144' cx='113.49' cy='164.86' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e145' cx='95.57' cy='167.16' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e146' cx='150.32' cy='153.35' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Adelie' data-id='Adelie'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e147' cx='196.11' cy='130.32' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e148' cx='234.94' cy='75.06' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e149' cx='221.99' cy='132.62' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e150' cx='234.94' cy='75.06' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e151' cx='211.04' cy='88.88' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e152' cx='200.09' cy='128.02' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e153' cx='189.14' cy='116.51' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e154' cx='202.08' cy='98.09' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e155' cx='168.24' cy='134.93' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e156' cx='203.08' cy='100.39' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e157' cx='144.35' cy='123.41' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e158' cx='224.98' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e159' cx='190.14' cy='123.41' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e160' cx='219.01' cy='68.15' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e161' cx='193.13' cy='144.14' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e162' cx='227.97' cy='68.15' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e163' cx='155.3' cy='146.44' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e164' cx='226.97' cy='47.43' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e165' cx='197.11' cy='116.51' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e166' cx='221.99' cy='91.18' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e167' cx='236.93' cy='75.06' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e168' cx='186.16' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e169' cx='200.09' cy='134.93' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e170' cx='198.1' cy='104.99' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e171' cx='164.26' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e172' cx='196.11' cy='102.69' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e173' cx='213.03' cy='77.36' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e174' cx='217.02' cy='125.72' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e175' cx='234.94' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e176' cx='208.06' cy='95.78' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e177' cx='163.26' cy='121.11' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e178' cx='186.16' cy='104.99' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e179' cx='330.5' cy='58.94' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e180' cx='225.98' cy='100.39' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e181' cx='219.01' cy='88.88' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e182' cx='161.27' cy='109.6' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e183' cx='179.19' cy='95.78' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e184' cx='175.21' cy='137.23' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e185' cx='221.99' cy='91.18' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e186' cx='162.27' cy='155.65' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e187' cx='230.95' cy='75.06' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e188' cx='188.15' cy='139.53' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e189' cx='230.95' cy='118.81' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e190' cx='239.91' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e191' cx='171.23' cy='111.9' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e192' cx='190.14' cy='144.14' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e193' cx='239.91' cy='88.88' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e194' cx='184.17' cy='102.69' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e195' cx='187.15' cy='93.48' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e196' cx='201.09' cy='114.2' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e197' cx='220' cy='93.48' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e198' cx='186.16' cy='134.93' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e199' cx='235.93' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e200' cx='200.09' cy='111.9' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e201' cx='185.16' cy='104.99' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e202' cx='173.22' cy='139.53' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e203' cx='190.14' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e204' cx='167.24' cy='132.62' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e205' cx='238.92' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e206' cx='188.15' cy='144.14' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e207' cx='197.11' cy='93.48' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e208' cx='192.13' cy='134.93' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e209' cx='277.74' cy='77.36' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e210' cx='193.13' cy='121.11' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e211' cx='232.94' cy='75.06' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e212' cx='229.96' cy='70.46' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e213' cx='170.23' cy='121.11' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e214' cx='241.9' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e215' cx='212.04' cy='118.81' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e216' cx='199.1' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e217' cx='217.02' cy='102.69' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e218' cx='200.09' cy='98.09' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e219' cx='199.1' cy='121.11' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e220' cx='221' cy='70.46' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e221' cx='210.05' cy='125.72' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e222' cx='245.89' cy='61.24' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e223' cx='187.15' cy='118.81' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e224' cx='187.15' cy='63.55' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e225' cx='225.98' cy='124.57' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e226' cx='259.82' cy='86.57' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e227' cx='209.05' cy='119.96' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e228' cx='234.94' cy='91.18' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e229' cx='184.17' cy='118.81' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e230' cx='242.9' cy='79.67' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e231' cx='169.23' cy='125.72' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e232' cx='247.88' cy='93.48' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e233' cx='210.05' cy='113.05' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e234' cx='255.84' cy='81.97' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e235' cx='210.05' cy='109.6' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e236' cx='256.84' cy='88.88' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e237' cx='190.14' cy='118.81' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e238' cx='229.96' cy='77.36' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e239' cx='180.18' cy='114.2' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e240' cx='242.9' cy='98.09' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e241' cx='228.96' cy='110.75' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e242' cx='204.08' cy='113.05' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e243' cx='219.01' cy='124.57' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e244' cx='245.89' cy='95.78' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e245' cx='220' cy='114.2' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e246' cx='293.67' cy='79.67' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e247' cx='207.06' cy='108.45' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e248' cx='225.98' cy='84.27' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e249' cx='203.08' cy='84.27' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e250' cx='152.31' cy='121.11' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e251' cx='268.78' cy='84.27' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e252' cx='168.24' cy='126.87' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e253' cx='216.02' cy='84.27' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e254' cx='239.91' cy='107.3' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e255' cx='232.94' cy='63.55' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e256' cx='170.23' cy='123.41' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e257' cx='249.87' cy='84.27' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e258' cx='197.11' cy='136.08' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e259' cx='285.7' cy='68.15' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e260' cx='222.99' cy='61.24' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e261' cx='207.06' cy='110.75' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e262' cx='203.08' cy='114.2' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e263' cx='238.92' cy='72.76' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e264' cx='187.15' cy='98.09' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e265' cx='233.94' cy='88.88' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Gentoo' data-id='Gentoo'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e266' cx='200.09' cy='176.37' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e267' cx='234.94' cy='157.95' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e268' cx='247.88' cy='169.47' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e269' cx='189.14' cy='175.22' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e270' cx='261.81' cy='166.01' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e271' cx='187.15' cy='155.65' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e272' cx='196.11' cy='187.89' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e273' cx='247.88' cy='164.86' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e274' cx='195.12' cy='146.44' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e275' cx='247.88' cy='167.16' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e276' cx='201.09' cy='162.56' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e277' cx='251.86' cy='163.71' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e278' cx='205.07' cy='167.16' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e279' cx='254.84' cy='151.05' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e280' cx='194.12' cy='172.92' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e281' cx='239.91' cy='151.05' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e282' cx='237.92' cy='185.58' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e283' cx='314.57' cy='167.16' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e284' cx='199.1' cy='178.68' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e285' cx='226.97' cy='134.93' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e286' cx='159.28' cy='171.77' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e287' cx='220' cy='180.98' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e288' cx='167.24' cy='204' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e289' cx='240.91' cy='162.56' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e290' cx='202.08' cy='185.58' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e291' cx='254.84' cy='146.44' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e292' cx='239.91' cy='180.98' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e293' cx='229.96' cy='162.56' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e294' cx='199.1' cy='167.16' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e295' cx='262.81' cy='128.02' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e296' cx='144.35' cy='190.19' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e297' cx='276.74' cy='139.53' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e298' cx='160.28' cy='183.28' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e299' cx='244.89' cy='148.74' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e300' cx='231.95' cy='171.77' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e301' cx='210.05' cy='157.95' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e302' cx='211.04' cy='160.26' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e303' cx='254.84' cy='116.51' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e304' cx='204.08' cy='213.21' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e305' cx='269.78' cy='130.32' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e306' cx='224.98' cy='155.65' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e307' cx='197.11' cy='169.47' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e308' cx='243.89' cy='174.07' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e309' cx='190.14' cy='176.37' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e310' cx='243.89' cy='168.31' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e311' cx='242.9' cy='132.62' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e312' cx='235.93' cy='180.98' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e313' cx='224.98' cy='139.53' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e314' cx='249.87' cy='187.89' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e315' cx='232.94' cy='168.31' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e316' cx='216.02' cy='184.43' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e317' cx='248.87' cy='155.65' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e318' cx='192.13' cy='171.77' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e319' cx='241.9' cy='151.05' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e320' cx='160.28' cy='183.28' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e321' cx='256.84' cy='178.68' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e322' cx='187.15' cy='187.89' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e323' cx='227.97' cy='151.05' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e324' cx='236.93' cy='162.56' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e325' cx='191.13' cy='175.22' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e326' cx='253.85' cy='155.65' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e327' cx='203.08' cy='169.47' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e328' cx='192.13' cy='169.47' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e329' cx='292.67' cy='153.35' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e330' cx='170.23' cy='180.98' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e331' cx='230.95' cy='163.71' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e332' cx='242.9' cy='148.74' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <circle id='svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_e333' cx='236.93' cy='163.71' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round' title='Chinstrap' data-id='Chinstrap'/>\n   <polygon points='202.54,91.83 267.34,91.83 267.25,91.83 267.60,91.81 267.94,91.74 268.26,91.62 268.56,91.44 268.83,91.22 269.06,90.96 269.25,90.67 269.38,90.35 269.47,90.01 269.50,89.67 269.50,89.67 269.50,78.87 269.50,78.87 269.47,78.53 269.38,78.19 269.25,77.87 269.06,77.58 268.83,77.32 268.56,77.10 268.26,76.92 267.94,76.80 267.60,76.73 267.34,76.71 202.54,76.71 202.80,76.73 202.45,76.72 202.10,76.76 201.77,76.85 201.46,77.00 201.17,77.20 200.92,77.44 200.71,77.72 200.55,78.03 200.44,78.36 200.38,78.70 200.38,78.87 200.38,89.67 200.38,89.49 200.38,89.84 200.44,90.18 200.55,90.51 200.71,90.82 200.92,91.10 201.17,91.34 201.46,91.54 201.77,91.69 202.10,91.78 202.45,91.83' fill='#FFFFFF' fill-opacity='1' stroke='#000000' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='round'/>\n   <text x='203.98' y='88.23' font-size='8.28pt' font-family='Helvetica'>chonky birds<\/text>\n  <\/g>\n  <g clip-path='url(#svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa_c1)'>\n   <text x='18.54' y='202.55' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>3000<\/text>\n   <text x='18.54' y='156.5' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>4000<\/text>\n   <text x='18.54' y='110.45' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>5000<\/text>\n   <text x='18.54' y='64.4' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>6000<\/text>\n   <polyline points='40.32,199.40 43.06,199.40' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='40.32,153.35 43.06,153.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='40.32,107.30 43.06,107.30' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='40.32,61.24 43.06,61.24' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='135.39,224.24 135.39,221.50' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='234.94,224.24 234.94,221.50' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <polyline points='334.48,224.24 334.48,221.50' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt'/>\n   <text x='130.49' y='232.74' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>40<\/text>\n   <text x='230.04' y='232.74' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>50<\/text>\n   <text x='329.59' y='232.74' font-size='6.6pt' font-family='Helvetica' fill='#4D4D4D' fill-opacity='1'>60<\/text>\n   <text x='156.63' y='245.33' font-size='8.25pt' font-family='Helvetica'>bill_length_mm<\/text>\n   <text transform='translate(13.37,164.58) rotate(-90.00)' font-size='8.25pt' font-family='Helvetica'>body_mass_g<\/text>\n   <rect x='355.15' y='91.02' width='71.37' height='78.6' fill='#FFFFFF' fill-opacity='1' stroke='none'/>\n   <text x='360.63' y='105.61' font-size='8.25pt' font-family='Helvetica'>species<\/text>\n   <rect x='360.63' y='112.3' width='17.28' height='17.28' fill='#F2F2F2' fill-opacity='1' stroke='none'/>\n   <circle cx='369.27' cy='120.94' r='1.47pt' fill='#F8766D' fill-opacity='1' stroke='#F8766D' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n   <rect x='360.63' y='129.58' width='17.28' height='17.28' fill='#F2F2F2' fill-opacity='1' stroke='none'/>\n   <circle cx='369.27' cy='138.22' r='1.47pt' fill='#00BA38' fill-opacity='1' stroke='#00BA38' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n   <rect x='360.63' y='146.86' width='17.28' height='17.28' fill='#F2F2F2' fill-opacity='1' stroke='none'/>\n   <circle cx='369.27' cy='155.5' r='1.47pt' fill='#619CFF' fill-opacity='1' stroke='#619CFF' stroke-opacity='1' stroke-width='0.71' stroke-linejoin='round' stroke-linecap='round'/>\n   <text x='383.39' y='124.1' font-size='6.6pt' font-family='Helvetica'>Adelie<\/text>\n   <text x='383.39' y='141.38' font-size='6.6pt' font-family='Helvetica'>Chinstrap<\/text>\n   <text x='383.39' y='158.66' font-size='6.6pt' font-family='Helvetica'>Gentoo<\/text>\n   <text x='43.06' y='31.23' font-size='8.25pt' font-family='Helvetica'>Neato<\/text>\n   <text x='43.06' y='14.94' font-size='9.9pt' font-family='Helvetica'>Penguin bill length and weight<\/text>\n   <text x='280.88' y='259.55' font-size='6.6pt' font-family='Helvetica'>Here's a caption<\/text>\n  <\/g>\n <\/g>\n<\/svg>","js":null,"uid":"svg_f672f30b_eac8_4d9e_86c9_8043a255c6fa","ratio":1.61812297734628,"settings":{"tooltip":{"css":".tooltip_SVGID_ { padding:5px;background:black;color:white;border-radius:2px;text-align:left; ; position:absolute;pointer-events:none;z-index:999;}","placement":"doc","opacity":0.9,"offx":10,"offy":10,"use_cursor_pos":true,"use_fill":false,"use_stroke":false,"delay_over":200,"delay_out":500},"hover":{"css":".hover_data_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_data_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_data_SVGID_ { fill:orange;stroke:black; }\nline.hover_data_SVGID_, polyline.hover_data_SVGID_ { fill:none;stroke:orange; }\nrect.hover_data_SVGID_, polygon.hover_data_SVGID_, path.hover_data_SVGID_ { fill:orange;stroke:none; }\nimage.hover_data_SVGID_ { stroke:orange; }","reactive":true,"nearest_distance":null},"hover_inv":{"css":""},"hover_key":{"css":".hover_key_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_key_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_key_SVGID_ { fill:orange;stroke:black; }\nline.hover_key_SVGID_, polyline.hover_key_SVGID_ { fill:none;stroke:orange; }\nrect.hover_key_SVGID_, polygon.hover_key_SVGID_, path.hover_key_SVGID_ { fill:orange;stroke:none; }\nimage.hover_key_SVGID_ { stroke:orange; }","reactive":true},"hover_theme":{"css":".hover_theme_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_theme_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_theme_SVGID_ { fill:orange;stroke:black; }\nline.hover_theme_SVGID_, polyline.hover_theme_SVGID_ { fill:none;stroke:orange; }\nrect.hover_theme_SVGID_, polygon.hover_theme_SVGID_, path.hover_theme_SVGID_ { fill:orange;stroke:none; }\nimage.hover_theme_SVGID_ { stroke:orange; }","reactive":true},"select":{"css":".select_data_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_data_SVGID_ { stroke:none;fill:red; }\ncircle.select_data_SVGID_ { fill:red;stroke:black; }\nline.select_data_SVGID_, polyline.select_data_SVGID_ { fill:none;stroke:red; }\nrect.select_data_SVGID_, polygon.select_data_SVGID_, path.select_data_SVGID_ { fill:red;stroke:none; }\nimage.select_data_SVGID_ { stroke:red; }","type":"multiple","only_shiny":true,"selected":[]},"select_inv":{"css":""},"select_key":{"css":".select_key_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_key_SVGID_ { stroke:none;fill:red; }\ncircle.select_key_SVGID_ { fill:red;stroke:black; }\nline.select_key_SVGID_, polyline.select_key_SVGID_ { fill:none;stroke:red; }\nrect.select_key_SVGID_, polygon.select_key_SVGID_, path.select_key_SVGID_ { fill:red;stroke:none; }\nimage.select_key_SVGID_ { stroke:red; }","type":"single","only_shiny":true,"selected":[]},"select_theme":{"css":".select_theme_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_theme_SVGID_ { stroke:none;fill:red; }\ncircle.select_theme_SVGID_ { fill:red;stroke:black; }\nline.select_theme_SVGID_, polyline.select_theme_SVGID_ { fill:none;stroke:red; }\nrect.select_theme_SVGID_, polygon.select_theme_SVGID_, path.select_theme_SVGID_ { fill:red;stroke:none; }\nimage.select_theme_SVGID_ { stroke:red; }","type":"single","only_shiny":true,"selected":[]},"zoom":{"min":1,"max":1,"duration":300},"toolbar":{"position":"topright","pngname":"diagram","tooltips":null,"hidden":[],"delay_over":200,"delay_out":500},"sizing":{"rescale":true,"width":1}}},"evals":[],"jsHooks":[]}</script>
</div>
</div>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-11_faqs_session-09-10.html</guid>
  <pubDate>Wed, 12 Jul 2023 03:23:00 GMT</pubDate>
</item>
<item>
  <title>Zeroes in the gradebook</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-10_zeroes-gradebook.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>One quick note about your grades on iCollege. A few of you have noticed that you now have 0s for assignments that you haven’t turned in yet. Don’t worry! I just had iCollege update all the missing grades to 0 for the sake of more accurate grade calculation. Before today, if you checked your grades on iCollege, you’d be failing even if you turned in everything and got 100% on everything. That’s because the denominator was 650 points—the total number of points you can get this semester. But that’s inaccurate—you haven’t even gotten to the second mini project, later exercises, or the final project, so there’s no use including those in the denominator for now.</p>
<p>So now you should be able to see what your current grade is with the correct denominator (i.e.&nbsp;the points for everything from the beginning of the summer up to exercise 8, which is 235 points), meaning the percentages you see are more accurate.</p>
<p>If you have a 0, don’t worry! Once you turn in past exercises the 0 will get replaced with the actual score. <strong>My not-caring-about-late-work policy still stands.</strong> The 0 is just a mathematical quirk to get iCollege to cooperate.</p>



 ]]></description>
  <category>course details</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-10_zeroes-gradebook.html</guid>
  <pubDate>Mon, 10 Jul 2023 20:30:00 GMT</pubDate>
</item>
<item>
  <title>Graphics editors</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-05_graphics-editors.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>For <a href="../assignment/14-exercise.html">exercise 14</a>, <a href="../assignment/02-mini-project.html">mini-project 2</a>, and your <a href="../assignment/final-project.html">final project</a>, you’ll create plots in R, export them as PDFs, and then edit, enhance, and lay out those PDFs using some sort of graphics editor.</p>
<p>In the past, I’ve had students use Adobe Illustrator for this, since GSU provided free student access to <a href="https://www.adobe.com/creativecloud.html">Adobe Creative Cloud</a>, which includes Illustrator. The most common Creative Cloud programs people use for data visualization-related work are:</p>
<ul>
<li><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>: edit photos and other bitmap images</li>
<li><a href="https://www.adobe.com/products/illustrator.html">Illustrator</a>: edit vector images</li>
<li><a href="https://www.adobe.com/products/indesign.html">InDesign</a>: lay out text and images for books, magazines, brochures, posters, and all other printed things</li>
</ul>
<p>However, <em>GSU no longer provides off-campus access to Adobe software.</em> If you’re faculty or staff, <a href="https://technology.gsu.edu/technology-services/productivity-collaboration/adobe-creative-cloud/">you can still access Creative Cloud for free</a>; if you’re a student <a href="https://technology.gsu.edu/technology-services/productivity-collaboration/adobe-creative-cloud/">you have to use an on-campus computer lab</a>.</p>
<p>This is sad because knowing how to use programs like Illustrator is <em>incredibly</em> valuable. Even if you never touch R again after this class, the graphic design programs included in Creative Cloud are industry-standard and used literally everywhere, and knowing how to use them is an important skill!</p>
<p>There are some alternative options though.</p>
<section id="creative-cloud-as-a-student" class="level3">
<h3 class="anchored" data-anchor-id="creative-cloud-as-a-student">Creative Cloud as a student</h3>
<p>You can use the whole Creative Cloud Suite for <a href="https://www.adobe.com/creativecloud/buy/students.html">$20/month as a student</a>, and they have a 14-day free trial. Creative Cloud is a subscription service, so you can subscribe on and off as often as you want.</p>
</section>
<section id="affinity-suite" class="level3">
<h3 class="anchored" data-anchor-id="affinity-suite">Affinity Suite</h3>
<p><a href="https://affinity.serif.com/en-us/">Affinity</a> is a smaller rival to Adobe and they have their own set of three programs for graphic design-related tasks. Unlike Creative Cloud, the programs in the Affinity Suite are not subscription-based. You buy them and then you own them forever.</p>
<p>There are three programs that are general equivalents of the core Adobe programs:</p>
<ul>
<li><a href="https://affinity.serif.com/en-us/photo/">Affinity Photo</a> = Photoshop</li>
<li><a href="https://affinity.serif.com/en-us/designer/">Affinity Designer</a> = Illustrator</li>
<li><a href="https://affinity.serif.com/en-us/publisher/">Affinity Publisher</a> = InDesign</li>
</ul>
<div class="callout callout-style-default callout-warning callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Caveat!
</div>
</div>
<div class="callout-body-container callout-body">
<p>Big caveat here: I’ve never actually used any of these Affinity programs. I use Adobe stuff for all my work. But I’ve heard fantastic things about them and have seen them in action—they’re as good as Adobe’s stuff.</p>
</div>
</div>
</section>
<section id="open-source-alternatives" class="level3">
<h3 class="anchored" data-anchor-id="open-source-alternatives">Open source alternatives</h3>
<p>The open source community has created <strong>free</strong> programs that are rough equivalents of these core Adobe programs too:</p>
<ul>
<li><a href="https://www.gimp.org/">GIMP</a> = Photoshop</li>
<li><a href="https://inkscape.org/">Inkscape</a> = Illustrator</li>
<li><a href="https://www.scribus.net/">Scribus</a> = InDesign</li>
</ul>
<p>These are all free and they work on macOS and Windows (and Linux if you’re into that), but they can be a <del>little</del> lot rough around the edges and tricky to work with. Adobe, Affinity, and other companies have full time developers focused on making good user interfaces and experiences; these open source clones do not. You can make the same kind of output with GIMP, Inkscape, and Scribus that you can with Adobe Creative Cloud and the Affinity Suite, but there’s a bit of an extra learning curve (and a lot of bumps along the way).</p>
<p>But you can’t beat free.</p>
</section>
<section id="summary" class="level3">
<h3 class="anchored" data-anchor-id="summary">Summary</h3>
<div class="cell">
<div class="cell-output-display">

<div id="zjdktmyzxg" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>#zjdktmyzxg table {
  font-family: Barlow, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#zjdktmyzxg thead, #zjdktmyzxg tbody, #zjdktmyzxg tfoot, #zjdktmyzxg tr, #zjdktmyzxg td, #zjdktmyzxg th {
  border-style: none;
}

#zjdktmyzxg p {
  margin: 0;
  padding: 0;
}

#zjdktmyzxg .gt_table {
  display: table;
  border-collapse: collapse;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 19px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#zjdktmyzxg .gt_caption {
  padding-top: 4px;
  padding-bottom: 4px;
}

#zjdktmyzxg .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#zjdktmyzxg .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#zjdktmyzxg .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#zjdktmyzxg .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zjdktmyzxg .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#zjdktmyzxg .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#zjdktmyzxg .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#zjdktmyzxg .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#zjdktmyzxg .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#zjdktmyzxg .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#zjdktmyzxg .gt_spanner_row {
  border-bottom-style: hidden;
}

#zjdktmyzxg .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  text-align: left;
}

#zjdktmyzxg .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#zjdktmyzxg .gt_from_md > :first-child {
  margin-top: 0;
}

#zjdktmyzxg .gt_from_md > :last-child {
  margin-bottom: 0;
}

#zjdktmyzxg .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#zjdktmyzxg .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#zjdktmyzxg .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#zjdktmyzxg .gt_row_group_first td {
  border-top-width: 2px;
}

#zjdktmyzxg .gt_row_group_first th {
  border-top-width: 2px;
}

#zjdktmyzxg .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#zjdktmyzxg .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#zjdktmyzxg .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#zjdktmyzxg .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zjdktmyzxg .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#zjdktmyzxg .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#zjdktmyzxg .gt_last_grand_summary_row_top {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: double;
  border-bottom-width: 6px;
  border-bottom-color: #D3D3D3;
}

#zjdktmyzxg .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#zjdktmyzxg .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zjdktmyzxg .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#zjdktmyzxg .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#zjdktmyzxg .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#zjdktmyzxg .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#zjdktmyzxg .gt_left {
  text-align: left;
}

#zjdktmyzxg .gt_center {
  text-align: center;
}

#zjdktmyzxg .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#zjdktmyzxg .gt_font_normal {
  font-weight: normal;
}

#zjdktmyzxg .gt_font_bold {
  font-weight: bold;
}

#zjdktmyzxg .gt_font_italic {
  font-style: italic;
}

#zjdktmyzxg .gt_super {
  font-size: 65%;
}

#zjdktmyzxg .gt_footnote_marks {
  font-size: 75%;
  vertical-align: 0.4em;
  position: initial;
}

#zjdktmyzxg .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#zjdktmyzxg .gt_indent_1 {
  text-indent: 5px;
}

#zjdktmyzxg .gt_indent_2 {
  text-indent: 10px;
}

#zjdktmyzxg .gt_indent_3 {
  text-indent: 15px;
}

#zjdktmyzxg .gt_indent_4 {
  text-indent: 20px;
}

#zjdktmyzxg .gt_indent_5 {
  text-indent: 25px;
}

.smaller-note {
  font-size: 0.7em;
}
</style>
<table class="gt_table" style="table-layout: fixed;; width: 100%" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
  <colgroup>
    <col style="width:15%;">
    <col style="width:28.3333333333333%;">
    <col style="width:28.3333333333333%;">
    <col style="width:28.3333333333333%;">
  </colgroup>
  <thead>
    
    <tr class="gt_col_headings">
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="font-weight: bold;" scope="col" id="File type">File type</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="font-weight: bold;" scope="col" id="Adobe">Adobe</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="font-weight: bold;" scope="col" id="Affinity">Affinity</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="font-weight: bold;" scope="col" id="Open source">Open source</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td headers="file" class="gt_row gt_left" style="vertical-align:top;"><div class="gt_from_md"><p>Bitmaps</p>
</div></td>
<td headers="Adobe" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://www.adobe.com/products/photoshop.html">Photoshop</a></p>
</div></td>
<td headers="Affinity" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://affinity.serif.com/en-us/photo/">Photo</a></p>
</div></td>
<td headers="foss" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://www.gimp.org/">GIMP</a></p>
</div></td></tr>
    <tr><td headers="file" class="gt_row gt_left" style="vertical-align:top;"><div class="gt_from_md"><p>Vectors</p>
</div></td>
<td headers="Adobe" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://www.adobe.com/products/illustrator.html">Illustrator</a></p>
</div></td>
<td headers="Affinity" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://affinity.serif.com/en-us/designer/">Designer</a></p>
</div></td>
<td headers="foss" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://inkscape.org/">Inkscape</a></p>
</div></td></tr>
    <tr><td headers="file" class="gt_row gt_left" style="vertical-align:top;"><div class="gt_from_md"><p>Layout</p>
</div></td>
<td headers="Adobe" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://www.adobe.com/products/indesign.html">InDesign</a></p>
</div></td>
<td headers="Affinity" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://affinity.serif.com/en-us/publisher/">Publisher</a></p>
</div></td>
<td headers="foss" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p><a href="https://www.scribus.net/">Scribus</a></p>
</div></td></tr>
    <tr><td headers="file" class="gt_row gt_left" style="vertical-align:top; border-top-width: 3px; border-top-style: solid; border-top-color: #D3D3D3;"><div class="gt_from_md"><p>Cost</p>
</div></td>
<td headers="Adobe" class="gt_row gt_center" style="vertical-align:top; border-top-width: 3px; border-top-style: solid; border-top-color: #D3D3D3;"><div class="gt_from_md"><p>$$$<br><span class="smaller-note">Monthly Creative Cloud subscription</span></p>
</div></td>
<td headers="Affinity" class="gt_row gt_center" style="vertical-align:top; border-top-width: 3px; border-top-style: solid; border-top-color: #D3D3D3;"><div class="gt_from_md"><p>$<br><span class="smaller-note">One-time purchase</span></p>
</div></td>
<td headers="foss" class="gt_row gt_center" style="vertical-align:top; border-top-width: 3px; border-top-style: solid; border-top-color: #D3D3D3;"><div class="gt_from_md"><p>Free</p>
</div></td></tr>
    <tr><td headers="file" class="gt_row gt_left" style="vertical-align:top;"><div class="gt_from_md"><p>Notes</p>
</div></td>
<td headers="Adobe" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p>Industry standard</p>
</div></td>
<td headers="Affinity" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"></div></td>
<td headers="foss" class="gt_row gt_center" style="vertical-align:top;"><div class="gt_from_md"><p>Free, but rough learning curve</p>
</div></td></tr>
  </tbody>
  
  
</table>
</div>
</div>
</div>


</section>

 ]]></description>
  <category>course details</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-05_graphics-editors.html</guid>
  <pubDate>Thu, 06 Jul 2023 00:02:00 GMT</pubDate>
</item>
<item>
  <title>Tips for debugging and cleaning broken code</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-05_messy-broken-code-tips.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Lots of the code you run in this class is actually a big long chain of functions or plot layers, like this set of {dplyr} functions that are all connected with <code>%&gt;%</code>s or this set of {ggplot2} functions that are all connected with <code>+</code>s:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb1-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gapminder)</span>
<span id="cb1-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(scales)</span>
<span id="cb1-4"></span>
<span id="cb1-5">gapminder_gdp_thing <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1990</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_total =</span> gdpPercap <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> pop, </span>
<span id="cb1-8">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">is_africa =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Africa"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Is Africa"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Isn't Africa"</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_above_continent_median =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(gdp_total <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(gdp_total), <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>, <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb1-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(gdp_total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb1-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">country =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(country))</span>
<span id="cb1-14"></span>
<span id="cb1-15"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_gdp_thing, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> pop, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> gdp_total, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> gdp_above_continent_median)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-16">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">shape =</span> continent), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.75</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-17">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_smooth</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">method =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"lm"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-18">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_log10</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_short_scale</span>())) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-19">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_y_log10</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_short_scale</span>())) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-20">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_manual</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">values =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"#EDAD08"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"#6F4070"</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-21">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Population"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Total GDP"</span>, </span>
<span id="cb1-22">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"GDP above continent median"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">shape =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Continent"</span>, </span>
<span id="cb1-23">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Relationship between population and GDP"</span>, </span>
<span id="cb1-24">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">subtitle =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"In Africa and not in Africa"</span>, </span>
<span id="cb1-25">       <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">caption =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"A pretty meaningless plot, but it has a lot of layers, so."</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-26">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_grid</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">rows =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(is_africa), <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">cols =</span> year)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-27">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_bw</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-28">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.box =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"vertical"</span>, </span>
<span id="cb1-29">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">plot.title =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_text</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">face =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bold"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">rel</span>(<span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">1.3</span>)),</span>
<span id="cb1-30">        <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">panel.grid.minor =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_blank</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-05_messy-broken-code-tips_files/figure-html/main-example-plot-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Inevitably, something will go wrong at some point in the chain—often a misspelled word or a misplaced comma or a misplaced parenthesis. Tracking down (or debugging) the issue can be often be tricky!</p>
<p>For example, <strong>four (4)</strong> things are wrong in this code. See if you can spot them without running it—good luck!</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1">gapminder_gdp_thing <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1990</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb2-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_total =</span> gdpPercap <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> pop),</span>
<span id="cb2-3">     is_africa <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Africa"</span>, </span>
<span id="cb2-4"><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Is Africa"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Isn't Africa"</span>)<span class="er" style="color: #AD0000;
background-color: null;
font-style: inherit;">))</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span>  </span>
<span id="cb2-5">           <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb2-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_above_continent_median =</span> </span>
<span id="cb2-7">           <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(gdp_total <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(gdp_total)), <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>, <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)<span class="er" style="color: #AD0000;
background-color: null;
font-style: inherit;">)</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb2-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(gdp_total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb2-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent) <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">country =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(country))</span></code></pre></div>
</div>
<div class="callout callout-style-default callout-note callout-titled">
<div class="callout-header d-flex align-content-center" data-bs-toggle="collapse" data-bs-target=".callout-1-contents" aria-controls="callout-1" aria-expanded="false" aria-label="Toggle callout">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Click here for the answers
</div>
<div class="callout-btn-toggle d-inline-block border-0 py-1 ps-1 pe-0 float-end"><i class="callout-toggle"></i></div>
</div>
<div id="callout-1" class="callout-1-contents callout-collapse collapse">
<div class="callout-body-container callout-body">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="annotated-cell-1" style="background: #f1f3f5;"><pre class="sourceCode r code-annotation-code code-with-copy code-annotated"><code class="sourceCode r"><span id="annotated-cell-1-1">gapminder_gdp_thing <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1990</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-1" data-target-annotation="1" onclick="event.preventDefault();">1</a><span id="annotated-cell-1-2" class="code-annotation-target">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_total =</span> gdpPercap <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> pop),</span>
<span id="annotated-cell-1-3">     is_africa <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Africa"</span>, </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-1" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-1-4" class="code-annotation-target"><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Is Africa"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Isn't Africa"</span>)<span class="er" style="color: #AD0000;
background-color: null;
font-style: inherit;">))</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="annotated-cell-1-5">           <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="annotated-cell-1-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_above_continent_median =</span> </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-1" data-target-annotation="3" onclick="event.preventDefault();">3</a><span id="annotated-cell-1-7" class="code-annotation-target">           <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(gdp_total <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(gdp_total)), <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>, <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)<span class="er" style="color: #AD0000;
background-color: null;
font-style: inherit;">)</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="annotated-cell-1-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(gdp_total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-1" data-target-annotation="4" onclick="event.preventDefault();">4</a><span id="annotated-cell-1-9" class="code-annotation-target">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent) <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">country =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(country))</span><div class="code-annotation-gutter-bg"></div><div class="code-annotation-gutter"></div></code></pre></div>
<div class="cell-annotation">
<dl class="code-annotation-container-grid">
<dt data-target-cell="annotated-cell-1" data-target-annotation="1">1</dt>
<dd>
<span data-code-lines="2" data-code-annotation="1" data-code-cell="annotated-cell-1">There’s a closing parenthesis after <code>pop)</code> that shouldn’t be there—it ends the <code>mutate()</code> too early and <code>is_africa = BLAH</code> ends up not being inside <code>mutate()</code></span>
</dd>
<dt data-target-cell="annotated-cell-1" data-target-annotation="2">2</dt>
<dd>
<span data-code-lines="4" data-code-annotation="2" data-code-cell="annotated-cell-1">There’s an extra parenthesis at the end of <code>"Isn't Africa")))</code></span>
</dd>
<dt data-target-cell="annotated-cell-1" data-target-annotation="3">3</dt>
<dd>
<span data-code-lines="7" data-code-annotation="3" data-code-cell="annotated-cell-1">There’s an extra parenthesis after <code>median(gdp_total))</code></span>
</dd>
<dt data-target-cell="annotated-cell-1" data-target-annotation="4">4</dt>
<dd>
<span data-code-lines="9" data-code-annotation="4" data-code-cell="annotated-cell-1">There’s an <code>=</code> instead of a comma in between <code>fct_inorder(continent)</code> and <code>country</code></span>
</dd>
</dl>
</div>
</div>
<p>Here’s what the fixed, reindented version looks like:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="annotated-cell-2" style="background: #f1f3f5;"><pre class="sourceCode r code-annotation-code code-with-copy code-annotated"><code class="sourceCode r"><span id="annotated-cell-2-1">gapminder_gdp_thing <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="annotated-cell-2-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1990</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="annotated-cell-2-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(</span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-2" data-target-annotation="1" onclick="event.preventDefault();">1</a><span id="annotated-cell-2-4" class="code-annotation-target">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_total =</span> gdpPercap <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> pop,</span>
<span id="annotated-cell-2-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">is_africa =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(</span>
<span id="annotated-cell-2-6">      continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Africa"</span>, </span>
<span id="annotated-cell-2-7">      <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Is Africa"</span>, </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-2" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-2-8" class="code-annotation-target">      <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Isn't Africa"</span>)</span>
<span id="annotated-cell-2-9">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="annotated-cell-2-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="annotated-cell-2-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(</span>
<span id="annotated-cell-2-12">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gdp_above_continent_median =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ifelse</span>(</span>
<span id="annotated-cell-2-13">      gdp_total <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(gdp_total), </span>
<span id="annotated-cell-2-14">      <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>, </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-2" data-target-annotation="3" onclick="event.preventDefault();">3</a><span id="annotated-cell-2-15" class="code-annotation-target">      <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)</span>
<span id="annotated-cell-2-16">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="annotated-cell-2-17">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="annotated-cell-2-18">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(gdp_total)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="annotated-cell-2-19">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent), </span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-2" data-target-annotation="4" onclick="event.preventDefault();">4</a><span id="annotated-cell-2-20" class="code-annotation-target">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">country =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(country))</span><div class="code-annotation-gutter-bg"></div><div class="code-annotation-gutter"></div></code></pre></div>
<div class="cell-annotation">
<dl class="code-annotation-container-grid">
<dt data-target-cell="annotated-cell-2" data-target-annotation="1">1</dt>
<dd>
<span data-code-lines="4" data-code-annotation="1" data-code-cell="annotated-cell-2">Fixed!</span>
</dd>
<dt data-target-cell="annotated-cell-2" data-target-annotation="2">2</dt>
<dd>
<span data-code-lines="8,9" data-code-annotation="2" data-code-cell="annotated-cell-2">Fixed!</span>
</dd>
<dt data-target-cell="annotated-cell-2" data-target-annotation="3">3</dt>
<dd>
<span data-code-lines="15,16" data-code-annotation="3" data-code-cell="annotated-cell-2">Fixed!</span>
</dd>
<dt data-target-cell="annotated-cell-2" data-target-annotation="4">4</dt>
<dd>
<span data-code-lines="20" data-code-annotation="4" data-code-cell="annotated-cell-2">Fixed!</span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<p>It’s nearly impossible to figure out what’s wrong here without running it. And even if you do run it, you’ll get somewhat cryptic errors.</p>
<p>I have two important techniques and tips that fix 90% of my debugging problems:</p>
<ol type="1">
<li>Reformat the code by reindenting it and breaking it into multiple lines</li>
<li>Run the code incrementally, line by line</li>
</ol>
<p>Each of these techniques help track down issues in the code above and are good skills to know in general. I’ll explain each approach and give a little video demonstration below.</p>
<section id="reformat-the-code" class="level3">
<h3 class="anchored" data-anchor-id="reformat-the-code">Reformat the code</h3>
<p>In the <a href="../resource/style.html#pipes-and-ggplot-layers">R style suggestions in the Resources section</a>, it explains that each layer of a <code>%&gt;%</code>-chained pipeline or ggplot plot should be on separate lines, with the <code>%&gt;%</code> or the <code>+</code> at the end of the line, indented with two spaces.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> blah, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> thing, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> thing2)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_smooth</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">method =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"lm"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>()</span></code></pre></div>
</div>
<p>Additionally, it’s often a good idea to add lines in between the arguments inside functions and line them up within the <code>()</code>s of the function.</p>
<p>This makes it so you can clearly see each step of the pipeline or plot, and you can clearly see each of the arguments inside each function.</p>
<p>People tend to take one of two approaches to argument alignment—aligning argument names at the same level as the opening <code>(</code> of the function like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1">some_object <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> some_dataset <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">a_function</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb4-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">another_function</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>,</span>
<span id="cb4-4">                   <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>,</span>
<span id="cb4-5">                   <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">some_function</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">thing1 =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"a"</span>, </span>
<span id="cb4-6">                                            <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">thing2 =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"b"</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb4-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">yet_another_function</span>()</span></code></pre></div>
</div>
<p>…or aligning argument names two spaces to the right of where the argument starts, like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1">some_object <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> some_dataset <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">a_function</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">another_function</span>(</span>
<span id="cb5-4">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>,</span>
<span id="cb5-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>,</span>
<span id="cb5-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">argument =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">some_function</span>(</span>
<span id="cb5-7">      <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">thing1 =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"a"</span>, </span>
<span id="cb5-8">      <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">thing2 =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"b"</span></span>
<span id="cb5-9">    )</span>
<span id="cb5-10">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb5-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">yet_another_function</span>()</span></code></pre></div>
</div>
<p>RStudio can actually reindent code for you automatically, and it can use either of these approaches. If you want the first approach (where argument names align after the opening <code>(</code>), check “Tools &gt; Global Options &gt; Code &gt; Vertically align arguments in auto-indent”; if you want the second approach (where argument names are all a little indented from where the argument starts), make sure that option is unchecked.</p>
<p>To have RStudio reindent code for you, select the code you want to be reindented and go to “Code &gt; Reindent lines”, or use the keyboard shortcut <kbd>⌘I</kbd> on macOS or <kbd>ctrl + I</kbd> on Windows.</p>
<p>Here’s what that looks like. Notice how distorted the indentation is initially—RStudio is smart enough to fix it all:</p>
<div class="tabset-margin-container"></div><div class="panel-tabset">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" aria-controls="tabset-1-1" aria-selected="true">With keyboard shortcut</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" aria-controls="tabset-1-2" aria-selected="false">With menu</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-3-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-3" aria-controls="tabset-1-3" aria-selected="false">Without vertical argument alignment</a></li></ul>
<div class="tab-content">
<div id="tabset-1-1" class="tab-pane active" aria-labelledby="tabset-1-1-tab">
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/reindent-keyboard.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="tabset-1-2" class="tab-pane" aria-labelledby="tabset-1-2-tab">
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/reindent-menu.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="tabset-1-3" class="tab-pane" aria-labelledby="tabset-1-3-tab">
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/reindent-no-vertical-alignment.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<p>Not only does reindentation make it easier to read your code, it can reveal issues with the code. Remember that code from the beginning of this post with four things wrong? If we reindent it, the line that starts with <code>is_africa = ifelse(</code> is indented funny—it gets put at the start of the line, when really it should be at the same level as <code>gdp_total</code>, since those are both arguments for the <code>mutate()</code> function. If you look at the line above, you’ll see that there’s a <code>)</code> after <code>gdpPercap * pop</code>, which closes <code>mutate()</code> prematurely, so <code>is_africa</code> isn’t actually inside <code>mutate()</code>. If we get rid of the <code>)</code> at the end of <code>pop</code> and reindent again, <code>is_africa</code> shows up in the right place.</p>
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/reindent-gapminder.mp4" type="video/mp4">
</video>
</div>
<p>&nbsp;</p>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Extra strength formatting
</div>
</div>
<div class="callout-body-container callout-body">
<p>Reindenting your code only shifts things around horizontally. If you want more powerful code reformatting, try using “Code &gt; Reformat Code” (or use <kbd>⌘⇧A</kbd> on macOS or <kbd>ctrl + shift + A</kbd> on Windows). It’s a more aggressive form of reformatting that will add extra line breaks and other things to make the code more readable:</p>
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/code-reformat.mp4" type="video/mp4">
</video>
</div>
<p>&nbsp;</p>
<p>It doesn’t fix everything—there should be a line break after each <code>%&gt;%</code> in that example ↑ so you’d need to add your own line break before <code>filter(year &gt; 1990)</code> and <code>arrange(desc(gdp_total))</code>, but it works well.</p>
</div>
</div>
<p>I’d recommend trying to keep things indented consistently as you write your code, and periodically reindenting stuff just to make sure everything is nice and aligned. Ultimately R doesn’t care how your code is indented (other languages do, like Python, where one errant space can mess up everything), but humans do care and nicer indentation will help others (and future you!).</p>
</section>
<section id="run-the-code-incrementally" class="level3">
<h3 class="anchored" data-anchor-id="run-the-code-incrementally">Run the code incrementally</h3>
<p>Your code is often a series of functions or layers connected with <code>%&gt;%</code> or <code>+</code>. If something goes wrong at any step in the chain of functions, your code won’t work. When that happens, the best strategy for figuring out what went wrong is to <em>run the code incrementally</em>. Just run a few layers of it at a time and then check to see how it looks. Run the first two lines, look at the results, make sure it worked, the run the first three lines, look at the results, make sure it worked, and so on.</p>
<p>This is also a good approach for writing your code initially. That big gapminder-based plot at the beginning of this post? I didn’t write that all at once. I started with the initialy <code>ggplot() + geom_point()</code>, ran it, then added another layer or two, ran it with those, then added some more layers or changed some settings inside existing layers, then ran it with those, and so on until the whole thing was built.</p>
<p>There are a couple ways to do this. One way is to select just the code you want to run (like from the beginning of <code>ggplot()</code> to <em>right before</em> a <code>+</code> on some layer), then press <kbd>⌘ + return</kbd> on macOS or <kbd>ctrl + enter</kbd> on Windows to run just that selection. If it worked as expected, select from the beginning again (i.e.&nbsp;at <code>ggplot()</code>) and go to <em>right before</em> a <code>+</code> on some other layer and run that selection:</p>
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/line-by-line-select.mp4" type="video/mp4">
</video>
</div>
<p>&nbsp;</p>
<p>If you don’t want to keep using your mouse and want to keep your hands at your keyboard, you can add a <code>#</code> right before a <code>+</code> or <code>%&gt;%</code> to comment it out. That essentially breaks the chain of functions at that point, so when you type <kbd>⌘ + return</kbd> or <kbd>ctrl + enter</kbd>, R only runs the code up to that point. Then you can remove the <code>#</code>, put it before another <code>+</code> or <code>%&gt;%</code>, and run it again.</p>
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/line-by-line-comments.mp4" type="video/mp4">
</video>
</div>
<p>&nbsp;</p>
<p>Here’s what my typical process for dealing with weirdly indented, broken code looks like. I try to run the whole thing initially, then when it breaks, I reindent it to see if anything is obvious from that. Then I start running it incrementally and check the results of each step to make sure it works up to that point. I do that over and over until the whole pipeline works.</p>
<div class="ratio ratio-16x9">
<video controls="" width="100%">
  <source src="video/full-debug-line-by-line.mp4" type="video/mp4">
</video>
</div>


</section>

 ]]></description>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-05_messy-broken-code-tips.html</guid>
  <pubDate>Wed, 05 Jul 2023 16:28:00 GMT</pubDate>
</item>
<item>
  <title>Make RStudio your own</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-04_customize-rstudio.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Now that you’ve been using RStudio for a while, I’d recommend playing around with the settings and customizing it. Here are some important/neat things you can do in RStudio’s global options (Tools &gt; Global Options)</p>
<section id="change-the-theme" class="level3">
<h3 class="anchored" data-anchor-id="change-the-theme">Change the theme</h3>
<p>You can reduce the strain on your eyes (and feel more like a stereotypical movie hacker) by changing your theme. I normally use a dark theme (Monokai) since it’s way less bright than the default white theme (Textmate).</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-themes.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">RStudio themes</figcaption>
</figure>
</div>
<p>If you want to get super fancy, <a href="https://www.garrickadenbuie.com/project/rsthemes/">install the {rsthemes} package</a> and you’ll have access to dozens of other neat themes, as well as an add-in for switching between dark and light mode.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-rsthemes-addin.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">{rsthemes} add-in</figcaption>
</figure>
</div>
</section>
<section id="dont-save-the-workspace-when-closing" class="level3">
<h3 class="anchored" data-anchor-id="dont-save-the-workspace-when-closing">Don’t save the workspace when closing</h3>
<p>This throws people off a lot. When working with R, datasets you load, plots you create, and variables you make all live in something called a “workspace” or “environment,” which you can see in RStudio’s Environment panel. When you close RStudio, it will ask if you want to save the environment before you leave.</p>
<p><strong><em>Don’t save it.</em></strong></p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-quit-session.png" class="img-fluid figure-img" style="width:60.0%"></p>
<figcaption class="figure-caption">RStudio’s “Save Workspace” dialog</figcaption>
</figure>
</div>
<p><strong><em>Again, don’t save it.</em></strong></p>
<p>This will feel wrong—you generally always want to save everything all the time, but in this case you don’t. When reopening RStudio, you’ll run code that will load libraries and data and everything else from an empty environment (that’s why you do all your typing in an R Markdown document), and you don’t want to have leftover stuff from previous R sessions in your environment/workspace. (<a href="https://info5940.infosci.cornell.edu/notes/project-management/saving-source/">See here for a more in depth explanation</a>.).</p>
<p>You can make RStudio not ask you about saving your environment by making sure the “Restore .RData into workspace at startup” option is unchecked and that “Save workspace to .RData on exit” is set to “Never”:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-workspace.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Disable workspace saving</figcaption>
</figure>
</div>
</section>
<section id="turn-on-rainbow-parentheses" class="level3">
<h3 class="anchored" data-anchor-id="turn-on-rainbow-parentheses">Turn on rainbow parentheses</h3>
<p>You’ll often have nested parentheses…</p>
<div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">something</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">something_else</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">another_thing</span>()))</span></code></pre></div>
<p>…and it can get tricky to keep track of which of those closing <code>)</code>s go with which opening <code>)</code>. To make this easier, you can have RStudio color the parentheses with rotating colors—the first pair will be one color, the next another, and so on.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-rainbow-example.png" class="img-fluid figure-img" style="width:60.0%"></p>
<figcaption class="figure-caption">Rainbow parentheses!</figcaption>
</figure>
</div>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-rainbow.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Enable rainbow parentheses</figcaption>
</figure>
</div>
</section>
<section id="turn-on-color-previews" class="level3">
<h3 class="anchored" data-anchor-id="turn-on-color-previews">Turn on color previews</h3>
<p>This should theoretically already be enabled by default, but if not, you should definitely turn it on! RStudio can highlight color names with their actual colors. This works for R’s <a href="http://www.stat.columbia.edu/~tzheng/files/Rcolor.pdf">built-in named colors</a> like <code>red</code> and <code>darkblue</code> and for hex colors like <code>#3829ef</code>:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-colors-example.png" class="img-fluid figure-img" style="width:90.0%"></p>
<figcaption class="figure-caption">Color preview highlighting</figcaption>
</figure>
</div>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-color-preview.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Enable rainbow parentheses</figcaption>
</figure>
</div>
</section>
<section id="turn-on-a-code-margin" class="level3">
<h3 class="anchored" data-anchor-id="turn-on-a-code-margin">Turn on a code margin</h3>
<p>As you can see in the <a href="../resource/style.html#long-lines">R Style Suggestions page</a>, it’s generally good practice to break up long lines of code. One general standard is to keep your lines at 80 characters (but it’s okay to go beyond that sometimes; there’s no official rule against it). You can turn on a helpful thin gray margin line in the options.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-margin-editor.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Example of a margin line</figcaption>
</figure>
</div>
<p>You can set it to whatever width you want in the options:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-margin.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Margin option in RStudio</figcaption>
</figure>
</div>
</section>
<section id="change-the-panel-layout-and-add-more-columns" class="level3 page-columns page-full">
<h3 class="anchored" data-anchor-id="change-the-panel-layout-and-add-more-columns">Change the panel layout and add more columns</h3>
<p>You can move panels around however you want in the Pane Layout section of the options.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-panel-settings.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Panel settings</figcaption>
</figure>
</div>
<p>Lots of people like to swap the Console panel and Environment panel like this:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-panels-moved.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">R console on the left</figcaption>
</figure>
</div>
<p>If you have a wider monitor, you can even add a new column (or 2 or 3) for extra editor or data viewer windows. (You can also go to View &gt; Panes &gt; Add Source Column to add a new column.)</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-add-column.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Add a third column</figcaption>
</figure>
</div>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-three-panes.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">RStudio with three columns</figcaption>
</figure>
</div>
<p>You can have up to five columns!</p>
<div class="column-screen-inset">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/rstudio-five-columns.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">5 columns!</figcaption>
</figure>
</div>
</div>


</section>

 ]]></description>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-04_customize-rstudio.html</guid>
  <pubDate>Wed, 05 Jul 2023 03:01:00 GMT</pubDate>
</item>
<item>
  <title>Sessions 7 and 8 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>I just finished grading all your exercises from sessions 7 and 8 and am happy with how you’ve been doing! I have a few quick tips and tricks and suggestions here based on lots of the feedback I gave. Enjoy!</p>
<section id="i-knitted-my-document-and-nothing-happened" class="level3">
<h3 class="anchored" data-anchor-id="i-knitted-my-document-and-nothing-happened">I knitted my document and nothing happened?</h3>
<p>Most of the time this is because R ran into an error when knitting. RStudio shows you knitting errors in the Render panel, but if you’ve minimized that corner of RStudio, or shrunken it down really small, you won’t see it.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-no-render.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Missing Render panel</figcaption>
</figure>
</div>
<p>Expand the area and look at the panel and you’ll see what went wrong:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-render.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Render panel with error</figcaption>
</figure>
</div>
<p>If nothing is wrong, you might have set RStudio to not automatically preview the knitted document. Click on the little gear icon at the top of the editor panel and make sure one of the “Preview in…” options is checked:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-preview.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Preview options for knitted documents</figcaption>
</figure>
</div>
</section>
<section id="i-tried-to-knit-my-document-and-got-an-error-about-duplicate-chunk-labels.-why" class="level3">
<h3 class="anchored" data-anchor-id="i-tried-to-knit-my-document-and-got-an-error-about-duplicate-chunk-labels.-why">I tried to knit my document and got an error about duplicate chunk labels. Why?</h3>
<p>You can (<a href="https://datavizs23.classes.andrewheiss.com/resource/rmarkdown.html#chunk-names">and should!</a>) name your R code chunks—<a href="../resource/rmarkdown.html#chunk-names">see here for more about how and why</a>. All chunk names must be unique, though.</p>
<p>Often you’ll copy and paste a chunk from earlier in your document to later, like to make a second plot based on the first. That’s fine—just make sure that you change the chunk name.</p>
<p>If there are chunks with repeated names, R will yell at you:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-duplicate-chunks.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Duplicated chunk names</figcaption>
</figure>
</div>
<p>To fix it, change the name of one of the duplicated names to something unique:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-different-names.png" class="img-fluid figure-img"></p>
<figcaption class="figure-caption">Unique chunk names</figcaption>
</figure>
</div>
</section>
<section id="one-of-my-chunks-runs-just-fine-in-rstudio-but-when-i-knit-it-doesnt-show-anything.-why" class="level3">
<h3 class="anchored" data-anchor-id="one-of-my-chunks-runs-just-fine-in-rstudio-but-when-i-knit-it-doesnt-show-anything.-why">One of my chunks runs just fine in RStudio, but when I knit it doesn’t show anything. Why?</h3>
<p>There are lots of different options that you can use with your code chunks (<a href="../resource/rmarkdown.html#chunk-options">see here for more details</a>). One of these is <code>eval</code>, which controls if the chunk gets run when knitted. By default it’s <code>TRUE</code>, but you can change it to <code>FALSE</code> if you want to include a chunk in your document without actually running it.</p>
<p>This is useful for illustrating things that can’t actually run, like this—there is no function named <code>geom_whatever()</code>, and running <code>ggplot(...)</code> doesn’t do anything, since I use the dots as a placeholder to mean “put stuff in here”:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb1-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r a-chunk-that-doesnt-run, eval=FALSE}</span></span>
<span id="cb1-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_whatever</span>()</span>
<span id="cb1-4"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
<p>I included a chunk like that in exercise 7:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb2-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r example-filtering, eval=FALSE}</span></span>
<span id="cb2-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tidy</span>(...) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb2-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_detect</span>(term, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"state"</span>))</span>
<span id="cb2-4"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
<p>That code doesn’t work by itself because of <code>tidy(...)</code>—again, those dots are just a placeholder. If you make a model and then change the code to use it, that’s great! This code all works:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb3-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r example-filtering-real, eval=FALSE}</span></span>
<span id="cb3-2">model <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">lm</span>(</span>
<span id="cb3-3">  percent_dem <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> median_age <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> percent_white <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> per_capita_income <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> median_rent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> state,</span>
<span id="cb3-4">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> results_2016</span>
<span id="cb3-5">)</span>
<span id="cb3-6"></span>
<span id="cb3-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tidy</span>(model) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb3-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">!</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">str_detect</span>(term, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"state"</span>))</span>
<span id="cb3-9"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
<p>You can even click on the little play button in RStudio and run the chunk. However, when you knit the document, the code for that chunk will appear in the document, but it won’t run and nothing will appear.</p>
<p>To fix it, either change it to <code>eval=TRUE</code> or just remove that option (it’s true by default)</p>
</section>
<section id="i-tried-calculating-something-with-sum-or-cor-and-r-gave-me-na-instead-of-a-number.-why" class="level3">
<h3 class="anchored" data-anchor-id="i-tried-calculating-something-with-sum-or-cor-and-r-gave-me-na-instead-of-a-number.-why">I tried calculating something with <code>sum()</code> or <code>cor()</code> and R gave me NA instead of a number. Why?</h3>
<p>This nearly always happens because of missing values. Let’s make a quick little dataset to illustrate what’s going on (and how to fix it):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb4-2"></span>
<span id="cb4-3">example <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tibble</span>(</span>
<span id="cb4-4">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5</span>),</span>
<span id="cb4-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">7</span>, <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">NA</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">9</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">10</span>),</span>
<span id="cb4-6">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">z =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">7</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>)</span>
<span id="cb4-7">)</span>
<span id="cb4-8"></span>
<span id="cb4-9">example</span>
<span id="cb4-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 5 × 3</span></span>
<span id="cb4-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##       x     y     z</span></span>
<span id="cb4-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;dbl&gt; &lt;dbl&gt; &lt;dbl&gt;</span></span>
<span id="cb4-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1     1     6     2</span></span>
<span id="cb4-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2     2     7     6</span></span>
<span id="cb4-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3     3    NA     5</span></span>
<span id="cb4-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4     4     9     7</span></span>
<span id="cb4-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5     5    10     3</span></span></code></pre></div>
</div>
<p>The <code>y</code> column has a missing value (<code>NA</code>), which will mess up any math we do.</p>
<p>Without running any code, what’s the average of the <code>x</code> column? We can find that with math (add all the numbers up and divide by how many numbers there are):</p>
<p><img src="https://latex.codecogs.com/png.latex?%0A%5Cfrac%7B1%20+%202%20+%203%20+%204%20+%205%7D%7B5%7D%20=%203%0A"></p>
<p>Neat. We can confirm with R:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># With dplyr</span></span>
<span id="cb5-2">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(x))</span>
<span id="cb5-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 1 × 1</span></span>
<span id="cb5-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##     avg</span></span>
<span id="cb5-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;dbl&gt;</span></span>
<span id="cb5-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1     3</span></span>
<span id="cb5-8"></span>
<span id="cb5-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># With base R</span></span>
<span id="cb5-10"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(example<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">$</span>x)</span>
<span id="cb5-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1] 3</span></span></code></pre></div>
</div>
<p>What’s the average of the <code>y</code> column? Math time:</p>
<p><img src="https://latex.codecogs.com/png.latex?%0A%5Cfrac%7B6%20+%207%20+%20%5Ctext%7B?%7D%20+%209%20+%2010%7D%7B5%7D%20=%20%5Ctext%7BWho%20even%20knows%7D%0A"></p>
<p>We have no way of knowing what the average is because of that missing value.</p>
<p>If we try it with R, it gives us NA instead of a number:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb6-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(y))</span>
<span id="cb6-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 1 × 1</span></span>
<span id="cb6-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##     avg</span></span>
<span id="cb6-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;dbl&gt;</span></span>
<span id="cb6-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1    NA</span></span></code></pre></div>
</div>
<p>To fix this, we can tell R to remove all the missing values from the column before calculating the average so that it does this:</p>
<p><img src="https://latex.codecogs.com/png.latex?%0A%5Cfrac%7B6%20+%207%20+%209%20+%2010%7D%7B4%7D%20=%208%0A"></p>
<p>Include the argument <code>na.rm = TRUE</code> to do that:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>))</span>
<span id="cb7-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 1 × 1</span></span>
<span id="cb7-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##     avg</span></span>
<span id="cb7-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;dbl&gt;</span></span>
<span id="cb7-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1     8</span></span></code></pre></div>
</div>
<p>This works for lots of R’s calculating functions, like <code>sum()</code>, <code>min()</code>, <code>max()</code>, <code>sd()</code>, <code>median()</code>, <code>mean()</code>, and so on:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(</span>
<span id="cb8-3">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>),</span>
<span id="cb8-4">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>),</span>
<span id="cb8-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">median =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>),</span>
<span id="cb8-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">min =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">min</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>),</span>
<span id="cb8-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">max =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">max</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>),</span>
<span id="cb8-8">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">std_dev =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sd</span>(y, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>)</span>
<span id="cb8-9">  )</span>
<span id="cb8-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 1 × 6</span></span>
<span id="cb8-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   total   avg median   min   max std_dev</span></span>
<span id="cb8-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;dbl&gt; &lt;dbl&gt;  &lt;dbl&gt; &lt;dbl&gt; &lt;dbl&gt;   &lt;dbl&gt;</span></span>
<span id="cb8-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1    32     8      8     6    10    1.83</span></span></code></pre></div>
</div>
<p>This works a little differently with <code>cor()</code> because you’re working with multiple columns instead of just one. If there are any missing values in any of the columns you’re correlating, you’ll get NA for the columns that use it. Here, we have a correlation between <code>x</code> and <code>z</code> because there are no missing values in either of those, but we get NA for the correlation between <code>x</code> and <code>y</code> and between <code>z</code> and <code>y</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cor</span>()</span>
<span id="cb9-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##           x  y         z</span></span>
<span id="cb9-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## x 1.0000000 NA 0.2287479</span></span>
<span id="cb9-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## y        NA  1        NA</span></span>
<span id="cb9-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## z 0.2287479 NA 1.0000000</span></span></code></pre></div>
</div>
<p>Adding <code>na.rm</code> to <code>cor()</code> doesn’t work because <code>cor()</code> doesn’t actually have an argument for <code>na.rm</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb10-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cor</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">na.rm =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>)</span>
<span id="cb10-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Error in cor(., na.rm = TRUE): unused argument (na.rm = TRUE)</span></span></code></pre></div>
</div>
<p>Instead, if you look at the documentation for <code>cor()</code> (run <code>?cor</code> in your R console or search for it in the Help panel in RStudio), you’ll see an argument named <code>use</code> instead. By default it will use all the rows in the data (<code>use = "everything"</code>), but we can change it to <code>use = "complete.obs"</code>. This will remove all rows where something is missing before calculating the correlation:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1">example <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb11-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cor</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">use =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"complete.obs"</span>)</span>
<span id="cb11-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##           x         y         z</span></span>
<span id="cb11-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## x 1.0000000 1.0000000 0.2300895</span></span>
<span id="cb11-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## y 1.0000000 1.0000000 0.2300895</span></span>
<span id="cb11-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## z 0.2300895 0.2300895 1.0000000</span></span></code></pre></div>
</div>
</section>
<section id="i-want-my-bars-to-be-sorted-in-my-plot.-how-can-i-control-their-order" class="level3">
<h3 class="anchored" data-anchor-id="i-want-my-bars-to-be-sorted-in-my-plot.-how-can-i-control-their-order">I want my bars to be sorted in my plot. How can I control their order?</h3>
<p>Sorting categories by different values is important for showing trends in your data. By default, R will plot categorical variables in alphabetical order, but often you’ll want these categories to use some sort of numeric order, likely based on a different column.</p>
<p>There are a few different ways to sort categories. First, let’s make a summarized dataset of the total population in each continent in 2007 (using our trusty ol’ gapminder data):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gapminder)</span>
<span id="cb12-2"></span>
<span id="cb12-3"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Find the total population in each continent in 2007</span></span>
<span id="cb12-4">population_by_continent <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb12-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb12-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb12-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total_population =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(pop))</span>
<span id="cb12-8">population_by_continent</span>
<span id="cb12-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 5 × 2</span></span>
<span id="cb12-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   continent total_population</span></span>
<span id="cb12-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;fct&gt;                &lt;dbl&gt;</span></span>
<span id="cb12-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 Africa           929539692</span></span>
<span id="cb12-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 Americas         898871184</span></span>
<span id="cb12-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 Asia            3811953827</span></span>
<span id="cb12-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 Europe           586098529</span></span>
<span id="cb12-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 Oceania           24549947</span></span></code></pre></div>
</div>
<p>By default the continents will be in alphabetic order:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb13-2">  population_by_continent,</span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)</span>
<span id="cb13-4">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-6">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># The legend is redundant because of the x-axis</span></span>
<span id="cb13-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-alphabetic-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>In this case it’s more useful to plot these in order of total population. My favorite approach for this is to (1) sort the data how I want it with <code>arrange()</code> and (2) lock the order of the category in place with <code>fct_inorder()</code>. Note how the mini dataset is now sorted and Oceania comes first:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1">plot_data_sorted <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> population_by_continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb14-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Sort by population</span></span>
<span id="cb14-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(total_population) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb14-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make continent use the order it's currently in</span></span>
<span id="cb14-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent))</span>
<span id="cb14-6">plot_data_sorted</span>
<span id="cb14-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 5 × 2</span></span>
<span id="cb14-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   continent total_population</span></span>
<span id="cb14-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;fct&gt;                &lt;dbl&gt;</span></span>
<span id="cb14-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 Oceania           24549947</span></span>
<span id="cb14-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 Europe           586098529</span></span>
<span id="cb14-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 Americas         898871184</span></span>
<span id="cb14-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 Africa           929539692</span></span>
<span id="cb14-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 Asia            3811953827</span></span></code></pre></div>
</div>
<p>If we plot it, the continents will be in order:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb15-2">  plot_data_sorted,</span>
<span id="cb15-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)</span>
<span id="cb15-4">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-sorted-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>This plots the continents in reverse order, with Oceania on the left. We can reverse this by either arranging the data in descending population order, or by using <code>fct_rev()</code> to reverse the continent order:</p>
<div class="tabset-margin-container"></div><div class="panel-tabset">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" aria-controls="tabset-1-1" aria-selected="true">Sort in descending order</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" aria-controls="tabset-1-2" aria-selected="false">Use <code>fct_rev()</code></a></li></ul>
<div class="tab-content">
<div id="tabset-1-1" class="tab-pane active" aria-labelledby="tabset-1-1-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb16" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb16-1">plot_data_sorted <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> population_by_continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb16-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Sort by population in descending order</span></span>
<span id="cb16-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(total_population)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb16-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Lock in the continent order</span></span>
<span id="cb16-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent))</span>
<span id="cb16-6"></span>
<span id="cb16-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb16-8">  plot_data_sorted,</span>
<span id="cb16-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)</span>
<span id="cb16-10">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-desc-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
<div id="tabset-1-2" class="tab-pane" aria-labelledby="tabset-1-2-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb17" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb17-1">plot_data_sorted <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> population_by_continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb17-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Sort by population in ascending order</span></span>
<span id="cb17-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(total_population) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb17-4">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Lock in the continent order</span></span>
<span id="cb17-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(continent))</span>
<span id="cb17-6"></span>
<span id="cb17-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb17-8">  plot_data_sorted,</span>
<span id="cb17-9">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Reverse the continent order with fct_rev()</span></span>
<span id="cb17-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_rev</span>(continent), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_rev</span>(continent))</span>
<span id="cb17-11">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb17-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb17-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-fct-rev-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<p>An alternative to the two-step <code>arrange() %&gt;% mutate(blah = fct_inorder(blah))</code> is to use <code>fct_reorder()</code>, which takes two arguments: (1) the column you want to be reordered and (2) the column you want to sort it by:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb18" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb18-1">plot_data_sorted <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> population_by_continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb18-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Sort continent by total_population in descending order</span></span>
<span id="cb18-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_reorder</span>(continent, total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">.desc =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>))</span>
<span id="cb18-4"></span>
<span id="cb18-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb18-6">  plot_data_sorted,</span>
<span id="cb18-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)</span>
<span id="cb18-8">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-fct-reorder-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>That’s only one line instead of two, which is nice, but I tend to be fan of the two step approach because it’s more explicit and gives me more control over sorting. For instance, here I want all the gapminder countries to be sorted by year (descending), continent, and life expectancy so we can see descending life expectancy within each continent over time.</p>
<p>I’m sure there’s a way to sort by multiple columns in different orders like this with <code>fct_reorder()</code>, but I don’t know how. Plus, if I run this <code>super_sorted_data</code> code up until the end of <code>arrange()</code>, I can look at it in RStudio to make sure all the ordering I want is right. That’s harder to do with <code>fct_reorder()</code>.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb19" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb19-1">super_sorted_data <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb19-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">&gt;=</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1997</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb19-3">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Get the countries in order of year (descending), continent, and life expectancy</span></span>
<span id="cb19-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(year), continent, lifeExp) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb19-5">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Lock the country name order in place + lock the year in place</span></span>
<span id="cb19-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(</span>
<span id="cb19-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">country =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(country),</span>
<span id="cb19-8">    <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># year is currently a number, so we need to change it to a factor before</span></span>
<span id="cb19-9">    <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># reordering it</span></span>
<span id="cb19-10">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">year =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">factor</span>(year))</span>
<span id="cb19-11">  )</span>
<span id="cb19-12"></span>
<span id="cb19-13"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(super_sorted_data, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> country, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> lifeExp, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-14">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-15">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">facet_wrap</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">vars</span>(year)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-16">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Reverse the order legend so that Oceania is at the top, since it's at the</span></span>
<span id="cb19-17">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># top in the plot</span></span>
<span id="cb19-18">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guide_legend</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">reverse =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-19">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme_minimal</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-20">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Remove country names and y-axis gridlines + put legend on the bottom</span></span>
<span id="cb19-21">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">theme</span>(</span>
<span id="cb19-22">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">axis.text.y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_blank</span>(),</span>
<span id="cb19-23">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">axis.ticks.y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_blank</span>(),</span>
<span id="cb19-24">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">panel.grid.major.y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_blank</span>(),</span>
<span id="cb19-25">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">panel.grid.minor.y =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">element_blank</span>(),</span>
<span id="cb19-26">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"bottom"</span></span>
<span id="cb19-27">  )</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/gapminder-wild-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>You can also specify any arbitrary category order with <code>fct_relevel()</code></p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb20" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb20-1">plot_data_sorted <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> population_by_continent <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb20-2">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use this specific continent order</span></span>
<span id="cb20-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">continent =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_relevel</span>(</span>
<span id="cb20-4">    continent, </span>
<span id="cb20-5">    <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Asia"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Oceania"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Europe"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Americas"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Africa"</span>))</span>
<span id="cb20-6">  )</span>
<span id="cb20-7"></span>
<span id="cb20-8"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb20-9">  plot_data_sorted,</span>
<span id="cb20-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> total_population, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> continent)</span>
<span id="cb20-11">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-gapminder-arbitrary-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="my-data-has-full-us-state-names-but-i-want-to-use-abbreviations-or-regions.-is-there-a-way-to-automatically-convert-from-names-to-something-else" class="level3">
<h3 class="anchored" data-anchor-id="my-data-has-full-us-state-names-but-i-want-to-use-abbreviations-or-regions.-is-there-a-way-to-automatically-convert-from-names-to-something-else">My data has full US state names but I want to use abbreviations (or regions). Is there a way to automatically convert from names to something else?</h3>
<p>Yep! R has a few state-related variables built in (run <code>?state</code> in your R console to see them all):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb21" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb21-1">state.name</span>
<span id="cb21-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [1] "Alabama"        "Alaska"         "Arizona"        "Arkansas"      </span></span>
<span id="cb21-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [5] "California"     "Colorado"       "Connecticut"    "Delaware"      </span></span>
<span id="cb21-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [9] "Florida"        "Georgia"        "Hawaii"         "Idaho"         </span></span>
<span id="cb21-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [13] "Illinois"       "Indiana"        "Iowa"           "Kansas"        </span></span>
<span id="cb21-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [17] "Kentucky"       "Louisiana"      "Maine"          "Maryland"      </span></span>
<span id="cb21-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [21] "Massachusetts"  "Michigan"       "Minnesota"      "Mississippi"   </span></span>
<span id="cb21-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [25] "Missouri"       "Montana"        "Nebraska"       "Nevada"        </span></span>
<span id="cb21-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [29] "New Hampshire"  "New Jersey"     "New Mexico"     "New York"      </span></span>
<span id="cb21-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [33] "North Carolina" "North Dakota"   "Ohio"           "Oklahoma"      </span></span>
<span id="cb21-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [37] "Oregon"         "Pennsylvania"   "Rhode Island"   "South Carolina"</span></span>
<span id="cb21-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [41] "South Dakota"   "Tennessee"      "Texas"          "Utah"          </span></span>
<span id="cb21-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [45] "Vermont"        "Virginia"       "Washington"     "West Virginia" </span></span>
<span id="cb21-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [49] "Wisconsin"      "Wyoming"</span></span>
<span id="cb21-15">state.abb</span>
<span id="cb21-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [1] "AL" "AK" "AZ" "AR" "CA" "CO" "CT" "DE" "FL" "GA" "HI" "ID" "IL" "IN" "IA"</span></span>
<span id="cb21-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [16] "KS" "KY" "LA" "ME" "MD" "MA" "MI" "MN" "MS" "MO" "MT" "NE" "NV" "NH" "NJ"</span></span>
<span id="cb21-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [31] "NM" "NY" "NC" "ND" "OH" "OK" "OR" "PA" "RI" "SC" "SD" "TN" "TX" "UT" "VT"</span></span>
<span id="cb21-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [46] "VA" "WA" "WV" "WI" "WY"</span></span>
<span id="cb21-20">state.region</span>
<span id="cb21-21"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [1] South         West          West          South         West         </span></span>
<span id="cb21-22"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  [6] West          Northeast     South         South         South        </span></span>
<span id="cb21-23"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [11] West          West          North Central North Central North Central</span></span>
<span id="cb21-24"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [16] North Central South         South         Northeast     South        </span></span>
<span id="cb21-25"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [21] Northeast     North Central North Central South         North Central</span></span>
<span id="cb21-26"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [26] West          North Central West          Northeast     Northeast    </span></span>
<span id="cb21-27"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [31] West          Northeast     South         North Central North Central</span></span>
<span id="cb21-28"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [36] South         West          Northeast     Northeast     South        </span></span>
<span id="cb21-29"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [41] North Central South         South         West          Northeast    </span></span>
<span id="cb21-30"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [46] South         West          South         North Central West         </span></span>
<span id="cb21-31"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Levels: Northeast South North Central West</span></span></code></pre></div>
</div>
<p>These aren’t datasets—they’re single vectors—but you can make a little dataset with columns for each of those details, like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb22" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb22-1">state_details <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tibble</span>(</span>
<span id="cb22-2">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state =</span> state.name,</span>
<span id="cb22-3">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_abb =</span> state.abb,</span>
<span id="cb22-4">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_division =</span> state.division,</span>
<span id="cb22-5">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_region =</span> state.region</span>
<span id="cb22-6">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb22-7">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Add DC manually</span></span>
<span id="cb22-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">add_row</span>(</span>
<span id="cb22-9">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Washington, DC"</span>,</span>
<span id="cb22-10">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_abb =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"DC"</span>,</span>
<span id="cb22-11">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_division =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"South Atlantic"</span>,</span>
<span id="cb22-12">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_region =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"South"</span></span>
<span id="cb22-13">  )</span>
<span id="cb22-14">state_details</span>
<span id="cb22-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 51 × 4</span></span>
<span id="cb22-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    state       state_abb state_division     state_region</span></span>
<span id="cb22-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##    &lt;chr&gt;       &lt;chr&gt;     &lt;chr&gt;              &lt;chr&gt;       </span></span>
<span id="cb22-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  1 Alabama     AL        East South Central South       </span></span>
<span id="cb22-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  2 Alaska      AK        Pacific            West        </span></span>
<span id="cb22-20"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  3 Arizona     AZ        Mountain           West        </span></span>
<span id="cb22-21"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  4 Arkansas    AR        West South Central South       </span></span>
<span id="cb22-22"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  5 California  CA        Pacific            West        </span></span>
<span id="cb22-23"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  6 Colorado    CO        Mountain           West        </span></span>
<span id="cb22-24"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  7 Connecticut CT        New England        Northeast   </span></span>
<span id="cb22-25"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  8 Delaware    DE        South Atlantic     South       </span></span>
<span id="cb22-26"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##  9 Florida     FL        South Atlantic     South       </span></span>
<span id="cb22-27"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 10 Georgia     GA        South Atlantic     South       </span></span>
<span id="cb22-28"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # ℹ 41 more rows</span></span></code></pre></div>
</div>
<p>You can join this dataset to any data you have that has state names or state abbreviations. Joining the data will bring all the columns from <code>state_details</code> into your data wherever rows match. You’ll <a href="https://datavizs23.classes.andrewheiss.com/lesson/12-lesson.html">learn a lot more about joining things in sesison 12 too</a>.</p>
<p>For instance, imagine you have a dataset that looks like this, similar to the unemployment data from exercise 8:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb23" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb23-1">some_state_data <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tribble</span>(</span>
<span id="cb23-2">  <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span>state, <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span>something,</span>
<span id="cb23-3">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Wyoming"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5</span>,</span>
<span id="cb23-4">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"North Carolina"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">9</span>,</span>
<span id="cb23-5">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Nevada"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">10</span>,</span>
<span id="cb23-6">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Georgia"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>,</span>
<span id="cb23-7">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Rhode Island"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>,</span>
<span id="cb23-8">  <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Washington, DC"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span></span>
<span id="cb23-9">)</span>
<span id="cb23-10">some_state_data</span>
<span id="cb23-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 6 × 2</span></span>
<span id="cb23-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   state          something</span></span>
<span id="cb23-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;              &lt;dbl&gt;</span></span>
<span id="cb23-14"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 Wyoming                5</span></span>
<span id="cb23-15"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 North Carolina         9</span></span>
<span id="cb23-16"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 Nevada                10</span></span>
<span id="cb23-17"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 Georgia                3</span></span>
<span id="cb23-18"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 Rhode Island           1</span></span>
<span id="cb23-19"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 6 Washington, DC         6</span></span></code></pre></div>
</div>
<p>We can merge in (or join) the <code>state_details</code> data so that we add columns for abbreviation, region, and so on, using <code>left_join()</code> (again, <a href="https://datavizs23.classes.andrewheiss.com/lesson/12-lesson.html">see lesson 12 for more about all this</a>):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb24" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb24-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Join the state details</span></span>
<span id="cb24-2">data_with_state_details <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> some_state_data <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb24-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(state_details, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(state))</span>
<span id="cb24-4">data_with_state_details</span>
<span id="cb24-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 6 × 5</span></span>
<span id="cb24-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   state          something state_abb state_division state_region</span></span>
<span id="cb24-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;              &lt;dbl&gt; &lt;chr&gt;     &lt;chr&gt;          &lt;chr&gt;       </span></span>
<span id="cb24-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 Wyoming                5 WY        Mountain       West        </span></span>
<span id="cb24-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 North Carolina         9 NC        South Atlantic South       </span></span>
<span id="cb24-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 Nevada                10 NV        Mountain       West        </span></span>
<span id="cb24-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 4 Georgia                3 GA        South Atlantic South       </span></span>
<span id="cb24-12"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 5 Rhode Island           1 RI        New England    Northeast   </span></span>
<span id="cb24-13"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 6 Washington, DC         6 DC        South Atlantic South</span></span></code></pre></div>
</div>
<p>Now your <code>data_with_state_details</code> data has new columns for abbreviations, divisions, regions, and everything else that was in <code>state_details</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb25" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb25-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use it</span></span>
<span id="cb25-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb25-3">  data_with_state_details, </span>
<span id="cb25-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> state_abb, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> something, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> state_region)</span>
<span id="cb25-5">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb25-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-state-abbreviations-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>And for fun, we can fix the ordering:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb26" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb26-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Fix the ordering</span></span>
<span id="cb26-2">data_with_state_details <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> some_state_data <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb26-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">left_join</span>(state_details, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">join_by</span>(state)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb26-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">arrange</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">desc</span>(something)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb26-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">state_abb =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fct_inorder</span>(state_abb))</span>
<span id="cb26-6"></span>
<span id="cb26-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb26-8">  data_with_state_details, </span>
<span id="cb26-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> state_abb, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> something, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> state_region)</span>
<span id="cb26-10">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb26-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08_files/figure-html/plot-state-abbreviations-ordering-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-07-04_faqs_session-07-08.html</guid>
  <pubDate>Tue, 04 Jul 2023 18:02:00 GMT</pubDate>
</item>
<item>
  <title>How to reach out when stuck</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-27_how-to-reach-out.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>In your reflections and via e-mails, a bunch of you have brought up a consistent concern: that you get often get stuck on some issue and don’t feel comfortable reaching out for help.</p>
<p>You <strong>absolutely</strong> can (and should) reach out when stuck. I’m super responsive on Slack and e-mail. If you ask a question on the #help channel in Slack, others can help too. No question is too tricky or embarrassing, I promise. Computers are extraordinarily literal and tiny typos will often mess you up for a long time—I’ve lost countless time because of missing commas and misspelled words (curse you <code>lenght()</code>). Please feel comfortable reaching out.</p>
<p>One of the great parts about the online R community is that the team at RStudio has actually hired people to help promote community norms. Like that’s their whole job—community evangelist (see <a href="https://twitter.com/dataandme">@dataandme</a>, for instance). The R world is probably one of the nicest corners of the programming internet because of these norms—there’s an emphasis on helping beginners, being kind and respectful, and cheerfully helping as much as possible. Watch the #rstats hashtag on <a href="https://twitter.com/hashtag/rstats">Twitter</a> and Mastodon, look at the “r” tag on StackOverflow, and look at discussions at the <a href="https://community.rstudio.com/">Posit Community</a> and you’ll see kindness in action.</p>
<p>This was not always the case. 10ish years ago, before the RStudio people made a concerted effort to create community, the online R world was pretty mean and toxic, with forums run by a few really grumpy statisticians who’d belittle you if you asked a poorly worded question. It was awful. That kind of attitude often still persists in other languages (hooo boy try asking a beginner question about Python at StackOverflow 😬), but the R world has tried really hard to be welcoming.</p>
<p>I embrace that attitude when teaching R, and I encourage you all to do the same. Reach out for help early and often. Do not suffer in silence. Do not spend hours and hours stuck on an issue before reaching out for help. I’m a big believer in the 30-minute rule:</p>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
The 30-minute rule
</div>
</div>
<div class="callout-body-container callout-body">
<p>If you’re stuck on an issue for more than 30 minutes, <strong>stop</strong> and take a break and ask for help somewhere.</p>
</div>
</div>
<p>If you feel comfortable, reach out publicly on the #help channel rather than a Slack DM so that others can help. This helps build and strengthen the community within our class and within the R community more broadly.</p>
<p>There are a few easy guidelines to remember when asking for help:</p>
<ol type="1">
<li><p>Be kind.</p></li>
<li><p>Try asking questions with as complete information as possible. Rather than saying something like “my code isn’t working” and that’s it, provide more background (it’s hard to read your computer’s mind). Say specifically what you’re trying to do and provide code when possible. You can actually format R code on Slack if you click on the little lightning icon in the bottom left of the typing area and search for “text snippet”—that’ll open a dialog that will let you paste in text and add R syntax highlighting. You can also paste your code between triple backticks on Slack and it’ll format it in monospaced font (though not with the neat syntax highlighting that you get when using Slack’s text snippet thing):</p>
<div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb1-1">```</span>
<span id="cb1-2">ggplot(blah) + geom_point()</span>
<span id="cb1-3">```</span></code></pre></div>
<p>You can also take screenshots (use ⌘+shift+4 on macOS to save a screenshot to your Desktop, or ⌘+⌥+shift+4 to save a screenshot directly to the clipboard; use Windows+shift+S on Windows to save a screenshot directly to the clipboard). I’ve had people send photos from their phones too (but this is less than ideal—the photo quality is low and it’s hard to see details on the screen). The one issue with screenshots/photos is that it’s harder for people to get the code out of Slack and into RStudio on their computer to troubleshoot, since you can’t copy/paste from an image.</p></li>
<li><p>Try making your question a <strong>repr</strong>oducible <strong>ex</strong>ample (or reprex). You’ll learn more about reprexes in session 8, but it’s an incredibly important skill to have. <a href="../content/08-content.html#reproducible-examples">See here for some resources about it</a></p></li>
</ol>
<p>And that’s it. <strong>Ask questions in ways that will help answerers answer them and be nice about it. When answering questions, be nice about it. Ask lots of questions. Answer lots of questions.</strong></p>
<p>Once again, <em>do not suffer in silence</em>. I’ve had past students tell me that’s like the one thing they’ll remember from my classes—do not suffer in silence. I mean it, and I’ll keep saying it throughout the semester (because often in your past courses and degrees, you’ve been discouraged from reaching out or from building communities or whatever—that is <em>not</em> the case here).</p>
<p>Remember that you can always sign up for a time to meet with me at <a href="https://calendly.com/andrewheiss/">my Calendly page</a>! I’m also on Slack and accessible via e-mail!</p>
<p>Good luck with your assignments and mini project this week!</p>



 ]]></description>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-27_how-to-reach-out.html</guid>
  <pubDate>Wed, 28 Jun 2023 00:34:00 GMT</pubDate>
</item>
<item>
  <title>Sessions 5 and 6 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>I’m really happy with how you all did with exercises 5 and 6 (you made some legitimately hideous plots!).</p>
<p>I got a lot of similar questions and I saw some common issues in the assignments, so like normal, I’ve compiled them all here. Enjoy!</p>
<section id="my-axis-labels-are-overlapping-and-ugly.-how-can-i-fix-that" class="level3">
<h3 class="anchored" data-anchor-id="my-axis-labels-are-overlapping-and-ugly.-how-can-i-fix-that">My axis labels are overlapping and ugly. How can I fix that?</h3>
<p>Sometimes you’ll have text that is too long to fit comfortably as axis labels and the labels will overlap and be gross:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/https:/www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/index_files/figure-html/plot-the-problem-1.png" class="img-fluid figure-img" style="width:70.0%"></p>
<figcaption class="figure-caption">Overlapping axis labels</figcaption>
</figure>
</div>
<p><a href="https://www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/">Check out this blog post</a> for a bunch of different ways to fix this and make nicer labels, like this:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/https:/www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/index_files/figure-html/plot-auto-1.png" class="img-fluid figure-img" style="width:70.0%"></p>
<figcaption class="figure-caption">Non-overlapping axis labels</figcaption>
</figure>
</div>
</section>
<section id="why-isnt-the-example-code-using-data-whatever-and-mapping-aes-in-ggplot-anymore-do-we-not-have-to-use-argument-names" class="level3">
<h3 class="anchored" data-anchor-id="why-isnt-the-example-code-using-data-whatever-and-mapping-aes-in-ggplot-anymore-do-we-not-have-to-use-argument-names">Why isn’t the example code using <code>data = whatever</code> and <code>mapping = aes()</code> in <code>ggplot()</code> anymore? Do we not have to use argument names?</h3>
<p>In the first few sessions, you wrote code that looked like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>In R, you feed functions arguments like <code>data</code> and <code>mapping</code> and I was having you explicitly name the arguments, like <code>data = mpg</code> and <code>mapping = aes(...)</code>.</p>
<p>In general it’s a good idea to use named arguments, since it’s clearer what you mean.</p>
<p>However, with really common functions like <code>ggplot()</code>, you can actually skip the names. If you look at the documentation for <code>ggplot()</code> (i.e.&nbsp;run <code>?ggplot</code> in your R console or search for “ggplot” in the Help panel in RStudio), you’ll see that the first expected argument is <code>data</code> and the second is <code>mapping</code>.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/ggplot-help-arguments.png" class="img-fluid figure-img" style="width:90.0%"></p>
<figcaption class="figure-caption">The documentation for the ggplot() function</figcaption>
</figure>
</div>
<p>If you don’t name the arguments, like this…</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>…<code>ggplot()</code> will assume that the first argument (<code>mpg</code>) really means <code>data = mpg</code> and that the second really means <code>mapping = aes(...)</code>.</p>
<p>If you don’t name the arguments, <strong>the order matters</strong>. This won’t work because ggplot will think that the <code>aes(...)</code> stuff is really <code>data = aes(...)</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy), mpg) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>If you do name the arguments, <strong>the order <em>doesn’t</em> matter</strong>. This will work because it’s clear that <code>data = mpg</code> (even though this feels backwards and wrong):</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>This works with all R functions. You can either name the arguments and put them in whatever order you want, or you can not name them and use them in the order that’s listed in the documentation.</p>
<p><strong>In general, you should name your arguments for the sake of clarity.</strong> For instance, with <code>aes()</code>, the first argument is <code>x</code> and the second is <code>y</code>, so you can technically do this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(displ, hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>That’s nice and short, but you have to remember that <code>displ</code> is on the x-axis and <code>hwy</code> is on the y-axis. And it gets extra confusing once you start mapping other columns:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(displ, hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
</div>
<p>All the other aesthetics like color and size are named, but x and y aren’t, which just feels… off.</p>
<p>So use argument names except for super common things like <code>ggplot()</code> and the {dplyr} verbs like <code>mutate()</code>, <code>group_by()</code>, <code>filter()</code>, etc.</p>
</section>
<section id="in-chapter-22-wilke-talks-about-tablesis-there-a-way-to-make-pretty-tables-with-r" class="level3">
<h3 class="anchored" data-anchor-id="in-chapter-22-wilke-talks-about-tablesis-there-a-way-to-make-pretty-tables-with-r">In chapter 22, Wilke talks about tables—is there a way to make pretty tables with R?</h3>
<p>Absolutely! We don’t have time in this class to cover tables, but there’s a whole world of packages for making beautiful tables with R. Three of the more common ones are <a href="https://gt.rstudio.com/">{gt}</a>, <a href="https://haozhu233.github.io/kableExtra/">{kableExtra}</a>, and <a href="https://ardata-fr.github.io/flextable-book/">{flextable}</a>:</p>
<div class="cell" data-layout-align="center">
<div class="cell-output-display">

<div id="fwgietnbtb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>#fwgietnbtb table {
  font-family: Barlow, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#fwgietnbtb thead, #fwgietnbtb tbody, #fwgietnbtb tfoot, #fwgietnbtb tr, #fwgietnbtb td, #fwgietnbtb th {
  border-style: none;
}

#fwgietnbtb p {
  margin: 0;
  padding: 0;
}

#fwgietnbtb .gt_table {
  display: table;
  border-collapse: collapse;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#fwgietnbtb .gt_caption {
  padding-top: 4px;
  padding-bottom: 4px;
}

#fwgietnbtb .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#fwgietnbtb .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#fwgietnbtb .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#fwgietnbtb .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#fwgietnbtb .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#fwgietnbtb .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: bold;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#fwgietnbtb .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: bold;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#fwgietnbtb .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#fwgietnbtb .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#fwgietnbtb .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#fwgietnbtb .gt_spanner_row {
  border-bottom-style: hidden;
}

#fwgietnbtb .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: bold;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  text-align: left;
}

#fwgietnbtb .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: bold;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#fwgietnbtb .gt_from_md > :first-child {
  margin-top: 0;
}

#fwgietnbtb .gt_from_md > :last-child {
  margin-bottom: 0;
}

#fwgietnbtb .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#fwgietnbtb .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#fwgietnbtb .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#fwgietnbtb .gt_row_group_first td {
  border-top-width: 2px;
}

#fwgietnbtb .gt_row_group_first th {
  border-top-width: 2px;
}

#fwgietnbtb .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#fwgietnbtb .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#fwgietnbtb .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#fwgietnbtb .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#fwgietnbtb .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#fwgietnbtb .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#fwgietnbtb .gt_last_grand_summary_row_top {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: double;
  border-bottom-width: 6px;
  border-bottom-color: #D3D3D3;
}

#fwgietnbtb .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#fwgietnbtb .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#fwgietnbtb .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#fwgietnbtb .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#fwgietnbtb .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#fwgietnbtb .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#fwgietnbtb .gt_left {
  text-align: left;
}

#fwgietnbtb .gt_center {
  text-align: center;
}

#fwgietnbtb .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#fwgietnbtb .gt_font_normal {
  font-weight: normal;
}

#fwgietnbtb .gt_font_bold {
  font-weight: bold;
}

#fwgietnbtb .gt_font_italic {
  font-style: italic;
}

#fwgietnbtb .gt_super {
  font-size: 65%;
}

#fwgietnbtb .gt_footnote_marks {
  font-size: 75%;
  vertical-align: 0.4em;
  position: initial;
}

#fwgietnbtb .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#fwgietnbtb .gt_indent_1 {
  text-indent: 5px;
}

#fwgietnbtb .gt_indent_2 {
  text-indent: 10px;
}

#fwgietnbtb .gt_indent_3 {
  text-indent: 15px;
}

#fwgietnbtb .gt_indent_4 {
  text-indent: 20px;
}

#fwgietnbtb .gt_indent_5 {
  text-indent: 25px;
}
</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
  <thead>
    
    <tr class="gt_col_headings gt_spanner_row">
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="2" colspan="1" scope="col" id="Package">Package</th>
      <th class="gt_center gt_columns_top_border gt_column_spanner_outer" rowspan="1" colspan="3" scope="colgroup" id="Output support">
        <span class="gt_column_spanner">Output support</span>
      </th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="2" colspan="1" scope="col" id=" "> </th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="2" colspan="1" scope="col" id="Notes">Notes</th>
    </tr>
    <tr class="gt_col_headings">
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="HTML">HTML</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="PDF">PDF</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="Word">Word</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td headers="Package" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://gt.rstudio.com/"><strong>{gt}</strong></a></p>
</div></td>
<td headers="HTML" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><strong>Great</strong></p>
</div></td>
<td headers="PDF" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Okay</p>
</div></td>
<td headers="Word" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Okay</p>
</div></td>
<td headers="" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://gt.rstudio.com/articles/case-study-gtcars.html">Examples</a></p>
</div></td>
<td headers="Notes" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Has the goal of becoming the “grammar of tables” (hence “gt”). It is supported by developers at Posit and gets updated and improved regularly. It’ll likely become the main table-making package for R.</p>
</div></td></tr>
    <tr><td headers="Package" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://haozhu233.github.io/kableExtra/"><strong>{kableExtra}</strong></a></p>
</div></td>
<td headers="HTML" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><strong>Great</strong></p>
</div></td>
<td headers="PDF" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><strong>Great</strong></p>
</div></td>
<td headers="Word" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Okay</p>
</div></td>
<td headers="" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://haozhu233.github.io/kableExtra/awesome_table_in_html.html">Examples</a></p>
</div></td>
<td headers="Notes" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Works really well for HTML output and has the best support for PDF output, but development has stalled for the past couple years and it seems to maybe be abandonded, which is sad.</p>
</div></td></tr>
    <tr><td headers="Package" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://ardata-fr.github.io/flextable-book/"><strong>{flextable}</strong></a></p>
</div></td>
<td headers="HTML" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><strong>Great</strong></p>
</div></td>
<td headers="PDF" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Okay</p>
</div></td>
<td headers="Word" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><strong>Great</strong></p>
</div></td>
<td headers="" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p><a href="https://ardata-fr.github.io/flextable-book/index.html#walkthrough-simple-example">Examples</a></p>
</div></td>
<td headers="Notes" class="gt_row gt_left" style="vertical-align: top;"><div class="gt_from_md"><p>Works really well for HTML output and has the best support for Word output. It’s not abandonded and gets regular updates.</p>
</div></td></tr>
  </tbody>
  
  
</table>
</div>
</div>
</div>
<p>Here’s a quick illustration of these three packages. All three are incredibly powerful and let you do all sorts of really neat formatting things (<a href="https://gt.rstudio.com/reference/opt_interactive.html">{gt} even makes interactive HTML tables!</a>), so make sure you check out the documentation and examples. I personally use all three, depending on which output I’m working with. When knitting to HTML, I use {gt}; when knitting to PDF I use {gt} or {kableExtra}; when knitting to Word I use {flextable}.</p>
<div class="tabset-margin-container"></div><div class="panel-tabset">
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" id="tabset-1-1-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-1" aria-controls="tabset-1-1" aria-selected="true">Dataset to table-ify</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-2-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-2" aria-controls="tabset-1-2" aria-selected="false">{gt}</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-3-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-3" aria-controls="tabset-1-3" aria-selected="false">{kableExtra}</a></li><li class="nav-item"><a class="nav-link" id="tabset-1-4-tab" data-bs-toggle="tab" data-bs-target="#tabset-1-4" aria-controls="tabset-1-4" aria-selected="false">{flextable}</a></li></ul>
<div class="tab-content">
<div id="tabset-1-1" class="tab-pane active" aria-labelledby="tabset-1-1-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb7-2"></span>
<span id="cb7-3">cars_summary <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> mpg <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb7-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(year, drv) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb7-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(</span>
<span id="cb7-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">n =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>(),</span>
<span id="cb7-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg_mpg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(hwy),</span>
<span id="cb7-8">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">median_mpg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">median</span>(hwy),</span>
<span id="cb7-9">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">min_mpg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">min</span>(hwy),</span>
<span id="cb7-10">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">max_mpg =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">max</span>(hwy)</span>
<span id="cb7-11">  )</span></code></pre></div>
</div>
</div>
<div id="tabset-1-2" class="tab-pane" aria-labelledby="tabset-1-2-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gt)</span>
<span id="cb8-2"></span>
<span id="cb8-3">cars_summary <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">gt</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cols_label</span>(</span>
<span id="cb8-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">drv =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span>,</span>
<span id="cb8-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">n =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"N"</span>,</span>
<span id="cb8-8">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg_mpg =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Average"</span>,</span>
<span id="cb8-9">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">median_mpg =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Median"</span>,</span>
<span id="cb8-10">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">min_mpg =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Minimum"</span>,</span>
<span id="cb8-11">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">max_mpg =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Maximum"</span></span>
<span id="cb8-12">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tab_spanner</span>(</span>
<span id="cb8-14">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Highway MPG"</span>,</span>
<span id="cb8-15">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">columns =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(avg_mpg, median_mpg, min_mpg, max_mpg)</span>
<span id="cb8-16">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-17">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">fmt_number</span>(</span>
<span id="cb8-18">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">columns =</span> avg_mpg,</span>
<span id="cb8-19">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">decimals =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span></span>
<span id="cb8-20">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb8-21">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">tab_options</span>(</span>
<span id="cb8-22">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">row_group.as_column =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span></span>
<span id="cb8-23">  )</span></code></pre></div>
<div class="cell-output-display">

<div id="ufersdseqn" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>#ufersdseqn table {
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#ufersdseqn thead, #ufersdseqn tbody, #ufersdseqn tfoot, #ufersdseqn tr, #ufersdseqn td, #ufersdseqn th {
  border-style: none;
}

#ufersdseqn p {
  margin: 0;
  padding: 0;
}

#ufersdseqn .gt_table {
  display: table;
  border-collapse: collapse;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#ufersdseqn .gt_caption {
  padding-top: 4px;
  padding-bottom: 4px;
}

#ufersdseqn .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#ufersdseqn .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#ufersdseqn .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#ufersdseqn .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#ufersdseqn .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#ufersdseqn .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#ufersdseqn .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#ufersdseqn .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#ufersdseqn .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#ufersdseqn .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#ufersdseqn .gt_spanner_row {
  border-bottom-style: hidden;
}

#ufersdseqn .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  text-align: left;
}

#ufersdseqn .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#ufersdseqn .gt_from_md > :first-child {
  margin-top: 0;
}

#ufersdseqn .gt_from_md > :last-child {
  margin-bottom: 0;
}

#ufersdseqn .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#ufersdseqn .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#ufersdseqn .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#ufersdseqn .gt_row_group_first td {
  border-top-width: 2px;
}

#ufersdseqn .gt_row_group_first th {
  border-top-width: 2px;
}

#ufersdseqn .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#ufersdseqn .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#ufersdseqn .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#ufersdseqn .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#ufersdseqn .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#ufersdseqn .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#ufersdseqn .gt_last_grand_summary_row_top {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: double;
  border-bottom-width: 6px;
  border-bottom-color: #D3D3D3;
}

#ufersdseqn .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#ufersdseqn .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#ufersdseqn .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#ufersdseqn .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#ufersdseqn .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#ufersdseqn .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#ufersdseqn .gt_left {
  text-align: left;
}

#ufersdseqn .gt_center {
  text-align: center;
}

#ufersdseqn .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#ufersdseqn .gt_font_normal {
  font-weight: normal;
}

#ufersdseqn .gt_font_bold {
  font-weight: bold;
}

#ufersdseqn .gt_font_italic {
  font-style: italic;
}

#ufersdseqn .gt_super {
  font-size: 65%;
}

#ufersdseqn .gt_footnote_marks {
  font-size: 75%;
  vertical-align: 0.4em;
  position: initial;
}

#ufersdseqn .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#ufersdseqn .gt_indent_1 {
  text-indent: 5px;
}

#ufersdseqn .gt_indent_2 {
  text-indent: 10px;
}

#ufersdseqn .gt_indent_3 {
  text-indent: 15px;
}

#ufersdseqn .gt_indent_4 {
  text-indent: 20px;
}

#ufersdseqn .gt_indent_5 {
  text-indent: 25px;
}
</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
  <thead>
    
    <tr class="gt_col_headings gt_spanner_row">
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="2" colspan="1" scope="col" id=""></th>
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="2" colspan="1" scope="col" id="Drive">Drive</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="2" colspan="1" scope="col" id="N">N</th>
      <th class="gt_center gt_columns_top_border gt_column_spanner_outer" rowspan="1" colspan="4" scope="colgroup" id="Highway MPG">
        <span class="gt_column_spanner">Highway MPG</span>
      </th>
    </tr>
    <tr class="gt_col_headings">
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Average">Average</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Median">Median</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Minimum">Minimum</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="Maximum">Maximum</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr class="gt_row_group_first"><td headers="1999 stub_1_1 stub_1" rowspan="3" class="gt_row gt_left gt_stub_row_group">1999</td>
<td headers="1999 stub_1_1 drv" class="gt_row gt_left">4</td>
<td headers="1999 stub_1_1 n" class="gt_row gt_right">49</td>
<td headers="1999 stub_1_1 avg_mpg" class="gt_row gt_right">18.84</td>
<td headers="1999 stub_1_1 median_mpg" class="gt_row gt_right">17</td>
<td headers="1999 stub_1_1 min_mpg" class="gt_row gt_right">15</td>
<td headers="1999 stub_1_1 max_mpg" class="gt_row gt_right">26</td></tr>
    <tr><td headers="1999 drv_2 drv" class="gt_row gt_left">f</td>
<td headers="1999 drv_2 n" class="gt_row gt_right">57</td>
<td headers="1999 drv_2 avg_mpg" class="gt_row gt_right">27.91</td>
<td headers="1999 drv_2 median_mpg" class="gt_row gt_right">26</td>
<td headers="1999 drv_2 min_mpg" class="gt_row gt_right">21</td>
<td headers="1999 drv_2 max_mpg" class="gt_row gt_right">44</td></tr>
    <tr><td headers="1999 drv_3 drv" class="gt_row gt_left">r</td>
<td headers="1999 drv_3 n" class="gt_row gt_right">11</td>
<td headers="1999 drv_3 avg_mpg" class="gt_row gt_right">20.64</td>
<td headers="1999 drv_3 median_mpg" class="gt_row gt_right">21</td>
<td headers="1999 drv_3 min_mpg" class="gt_row gt_right">16</td>
<td headers="1999 drv_3 max_mpg" class="gt_row gt_right">26</td></tr>
    <tr class="gt_row_group_first"><td headers="2008 stub_1_4 stub_1" rowspan="3" class="gt_row gt_left gt_stub_row_group">2008</td>
<td headers="2008 stub_1_4 drv" class="gt_row gt_left">4</td>
<td headers="2008 stub_1_4 n" class="gt_row gt_right">54</td>
<td headers="2008 stub_1_4 avg_mpg" class="gt_row gt_right">19.48</td>
<td headers="2008 stub_1_4 median_mpg" class="gt_row gt_right">19</td>
<td headers="2008 stub_1_4 min_mpg" class="gt_row gt_right">12</td>
<td headers="2008 stub_1_4 max_mpg" class="gt_row gt_right">28</td></tr>
    <tr><td headers="2008 drv_5 drv" class="gt_row gt_left">f</td>
<td headers="2008 drv_5 n" class="gt_row gt_right">49</td>
<td headers="2008 drv_5 avg_mpg" class="gt_row gt_right">28.45</td>
<td headers="2008 drv_5 median_mpg" class="gt_row gt_right">29</td>
<td headers="2008 drv_5 min_mpg" class="gt_row gt_right">17</td>
<td headers="2008 drv_5 max_mpg" class="gt_row gt_right">37</td></tr>
    <tr><td headers="2008 drv_6 drv" class="gt_row gt_left">r</td>
<td headers="2008 drv_6 n" class="gt_row gt_right">14</td>
<td headers="2008 drv_6 avg_mpg" class="gt_row gt_right">21.29</td>
<td headers="2008 drv_6 median_mpg" class="gt_row gt_right">21</td>
<td headers="2008 drv_6 min_mpg" class="gt_row gt_right">15</td>
<td headers="2008 drv_6 max_mpg" class="gt_row gt_right">26</td></tr>
  </tbody>
  
  
</table>
</div>
</div>
</div>
</div>
<div id="tabset-1-3" class="tab-pane" aria-labelledby="tabset-1-3-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(kableExtra)</span>
<span id="cb9-2"></span>
<span id="cb9-3">cars_summary <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">select</span>(<span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">-</span>year) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">kbl</span>(</span>
<span id="cb9-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">col.names =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"N"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Average"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Median"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Minimum"</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Maximum"</span>),</span>
<span id="cb9-8">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">digits =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span></span>
<span id="cb9-9">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">kable_styling</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">pack_rows</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"1999"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-12">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">pack_rows</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"2008"</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">6</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb9-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">add_header_above</span>(<span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">" "</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Highway MPG"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>))</span></code></pre></div>
<div class="cell-output-display">
<table class="table table-sm table-striped small" data-quarto-postprocess="true">
<colgroup>
<col style="width: 16%">
<col style="width: 16%">
<col style="width: 16%">
<col style="width: 16%">
<col style="width: 16%">
<col style="width: 16%">
</colgroup>
<thead>
<tr class="header">
<th colspan="2" data-quarto-table-cell-role="th" style="empty-cells: hide; border-bottom: hidden"></th>
<th colspan="4" data-quarto-table-cell-role="th" style="text-align: center; border-bottom: hidden; padding-bottom: 0; padding-left: 3px; padding-right: 3px;"><div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; ">
Highway MPG
</div></th>
</tr>
<tr class="odd">
<th style="text-align: left;" data-quarto-table-cell-role="th">Drive</th>
<th style="text-align: right;" data-quarto-table-cell-role="th">N</th>
<th style="text-align: right;" data-quarto-table-cell-role="th">Average</th>
<th style="text-align: right;" data-quarto-table-cell-role="th">Median</th>
<th style="text-align: right;" data-quarto-table-cell-role="th">Minimum</th>
<th style="text-align: right;" data-quarto-table-cell-role="th">Maximum</th>
</tr>
</thead>
<tbody>
<tr class="odd" data-grouplength="3">
<td colspan="6" style="border-bottom: 1px solid"><strong>1999</strong></td>
</tr>
<tr class="even">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">4</td>
<td style="text-align: right;">49</td>
<td style="text-align: right;">18.84</td>
<td style="text-align: right;">17</td>
<td style="text-align: right;">15</td>
<td style="text-align: right;">26</td>
</tr>
<tr class="odd">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">f</td>
<td style="text-align: right;">57</td>
<td style="text-align: right;">27.91</td>
<td style="text-align: right;">26</td>
<td style="text-align: right;">21</td>
<td style="text-align: right;">44</td>
</tr>
<tr class="even">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">r</td>
<td style="text-align: right;">11</td>
<td style="text-align: right;">20.64</td>
<td style="text-align: right;">21</td>
<td style="text-align: right;">16</td>
<td style="text-align: right;">26</td>
</tr>
<tr class="odd" data-grouplength="3">
<td colspan="6" style="border-bottom: 1px solid"><strong>2008</strong></td>
</tr>
<tr class="even">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">4</td>
<td style="text-align: right;">54</td>
<td style="text-align: right;">19.48</td>
<td style="text-align: right;">19</td>
<td style="text-align: right;">12</td>
<td style="text-align: right;">28</td>
</tr>
<tr class="odd">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">f</td>
<td style="text-align: right;">49</td>
<td style="text-align: right;">28.45</td>
<td style="text-align: right;">29</td>
<td style="text-align: right;">17</td>
<td style="text-align: right;">37</td>
</tr>
<tr class="even">
<td style="text-align: left; padding-left: 2em;" data-indentlevel="1">r</td>
<td style="text-align: right;">14</td>
<td style="text-align: right;">21.29</td>
<td style="text-align: right;">21</td>
<td style="text-align: right;">15</td>
<td style="text-align: right;">26</td>
</tr>
</tbody>
</table>


</div>
</div>
</div>
<div id="tabset-1-4" class="tab-pane" aria-labelledby="tabset-1-4-tab">
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(flextable)</span>
<span id="cb10-2"></span>
<span id="cb10-3">cars_summary <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">rename</span>(</span>
<span id="cb10-5">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Year"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> year,</span>
<span id="cb10-6">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> drv,</span>
<span id="cb10-7">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"N"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> n,</span>
<span id="cb10-8">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Average"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> avg_mpg,</span>
<span id="cb10-9">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Median"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> median_mpg,</span>
<span id="cb10-10">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Minimum"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> min_mpg,</span>
<span id="cb10-11">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Maximum"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> max_mpg</span>
<span id="cb10-12">    ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">Year =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">as.character</span>(Year)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-14">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">flextable</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-15">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">colformat_double</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">j =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Average"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">digits =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb10-16">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">add_header_row</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">values =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">" "</span>, <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Highway MPG"</span>), <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">colwidths =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">3</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span>)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-17">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">align</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">i =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">part =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"header"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">align =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"center"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-18">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">merge_v</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">j =</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> Year) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb10-19">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">valign</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">j =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">valign =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"top"</span>)</span></code></pre></div>
<div class="cell-output-display">

<div class="tabwid"><style>.cl-c724625a{}.cl-c720bfec{font-family:'Helvetica';font-size:11pt;font-weight:normal;font-style:normal;text-decoration:none;color:rgba(0, 0, 0, 1.00);background-color:transparent;}.cl-c72242ae{margin:0;text-align:center;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);padding-bottom:5pt;padding-top:5pt;padding-left:5pt;padding-right:5pt;line-height: 1;background-color:transparent;}.cl-c72242b8{margin:0;text-align:left;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);padding-bottom:5pt;padding-top:5pt;padding-left:5pt;padding-right:5pt;line-height: 1;background-color:transparent;}.cl-c72242b9{margin:0;text-align:right;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);padding-bottom:5pt;padding-top:5pt;padding-left:5pt;padding-right:5pt;line-height: 1;background-color:transparent;}.cl-c72242ba{margin:0;text-align:left;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);padding-bottom:5pt;padding-top:5pt;padding-left:5pt;padding-right:5pt;line-height: 1;background-color:transparent;}.cl-c7224d08{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 1.5pt solid rgba(102, 102, 102, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d09{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 1.5pt solid rgba(102, 102, 102, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d0a{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 1.5pt solid rgba(102, 102, 102, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d12{width:0.75in;background-color:transparent;vertical-align: top;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d13{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d14{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 0 solid rgba(0, 0, 0, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d15{width:0.75in;background-color:transparent;vertical-align: top;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d16{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}.cl-c7224d1c{width:0.75in;background-color:transparent;vertical-align: middle;border-bottom: 1.5pt solid rgba(102, 102, 102, 1.00);border-top: 0 solid rgba(0, 0, 0, 1.00);border-left: 0 solid rgba(0, 0, 0, 1.00);border-right: 0 solid rgba(0, 0, 0, 1.00);margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;}</style><table data-quarto-disable-processing="true" class="cl-c724625a"><caption><p>Flextable example</p></caption><thead><tr style="overflow-wrap:break-word;"><th colspan="3" class="cl-c7224d08"><p class="cl-c72242ae"><span class="cl-c720bfec"> </span></p></th><th colspan="4" class="cl-c7224d08"><p class="cl-c72242ae"><span class="cl-c720bfec">Highway MPG</span></p></th></tr><tr style="overflow-wrap:break-word;"><th class="cl-c7224d09"><p class="cl-c72242b8"><span class="cl-c720bfec">Year</span></p></th><th class="cl-c7224d09"><p class="cl-c72242b8"><span class="cl-c720bfec">Drive</span></p></th><th class="cl-c7224d0a"><p class="cl-c72242b9"><span class="cl-c720bfec">N</span></p></th><th class="cl-c7224d0a"><p class="cl-c72242b9"><span class="cl-c720bfec">Average</span></p></th><th class="cl-c7224d0a"><p class="cl-c72242b9"><span class="cl-c720bfec">Median</span></p></th><th class="cl-c7224d0a"><p class="cl-c72242b9"><span class="cl-c720bfec">Minimum</span></p></th><th class="cl-c7224d0a"><p class="cl-c72242b9"><span class="cl-c720bfec">Maximum</span></p></th></tr></thead><tbody><tr style="overflow-wrap:break-word;"><td rowspan="3" class="cl-c7224d12"><p class="cl-c72242ba"><span class="cl-c720bfec">1999</span></p></td><td class="cl-c7224d13"><p class="cl-c72242b8"><span class="cl-c720bfec">4</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">49</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">18.84</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">17</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">15</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">26</span></p></td></tr><tr style="overflow-wrap:break-word;"><td class="cl-c7224d13"><p class="cl-c72242b8"><span class="cl-c720bfec">f</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">57</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">27.91</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">26</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">21</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">44</span></p></td></tr><tr style="overflow-wrap:break-word;"><td class="cl-c7224d13"><p class="cl-c72242b8"><span class="cl-c720bfec">r</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">11</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">20.64</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">21</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">16</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">26</span></p></td></tr><tr style="overflow-wrap:break-word;"><td rowspan="3" class="cl-c7224d12"><p class="cl-c72242ba"><span class="cl-c720bfec">2008</span></p></td><td class="cl-c7224d13"><p class="cl-c72242b8"><span class="cl-c720bfec">4</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">54</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">19.48</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">19</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">12</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">28</span></p></td></tr><tr style="overflow-wrap:break-word;"><td class="cl-c7224d13"><p class="cl-c72242b8"><span class="cl-c720bfec">f</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">49</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">28.45</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">29</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">17</span></p></td><td class="cl-c7224d14"><p class="cl-c72242b9"><span class="cl-c720bfec">37</span></p></td></tr><tr style="overflow-wrap:break-word;"><td class="cl-c7224d16"><p class="cl-c72242b8"><span class="cl-c720bfec">r</span></p></td><td class="cl-c7224d1c"><p class="cl-c72242b9"><span class="cl-c720bfec">14</span></p></td><td class="cl-c7224d1c"><p class="cl-c72242b9"><span class="cl-c720bfec">21.29</span></p></td><td class="cl-c7224d1c"><p class="cl-c72242b9"><span class="cl-c720bfec">21</span></p></td><td class="cl-c7224d1c"><p class="cl-c72242b9"><span class="cl-c720bfec">15</span></p></td><td class="cl-c7224d1c"><p class="cl-c72242b9"><span class="cl-c720bfec">26</span></p></td></tr></tbody></table></div>
</div>
</div>
</div>
</div>
</div>
<p>You can also create more specialized tables for specific situations, like side-by-side regression results tables with <a href="https://vincentarelbundock.github.io/modelsummary/">{modelsummary}</a> (which uses {gt}, {kableExtra}, or {flextable} behind the scenes)</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(modelsummary)</span>
<span id="cb11-2"></span>
<span id="cb11-3">model1 <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">lm</span>(hwy <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg)</span>
<span id="cb11-4">model2 <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">lm</span>(hwy <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">~</span> displ <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> drv, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg)</span>
<span id="cb11-5"></span>
<span id="cb11-6"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">modelsummary</span>(</span>
<span id="cb11-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">list</span>(model1, model2),</span>
<span id="cb11-8">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">stars =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">TRUE</span>,</span>
<span id="cb11-9">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Rename the coefficients</span></span>
<span id="cb11-10">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">coef_rename =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">c</span>(</span>
<span id="cb11-11">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"(Intercept)"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Intercept"</span>,</span>
<span id="cb11-12">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"displ"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>,</span>
<span id="cb11-13">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"drvf"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive (front)"</span>,</span>
<span id="cb11-14">    <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"drvr"</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive (rear)"</span>),</span>
<span id="cb11-15">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Get rid of some of the extra goodness-of-fit statistics</span></span>
<span id="cb11-16">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">gof_omit =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"IC|RMSE|F|Log"</span>,</span>
<span id="cb11-17">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use {gt}</span></span>
<span id="cb11-18">  <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">output =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"gt"</span></span>
<span id="cb11-19">)</span></code></pre></div>
<div class="cell-output-display">

<div id="xwggifudwf" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>#xwggifudwf table {
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#xwggifudwf thead, #xwggifudwf tbody, #xwggifudwf tfoot, #xwggifudwf tr, #xwggifudwf td, #xwggifudwf th {
  border-style: none;
}

#xwggifudwf p {
  margin: 0;
  padding: 0;
}

#xwggifudwf .gt_table {
  display: table;
  border-collapse: collapse;
  line-height: normal;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#xwggifudwf .gt_caption {
  padding-top: 4px;
  padding-bottom: 4px;
}

#xwggifudwf .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#xwggifudwf .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#xwggifudwf .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#xwggifudwf .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#xwggifudwf .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#xwggifudwf .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#xwggifudwf .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#xwggifudwf .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#xwggifudwf .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#xwggifudwf .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#xwggifudwf .gt_spanner_row {
  border-bottom-style: hidden;
}

#xwggifudwf .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  text-align: left;
}

#xwggifudwf .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#xwggifudwf .gt_from_md > :first-child {
  margin-top: 0;
}

#xwggifudwf .gt_from_md > :last-child {
  margin-bottom: 0;
}

#xwggifudwf .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#xwggifudwf .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#xwggifudwf .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#xwggifudwf .gt_row_group_first td {
  border-top-width: 2px;
}

#xwggifudwf .gt_row_group_first th {
  border-top-width: 2px;
}

#xwggifudwf .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#xwggifudwf .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#xwggifudwf .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#xwggifudwf .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#xwggifudwf .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#xwggifudwf .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#xwggifudwf .gt_last_grand_summary_row_top {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: double;
  border-bottom-width: 6px;
  border-bottom-color: #D3D3D3;
}

#xwggifudwf .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#xwggifudwf .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#xwggifudwf .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#xwggifudwf .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#xwggifudwf .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#xwggifudwf .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#xwggifudwf .gt_left {
  text-align: left;
}

#xwggifudwf .gt_center {
  text-align: center;
}

#xwggifudwf .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#xwggifudwf .gt_font_normal {
  font-weight: normal;
}

#xwggifudwf .gt_font_bold {
  font-weight: bold;
}

#xwggifudwf .gt_font_italic {
  font-style: italic;
}

#xwggifudwf .gt_super {
  font-size: 65%;
}

#xwggifudwf .gt_footnote_marks {
  font-size: 75%;
  vertical-align: 0.4em;
  position: initial;
}

#xwggifudwf .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#xwggifudwf .gt_indent_1 {
  text-indent: 5px;
}

#xwggifudwf .gt_indent_2 {
  text-indent: 10px;
}

#xwggifudwf .gt_indent_3 {
  text-indent: 15px;
}

#xwggifudwf .gt_indent_4 {
  text-indent: 20px;
}

#xwggifudwf .gt_indent_5 {
  text-indent: 25px;
}
</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
  <thead>
    
    <tr class="gt_col_headings">
      <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id=" "> </th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" scope="col" id="(1)">(1)</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" scope="col" id="(2)">(2)</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td headers="" class="gt_row gt_left">Intercept</td>
<td headers="(1)" class="gt_row gt_center">35.698***</td>
<td headers="(2)" class="gt_row gt_center">30.825***</td></tr>
    <tr><td headers="" class="gt_row gt_left"></td>
<td headers="(1)" class="gt_row gt_center">(0.720)</td>
<td headers="(2)" class="gt_row gt_center">(0.924)</td></tr>
    <tr><td headers="" class="gt_row gt_left">Displacement</td>
<td headers="(1)" class="gt_row gt_center">-3.531***</td>
<td headers="(2)" class="gt_row gt_center">-2.914***</td></tr>
    <tr><td headers="" class="gt_row gt_left"></td>
<td headers="(1)" class="gt_row gt_center">(0.195)</td>
<td headers="(2)" class="gt_row gt_center">(0.218)</td></tr>
    <tr><td headers="" class="gt_row gt_left">Drive (front)</td>
<td headers="(1)" class="gt_row gt_center"></td>
<td headers="(2)" class="gt_row gt_center">4.791***</td></tr>
    <tr><td headers="" class="gt_row gt_left"></td>
<td headers="(1)" class="gt_row gt_center"></td>
<td headers="(2)" class="gt_row gt_center">(0.530)</td></tr>
    <tr><td headers="" class="gt_row gt_left">Drive (rear)</td>
<td headers="(1)" class="gt_row gt_center"></td>
<td headers="(2)" class="gt_row gt_center">5.258***</td></tr>
    <tr><td headers="" class="gt_row gt_left" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;"></td>
<td headers="(1)" class="gt_row gt_center" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;"></td>
<td headers="(2)" class="gt_row gt_center" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000;">(0.734)</td></tr>
    <tr><td headers="" class="gt_row gt_left">Num.Obs.</td>
<td headers="(1)" class="gt_row gt_center">234</td>
<td headers="(2)" class="gt_row gt_center">234</td></tr>
    <tr><td headers="" class="gt_row gt_left">R2</td>
<td headers="(1)" class="gt_row gt_center">0.587</td>
<td headers="(2)" class="gt_row gt_center">0.736</td></tr>
    <tr><td headers="" class="gt_row gt_left">R2 Adj.</td>
<td headers="(1)" class="gt_row gt_center">0.585</td>
<td headers="(2)" class="gt_row gt_center">0.732</td></tr>
  </tbody>
  <tfoot class="gt_sourcenotes">
    <tr>
      <td class="gt_sourcenote" colspan="3">+ p &lt; 0.1, * p &lt; 0.05, ** p &lt; 0.01, *** p &lt; 0.001</td>
    </tr>
  </tfoot>
  
</table>
</div>
</div>
</div>
</section>
<section id="double-encoding-and-excessive-legends" class="level3">
<h3 class="anchored" data-anchor-id="double-encoding-and-excessive-legends">Double encoding and excessive legends</h3>
<p>As you’ve read, double encoding aesthetics can be helpful for accessibility and printing reasons—for instance, if points have colors and shapes, they’re still readable by people who are colorblind or if the image is printed in black and white:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">shape =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb12-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/double-encoding-example-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Sometimes the double encoding can be excessive though, and you can safely remove legends. For example, in exercises 3 and 4, you made bar charts showing counts of different things (words spoken in <em>The Lord of the Rings</em>; pandemic-era construction projects in New York City), and lots of you colored the bars, which is great!</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1">car_counts <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> mpg <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb13-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(drv) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">n =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>())</span>
<span id="cb13-4"></span>
<span id="cb13-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(car_counts, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> drv, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> n, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb13-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/car-example-legend-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Car drive here is double encoded: it’s on the x-axis and it’s the fill. That’s great, but having the legend here is actually a little excessive. Both the x-axis and the legend tell us what the different colors of drives are (four-, front-, and rear-wheeled drives), so we can safely remove the legend and get a little more space in the plot area:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(car_counts, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> drv, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> n, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb14-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/car-example-no-legend-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="i-have-numbers-like-20000-and-want-them-formatted-with-commas-like-20000.-can-i-do-that-automatically" class="level3">
<h3 class="anchored" data-anchor-id="i-have-numbers-like-20000-and-want-them-formatted-with-commas-like-20000.-can-i-do-that-automatically">I have numbers like 20000 and want them formatted with commas like 20,000. Can I do that automatically?</h3>
<p>Yes you can! There’s an incredible package called <a href="https://scales.r-lib.org/">{scales}</a>. It lets you format numbers and axes and all sorts of things in magical ways. If you <a href="https://scales.r-lib.org/reference/index.html">look at the documentation</a>, you’ll see a ton of <code>label_SOMETHING()</code> functions, like <code>label_comma()</code>, <code>label_dollar()</code>, and <code>label_percent()</code>.</p>
<p>You can use these different labeling functions inside <code>scale_AESTHETIC_WHATEVER()</code> layers in ggplot.</p>
<p><code>label_comma()</code> adds commas:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(scales)</span>
<span id="cb15-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gapminder)</span>
<span id="cb15-3"></span>
<span id="cb15-4">gapminder_2007 <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb15-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">filter</span>(year <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">==</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2007</span>)</span>
<span id="cb15-6"></span>
<span id="cb15-7"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_2007, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_histogram</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">binwidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1000</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb15-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-comma-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p><code>label_dollar()</code> adds commas and includes a “$” prefix:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb16" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb16-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_2007, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_histogram</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">binwidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1000</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb16-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-dollar-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p><code>label_percent()</code> multiplies values by 100 and formats them as percents:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb17" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb17-1">gapminder_percents <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder_2007 <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb17-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(continent) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb17-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">n =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb17-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">prop =</span> n <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">/</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(n))</span>
<span id="cb17-5"></span>
<span id="cb17-6"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_percents, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> prop)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb17-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb17-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_y_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_percent</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-percent-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>You can also change a ton of the settings for these different labeling functions. Want to format something as Euros and use periods as the number separators instead of commas, like Europeans? Change the appropriate arguments! You can check the documentation for each of the <code>label_WHATEVER()</code> functions to see what you can adjust (<a href="https://scales.r-lib.org/reference/label_dollar.html">like <code>label_dollar()</code> here</a>)</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb18" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb18-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_2007, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_histogram</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">binwidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1000</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb18-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">prefix =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"€"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">big.mark =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"."</span>))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-euro-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>All the <code>label_WHATEVER()</code> functions actually create copies of themselves, so if you’re using lots of custom settings, you can create your own label function, like <code>label_euro()</code> here:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb19" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb19-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make a custom labeling function</span></span>
<span id="cb19-2">label_euro <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">prefix =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"€"</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">big.mark =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"."</span>)</span>
<span id="cb19-3"></span>
<span id="cb19-4"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use it on the x-axis</span></span>
<span id="cb19-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(gapminder_2007, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_histogram</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">binwidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1000</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb19-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> label_euro)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-euro-custom-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>These labeling functions also work with other aesthetics, like fill and color and size. Use them in <code>scale_AESTHETIC_WHATEVER()</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb20" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb20-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb20-2">  gapminder_2007, </span>
<span id="cb20-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> lifeExp, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> pop, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> pop)</span>
<span id="cb20-4">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_size_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb20-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_color_viridis_c</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>())</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-scales-legends-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>There are also some really neat and fancy things you can do with scales, like formatting logged values, abbreviating long numbers, and many other things. <a href="https://www.andrewheiss.com/blog/2022/12/08/log10-natural-log-scales-ggplot/">Check out this post</a> for an example of working with logged values.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb21" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb21-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb21-2">  gapminder_2007, </span>
<span id="cb21-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> gdpPercap, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> lifeExp, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> pop, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> continent)</span>
<span id="cb21-4">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb21-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb21-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_x_log10</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">breaks =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">500</span> <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">*</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">2</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">^</span><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">seq</span>(<span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>, <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">9</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">by =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>),</span>
<span id="cb21-7">                <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_dollar</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_short_scale</span>())) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb21-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">scale_size_continuous</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">labels =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">label_comma</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">scale_cut =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">cut_short_scale</span>()))</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-scatter-fancy-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="legends-are-cool-but-ive-read-that-directly-labeling-things-can-be-better.-is-there-a-way-to-label-things-without-a-legend" class="level3">
<h3 class="anchored" data-anchor-id="legends-are-cool-but-ive-read-that-directly-labeling-things-can-be-better.-is-there-a-way-to-label-things-without-a-legend">Legends are cool, but I’ve read that directly labeling things can be better. Is there a way to label things without a legend?</h3>
<p>Yes! Later in the semester we’ll cover <a href="../content/09-content.html">annotations</a>, but in the meantime, you can check out a couple packages that let you directly label geoms that have been mapped to aesthetics.</p>
<section id="geomtextpath" class="level4">
<h4 class="anchored" data-anchor-id="geomtextpath">{geomtextpath}</h4>
<p>The <a href="https://allancameron.github.io/geomtextpath/">{geomtextpath}</a> package lets you add labels directly to paths and lines with functions like <code>geom_textline()</code> and <code>geom_labelline()</code> and <code>geom_labelsmooth()</code>.</p>
<p>Like, here’s the relationship between penguin bill lengths and penguin weights across three different species:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb22" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb22-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This isn't on CRAN, so you need to install it by running this:</span></span>
<span id="cb22-2"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># remotes::install_github("AllanCameron/geomtextpath")</span></span>
<span id="cb22-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(geomtextpath)</span>
<span id="cb22-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(palmerpenguins)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Penguin data</span></span>
<span id="cb22-5"></span>
<span id="cb22-6"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Get rid of the rows that are missing sex</span></span>
<span id="cb22-7">penguins <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> penguins <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">drop_na</span>(sex)</span>
<span id="cb22-8"></span>
<span id="cb22-9"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb22-10">  penguins, </span>
<span id="cb22-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)</span>
<span id="cb22-12">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb22-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span>  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make the points a little bit transparent</span></span>
<span id="cb22-14">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_labelsmooth</span>(</span>
<span id="cb22-15">    <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> species), </span>
<span id="cb22-16">    <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This spreads the letters out a bit</span></span>
<span id="cb22-17">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">text_smoothing =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">80</span></span>
<span id="cb22-18">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb22-19">  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Turn off the legend bc we don't need it now</span></span>
<span id="cb22-20">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/penguin-textpath-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>And the average continent-level life expectancy across time:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb23" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb23-1">gapminder_lifeexp <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> gapminder <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb23-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(continent, year) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb23-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">avg_lifeexp =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(lifeExp))</span>
<span id="cb23-4"></span>
<span id="cb23-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb23-6">  gapminder_lifeexp, </span>
<span id="cb23-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> year, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> avg_lifeexp, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> continent)</span>
<span id="cb23-8">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb23-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_textline</span>(</span>
<span id="cb23-10">    <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> continent, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> continent),</span>
<span id="cb23-11">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">linewidth =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span>, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">size =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">4</span></span>
<span id="cb23-12">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb23-13">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/gapminder-textpath-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="ggdirectlabel" class="level4">
<h4 class="anchored" data-anchor-id="ggdirectlabel">{ggdirectlabel}</h4>
<p>A new package named <a href="https://github.com/MattCowgill/ggdirectlabel">{ggdirectlabel}</a> lets you add legends directly to your plot area:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb24" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb24-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This also isn't on CRAN, so you need to install it by running this:</span></span>
<span id="cb24-2"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># remotes::install_github("MattCowgill/ggdirectlabel")</span></span>
<span id="cb24-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(ggdirectlabel)</span>
<span id="cb24-4"></span>
<span id="cb24-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(</span>
<span id="cb24-6">  penguins, </span>
<span id="cb24-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> bill_length_mm, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> body_mass_g, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> species)</span>
<span id="cb24-8">) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb24-9">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">alpha =</span> <span class="fl" style="color: #AD0000;
background-color: null;
font-style: inherit;">0.5</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb24-10">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_smooth</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb24-11">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_richlegend</span>(</span>
<span id="cb24-12">    <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">label =</span> species),  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Use the species as the fake legend labels</span></span>
<span id="cb24-13">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">legend.position =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"topleft"</span>,  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Put it in the top left</span></span>
<span id="cb24-14">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">hjust =</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">0</span>  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Make the text left-aligned (horizontal adjustment, or hjust)</span></span>
<span id="cb24-15">  ) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb24-16">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06_files/figure-html/penguins-directlabel-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>


</section>
</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-27_faqs_session-05-06.html</guid>
  <pubDate>Tue, 27 Jun 2023 23:01:00 GMT</pubDate>
</item>
<item>
  <title>A few quick general R tips</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-26_general-tips.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>As I’ve been looking through your exercises, I’ve noticed a few little R issues that might sometimes be tripping you up. They’re super minor, but can make life easier:</p>
<section id="talking-about-packages-and-functions" class="level3">
<h3 class="anchored" data-anchor-id="talking-about-packages-and-functions">Talking about packages and functions</h3>
<p>You’ve probably noticed that on the course website here, I put package names in <code>{}</code>s, like {ggplot2} or {gghalves}. This is a normal convention in the R world—people generally either put package names in braces or in bold.</p>
<p>When writing about functions, I typically format them as code, followed by empty open and closed parentheses, like <code>geom_point()</code>. That signals that it’s actual runnable code and not the name of a package. Remember that you can format things like inline code by using single backticks.</p>
<p>For instance, this:</p>
<div class="sourceCode" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb1-1">You can use `geom_point()` from {ggplot2} to make scatterplots.</span></code></pre></div>
<p>will knit into this:</p>
<ul>
<li>You can use <code>geom_point()</code> from {ggplot2} to make scatterplots.</li>
</ul>
</section>
<section id="nicer-ggplot2-documentation" class="level3">
<h3 class="anchored" data-anchor-id="nicer-ggplot2-documentation">Nicer {ggplot2} documentation</h3>
<p>The ggplot documentation within R (i.e.&nbsp;in the help panel) is good, but I find that it’s nicer to <a href="https://ggplot2.tidyverse.org/reference/index.html">use the documentation website</a>. It’s the same exact content, but the website version shows plots for each of the examples. Scroll down to the <a href="https://ggplot2.tidyverse.org/reference/geom_point.html#ref-examples">examples section for <code>geom_point()</code>, for instance</a>.</p>
</section>
<section id="installing-vs.-using-packages" class="level3">
<h3 class="anchored" data-anchor-id="installing-vs.-using-packages">Installing vs.&nbsp;using packages</h3>
<p>Make sure you don’t include code to install packages in your Rmd files. Like, don’t include <code>install.packages("gapminder")</code> or whatever. If you do, R will reinstall that package every time you knit your document, which is excessive. All you need to do is load the package with <code>library()</code>.</p>
<div class="callout callout-style-default callout-important callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Installing and using packages
</div>
</div>
<div class="callout-body-container callout-body">
<p>You <strong>install</strong> packages <em>once</em> on your computer. You can do this either with <code>install.packages()</code> or by clicking on “Install package” in the “Packages” panel in RStudio:</p>
<div class="sourceCode" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Only do this once on your computer! Don't include this line of code in a document</span></span>
<span id="cb2-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">install.packages</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"gapminder"</span>)</span></code></pre></div>
<p>You <strong>load</strong> packages <em>every time</em> you want to use functions or data from that package in your R session.:</p>
<div class="sourceCode" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This loads the gapminder package and lets you use it</span></span>
<span id="cb3-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(gapminder)</span></code></pre></div>
</div>
</div>
</section>
<section id="the-tidyverse-package-shortcut" class="level3">
<h3 class="anchored" data-anchor-id="the-tidyverse-package-shortcut">The tidyverse package shortcut</h3>
<p>When you run <code>library(tidyverse)</code>, R shows a message that says it has loaded 9 packages:</p>
<div class="sourceCode" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode default code-with-copy"><code class="sourceCode default"><span id="cb4-1">── Attaching core tidyverse packages ────────────────────── tidyverse 2.0.0 ──</span>
<span id="cb4-2">✔ dplyr     1.1.2     ✔ readr     2.1.4</span>
<span id="cb4-3">✔ forcats   1.0.0     ✔ stringr   1.5.0</span>
<span id="cb4-4">✔ ggplot2   3.4.2     ✔ tibble    3.2.1</span>
<span id="cb4-5">✔ lubridate 1.9.2     ✔ tidyr     1.3.0</span>
<span id="cb4-6">✔ purrr     1.0.1     </span></code></pre></div>
<p>The tidyverse package developers have found that those 9 are some of the most common packages that people use, so they created <code>library(tidyverse)</code> as a shortcut for loading them all at the same time. Alternatively, you could start your documents like this:</p>
<div class="sourceCode" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(ggplot2)</span>
<span id="cb5-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(dplyr)</span>
<span id="cb5-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(readr)</span>
<span id="cb5-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyr)</span>
<span id="cb5-5"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(stringr)</span>
<span id="cb5-6"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(forcats)</span>
<span id="cb5-7"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># etc.</span></span></code></pre></div>
<p>But that’s a <em>lot</em> of typing. It’s easier to just do <code>library(tidyverse)</code></p>
<p>If you load the tidyverse package, you don’t need to load those 9 individual packages. Doing this is entirely redundant:</p>
<div class="sourceCode" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb6-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(ggplot2)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This is alreaady loaded bc tidyverse</span></span>
<span id="cb6-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(dplyr)  <span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># This is also already loaded bc tidyverse</span></span></code></pre></div>
<p>I’ve tried to point out in your exercises if/when you do this</p>
</section>
<section id="chunk-labels" class="level3">
<h3 class="anchored" data-anchor-id="chunk-labels">Chunk labels</h3>
<p><a href="../resource/rmarkdown.html#chunk-names">Labeling your R chunks is a good thing to do</a>, since it helps with document navigation and is generally good practice. If you’re using chunk labels <strong>make sure you don’t use spaces</strong> in them. R will still knit a document with spaceful names, but it converts the spaces to underscores before doing it. So instead of naming chunks like <code>{r My Neat Chunk, message=FALSE}</code>, use something like <code>{r my-neat-chunk}</code> or <code>{r my_neat_chunk}</code>.</p>
</section>
<section id="code-style" class="level3">
<h3 class="anchored" data-anchor-id="code-style">Code style</h3>
<p>Unlike other programming languages (grumbles at Python), R is fairly forgiving with the style of the code you write. You can have extra spaces, you can omit spaces, you can indent things however you want, etc.</p>
<p>But if you want to write readable code (you do!) and write code that others can work with (you do!), you should follow some basic style guidelines. <a href="../resource/style.html">I’ve summarized a few of the most important ones here</a>.</p>
<p>I’m never going to grade you on any of this, by the way! These are just a set of best practices that you should get into the habit of using.</p>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-26_general-tips.html</guid>
  <pubDate>Mon, 26 Jun 2023 15:23:00 GMT</pubDate>
</item>
<item>
  <title>Deadlines, late work, and student hours</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-20_deadlines-late-work.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>One quick reminder about my late work policy, since I’ve been getting a lot of Slack messages and e-mails about it.</p>
<p><a href="../syllabus.html#late-work">Recall from the syllabus</a> that with the exception of the mini projects and final project, there are no actual hard and fast deadlines in this class. If you need to turn an exercise in late, cool. I might not be able to get you feedback if stuff comes in too late, but you’ll still get full credit. <strong>There’s no penalty for late work.</strong></p>
<p>Also, remember from the syllabus that <a href="../syllabus.html#student-hours">I have really open student hours</a>. If you want to meet with me for help or for whatever reason, <a href="https://calendly.com/andrewheiss/">sign up for a time at my Calendly page</a>. You can also access that link at the <a href="../">home page of the course website</a> and <a href="../syllabus.html">at the top of the syllabus page</a></p>



 ]]></description>
  <category>advice</category>
  <category>course details</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-20_deadlines-late-work.html</guid>
  <pubDate>Tue, 20 Jun 2023 22:28:00 GMT</pubDate>
</item>
<item>
  <title>Sessions 3 and 4 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>A bunch of you turned in your exercises for sessions 3 and 4 early, so I’ve graded all those already. Again, don’t worry if you haven’t done them yet! They’re not due until Tuesday this week thanks to today’s Juneteenth holiday.</p>
<p>Many of you had similar questions and I left lots of similar comments and tips on iCollege, so I’ve compiled the most common issues here. There are a bunch here, but they’re hopefully all useful.</p>
<section id="why-are-my-axis-labels-all-crowded-and-on-top-of-each-other-how-do-i-fix-that" class="level3">
<h3 class="anchored" data-anchor-id="why-are-my-axis-labels-all-crowded-and-on-top-of-each-other-how-do-i-fix-that">Why are my axis labels all crowded and on top of each other? How do I fix that?</h3>
<p>This was a common problem with both the LOTR data and the essential construction data—categories on the x-axis would often overlap when you knit your document. That’s because there’s not enough room to fit them all comfortably in a standard image size. Fortunately there are a few quick and easy ways to fix this, such as changing the width of the image (see below), rotating the labels, dodging the labels, or (my favorite!) automatically adding line breaks to the labels so they don’t overlap. <a href="https://www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/">This blog post</a> (by me) has super quick examples of all these different (easy!) approaches.</p>
</section>
<section id="how-can-i-add-a-line-break-to-the-text-in-my-plot" class="level3">
<h3 class="anchored" data-anchor-id="how-can-i-add-a-line-break-to-the-text-in-my-plot">How can I add a line break to the text in my plot?</h3>
<p>If you don’t want to use the fancier techniques from <a href="https://www.andrewheiss.com/blog/2022/06/23/long-labels-ggplot/">the blog post about long labels</a>, a quick and easy way to deal with longer text is to manually insert a linebreak yourself. This is super easy: include a <code>\n</code> where you want a new line:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(</span>
<span id="cb1-4">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Everyone's favorite</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">\n</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">example plot"</span>,</span>
<span id="cb1-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">\n</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">(proxy for car weight)"</span>,</span>
<span id="cb1-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"MPG</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">\n</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">(highway)"</span>,</span>
<span id="cb1-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span></span>
<span id="cb1-8">  )</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/plot-line-break-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
</section>
<section id="how-can-i-control-the-dimensions-of-my-figures" class="level3">
<h3 class="anchored" data-anchor-id="how-can-i-control-the-dimensions-of-my-figures">How can I control the dimensions of my figures?</h3>
<p>By default, R creates plots that are 7″×7″ squares:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb2-2"></span>
<span id="cb2-3"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/initial-square-plot-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Often, though, those plots are excessively large and can result in text that is too small and dimensions that feel off. You generally want to have better control over the dimensions of the figures you make. For instance, you can make them landscape when there’s lots of text involved. To do this, you can use the <code>fig.width</code> and <code>fig.height</code> chunk options to control the, um, width and height of the figures:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb3-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r landscape-plot, fig.width=5, fig.height=3}</span></span>
<span id="cb3-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span>
<span id="cb3-4"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/landscape-plot-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>The dimensions are also reflected in RStudio itself when you’re working with inline images, so it’s easy to tinker with different values and rerun the chunk without needing to re-knit the whole document over and over again:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/fig-dimensions-rstudio.png" class="img-fluid figure-img" style="width:90.0%"></p>
<figcaption class="figure-caption">A 3″×5″ image in RStudio</figcaption>
</figure>
</div>
<section id="bonus-artsy-mathy-fun-golden-rectangles-and-golden-ratios" class="level4">
<h4 class="anchored" data-anchor-id="bonus-artsy-mathy-fun-golden-rectangles-and-golden-ratios">Bonus artsy mathy fun: Golden rectangles and golden ratios</h4>
<p>Because I’m a super nerd, I try to make the dimensions of all my landscape images be golden rectangles, which follow the <a href="https://en.wikipedia.org/wiki/Golden_ratio">golden ratio</a>—a <a href="https://slate.com/technology/2021/06/golden-ratio-phi-irrational-number-ellenberg-shape.html">really amazing ancient number</a> that gets used <a href="https://www.adobe.com/creativecloud/design/discover/golden-ratio.html">all the time in art and design</a>. <a href="https://www.youtube.com/watch?v=wTlw7fNcO-0">Check out this neat video</a> or <a href="https://www.youtube.com/watch?v=2tv6Ej6JVho">this one</a> to learn more.</p>
<p>Basically, a golden rectangle is a special rectangle where if you cut it at a specific point, you get a square and a smaller rectangle that is also a golden rectangle. You can then cut that smaller rectangle at the magic point and get another square and another even smaller golden rectangle, and so on.</p>
<p>More formally and mathematically, it’s a rectangle where the ratio of the height and width of the subshapes are special values. Note how here the blue square is a perfect square with side lengths <em>a</em>, while the red rectangle is another smaller golden rectangle with side lengths <em>a</em> and <em>b</em>:</p>
<p><img src="https://latex.codecogs.com/png.latex?%0A%5Cfrac%7Ba%20+%20b%7D%7Ba%7D%20=%20%5Cfrac%7Ba%7D%7Bb%7D%20=%20%5Cphi%0A"></p>
<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/golden-rectangle-1.png" class="img-fluid figure-img" style="width:40.0%"></p>
</figure>
</div>
</div>
</div>
<p>It turns out that if you do the algebra to figure out that ratio or <img src="https://latex.codecogs.com/png.latex?%5Cphi"> (the Greek letter “phi,” pronounced as either “fee” or “fie”), it’s this:</p>
<p><img src="https://latex.codecogs.com/png.latex?%0A%5Cphi%20=%20%5Cfrac%7B1%20+%20%5Csqrt%7B5%7D%7D%7B2%7D%20%5Capprox%201.618%0A"></p>
<p>That’s all really mathy, but it’s really just a matter of using that 1.618 number with whatever dimensions you want. For instance, if I want my image to be 6 inches wide, I’ll divide it by <img src="https://latex.codecogs.com/png.latex?%5Cphi"> or 1.618 (or multiply it by 0.618, which is the same thing) to find the height to make a golden rectangle: <strong>6 inches × 0.618 = 3.708 = 3.7 inches</strong></p>
<p>R can even do the math for you in the chunk options:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb4-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r landscape-plot-golden, fig.width=6, fig.height=(6 / 1.618)}</span></span>
<span id="cb4-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> mpg, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span>
<span id="cb4-4"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/landscape-plot-golden-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<div class="callout callout-style-default callout-tip callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Shortcut
</div>
</div>
<div class="callout-body-container callout-body">
<p>If you can’t remember that the magic golden ratio <img src="https://latex.codecogs.com/png.latex?%5Cphi"> is 1.618 or the gross complicated <img src="https://latex.codecogs.com/png.latex?%5Cfrac%7B1%20+%20%5Csqrt%7B5%7D%7D%7B2%7D">, you can cheat a little and remember <img src="https://latex.codecogs.com/png.latex?%5Cfrac%7B5%7D%7B3%7D">, which is 1.667, which is often close enough.</p>
</div>
</div>
<p>I don’t do this with <em>all</em> my figures, and I often have to fudge the numbers a bit when there are titles and subtitles (i.e.&nbsp;making the height a little taller so that the rectangle around just the plot area still roughly follows the golden ratio), but it makes nice rectangles and <a href="https://www.youtube.com/watch?v=DrQqajtiRt4">I just think they’re neat</a>.</p>
<p>For bonus fun, if you draw a curve between the opposite corners of each square of the golden rectangles, you get something called the <a href="https://en.wikipedia.org/wiki/Golden_spiral">golden spiral or Fibonacci spiral</a>, which is replicated throughout nature and art. Graphic designers and artists often make the dimensions of their work fit in golden rectangles and will sometimes even overlay a golden spiral over their work and lay out text and images in specific squares and rectangles. See <a href="https://www.adobe.com/creativecloud/design/discover/golden-ratio.html">this</a> and <a href="https://www.canva.com/learn/what-is-the-golden-ratio/">this</a> for some examples.</p>
<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04_files/figure-html/golden-rectangle-spiral-1.png" class="img-fluid figure-img" style="width:40.0%"></p>
</figure>
</div>
</div>
</div>
</section>
</section>
<section id="whats-the-difference-between-read_csv-vs.-read.csv" class="level3">
<h3 class="anchored" data-anchor-id="whats-the-difference-between-read_csv-vs.-read.csv">What’s the difference between <code>read_csv()</code> vs.&nbsp;<code>read.csv()</code>?</h3>
<p>In all the code I’ve given you in this class, you’ve loaded CSV files using <code>read_csv()</code>, with an underscore. In lots of online examples of R code, and in lots of other peoples’ code, you’ll see <code>read.csv()</code> with a period. They both load CSV files into R, but there are subtle differences between them.</p>
<p><code>read.csv()</code> (read dot csv) is a core part of R and requires no external pacakges (we say that it’s part of “base R”). It loads CSV files. That’s its job. However, it can be slow with big files, and it can sometimes read text data in as categorical data, which is weird (that’s less of an issue since R 4.0; it was a <em>major</em> headache in the days before R 4.0). It also makes ugly column names when there are “illegal” columns in the CSV file—it replaces all the illegal characters with <code>.</code>s</p>
<div class="callout callout-style-default callout-note callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Legal column names
</div>
</div>
<div class="callout-body-container callout-body">
<p>R technically doesn’t allow column names that (1) have spaces in them or (2) start with numbers.</p>
<p>You can still access or use or create column names that do this if you wrap the names in backticks, like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1">mpg <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(drv) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span><span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">A column with spaces</span><span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">`</span> <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">=</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mean</span>(hwy))</span>
<span id="cb5-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## # A tibble: 3 × 2</span></span>
<span id="cb5-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   drv   `A column with spaces`</span></span>
<span id="cb5-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">##   &lt;chr&gt;                  &lt;dbl&gt;</span></span>
<span id="cb5-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 1 4                       19.2</span></span>
<span id="cb5-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 2 f                       28.2</span></span>
<span id="cb5-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## 3 r                       21</span></span></code></pre></div>
</div>
</div>
</div>
<p><code>read_csv()</code> (read underscore csv) comes from {readr}, which is one of the 9 packages that get loaded when you run <code>library(tidyverse)</code>. Think of it as a new and improved version of <code>read.csv()</code>. It handles big files a better, it doesn’t ever read text data in as categorical data, and it does a better job at figuring out what kinds of columns are which (if it detects something that looks like a date, it’ll treat it as a date). It also doesn’t rename any columns—if there are illegal characters like spaces, it’ll keep them for you, which is nice.</p>
<p>Moral of the story: <strong>use <code>read_csv()</code> instead of <code>read.csv()</code></strong>. It’s nicer.</p>
</section>
<section id="why-does-r-keep-yelling-at-me-with-warnings-and-messages" class="level3">
<h3 class="anchored" data-anchor-id="why-does-r-keep-yelling-at-me-with-warnings-and-messages">Why does R keep yelling at me with warnings and messages?</h3>
<p>By now you’ve seen ominous looking red text in R, like <code>'summarise()' has grouped output by 'Gender'. You can override using the '.groups' argument</code> or <code>Warning: Removed 2 rows containing missing values</code>, and so on. You might have panicked a little after seeing this and thought you were doing something wrong.</p>
<p>Never fear! You’re most likely not doing anything wrong.</p>
<p>R shows red text in the console pane in three different situations:</p>
<ul>
<li><strong>Errors</strong>: When the red text is a legitimate error, it will be prefaced with “Error in…” and will try to explain what went wrong. Generally when there’s an error, the code will not run. For example, if you see <code>Error in ggplot(...) : could not find function "ggplot"</code>, it means that the <code>ggplot()</code> function is not accessible because the package that contains the function (<code>ggplot2</code>) was not loaded with <code>library(ggplot2)</code> (or <code>library(tidyverse)</code>, which loads <code>ggplot2</code>). Thus you cannot use the <code>ggplot()</code> function without the <code>ggplot2</code> package being loaded first.</li>
<li><strong>Warnings</strong>: When the red text is a warning, it will be prefaced with “Warning:” and R will try to explain why there’s a warning. Generally your code will still work, but with some caveats. For example if you create a scatterplot based on a dataset where two of the rows of data have missing entries that would be needed to create points in the scatterplot, you will see this warning: <code>Warning: Removed 2 rows containing missing values (geom_point)</code>. R will still produce the scatterplot with all the remaining non-missing values, but it is warning you that two of the points aren’t there.</li>
<li><strong>Messages</strong>: When the red text doesn’t start with either “Error” or “Warning”, it’s just a friendly message. You’ll see these messages when you load R packages or when you read data saved in spreadsheet files with <code>read_csv()</code>. These are helpful diagnostic messages and they don’t stop your code from working. This is what <code>'summarise()' has grouped output by 'Gender'...</code> is—just a helpful note.</li>
</ul>
<p>Remember, when you see red text in the console, don’t panic. It doesn’t necessarily mean anything is wrong. Rather:</p>
<ul>
<li>If the text starts with “Error”, figure out what’s causing it. Think of errors as a red traffic light: something is wrong!</li>
<li>If the text starts with “Warning”, figure out if it’s something to worry about. For instance, if you get a warning about missing values in a scatterplot and you know there are missing values, you’re fine. If that’s surprising, look at your data and see what’s missing. Think of warnings as a yellow traffic light: everything is working fine, but watch out/pay attention.</li>
<li>Otherwise, the text is just a message. Read it, wave back at R, and thank it for talking to you. Think of messages as a green traffic light: everything is working fine and keep on going!</li>
</ul>
</section>
<section id="how-can-i-hide-warnings-and-messages" class="level3">
<h3 class="anchored" data-anchor-id="how-can-i-hide-warnings-and-messages">How can I hide warnings and messages?</h3>
<p>In general, you’ll want to try to deal with errors and warnings, often by adjusting or clarifying something in your code. In your final knitted documents, you typically want to have nice clean output without any warnings or messages. You can fix these warnings and messages in a couple ways: (1) change your code to deal with them, or (2) just hide them.</p>
<p>For instance, if you do something like this to turn off the fill legend:</p>
<div class="sourceCode" id="cb6" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Not actual code; don't try to run this</span></span>
<span id="cb6-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> whatever, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> blah, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> blah, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> blah)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb6-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="cn" style="color: #8f5902;
background-color: null;
font-style: inherit;">FALSE</span>)</span></code></pre></div>
<p>You’ll get this warning:</p>
<div class="sourceCode" id="cb7" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Warning: The `&lt;scale&gt;` argument of `guides()` cannot be `FALSE`. Use "none" </span></span>
<span id="cb7-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## instead as of ggplot2 3.3.4.</span></span>
<span id="cb7-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## This warning is displayed once every 8 hours.</span></span>
<span id="cb7-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Call `lifecycle::last_lifecycle_warnings()` to see where this warning was</span></span>
<span id="cb7-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## generated.</span></span></code></pre></div>
<p>You’ll still get a plot and the fill legend will be gone and that’s great, but the warning is telling you that that code has been deprecated and is getting phased out and will eventually stop working. ggplot helpfully tells you how to fix it: use <code>guides(fill = "none")</code> instead. Changing that code removes the warning and everything will work just fine:</p>
<div class="sourceCode" id="cb8" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Not actual code; don't try to run this</span></span>
<span id="cb8-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> whatever, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> blah, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> blah, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> blah)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_col</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb8-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">guides</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">fill =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"none"</span>)</span></code></pre></div>
<p>In other cases, though, nothing’s wrong and R is just being talkative. For instance, when you load {tidyverse}, you get a big wall of text:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb9" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb9-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ── Attaching core tidyverse packages ─────────────────── tidyverse 2.0.0 ──</span></span>
<span id="cb9-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ dplyr     1.1.2     ✔ readr     2.1.4</span></span>
<span id="cb9-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ forcats   1.0.0     ✔ stringr   1.5.0</span></span>
<span id="cb9-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ ggplot2   3.4.2     ✔ tibble    3.2.1</span></span>
<span id="cb9-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ lubridate 1.9.2     ✔ tidyr     1.3.0</span></span>
<span id="cb9-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✔ purrr     1.0.1     </span></span>
<span id="cb9-8"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ── Conflicts ───────────────────────────────────── tidyverse_conflicts() ──</span></span>
<span id="cb9-9"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✖ dplyr::filter() masks stats::filter()</span></span>
<span id="cb9-10"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ✖ dplyr::lag()    masks stats::lag()</span></span>
<span id="cb9-11"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ℹ Use the conflicted package to force all conflicts to become errors</span></span></code></pre></div>
</div>
<p>That’s all helpful information—it tells you that R loaded 9 related packages for you ({ggplot2}, {dplyr}, etc.). But none of that needs to be in a knitted document. You can turn off those messages and warnings using chunk options:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb10" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb10-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r load-packages, warning=FALSE, message=FALSE}</span></span>
<span id="cb10-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb10-3"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
<p>The same technique works for other messages too. In exercise 3, for instance, you saw this message a lot:</p>
<div class="sourceCode" id="cb11" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## `summarise()` has grouped output by 'Gender'. </span></span>
<span id="cb11-2"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## You can override using the .groups` argument.</span></span></code></pre></div>
<p>That’s nothing bad and you did nothing wrong—that’s just R talking to you and telling you that it did something behind the scenes. When you use <code>group_by()</code> with one variable, like <code>group_by(Gender)</code>, once you’re done summarizing and working with the groups, R ungroups your data automatically. When you use <code>group_by()</code> with two variables, like <code>group_by(Gender, Film)</code>, once you’re done summarizing and working with the groups, R ungroups the last of the variables and gives you a data frame that is still grouped by the other variables. So with <code>group_by(Gender, Film)</code>, after you’ve summarized stuff, R stops grouping by <code>Film</code> and groups by just <code>Gender</code>. That’s all the <code>summarise() has grouped output by...</code> message is doing—it’s telling you that it’s still grouped by something. It’s no big deal.</p>
<p>So, to get rid of the message in this case, you can use <code>message=FALSE</code> in the chunk options to disable the message:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb12" style="background: #f1f3f5;"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb12-1"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```{r lotr-use-two-groups, message=FALSE}</span></span>
<span id="cb12-2">lotr_gender_film <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> lotr <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb12-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(Gender, Film) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span> </span>
<span id="cb12-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">total =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(Words))</span>
<span id="cb12-5"><span class="in" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">```</span></span></code></pre></div>
</div>
</section>
<section id="why-did-we-need-to-group-a-second-time-when-calculating-the-proportions-for-the-heatmap" class="level3">
<h3 class="anchored" data-anchor-id="why-did-we-need-to-group-a-second-time-when-calculating-the-proportions-for-the-heatmap">Why did we need to group a second time when calculating the proportions for the heatmap?</h3>
<p>At the end of exercise 4, you created a heatmap showing the proportions of different types of construction projects across different boroughs. In the instructions, I said you’d need to use <code>group_by()</code> twice to get predictable proportions. Some of you have wondered what this means. Here’s a quick illustration.</p>
<p>When you group by a column, R splits your data into separate datasets behind the scenes, and when you use <code>summarize()</code>, it calculates summary statistics (averages, counts, medians, etc.) for each of those groups. So when you used <code>group_by(BOROUGH, CATEGORY)</code>, R made smaller datasets of Bronx Affordable Housing, Bronx Approved Work, Brooklyn Affordable Housing, Brooklyn Approved Work, and so on. Then when you used <code>summarize(total = n())</code>, you calculated the number of rows in each of those groups, thus giving you the number of projects per borough per category. That’s basic <code>group_by() %&gt;% summarize()</code> stuff.</p>
<p>Once you have a count of projects per borough, you have to decide how you want to calculate proportions. In particular, you need to figure out what your denominator is. Do you want the proportion of all projects within each borough (e.g.&nbsp;X% of projects in the Bronx are affordable housing, Y% in the Bronx are approved work, and so on until 100% of the projects in the Bronx are accounted for), so that each borough constitutes 100%? Do you want the proportion of boroughs for each project (e.g.&nbsp;X% of affordable housing projects are in the Bronx, Y% of affordable housing projects are in Brooklyn, and so on until 100% of the affordable housing projects are accounted for). <em>This</em> is where the second <code>group_by()</code> matters.</p>
<p>For example, if you group by borough and then use mutate to calculate the proportion, the proportion in each borough will add up to 100%. Notice the denominator column here—it’s unique to each borough (1169 for the Bronx, 2231 for Brooklyn, etc.).</p>
<div class="sourceCode" id="cb13" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1">essential <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb13-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(BOROUGH, CATEGORY) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb13-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">totalprojects =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb13-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(BOROUGH) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb13-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">denominator =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(totalprojects),</span>
<span id="cb13-6">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">proportion =</span> totalprojects <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">/</span> denominator)</span>
<span id="cb13-7"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # A tibble: 33 × 5</span></span>
<span id="cb13-8"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # Groups:   BOROUGH [5]</span></span>
<span id="cb13-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    BOROUGH  CATEGORY               totalprojects denominator proportion</span></span>
<span id="cb13-10"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    &lt;fct&gt;    &lt;fct&gt;                          &lt;int&gt;       &lt;int&gt;      &lt;dbl&gt;</span></span>
<span id="cb13-11"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  1 Bronx    Affordable Housing                80        1169   0.0684  </span></span>
<span id="cb13-12"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  2 Bronx    Approved Work                    518        1169   0.443   </span></span>
<span id="cb13-13"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  3 Bronx    Homeless Shelter                   1        1169   0.000855</span></span>
<span id="cb13-14"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  4 Bronx    Hospital / Health Care            55        1169   0.0470  </span></span>
<span id="cb13-15"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  5 Bronx    Public Housing                   276        1169   0.236   </span></span>
<span id="cb13-16"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  6 Bronx    Schools                          229        1169   0.196   </span></span>
<span id="cb13-17"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  7 Bronx    Utility                           10        1169   0.00855 </span></span>
<span id="cb13-18"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  8 Brooklyn Affordable Housing               168        2231   0.0753  </span></span>
<span id="cb13-19"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  9 Brooklyn Approved Work                   1223        2231   0.548   </span></span>
<span id="cb13-20"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; 10 Brooklyn Hospital / Health Care            66        2231   0.0296  </span></span>
<span id="cb13-21"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # … with 23 more rows</span></span></code></pre></div>
<p>If you group by category instead, the proportion within each category will add to 100%. Notice how the denominator for affordable housing is 372, approved work is 4189, and so on.</p>
<div class="sourceCode" id="cb14" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1">essential <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb14-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(BOROUGH, CATEGORY) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb14-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">totalprojects =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb14-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(CATEGORY) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb14-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">denominator =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(totalprojects),</span>
<span id="cb14-6">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">proportion =</span> totalprojects <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">/</span> denominator)</span>
<span id="cb14-7"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # A tibble: 33 × 5</span></span>
<span id="cb14-8"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # Groups:   CATEGORY [7]</span></span>
<span id="cb14-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    BOROUGH  CATEGORY               totalprojects denominator proportion</span></span>
<span id="cb14-10"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    &lt;fct&gt;    &lt;fct&gt;                          &lt;int&gt;       &lt;int&gt;      &lt;dbl&gt;</span></span>
<span id="cb14-11"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  1 Bronx    Affordable Housing                80         372      0.215</span></span>
<span id="cb14-12"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  2 Bronx    Approved Work                    518        4189      0.124</span></span>
<span id="cb14-13"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  3 Bronx    Homeless Shelter                   1           5      0.2  </span></span>
<span id="cb14-14"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  4 Bronx    Hospital / Health Care            55         259      0.212</span></span>
<span id="cb14-15"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  5 Bronx    Public Housing                   276        1014      0.272</span></span>
<span id="cb14-16"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  6 Bronx    Schools                          229        1280      0.179</span></span>
<span id="cb14-17"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  7 Bronx    Utility                           10          90      0.111</span></span>
<span id="cb14-18"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  8 Brooklyn Affordable Housing               168         372      0.452</span></span>
<span id="cb14-19"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  9 Brooklyn Approved Work                   1223        4189      0.292</span></span>
<span id="cb14-20"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; 10 Brooklyn Hospital / Health Care            66         259      0.255</span></span>
<span id="cb14-21"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # … with 23 more rows</span></span></code></pre></div>
<p>You can also ungroup completely before calculating the proportion. This makes it so the entire proportion column adds to 100%:</p>
<div class="sourceCode" id="cb15" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1">essential <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb15-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">group_by</span>(BOROUGH, CATEGORY) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb15-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">summarize</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">totalprojects =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">n</span>()) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb15-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ungroup</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">%&gt;%</span></span>
<span id="cb15-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">mutate</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">denominator =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">sum</span>(totalprojects),</span>
<span id="cb15-6">         <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">proportion =</span> totalprojects <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">/</span> denominator)</span>
<span id="cb15-7"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # A tibble: 33 × 5</span></span>
<span id="cb15-8"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    BOROUGH  CATEGORY               totalprojects denominator proportion</span></span>
<span id="cb15-9"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;    &lt;fct&gt;    &lt;fct&gt;                          &lt;int&gt;       &lt;int&gt;      &lt;dbl&gt;</span></span>
<span id="cb15-10"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  1 Bronx    Affordable Housing                80        7209   0.0111  </span></span>
<span id="cb15-11"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  2 Bronx    Approved Work                    518        7209   0.0719  </span></span>
<span id="cb15-12"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  3 Bronx    Homeless Shelter                   1        7209   0.000139</span></span>
<span id="cb15-13"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  4 Bronx    Hospital / Health Care            55        7209   0.00763 </span></span>
<span id="cb15-14"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  5 Bronx    Public Housing                   276        7209   0.0383  </span></span>
<span id="cb15-15"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  6 Bronx    Schools                          229        7209   0.0318  </span></span>
<span id="cb15-16"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  7 Bronx    Utility                           10        7209   0.00139 </span></span>
<span id="cb15-17"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  8 Brooklyn Affordable Housing               168        7209   0.0233  </span></span>
<span id="cb15-18"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt;  9 Brooklyn Approved Work                   1223        7209   0.170   </span></span>
<span id="cb15-19"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; 10 Brooklyn Hospital / Health Care            66        7209   0.00916 </span></span>
<span id="cb15-20"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">#&gt; # … with 23 more rows</span></span></code></pre></div>
<p>Which one you do is up to you—it depends on the story you’re trying to tell.</p>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-03-04.html</guid>
  <pubDate>Tue, 20 Jun 2023 05:50:00 GMT</pubDate>
</item>
<item>
  <title>Session 2 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-02.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>Since exercise 2 involved no code, I don’t have much in the way of code tips or anything :)</p>
<p>In the comments for exercise 2, I went through the CRAP acronym and pointed out little things that can be changed or improved for each of your designs. <strong>You don’t have to redo your posters.</strong> I gave that feedback to show what the CRAP design tinkering process looks like in real life. For instance, a few of you had had text and graphics that were only a couple pixels misaligned—just tweaking that to make everything perfectly inline does a lot to make designs feel more put together.</p>
<p>As I mentioned in the lecture, once you know about CRAP, you’ll start using it everywhere—every billboard, poster, book, website, etc. you see, you’ll try to identify what the designed tried to align each element with, which fonts they used, why they used the colors they did, why they grouped the text and images the way they did, and so on. Or when you come across something that you intuitively feel is ugly and poorly designed, you’ll be able to say why.</p>
<p>If you want to know more about basic design skills like this, I’d highly recommend getting <a href="https://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151"><em>The Non-Designer’s Design and Type Book</em></a>. It’s a fantastic resource and goes way more in depth into CRAP and basic typography.</p>



 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-19_faqs_session-02.html</guid>
  <pubDate>Mon, 19 Jun 2023 15:48:00 GMT</pubDate>
</item>
<item>
  <title>Session 1 tips and FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-09_faqs_session-01.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Hi everyone!</p>
<p>I’ve been grading your assignments as they’ve been coming in and you’re doing great work so far! I’ve also been happy to see activity on Slack. Please keep commenting and discussing stuff there!</p>
<p>I have just a few quick FAQs and tips I’ve been giving as feedback to many of you:</p>
<section id="slack-in-public" class="level3">
<h3 class="anchored" data-anchor-id="slack-in-public">Slack in public</h3>
<p>One request regarding Slack: lots of you have been sending me private messages there for assistance, and that’s great and I’m happy to respond like that. However, one way to help build a stronger community for this class is to ask questions in public in the <code>#help</code> channel instead. There are a couple reasons for this:</p>
<ol type="1">
<li><strong>It reduces duplication</strong>: Many of you have had almost identical questions and I’ve been able to copy/paste screenshots between different private conversations asking for help. Having those questions and answers in <code>#help</code> instead will let you get answers to common questions faster</li>
<li><strong>It allows <em>you</em> to help</strong>: Some of you have R experience already, and even if you don’t, as the summer goes on, you’ll get more comfortable with it and will start being able to answer your classmates’ questions. You might have just fixed a similar issue in a past exercise, or you might be able to spot a typo in their code, or you might otherwise know how to help. Step in and help! Slack is for building a community, not just for getting assistance from me.</li>
</ol>
</section>
<section id="knitted-document-format" class="level3">
<h3 class="anchored" data-anchor-id="knitted-document-format">Knitted document format</h3>
<p>R Markdown is great and wonderful in part because you can write a document in one .Rmd file and have it magically turn into an HTML file, a Word file, or a PDF (or if you want to get extra fancy later, a slideshow, a dashboard, or even a full website).</p>
<p>iCollege doesn’t like HTML files, though. It won’t show images that get uploaded because of weird server restrictions or something. So when you submit your exercises, make sure you knit to PDF or Word:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/knitr-formats.png" class="img-fluid figure-img" style="width:60.0%"></p>
<figcaption class="figure-caption">Knit to either Word or PDF when submitting to iCollege</figcaption>
</figure>
</div>
<p>I’d recommend knitting to HTML often as you work on the exercise. Knitting to PDF takes a few extra seconds, and knitting to Word is a hassle because Word gets mad if you have a previous version of the document open when knitting. HTML is pretty instantaneous. When I work on R Markdown files, I put a browser window on one of my monitors and RStudio on the other and knit and reknit often to HTML while working. Once I’m done and the document all works and the images, tables, text, etc. are all working, I’ll knit to PDF or Word or whatever final format I want.</p>
</section>
<section id="column-names-and-the-hyperliterality-of-computers" class="level3">
<h3 class="anchored" data-anchor-id="column-names-and-the-hyperliterality-of-computers">Column names and the hyperliterality of computers</h3>
<p>Computers are incredibly literal and they cannot read your mind! As humans we’re good at figuring out information when data is missing or distorted—if someone sends you a text saying that they’re “running 5 minutes latte”, you know that they’re not running with some weird time-based coffee but are instead running late. Computers can’t figure that out.</p>
<p>For example, in Exercise 1 if you want to make a plot showing the relationship between highway MPG and cylinders, if you type anything like this, <em>it won’t work</em>.</p>
<p>Here there’s an error because there are no columns named <code>cylinders</code> or <code>highway</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> cars, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> cylinders, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> highway)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb1-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span>
<span id="cb1-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Error in `geom_point()`:</span></span>
<span id="cb1-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! Problem while computing aesthetics.</span></span>
<span id="cb1-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ℹ Error occurred in the 1st layer.</span></span>
<span id="cb1-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Caused by error:</span></span>
<span id="cb1-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! object 'cylinders' not found</span></span></code></pre></div>
</div>
<p>Here there’s an error because there is no column named <code>Cyl</code>. It’s <code>cyl</code> with a lowercase <code>c</code>. R is case sensitive.</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb2" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">data =</span> cars, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">mapping =</span> <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> Cyl, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> hwy)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb2-2">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>()</span>
<span id="cb2-3"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Error in `geom_point()`:</span></span>
<span id="cb2-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! Problem while computing aesthetics.</span></span>
<span id="cb2-5"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ℹ Error occurred in the 1st layer.</span></span>
<span id="cb2-6"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## Caused by error:</span></span>
<span id="cb2-7"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## ! object 'Cyl' not found</span></span></code></pre></div>
</div>
<p>The easiest way to make sure you’re using the right column names is to look at them. RStudio gives you a couple easy ways to do this. After you’ve loaded your data, you should see it in your environment panel:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/environment-df.png" class="img-fluid figure-img" style="width:60.0%"></p>
<figcaption class="figure-caption">The <code>cars</code> dataset in the environment panel</figcaption>
</figure>
</div>
<p>If you click on the little blue arrow next to the name of the dataset, RStudio will show you the column names and the first few values in each:</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/environment-df-toggle.png" class="img-fluid figure-img" style="width:80.0%"></p>
<figcaption class="figure-caption">Column names in the <code>cars</code> dataset</figcaption>
</figure>
</div>
<p>If you click on the name of the dataset (<code>cars</code> here), RStudio will open a new tab with a read-only view of the data. You can click on the column names to sort and filter things too, which is convenient.</p>
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/img/environment-df-view.png" class="img-fluid figure-img" style="width:90.0%"></p>
<figcaption class="figure-caption">The <code>cars</code> dataset in a viewer tab</figcaption>
</figure>
</div>
<p>I constantly have to refer back to the list of column names to make sure I’m spelling things correctly and using the right capitalization.</p>
</section>
<section id="the-magic-of-labs" class="level3">
<h3 class="anchored" data-anchor-id="the-magic-of-labs">The magic of <code>labs()</code></h3>
<p>A few years ago, if you wanted to add labels to a plot with ggplot, you had to use specific functions, like <code>xlab()</code> and <code>ylab()</code> for the axis labels and <code>ggtitle()</code> for the plot title, like this:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb3" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">library</span>(tidyverse)</span>
<span id="cb3-2"></span>
<span id="cb3-3"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># The old way; don't do this!</span></span>
<span id="cb3-4"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> cyl, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-5">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-6">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">xlab</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Cylinders"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-7">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ylab</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb3-8">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggtitle</span>(<span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"A plot showing stuff"</span>)</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-09_faqs_session-01_files/figure-html/labs-old-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>Lots of older code examples on the internet will still use these functions. However, those have all been replaced with a newer, nicer <a href="https://ggplot2.tidyverse.org/reference/labs.html"><code>labs()</code> function</a> that lets you control all the different plot labels in one layer. Here’s how to make that same plot above with <code>labs()</code> instead:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb4" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb4-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># The better way; do this!</span></span>
<span id="cb4-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> cyl, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb4-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(</span>
<span id="cb4-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Cylinders"</span>,</span>
<span id="cb4-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>,</span>
<span id="cb4-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"A plot showing stuff"</span></span>
<span id="cb4-8">  )</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-09_faqs_session-01_files/figure-html/labs-new-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>
<p>The <code>labs()</code> function also lets you do subtitles and captions and lets you control the legend titles too. Here we mapped <code>drv</code> to the color aesthetic, so we can change its title by using <code>color</code> in <code>labs()</code>:</p>
<div class="cell" data-layout-align="center">
<div class="sourceCode cell-code" id="cb5" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb5-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># The better way; do this!</span></span>
<span id="cb5-2"><span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">ggplot</span>(mpg, <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">aes</span>(<span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> cyl, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> displ, <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> drv)) <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-3">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">geom_point</span>() <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span></span>
<span id="cb5-4">  <span class="fu" style="color: #4758AB;
background-color: null;
font-style: inherit;">labs</span>(</span>
<span id="cb5-5">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">x =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Cylinders"</span>,</span>
<span id="cb5-6">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">y =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Displacement"</span>,</span>
<span id="cb5-7">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">title =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"A plot showing stuff"</span>,</span>
<span id="cb5-8">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">subtitle =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Super neat"</span>,</span>
<span id="cb5-9">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">caption =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"I still have no idea what displacement is"</span>,</span>
<span id="cb5-10">    <span class="at" style="color: #657422;
background-color: null;
font-style: inherit;">color =</span> <span class="st" style="color: #20794D;
background-color: null;
font-style: inherit;">"Drive"</span></span>
<span id="cb5-11">  )</span></code></pre></div>
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><img src="https://datavizs23.classes.andrewheiss.com/news/2023-06-09_faqs_session-01_files/figure-html/labs-new-lots-1.png" class="img-fluid figure-img" style="width:90.0%"></p>
</figure>
</div>
</div>
</div>


</section>

 ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-09_faqs_session-01.html</guid>
  <pubDate>Sat, 10 Jun 2023 02:44:00 GMT</pubDate>
</item>
<item>
  <title>Tips for success</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-05_tips-for-success.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>The most common question from the pre-class survey was some variation of this:</p>
<blockquote class="blockquote">
<p>I have no background in programming or in R—will I be able to learn things and succeed in this class?</p>
</blockquote>
<p>Absolutely.</p>
<p>I’ve designed this class to be accessible by people with any level of R experience. If you’ve never used R—awesome! If you’ve been using R for years—awesome! You’ll all learn new skills.</p>
<p>Learning programming is a little different from learning other skills or materials. In other classes you’ve taken, you read articles or textbooks, take notes on them, talk about the readings in class, maybe complete problem sets or exercises about the materials, and then you take a test.</p>
<p>With programming, though, the approach is typically different. You read things, you copy code, you paste that code into a file on your computer, and you tinker with the code to see how it works and what changes as you change things.</p>
<p>The R community in particular has embraced this approach to learning how to code. Posit, the company that develops RStudio, <a href="https://education.rstudio.com/">has a whole team of professional educators</a> dedicated to improving R pedagogy, and they use this approach in all their teaching materials. The <a href="https://software-carpentry.org/">Software Carpentry project</a> (a group dedicated to teaching data and programming skills) does too. I’m a fan of it as well. <a href="https://moderndive.com/1-getting-started.html#tips-code">As one of the textbooks I teach from in another class states</a>:</p>
<blockquote class="blockquote">
<p><strong>Take the “copy, paste, and tweak” approach</strong>: Especially when you learn your first programming language or you need to understand particularly complicated code, it is often much easier to take existing code that you know works and modify it to suit your ends. This is as opposed to trying to type out the code from scratch. We call this the “<em>copy, paste, and tweak”</em> approach. So early on, we suggest not trying to write code from memory, but rather take existing examples we have provided you, then copy, paste, and tweak them to suit your goals. After you start feeling more confident, you can slowly move away from this approach and write code from scratch. Think of the “copy, paste, and tweak” approach as training wheels for a child learning to ride a bike. After getting comfortable, they won’t need them anymore.</p>
</blockquote>
<p>To make your copying/pasting life easier, each session has an <a href="../example/index.html">extensive example page</a> and an accompanying video showing how to create the different visualizations. Copy/paste/tweak liberally from the example pages!</p>
<p>Every chunk of code on the course website has a neat little <i class="fa-solid fa-clipboard" aria-label="clipboard"></i> clipboard icon that you can use to copy the whole chunk:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb1" style="background: #f1f3f5;"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><span class="co" style="color: #5E5E5E;
background-color: null;
font-style: inherit;"># Click on the clipboard icon in the top right corner here to copy this code</span></span>
<span id="cb1-2">x <span class="ot" style="color: #003B4F;
background-color: null;
font-style: inherit;">&lt;-</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">1</span><span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">:</span><span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5</span></span>
<span id="cb1-3">x <span class="sc" style="color: #5E5E5E;
background-color: null;
font-style: inherit;">+</span> <span class="dv" style="color: #AD0000;
background-color: null;
font-style: inherit;">5</span></span>
<span id="cb1-4"><span class="do" style="color: #5E5E5E;
background-color: null;
font-style: italic;">## [1]  6  7  8  9 10</span></span></code></pre></div>
</div>
<p>Use that button!</p>
<p>Inevitably in the classes where I teach R, I have students say things like “I’m trying to do this without looking at any documentation!” or “I can’t do this without googling—I’m a failure!”. While the effort to be fully independent and perfect with code is noble, it’s <em>totally unnecessary</em>. Everyone looks stuff up all the time—being able to do something without looking stuff up shouldn’t be your end goal.</p>
<p>Eventually you’ll be able to whip out basic <code>ggplot(..., aes(...)) + geom_point() + geom_smooth() + labs()</code> kinds of things without copying and pasting—that comes naturally over time, and you see me do that in the videos. But as soon as I have to start changing axis breaks or do anything beyond the standard stuff, I immediately start googling and looking at the documentation. Everyone does it. The authors of these packages do it. That’s why documentation exists. So don’t feel bad if you do it too. It’s the dirty little secret of all programming everywhere—it’s impossible to write code without referring to documentation or other people’s code (or your past code).</p>
<p>This is why I have you do stuff in R Markdown. Everything in your problem sets is completely reproducible. The document tells you exactly what you ran to get the data and results and figures that you made. Copy and paste from your past assignments liberally. Copy and paste from the examples liberally.</p>
<p>Do <strong>not</strong> be super noble and force yourself to write everything from scratch!</p>
<p>Finally, if you ever get frustrated when running code or making a plot because it goes wild and vomits geoms all over the page, don’t worry! It happens to everyone! There’s actually a whole hashtag on Twitter for #accidentalaRt (and a corresponding <a href="https://twitter.com/accidental__aRt">@accidental__aRt</a> Twitter account that collects these plots) where people post their plotting disasters. Scroll through the feed and see the marvelous accidental art people make. It’s fantastic.</p>



 ]]></description>
  <category>FAQs</category>
  <category>advice</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-05_tips-for-success.html</guid>
  <pubDate>Mon, 05 Jun 2023 05:23:00 GMT</pubDate>
</item>
<item>
  <title>Pre-class FAQs</title>
  <link>https://datavizs23.classes.andrewheiss.com/news/2023-06-04_faqs_week-00.html</link>
  <description><![CDATA[ 

<div class="back-nav"><a href="../news/">← News</a></div>



<p>Thanks to everyone who has filled out the pre-class welcome survey (see the link in your e-mail)! I’m excited to get to know you all more over the summer!</p>
<p>Lots of you had similar questions and concerns, so I’ve consolidated the common ones here in a list of FAQs.</p>
<section id="will-we-cover-x" class="level3">
<h3 class="anchored" data-anchor-id="will-we-cover-x">Will we cover {X}?</h3>
<ul>
<li><strong>Geospatial data and visualizations?</strong> <a href="../content/12-content.html">Absolutely!</a> Maps are one of my favorite kinds of visualization and <a href="../example/12-example.html">we have a whole session on them</a>.</li>
<li><strong>Interactive visualizations?</strong> <a href="../content/10-content.html">Yep!</a></li>
<li><strong>Animated visualizations?</strong> Not directly, but we’ll briefly mention <a href="https://gganimate.com/">the {gganimate} package</a>, which is surprisingly easy to use—it’s just regular ggplot code with a few extra lines to animate it</li>
</ul>
</section>
<section id="will-you-have-regular-office-hours" class="level3">
<h3 class="anchored" data-anchor-id="will-you-have-regular-office-hours">Will you have regular office hours?</h3>
<p>I don’t have a set time every week for student hours (<a href="../syllabus.html#student-hours">see here for why I don’t call them office hours</a>). Instead, I use an appointment system. If you want to meet with me online, visit <a href="https://calendly.com/andrewheiss/">my Calendly page</a> and sign up for a slot. There’s also a link to it on the <a href="../">homepage</a> and <a href="../syllabus.html">syllabus page</a> of the class website.</p>
<p>I’ll also occasionally be on campus starting the last week of June (I’m currently not in Atlanta—I’m in Utah visiting family, but will still be responding to all e-mails and providing support and answering questions via e-mail and Slack), so if you want to meet in person after June 26, we can arrange that too.</p>
</section>
<section id="i-dont-have-a-background-in-anything-related-to-pmap-public-management-and-policywill-i-be-lost" class="level3">
<h3 class="anchored" data-anchor-id="i-dont-have-a-background-in-anything-related-to-pmap-public-management-and-policywill-i-be-lost">I don’t have a background in anything related to PMAP (public management and policy)—will I be lost?</h3>
<p>That’s 1000% fine! I’ve designed this class to be accessible and useful for people working with any kind of data. Lots of the examples we’ll play with will often be related to political science-y things, but not always. And the kind of data doesn’t actually matter. When learning new statistical programming and visualization tools and techniques, the industry standard is to work with toy datasets. For instance, in your first exercise you’ll make a plot of car mileage. I know <em>nothing</em> about cars at all, but I (along with everyone else in the R world) use that dataset all the time for quick little tests of plots or models or code or whatever, since it’s built into R. I also often use <a href="https://allisonhorst.github.io/palmerpenguins/">data about penguins</a> and lots of other domains in assignments and examples.</p>
<p>Don’t worry about the precise nature of the data. <a href="../assignment/final-project.html">In your final project</a>, you’ll make visualizations with whatever data you want. For all the other assignments and exercises and mini-projects, just go with the data I’ve provided. It’s all actual real world data (refugee inflows, unemployment, election results, texts of books from the 19th century, counts and locations of rat sightings in NYC, etc.). If it’s not related to your field (hello you handful of epidemiology students!), don’t worry—the principles of code and data visualization and graphic design still apply.</p>
</section>
<section id="can-i-reach-out-if-i-have-questions" class="level3">
<h3 class="anchored" data-anchor-id="can-i-reach-out-if-i-have-questions">Can I reach out if I have questions?</h3>
<p><strong><em>ABSOLUTELY</em></strong>. DO NOT ATTEMPT TO DO THIS CLASS WITHOUT EVER ASKING A SINGLE QUESTION.</p>
<p>Throughout the pandemic year I’ve been studying the research on online teaching to see how to make my online classes as successful as possible. One almost universal key to success I’ve found is that learning requires social interaction to be successful <span class="citation" data-cites="Glazier:2016">(Glazier 2016)</span>. In fact, <strong>one of the greatest predictors of success is whether students build relationships with their classmates and their professor.</strong></p>
<p>This is true for <strong>both</strong> online classes and face-to-face classes! It’s entirely possible to take a face-to-face class and have almost no social interaction. The worst, most useless class I ever took as an undergraduate was a required Intro to US History class that met twice a week for 2 hours in a massive auditorium with 900 (!!!) other students. It was awful and I learned nothing.</p>
<p>So, interact with me and your classmates! Don’t lurk in silence in the shadows. (Don’t overshare either and spam the #general channel in Slack, but in my experience there’s little risk of that). <em>Do</em> reach out and talk to your classmates (and me!). We’re an eclectic group. Even though this is officially an Andrew Young School class, most of you are not public policy or public administration grad students. We have PhD students in political science and epidemiology and masters students in criminal justice administration, public policy, and economics. Get to know each other!</p>
<p>To that end, one of the best ways to get to know each other is to help each other. Ask questions on Slack. If you see someone’s question there and you know how to help, answer!</p>
<p>You can also work on exercises and projects in groups if you want. Use Webex or Zoom to share screens with each other during calls so you can see what you’re doing. In the real programming world, a common technique for working on code is <a href="https://en.wikipedia.org/wiki/Pair_programming">pair programming</a>, where two people work on the same script. If we were meeting in class, we’d do this face-to-face, working during class in groups of 2–3 with me walking around and helping. <strong>Feel free to replicate that experience</strong> and work with others. It’s not cheating! (As long as you don’t turn in identical work)</p>
<p>Help make this semester fantastic by talking, reaching out, and otherwise socially interacting!</p>



</section>

<div id="quarto-appendix" class="default"><section class="quarto-appendix-contents"><h2 class="anchored quarto-appendix-heading">References</h2><div id="refs" class="references csl-bib-body hanging-indent">
<div id="ref-Glazier:2016" class="csl-entry">
Glazier, Rebecca A. 2016. <span>“Building <span>Rapport</span> to <span>Improve Retention</span> and <span>Success</span> in <span>Online Classes</span>.”</span> <em>Journal of Political Science Education</em> 12 (4): 437–56. <a href="https://doi.org/10.1080/15512169.2016.1155994">https://doi.org/10.1080/15512169.2016.1155994</a>.
</div>
</div></section></div> ]]></description>
  <category>FAQs</category>
  <guid>https://datavizs23.classes.andrewheiss.com/news/2023-06-04_faqs_week-00.html</guid>
  <pubDate>Mon, 05 Jun 2023 04:53:00 GMT</pubDate>
</item>
</channel>
</rss>
