-
Notifications
You must be signed in to change notification settings - Fork 23
/
03-colors.html
1145 lines (1069 loc) · 56.8 KB
/
03-colors.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta name="author" content="Alison Hill" />
<title>Lab 03: Colors with Animal Sounds</title>
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/flatly.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="site_libs/jqueryui-1.11.4/jquery-ui.min.js"></script>
<link href="site_libs/tocify-1.9.1/jquery.tocify.css" rel="stylesheet" />
<script src="site_libs/tocify-1.9.1/jquery.tocify.js"></script>
<script src="site_libs/navigation-1.1/tabsets.js"></script>
<script src="site_libs/navigation-1.1/codefolding.js"></script>
<link href="site_libs/highlightjs-9.12.0/default.css" rel="stylesheet" />
<script src="site_libs/highlightjs-9.12.0/highlight.js"></script>
<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
<script type="text/javascript">
if (window.hljs) {
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
if (document.readyState && document.readyState === "complete") {
window.setTimeout(function() { hljs.initHighlighting(); }, 0);
}
}
</script>
<style type="text/css">
h1 {
font-size: 34px;
}
h1.title {
font-size: 38px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 12px;
}
.table th:not([align]) {
text-align: left;
}
</style>
</head>
<body>
<style type = "text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
.tabbed-pane {
padding-top: 12px;
}
button.code-folding-btn:focus {
outline: none;
}
</style>
<style type="text/css">
/* padding for bootstrap navbar */
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* offset scroll position for anchor links (for fixed navbar) */
.section h1 {
padding-top: 65px;
margin-top: -65px;
}
.section h2 {
padding-top: 65px;
margin-top: -65px;
}
.section h3 {
padding-top: 65px;
margin-top: -65px;
}
.section h4 {
padding-top: 65px;
margin-top: -65px;
}
.section h5 {
padding-top: 65px;
margin-top: -65px;
}
.section h6 {
padding-top: 65px;
margin-top: -65px;
}
</style>
<script>
// manage active state of menu based on current page
$(document).ready(function () {
// active menu anchor
href = window.location.pathname
href = href.substr(href.lastIndexOf('/') + 1)
if (href === "")
href = "index.html";
var menuAnchor = $('a[href="' + href + '"]');
// mark it active
menuAnchor.parent().addClass('active');
// if it's got a parent navbar menu mark it active as well
menuAnchor.closest('li.dropdown').addClass('active');
});
</script>
<div class="container-fluid main-container">
<!-- tabsets -->
<script>
$(document).ready(function () {
window.buildTabsets("TOC");
});
</script>
<!-- code folding -->
<style type="text/css">
.code-folding-btn { margin-bottom: 4px; }
</style>
<script>
$(document).ready(function () {
window.initializeCodeFolding("hide" === "show");
});
</script>
<script>
$(document).ready(function () {
// move toc-ignore selectors from section div to header
$('div.section.toc-ignore')
.removeClass('toc-ignore')
.children('h1,h2,h3,h4,h5').addClass('toc-ignore');
// establish options
var options = {
selectors: "h1,h2",
theme: "bootstrap3",
context: '.toc-content',
hashGenerator: function (text) {
return text.replace(/[.\\/?&!#<>]/g, '').replace(/\s/g, '_').toLowerCase();
},
ignoreSelector: ".toc-ignore",
scrollTo: 0
};
options.showAndHide = true;
options.smoothScroll = true;
// tocify
var toc = $("#TOC").tocify(options).data("toc-tocify");
});
</script>
<style type="text/css">
#TOC {
margin: 25px 0px 20px 0px;
}
@media (max-width: 768px) {
#TOC {
position: relative;
width: 100%;
}
}
.toc-content {
padding-left: 30px;
padding-right: 40px;
}
div.main-container {
max-width: 1200px;
}
div.tocify {
width: 20%;
max-width: 260px;
max-height: 85%;
}
@media (min-width: 768px) and (max-width: 991px) {
div.tocify {
width: 25%;
}
}
@media (max-width: 767px) {
div.tocify {
width: 100%;
max-width: none;
}
}
.tocify ul, .tocify li {
line-height: 20px;
}
.tocify-subheader .tocify-item {
font-size: 0.90em;
padding-left: 25px;
text-indent: 0;
}
.tocify .list-group-item {
border-radius: 0px;
}
</style>
<!-- setup 3col/9col grid for toc_float and main content -->
<div class="row-fluid">
<div class="col-xs-12 col-sm-4 col-md-3">
<div id="TOC" class="tocify">
</div>
</div>
<div class="toc-content col-xs-12 col-sm-8 col-md-9">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">CS631 Labs</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="slides.html">Slides & Reading</a>
</li>
<li>
<a href="data-vis-resources.html">Resources</a>
</li>
<li>
<a href="https://sakai.ohsu.edu/portal/site/CS-631-1-32176-Sp18">Sakai</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html">About</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
<div class="fluid-row" id="header">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Code</span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width: 50px;">
<li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
<li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
</ul>
</div>
<h1 class="title toc-ignore">Lab 03: Colors with Animal Sounds</h1>
<h3 class="subtitle"><em>CS631</em></h3>
<h4 class="author"><em>Alison Hill</em></h4>
</div>
<div id="overview" class="section level1">
<h1><span class="header-section-number">1</span> Overview</h1>
<p>There are 10 challenges total- none are in the “continuous colors” section, but you can use that section to complete the tenth challenge on your own. Upload your knitted html document by next Wednesday at noon to Sakai!</p>
</div>
<div id="slides-for-today" class="section level1">
<h1><span class="header-section-number">2</span> Slides for today</h1>
<pre class="r"><code>knitr::include_url("slides/03-slides.html")</code></pre>
<iframe src="slides/03-slides.html" width="672" height="400px">
</iframe>
</div>
<div id="packages" class="section level1">
<h1><span class="header-section-number">3</span> Packages</h1>
<p>Other packages will be needed to be installed as you go- reveal the first code chunks when in doubt!</p>
<pre class="r"><code>library(tidyverse)</code></pre>
</div>
<div id="read-in-the-data" class="section level1">
<h1><span class="header-section-number">4</span> Read in the data</h1>
<p>Use this code chunk to read in the data available at <a href="http://bit.ly/cs631-meow" class="uri">http://bit.ly/cs631-meow</a>:</p>
<pre class="r"><code>sounds <- read_csv("http://bit.ly/cs631-meow")</code></pre>
<p>Or store it locally:</p>
<pre class="r"><code>sounds <- read_csv(here::here("data", "animal_sounds_summary.csv"))</code></pre>
</div>
<div id="colour-vs-fill-aesthetic" class="section level1">
<h1><span class="header-section-number">5</span> Colour vs fill aesthetic</h1>
<p>Fill and colour scales in ggplot2 can use the same palettes. Some shapes such as lines only accept the colour aesthetic, while others, such as polygons, accept both colour and fill aesthetics. In the latter case, the colour refers to the border of the shape, and the fill to the interior.</p>
<p><img src="03-colors_files/figure-html/unnamed-chunk-5-1.png" width="672" /></p>
<hr />
<p>All symbols have a foreground colour, so if we add <code>color = "navy"</code>, they all are affected.</p>
<pre class="r"><code>s + geom_point(aes(shape = z), size = 4, colour = "navy") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-6-1.png" width="672" /></p>
<hr />
<p>While all symbols have a foreground colour, symbols 21-25 also take a background colour (fill). So if we add <code>fill = "orchid"</code>, only the last row of symbols are affected.</p>
<pre class="r"><code>s + geom_point(aes(shape = z), size = 4, colour = "navy", fill = "orchid") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-7-1.png" width="672" /></p>
</div>
<div id="data" class="section level1">
<h1><span class="header-section-number">6</span> Data</h1>
<p>For the rest of today, we’ll play with the <code>sounds</code> dataset. This data was derived from the R package <a href="http://langcog.github.io/wordbankr/"><code>wordbankr</code></a>, an R interface to access <a href="http://wordbank.stanford.edu">Wordbank</a>- an open source database of children’s vocabulary development. The tool used to measure children’s language and communicative development in this database is the <a href="http://mb-cdi.stanford.edu">MacArthur-Bates Communicative Development Inventories (MB-CDI)</a>. The MD-CDI is a parent-reported questionnaire.</p>
<p>Here is a glimpse of the data:</p>
<pre class="r"><code>glimpse(sounds)</code></pre>
<pre><code>Observations: 33
Variables: 7
$ age <dbl> 8, 8, 8, 9, 9, 9, 10, 10, 10, 11, 11, 11, 12, ...
$ sound <chr> "cockadoodledoo", "meow", "woof woof", "cockad...
$ kids_produce <dbl> 1, 0, 3, 0, 2, 2, 0, 5, 4, 0, 5, 12, 0, 12, 28...
$ kids_understand <dbl> 3, 10, 12, 2, 21, 22, 9, 41, 40, 4, 36, 32, 16...
$ kids_respond <dbl> 35, 35, 35, 91, 93, 93, 139, 145, 143, 94, 94,...
$ prop_produce <dbl> 0.02857143, 0.00000000, 0.08571429, 0.00000000...
$ prop_understand <dbl> 0.08571429, 0.28571429, 0.34285714, 0.02197802...</code></pre>
<p>Note that the unit of observation here is one-row-per-age-group/animal sound.</p>
<p>Variables you need for this lab:</p>
<ul>
<li><code>age</code>: child age in months</li>
<li><code>sound</code>: a string describing a type of animal sound</li>
<li><code>kids_produce</code>: the number of parents who answered “yes, my child produces this animal sound” (note that if the child produces a sound it is assumed that they understand it as well)</li>
<li><code>kids_respond</code>: the number of parents who responded to this question at all</li>
<li><code>prop_produce</code>: the proportion of kids whose parents endorsed that their child produces this animal sound, out of all questionnaires administered (i.e., <code>kids_produce / kids_respond</code>)</li>
</ul>
<p>Other variables in this dataset:</p>
<ul>
<li><code>kids_understand</code>: the number of parents who answered “yes, my child understands what this animal sound means” (note that a child can understand the sound but not produce it)</li>
<li><code>prop_understand</code>: the proportion of kids whose parents endorsed that their child understands this animal sound, out of all questionnaires administered (i.e., <code>kids_understand / kids_respond</code>)</li>
</ul>
</div>
<div id="discrete-vs-continuous-variables" class="section level1">
<h1><span class="header-section-number">7</span> Discrete vs continuous variables</h1>
<p><a href="https://stats.idre.ucla.edu/other/mult-pkg/whatstat/what-is-the-difference-between-categorical-ordinal-and-interval-variables/">WHAT IS THE DIFFERENCE BETWEEN CATEGORICAL, ORDINAL AND INTERVAL VARIABLES?</a></p>
<p>In order to use color with your data, most importantly, you need to know if you’re dealing with discrete or continuous variables.</p>
<div id="discrete-color-palettes" class="section level2">
<h2><span class="header-section-number">7.1</span> Discrete color palettes</h2>
<p>Discrete color palettes work best when you want to color by a qualitative variable. Qualitative variables tend to be either categorical or ordinal. Different variables can be qualitative or quantitative depending on context.</p>
<p>In this dataset, <code>sound</code> is a categorical variable with 3 possible values:</p>
<pre class="r"><code>sounds %>%
distinct(sound) %>%
knitr::kable()</code></pre>
<table>
<thead>
<tr class="header">
<th align="left">sound</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">cockadoodledoo</td>
</tr>
<tr class="even">
<td align="left">meow</td>
</tr>
<tr class="odd">
<td align="left">woof woof</td>
</tr>
</tbody>
</table>
<p>We could map arbitrary numbers onto each of these sounds, like 1, 2, and 3- but the numbers still would not mean anything. That is, there is no intrinsic ordering to these categories. Examples of common pure categorical variables are race or ethnicity, gender, hair color, eye color, etc. Coloring by sound is used as a way to <em>distinguish</em> the data for different sounds from each other (read more here: <a href="http://serialmentor.com/dataviz/color-basics.html#color-as-a-tool-to-distinguish" class="uri">http://serialmentor.com/dataviz/color-basics.html#color-as-a-tool-to-distinguish</a>)</p>
</div>
<div id="continuous-color-palettes" class="section level2">
<h2><span class="header-section-number">7.2</span> Continuous color palettes</h2>
<p>Continuous color palettes work best when you want to color by a quantitative variable. Quantitative variables tend to be either ordinal or continuous. In this dataset, <code>age</code> (in months) can only take on a limited set of values:</p>
<pre class="r"><code>sounds %>%
distinct(age) %>%
pull</code></pre>
<pre><code> [1] 8 9 10 11 12 13 14 15 16 17 18</code></pre>
<p>However, in the following plots, we’ll treat age as a continuous variable plotted across the x-axis. In some contexts, this kind of variable could be treated as a ordinal variable. However, for color purposes, this would not ideal here since there are 11 “categories” (see <a href="http://serialmentor.com/dataviz/color-pitfalls.html" class="uri">http://serialmentor.com/dataviz/color-pitfalls.html</a>). Age has a natural and meaningful order: a child who is 9 months old is 1 month older than one who is 8 months old. So, we’ll use that natural ordering to our advantage and not use color to represent age as a variable. When you <em>do</em> apply a continuous color palette, you’ll want to use color to your advantage to <a href="http://serialmentor.com/dataviz/color-basics.html#color-to-represent-data-values">represent data values</a>.</p>
</div>
</div>
<div id="know-your-data" class="section level1">
<h1><span class="header-section-number">8</span> Know your data</h1>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #1:
</div>
<div class="panel-body">
<ul>
<li>How many variables?
<ul>
<li>Which variables are continuous?</li>
<li>Which ones are categorical or ordinal?</li>
</ul></li>
<li>How many total kids do we have data for?</li>
<li>How many ages (in months)?</li>
<li>How many kids per age?</li>
<li>How many types of animal sounds? What are they?
</div></li>
</ul>
</div>
<p>Let’s start just by getting a feel for how many kids produce each kind of sound, across the full age range. We could make a table:</p>
<pre class="r"><code>sounds %>%
group_by(sound) %>%
summarize(total_produce = sum(kids_produce)) %>%
knitr::kable()</code></pre>
<table>
<thead>
<tr class="header">
<th align="left">sound</th>
<th align="right">total_produce</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">cockadoodledoo</td>
<td align="right">148</td>
</tr>
<tr class="even">
<td align="left">meow</td>
<td align="right">681</td>
</tr>
<tr class="odd">
<td align="left">woof woof</td>
<td align="right">940</td>
</tr>
</tbody>
</table>
<p>Or we could make a simple bar plot:</p>
<pre class="r"><code>ggplot(sounds, aes(x = sound, y = kids_produce)) +
geom_col() +
labs(x = "Sound", y = "Total Children Producing")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-12-1.png" width="672" /></p>
<p>For this kind of plot, we don’t really need color. What if we want to see how the number of kids who produce each sound varies by age? We’ll change the x-axis to age and instead <code>facet_wrap</code> by <code>sound</code>, and make the y-axis a proportion instead of counts.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_col() +
labs(x = "Age (mos)", y = "Proportion of Children Producing") +
facet_wrap(~sound)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-13-1.png" width="672" /></p>
<p>The bar geom makes this a little hard to read and compare across facets though. Let’s try points instead.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_point() +
labs(x = "Age (mos)", y = "Proportion of Children Producing") +
facet_wrap(~sound)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-14-1.png" width="672" /></p>
<p>That is a little better! Facets allow us to parse the relationship between two quantitative variables (here, age and proportion of kids producing) by a qualitative variable (here, type of sound). Another way we could do this, instead of facetting, is to use color. This would make it easier to compare proportions at each age.</p>
</div>
<div id="discrete-colors" class="section level1">
<h1><span class="header-section-number">9</span> Discrete colors</h1>
<p>Let’s start with a base plot with age (in months) along the x-axis and the proportion of children producing each word along the y-axis, using points as the geometric object. Set the size of the points to 2 and change the x- and y-axis labels to “Age (months)” and “Proportion of Children Producing”, respectively.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_point(size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-15-1.png" width="672" /></p>
<div id="default-discrete-palette" class="section level2">
<h2><span class="header-section-number">9.1</span> Default discrete palette</h2>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #2:
</div>
<div class="panel-body">
<p>Take the plot we just made, and edit the code to map the color of the points to the type of sound produced <em>at the geom level</em>. The colors that show up are the default discrete palette in <code>ggplot2</code>.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_point(aes(color = sound), size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing")</code></pre>
<img src="03-colors_files/figure-html/unnamed-chunk-16-1.png" width="672" />
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #3:
</div>
<div class="panel-body">
<p>Try adding <code>geom_line()</code> to this plot to connect the dots. Does this look right? Use <code>?geom_line</code> to figure out how this geom connects the dots by default, and which aesthetic can be used to connect cases together. Try editing your code to draw 3 black lines- one for each sound.</p>
<pre class="r"><code># Does this look right? no!
ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_line() +
geom_point(aes(color = sound), size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-17-1.png" width="672" /></p>
<pre class="r"><code># A possible solution
ggplot(sounds, aes(x = age, y = prop_produce)) +
geom_line(aes(group = sound)) +
geom_point(aes(color = sound), size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-18-1.png" width="672" /></p>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #4:
</div>
<div class="panel-body">
<p>Make two plots:</p>
<ol style="list-style-type: decimal">
<li><p>Recreate the plot above, but this time map color to the type of sound produced for both the point and line geoms. Pay attention to the order of the layers you are adding- you may wish to place <code>geom_line</code> <em>before</em> <code>geom_point</code> so the lines are always “painted” underneath the points.</p></li>
<li><p>Instead of <code>geom_line</code>, add a loess line using <code>geom_smooth</code>. Use <code>?geom_smooth</code> to figure out how to get rid of the grey standard error ribbon. You may also want to increase the line width.</p></li>
</ol>
<pre class="r"><code># Does this look right? yes!
ggplot(sounds, aes(x = age, y = prop_produce, color = sound)) +
geom_line() +
geom_point(size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-19-1.png" width="672" /></p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
color = sound)) +
geom_smooth(se = FALSE, lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)", y = "Proportion of Children Producing") </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-19-2.png" width="672" /></p>
</div>
</div>
<p>Why does this work? To tell <code>geom_line</code> how to connect your dots, you can either:</p>
<ul>
<li>Map the <code>group</code> aesthetic (so <code>aes(group = sound)</code>), or</li>
<li>Map the <code>color</code> aesthetic globally (<code>aes(color = sound)</code>.</li>
</ul>
<p>Because <code>geom_line</code> understands the <code>color</code> aesthetic, it will try to draw separate lines for each color. Here that translates to three lines, one for each sound, which is what we want!</p>
</div>
<div id="brief-aside-factors" class="section level2">
<h2><span class="header-section-number">9.2</span> Brief aside: factors</h2>
<p>At this point, our plot is looking pretty good. But you may have noticed that the legend order doesn’t match the lines. We can fix that using the <a href="http://forcats.tidyverse.org"><code>forcats</code> package</a>, which is <code>for</code> <code>cat</code>egorical variables. There are lots of functions in <code>forcats</code>, and you can install & load it separately, although <code>forcats</code> is loaded with the <code>tidyverse</code>.</p>
<pre class="r"><code>install.packages("forcats")
library(forcats)</code></pre>
<p>We’ll use the <code>fct_reorder2</code> function, which works for when you have a line chart of two quantitative variables, colored by a factor variable. Let’s see the difference.</p>
<pre class="r"><code>sounds <- sounds %>%
mutate(sound = as.factor(sound))
sound_traj <- ggplot(sounds, aes(x = age,
y = prop_produce,
color = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(se = FALSE, lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
color = "sound")
sound_traj</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-21-1.png" width="672" /></p>
<p>MUCH BETTER! Save your plot object as <code>sound_traj</code>. Now we can start playing with the actual colors.</p>
</div>
<div id="set-luminance-and-saturation-chromaticity" class="section level2">
<h2><span class="header-section-number">9.3</span> Set luminance and saturation (chromaticity)</h2>
<p>The default qualitative palette works fine here. The addition of <a href="http://ggplot2.tidyverse.org/reference/scale_hue.html"><code>scale_color_hue</code></a> changes nothing.</p>
<pre class="r"><code>sound_traj +
scale_color_hue()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-22-1.png" width="672" /></p>
<p>We can also change these settings within the default color palette, where the arguments are:</p>
<ul>
<li><code>h</code> = range of hues to use, in [0, 360]</li>
<li><code>l</code> = luminance (lightness)</li>
<li><code>c</code> = chroma (intensity of color)</li>
</ul>
<pre class="r"><code># Change hue (l and c are defaults)
sound_traj +
scale_color_hue(h = c(0, 90), l = 65, c = 100)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-23-1.png" width="672" /></p>
<pre class="r"><code># Use luminance=45, instead of default 65
sound_traj +
scale_color_hue(l = 45)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-23-2.png" width="672" /></p>
<pre class="r"><code># Reduce saturation (chroma) from 100 to 50, and increase luminance
sound_traj +
scale_color_hue(l = 75, c = 50)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-23-3.png" width="672" /></p>
</div>
<div id="set-discrete-colors" class="section level2">
<h2><span class="header-section-number">9.4</span> Set discrete colors</h2>
<p>We can change the actual colors used by adding the layer <code>scale_color_manual</code> or <code>scale_fill_manual</code>. Confusion between which to use when is often the cause of much frustration!</p>
<p>To name more than one color, which you often want to do, use <code>c()</code>. In the parentheses, named colors and hex colors are always in quotes.</p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = c("cornflowerblue",
"seagreen", "coral"))</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-24-1.png" width="672" /></p>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #5:
</div>
<div class="panel-body">
<p>View the code blocks below. Copy and paste the code to run them in your own file. Why do neither of the following code blocks change the colors of the points and lines? Use your words :) <em>(the answer is below the challenge, but try to trouble-shoot on your own first)</em></p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
color = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(se = FALSE, lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
color = "sound") +
scale_fill_manual(values = c("cornflowerblue",
"seagreen", "coral"))</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-25-1.png" width="672" /></p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(se = FALSE, lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_manual(values = c("cornflowerblue",
"seagreen", "coral"))</code></pre>
<img src="03-colors_files/figure-html/unnamed-chunk-26-1.png" width="672" />
</div>
</div>
<p>Answers:</p>
<ul>
<li>In the first, we used <code>scale_fill_manual</code>, but the in the global aesthetics, we mapped the <code>color</code>, not <code>fill</code>, aesthetic onto the <code>sound</code> variable.</li>
<li>In the second, we did define the <code>fill</code> aesthetic and used <code>scale_fill_manual</code>, so that is good. But <code>geom_line</code> only understands the <code>color</code> aesthetic, not <code>fill</code>. And for <code>geom_point</code>, the default shape for is 19, which does not understand the <code>fill</code> aesthetic.</li>
</ul>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #6:
</div>
<div class="panel-body">
<p>Start with this plot:</p>
<pre class="r"><code>sound_traj</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-27-1.png" width="672" /></p>
<p>Add a black outline to the points, and color the inside of the points and the lines by <code>sound</code> using the default discrete color palette. You may also wish to edit the legends on this plot: <code>geom_smooth</code> has an argument called <code>show.legend = FALSE</code>. See if you prefer the plot with this change.</p>
<p>If this was easy, try applying the same custom color palette to the inside of the points and to the lines.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(color = fct_reorder2(sound, age, prop_produce)),
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-28-1.png" width="672" /></p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(color = fct_reorder2(sound, age, prop_produce)),
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_manual(values = c("cornflowerblue",
"seagreen", "coral")) +
scale_color_manual(values = c("cornflowerblue",
"seagreen", "coral"))</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-29-1.png" width="672" /></p>
</div>
</div>
<p>You can also define your color palette as a vector outside of <code>ggplot2</code>. Below, I made an object called <code>my_colors</code> outside of <code>ggplot2</code>. To use it, we call that object within the <code>scale_colour_manual</code> function.</p>
<pre class="r"><code>my_colors <- c("cadetblue", "steelblue", "salmon") # quote color names
sound_traj +
scale_color_manual(values = my_colors) # note: not in quotes</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-30-1.png" width="672" /></p>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #7:
</div>
<div class="panel-body">
<p>Define a custom color palette using hexadecimal colors (#rrggbb), and apply it using <code>scale_color_manual</code> to your <code>sound_traj</code> plot. Some basic ones are here:</p>
<p><a href="https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/" class="uri">https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/</a></p>
<p>Parse the hexadecimal string like so: #rrggbb, where rr, gg, and bb refer to color intensity in the red, green, and blue channels, respectively.</p>
<pre class="r"><code># from https://github.com/mwaskom/seaborn/blob/master/seaborn/palettes.py
sb_colorblind <- c("#0072B2", "#009E73", "#D55E00",
"#CC79A7", "#F0E442", "#56B4E9")
sound_traj +
scale_colour_manual(values = sb_colorblind)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-31-1.png" width="672" /></p>
</div>
</div>
</div>
<div id="built-in-discrete-palettes" class="section level2">
<h2><span class="header-section-number">9.5</span> Built-in discrete palettes</h2>
<div id="colorbrewer" class="section level3">
<h3><span class="header-section-number">9.5.1</span> Colorbrewer</h3>
<p>To use Colorbrewer palettes, you’ll need to install the <code>RColorBrewer</code> package from CRAN. This chunk of code tells you how:</p>
<pre class="r"><code>install.packages("RColorBrewer")
library(RColorBrewer)</code></pre>
<p>Colorbrewer has a few qualitative palettes named: Accent, Dark2, Paired, Pastel1, Pastel2, Set1, Set2, Set3. Here is how to view them:</p>
<pre class="r"><code>brewer.pal(5, "Dark2") # list 5 hex colors</code></pre>
<pre><code>[1] "#1B9E77" "#D95F02" "#7570B3" "#E7298A" "#66A61E"</code></pre>
<pre class="r"><code>display.brewer.pal(5, "Dark2") # view 5 hex colors</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-33-1.png" width="672" /></p>
<p>And here is how you use them:</p>
<pre class="r"><code>sound_traj +
scale_color_brewer(palette = "Dark2")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-34-1.png" width="672" /></p>
</div>
<div id="wes-anderson-palettes" class="section level3">
<h3><span class="header-section-number">9.5.2</span> Wes Anderson palettes</h3>
<p>My favorite! To use Wes Anderson palettes, you’ll need to install the <code>wesanderson</code> package from CRAN. This chunk of code tells you how:</p>
<pre class="r"><code>install.packages("wesanderson")
library(wesanderson)</code></pre>
<pre class="r"><code>names(wes_palettes) # all the palette names</code></pre>
<pre><code> [1] "GrandBudapest" "Moonrise1" "Royal1" "Moonrise2"
[5] "Cavalcanti" "Royal2" "GrandBudapest2" "Moonrise3"
[9] "Chevalier" "Zissou" "FantasticFox" "Darjeeling"
[13] "Rushmore" "BottleRocket" "Darjeeling2" </code></pre>
<pre class="r"><code>wes_palette("GrandBudapest2") # view named palette</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-36-1.png" width="672" /></p>
<pre class="r"><code>wes_palette("GrandBudapest2")[1:4] # list first 4 hex colors</code></pre>
<pre><code>[1] "#E6A0C4" "#C6CDF7" "#D8A499" "#7294D4"</code></pre>
<pre class="r"><code>wes_palette("GrandBudapest2")[c(1,4)] # list colors 1 and 4</code></pre>
<pre><code>[1] "#E6A0C4" "#7294D4"</code></pre>
<p>To use these palettes, use <code>scale_color_manual</code> where <code>values</code> is set to <code>wes_palette("name")</code>. For example:</p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = wes_palette("Darjeeling"))</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-37-1.png" width="672" /></p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = wes_palette("FantasticFox"))</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-37-2.png" width="672" /></p>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #8:
</div>
<div class="panel-body">
<p>What if you just don’t want to use the colors in the order they are in? Use a <code>wes_palette</code> of your choice. Using our code from above, try picking the last 3 colors of a palette. Add it to your <code>sound_traj</code> plot.</p>
<p>If this was easy, try using colors 2, 3, and 5 instead.</p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = wes_palette("Darjeeling")[3:5])</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-38-1.png" width="672" /></p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = wes_palette("FantasticFox")[c(2, 3, 5)])</code></pre>
<img src="03-colors_files/figure-html/unnamed-chunk-38-2.png" width="672" />
</div>
</div>
</div>
<div id="ggthemes-palettes" class="section level3">
<h3><span class="header-section-number">9.5.3</span> <code>ggthemes</code> palettes</h3>
<p>To use these palettes, you’ll need to install the <code>ggthemes</code> package from CRAN. This chunk of code tells you how:</p>
<pre class="r"><code>install.packages("ggthemes")
library(ggthemes)</code></pre>
<pre class="r"><code>sound_traj +
scale_color_fivethirtyeight()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-40-1.png" width="672" /></p>
<pre class="r"><code>sound_traj +
scale_color_economist()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-40-2.png" width="672" /></p>
</div>
<div id="palettes-from-the-queen-bee" class="section level3">
<h3><span class="header-section-number">9.5.4</span> Palettes from the Queen Bee</h3>
<p>To use <a href="https://github.com/dill/beyonce">Beyonce palettes</a>, you’ll need to install the <code>beyonce</code> package from GitHub using <code>devtools::install_github()</code>. This chunk of code tells you how:</p>
<pre class="r"><code>install.packages("devtools")
devtools::install_github("dill/beyonce")
library(beyonce)</code></pre>
<p>Note that a number of students had installation problems with this package! Move on if you do.</p>
<pre class="r"><code>beyonce_palette(18)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-42-1.png" width="672" /></p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = beyonce_palette(18)[3:5])</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-43-1.png" width="672" /></p>
<p>Here we’ll only use the first, fourth, and fifth colors in the palette.</p>
<pre class="r"><code>sound_traj +
scale_color_manual(values = beyonce_palette(18)[c(1, 4, 5)])</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-44-1.png" width="672" /></p>
</div>
<div id="viridis-palettes" class="section level3">
<h3><span class="header-section-number">9.5.5</span> Viridis palettes</h3>
<p>To use, you’ll need to install the <code>viridis</code> package from CRAN. This chunk of code tells you how:</p>
<pre class="r"><code>install.packages("viridis")
library(viridis)</code></pre>
<p>Read more here in the <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html">viridis vignette</a>. The default argument for <code>discrete</code> is FALSE, so to use the discrete palettes you need to set <code>discrete = TRUE</code>. There are four colormap options available:</p>
<ul>
<li>“magma” (or “A”),</li>
<li>“inferno” (or “B”),</li>
<li>“plasma” (or “C”),</li>
<li>“viridis” (or “D”, the default option).</li>
</ul>
<pre class="r"><code>sound_traj +
scale_color_viridis(discrete = TRUE) +
theme_minimal()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-46-1.png" width="672" /></p>
<pre class="r"><code>sound_traj +
scale_color_viridis(discrete = TRUE, option = "plasma") +
theme_minimal()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-46-2.png" width="672" /></p>
<div class="panel panel-success">
<div class="panel-heading">
Challenge #9:
</div>
<div class="panel-body">
<p>Use the <code>viridis</code> package to color the points by and the lines by <code>sound</code>; make the outline of the points “midnightblue”. Pick any colormap option, and play with <code>theme_bw</code> or <code>theme_minimal</code> to see what you like.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(color = fct_reorder2(sound, age, prop_produce)),
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21, colour = "midnightblue") +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_viridis(discrete = TRUE) +
scale_color_viridis(discrete = TRUE) +
theme_minimal()</code></pre>
<img src="03-colors_files/figure-html/unnamed-chunk-47-1.png" width="672" />
</div>
</div>
</div>
</div>
<div id="greyscale-for-discrete" class="section level2">
<h2><span class="header-section-number">9.6</span> Greyscale for discrete</h2>
<p>Use <code>scale_color_grey</code> or <code>scale_fill_grey</code>, or sometimes both depending on your geoms and the aesthetics they understand.</p>
<pre class="r"><code>sound_traj +
scale_color_grey() +
theme_minimal()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-48-1.png" width="672" /></p>
<p>Set start and end</p>
<pre class="r"><code>sound_traj +
scale_color_grey(start = 0.2, end = .8) </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-49-1.png" width="672" /></p>
<p>Make the same plot but make points outlined in black</p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(color = fct_reorder2(sound, age, prop_produce)),
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_grey(start = 0.3, end = 1) +
scale_color_grey(start = 0.3, end = 1) </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-50-1.png" width="672" /></p>
<p>Suggest redundancy in greyscale- try changing line type instead of line (or in addition to) line color.</p>
<p>Change line type by <code>sound</code>, set color to black.</p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(lty = fct_reorder2(sound, age, prop_produce)), color = "black",
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_grey(start = 0.3, end = 1) </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-51-1.png" width="672" /></p>
<p>Change both!</p>
<pre class="r"><code>ggplot(sounds, aes(x = age,
y = prop_produce,
fill = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(aes(color = fct_reorder2(sound, age, prop_produce),
lty = fct_reorder2(sound, age, prop_produce)),
se = FALSE, lwd = .5, show.legend = FALSE) +
geom_point(size = 2, shape = 21) +
labs(x = "Age (months)",
y = "Proportion of Children Producing",
fill = "sound") +
scale_fill_grey(start = 0.3, end = .8) +
scale_color_grey(start = 0.3, end = .8) </code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-52-1.png" width="672" /></p>
</div>
<div id="colorblind-friendly-palettes" class="section level2">
<h2><span class="header-section-number">9.7</span> Colorblind-friendly palettes</h2>
<p>The <a href="https://github.com/clauswilke/colorblindr"><code>colorblindr</code> package</a> can be used to “simulate colorblindness in production-ready R figures.” To use this package, you’ll need to first install the <code>cowplot</code> package from GitHub using <code>devtools::install_github()</code>. You’ll also need to install the <code>colorspace</code> package from CRAN. Finally, you can then use <code>devtools::install_github()</code> again to install the <code>colorblindr</code> package. This code chunk shows you how to do all 3 installs to use the <code>colorblindr</code> package:</p>
<pre class="r"><code>devtools::install_github("wilkelab/cowplot")
install.packages("colorspace", repos = "http://R-Forge.R-project.org")
devtools::install_github("clauswilke/colorblindr")</code></pre>
<p>To use:</p>
<pre class="r"><code># save a ggplot object
my_sound_traj <- sound_traj +
scale_color_manual(values = beyonce_palette(18)[c(1, 4, 5)])</code></pre>
<p>View that figure after color-vision-deficiency simulation:</p>
<pre class="r"><code>library(colorblindr)
cvd_grid(my_sound_traj)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-55-1.png" width="672" /></p>
<p>You can also use the colorblind-friendly palette in this package using <code>scale_color_OkabeIto</code> and <code>scale_fill_OkabeIto</code>:</p>
<pre class="r"><code>cb_sound_traj <- sound_traj +
scale_color_OkabeIto()
cb_sound_traj</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-56-1.png" width="672" /></p>
<pre class="r"><code>cvd_grid(cb_sound_traj)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-56-2.png" width="672" /></p>
<p>You can still use this colorblind-friendly palette without the <code>colorblindr</code> package though. <a href="http://jfly.iam.u-tokyo.ac.jp/color/">Here</a> are the colors!</p>
<div class="figure">
<img src="http://jfly.iam.u-tokyo.ac.jp/color/image/pallete.jpg" />
</div>
<p>The <a href="http://www.cookbook-r.com/Graphs/Colors_(ggplot2)/#a-colorblind-friendly-palette">Cookbook for R</a> provided the matching hex colors too to make life easier:</p>
<pre class="r"><code>cbbPalette <- c("#000000", "#E69F00", "#56B4E9", "#009E73", "#F0E442", "#0072B2", "#D55E00", "#CC79A7")
# To use for line and point colors, add
sound_traj +
scale_colour_manual(values = cbbPalette[c(3, 7, 8)])</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-57-1.png" width="672" /></p>
</div>
<div id="repel-labels" class="section level2">
<h2><span class="header-section-number">9.8</span> Repel labels</h2>
<pre class="r"><code>library(ggrepel)
sounds <- sounds %>%
mutate(label = case_when(
age == max(age) ~ sound))
ggplot(sounds, aes(x = age,
y = prop_produce,
color = fct_reorder2(sound, age, prop_produce))) +
geom_smooth(se = FALSE, lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)",
y = "Proportion of Children Producing") +
geom_text_repel(aes(label = label),
nudge_x = 1,
direction = "y",
na.rm = TRUE) +
guides(color = FALSE)</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-58-1.png" width="672" /></p>
</div>
</div>
<div id="continuous-colors" class="section level1">
<h1><span class="header-section-number">10</span> Continuous colors</h1>
<p><em>N.B. All of the example plots below are great examples of how <strong>not</strong> to use continuous colors. I’m showing these so you can see how to work with continuous color palettes, and to make this topic flow easier for you I’m sticking with original dataset.</em></p>
<div id="default-continuous-palette" class="section level2">
<h2><span class="header-section-number">10.1</span> Default continuous palette</h2>
<p>Let’s map color to a continuous variable. For this, we are returning to <code>geom_line</code> instead of <code>geom_smooth</code>, because the latter doesn’t respond to continuous color palettes.</p>
<pre class="r"><code>sound_by_age <- ggplot(sounds, aes(x = age,
y = prop_produce,
color = age)) +
geom_line(aes(group = sound), lwd = .5) +
geom_point(size = 2) +
labs(x = "Age (months)",
y = "Proportion of Children Producing")
sound_by_age</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-59-1.png" width="672" /></p>
</div>
<div id="color-choice-with-continuous-variables" class="section level2">
<h2><span class="header-section-number">10.2</span> Color choice with continuous variables</h2>
<p>With discrete colors, we used either <code>scale_color_manual</code> or <code>scale_fill_manual</code> (and sometimes both were needed!). For continuous colors, we use either <code>scale_color_gradient</code> or <code>scale_fill_gradient</code>.</p>
<pre class="r"><code>sound_by_age +
scale_color_gradient()</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-60-1.png" width="672" /></p>
<p>You can reverse the gradient scale…</p>
<pre class="r"><code>sound_by_age +
scale_color_gradient(trans = "reverse")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-61-1.png" width="672" /></p>
<pre class="r"><code>sound_by_age +
scale_color_gradient(low = "white", high = "red")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-62-1.png" width="672" /></p>
<p>We can make this same plot using a custom greyscale gradient.</p>
<pre class="r"><code>sound_by_age +
scale_color_gradient(low = "grey90", high = "black")</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-63-1.png" width="672" /></p>
<p>So <code>scale_color_gradient</code> gives you a sequential gradient, but you may want a diverging color scheme instead. For that, you can use <code>scale_color_gradient2</code></p>
<pre class="r"><code># Diverging color scheme
med_age <- sounds %>%
summarize(mos = median(age)) %>%
pull()
sound_by_age +
scale_color_gradient2(midpoint = med_age,
low="blue", mid="white", high="red" )</code></pre>
<p><img src="03-colors_files/figure-html/unnamed-chunk-64-1.png" width="672" /></p>
</div>
<div id="built-in-continuous-palettes" class="section level2">
<h2><span class="header-section-number">10.3</span> Built-in continuous palettes</h2>
<div id="use-rcolorbrewer" class="section level3">