From fe9f936aa8ddcc21295a183b4bd04f966e480cdd Mon Sep 17 00:00:00 2001 From: Claus Wilke Date: Sat, 28 Dec 2024 01:34:19 -0600 Subject: [PATCH] next slide set --- .../site_libs/revealjs/dist/theme/quarto.css | 2 +- .../figure-design/execute-results/html.json | 4 +- .../lincoln-ridgeline-polished-1.svg | 414 +++++ .../lincoln-ridgeline-progression1-1.svg | 487 ++++++ .../lincoln-ridgeline-progression2-1.svg | 482 ++++++ .../lincoln-ridgeline-progression3-1.svg | 487 ++++++ .../lincoln-ridgeline-progression4-1.svg | 477 ++++++ .../lincoln-ridgeline-progression5-1.svg | 452 ++++++ .../lincoln-ridgeline-progression6-1.svg | 414 +++++ .../lincoln-ridgeline-progression7-1.svg | 414 +++++ .../lincoln-ridgeline-progression8-1.svg | 414 +++++ .../lincoln-ridgeline-progression9-1.svg | 414 +++++ .../lincoln-ridgeline-raw-1.svg | 487 ++++++ .../penguins-complete-themes10-1.svg | 686 +++++++++ .../penguins-complete-themes11-1.svg | 665 +++++++++ .../penguins-complete-themes12-1.svg | 665 +++++++++ .../penguins-complete-themes13-1.svg | 621 ++++++++ .../penguins-complete-themes2-1.svg | 775 ++++++++++ .../penguins-complete-themes3-1.svg | 775 ++++++++++ .../penguins-complete-themes4-1.svg | 781 ++++++++++ .../penguins-complete-themes5-1.svg | 752 ++++++++++ .../penguins-complete-themes6-1.svg | 657 ++++++++ .../penguins-complete-themes7-1.svg | 645 ++++++++ .../penguins-complete-themes8-1.svg | 709 +++++++++ .../penguins-complete-themes9-1.svg | 668 +++++++++ _quarto.yml | 9 +- _site/index.html | 10 +- _site/schedule.html | 10 +- _site/search.json | 1325 ++++++++--------- .../site_libs/revealjs/dist/theme/quarto.css | 2 +- _site/slides/figure-design.html | 947 +++++++++--- .../Americas-life-expect-1.svg | 690 +++++++++ .../Americas-life-expect-bad1-1.svg | 837 +++++++++++ .../Americas-life-expect-bad2-1.svg | 836 +++++++++++ .../Americas-life-expect2-1.svg | 690 +++++++++ .../figure-revealjs/boxoffice-dotplot-1.svg | 238 +++ .../boxoffice-horizontal-1.svg | 238 +++ .../boxoffice-horizontal-unordered-1.svg | 260 ++++ .../boxoffice-horizontal2-1.svg | 238 +++ .../boxoffice-horizontal3-1.svg | 238 +++ .../figure-revealjs/boxoffice-naive-1.svg | 326 ++++ .../figure-revealjs/boxoffice-ordered-1.svg | 388 +++++ .../figure-revealjs/boxoffice-ordered2-1.svg | 304 ++++ .../figure-revealjs/boxoffice-ordered3-1.svg | 344 +++++ .../boxoffice-rot-axis-tick-labels-1.svg | 302 ++++ .../figure-revealjs/boxoffice-vertical-1.svg | 273 ++++ .../income-by-age-race-dodged-1.svg | 395 +++++ .../income-by-age-race-faceted-1.svg | 582 ++++++++ .../income-by-race-age-dodged-1.svg | 396 +++++ .../lincoln-ridgeline-polished-1.svg | 414 +++++ .../lincoln-ridgeline-progression1-1.svg | 487 ++++++ .../lincoln-ridgeline-progression2-1.svg | 482 ++++++ .../lincoln-ridgeline-progression3-1.svg | 487 ++++++ .../lincoln-ridgeline-progression4-1.svg | 477 ++++++ .../lincoln-ridgeline-progression5-1.svg | 452 ++++++ .../lincoln-ridgeline-progression6-1.svg | 414 +++++ .../lincoln-ridgeline-progression7-1.svg | 414 +++++ .../lincoln-ridgeline-progression8-1.svg | 414 +++++ .../lincoln-ridgeline-progression9-1.svg | 414 +++++ .../lincoln-ridgeline-raw-1.svg | 487 ++++++ .../figure-revealjs/penguins-bars-1.svg | 239 +++ .../figure-revealjs/penguins-bars2-1.svg | 212 +++ .../figure-revealjs/penguins-bars3-1.svg | 212 +++ .../penguins-complete-themes10-1.svg | 686 +++++++++ .../penguins-complete-themes11-1.svg | 665 +++++++++ .../penguins-complete-themes12-1.svg | 665 +++++++++ .../penguins-complete-themes13-1.svg | 621 ++++++++ .../penguins-complete-themes2-1.svg | 775 ++++++++++ .../penguins-complete-themes3-1.svg | 775 ++++++++++ .../penguins-complete-themes4-1.svg | 781 ++++++++++ .../penguins-complete-themes5-1.svg | 752 ++++++++++ .../penguins-complete-themes6-1.svg | 657 ++++++++ .../penguins-complete-themes7-1.svg | 645 ++++++++ .../penguins-complete-themes8-1.svg | 709 +++++++++ .../penguins-complete-themes9-1.svg | 668 +++++++++ .../penguins-sex-species-1.svg | 292 ++++ .../penguins-sex-species-dodge-1.svg | 277 ++++ .../penguins-sex-species-fill-1.svg | 305 ++++ .../penguins-sex-species-stack-1.svg | 276 ++++ .../penguins-sex-species2-1.svg | 276 ++++ _site/syllabus.html | 10 +- _site/worksheets/aesthetic-mappings.html | 44 +- _site/worksheets/coordinate-systems-axes.html | 56 +- _site/worksheets/visualizing-amounts.html | 36 +- slides/Wilke-theme.scss | 6 + slides/figure-design.qmd | 484 ++++++ 86 files changed, 38316 insertions(+), 975 deletions(-) create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-polished-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression1-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression2-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression3-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression4-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression5-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression6-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression7-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression8-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression9-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-raw-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes10-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes11-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes12-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes13-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes2-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes3-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes4-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes5-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes6-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes7-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes8-1.svg create mode 100644 _freeze/slides/figure-design/figure-revealjs/penguins-complete-themes9-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/Americas-life-expect-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad1-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/Americas-life-expect2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-dotplot-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-unordered-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal3-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-naive-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-ordered-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-ordered2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-ordered3-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-rot-axis-tick-labels-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/boxoffice-vertical-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/income-by-age-race-dodged-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/income-by-age-race-faceted-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/income-by-race-age-dodged-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-polished-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression1-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression3-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression4-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression5-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression6-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression7-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression8-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression9-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-raw-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-bars-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-bars2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-bars3-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes10-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes11-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes12-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes13-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes2-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes3-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes4-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes5-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes6-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes7-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes8-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-complete-themes9-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-sex-species-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-sex-species-dodge-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-sex-species-fill-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-sex-species-stack-1.svg create mode 100644 _site/slides/figure-design_files/figure-revealjs/penguins-sex-species2-1.svg diff --git a/_freeze/site_libs/revealjs/dist/theme/quarto.css b/_freeze/site_libs/revealjs/dist/theme/quarto.css index 4dd59a7..bc90054 100644 --- a/_freeze/site_libs/revealjs/dist/theme/quarto.css +++ b/_freeze/site_libs/revealjs/dist/theme/quarto.css @@ -1,4 +1,4 @@ -@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";@import"https://fonts.googleapis.com/css?family=Roboto+Condensed";@import"https://fonts.googleapis.com/css?family=Roboto+Mono";@import"./fonts/source-sans-pro/source-sans-pro.css";.large-font{font-size:1.1em}.small-font{font-size:.86em}.tiny-font{font-size:.66em}.xtiny-font{font-size:.5em}.reveal h1{color:red;text-align:center;margin:0 !important}.reveal code:not(pre>code){font-size:.94em;line-height:1}.highlight{font-weight:bold;color:#91322f}.center-text{text-align:center}.move-up-half-em{margin-top:-0.5em}.move-up-1em{margin-top:-1em}.move-up-2em{margin-top:-2em}.move-up-3em{margin-top:-3em}.move-up-4em{margin-top:-4em}.move-up-5em{margin-top:-5em}.move-up-6em{margin-top:-6em}.move-down-1em{margin-top:1em}.move-down-2em{margin-top:2em}.move-down-3em{margin-top:3em}.absolute-bottom-left{position:absolute;bottom:0;left:0}.absolute-bottom-right{position:absolute;bottom:0;right:0}.date{font-size:.66em}.date:before{content:"Last updated: "}figcaption{display:none}.reveal .column-output-location .column:first-of-type div.sourceCode{height:auto !important}:root{--r-background-color: #fff;--r-main-font: Lato, Arial, sans-serif;--r-main-font-size: 36px;--r-main-color: #222;--r-block-margin: 12px;--r-heading-margin: 0 0 12px 0;--r-heading-font: Roboto Condensed, Arial Narrow OS, Arial, sans-serif;--r-heading-color: #222;--r-heading-line-height: 1.2;--r-heading-letter-spacing: normal;--r-heading-text-transform: none;--r-heading-text-shadow: none;--r-heading-font-weight: 400;--r-heading1-text-shadow: none;--r-heading1-size: 1.45em;--r-heading2-size: 1.45em;--r-heading3-size: 1.2em;--r-heading4-size: 1.2em;--r-code-font: Roboto Mono, Lucida Console, Monaco, Consolas, monospace;--r-link-color: #2a76dd;--r-link-color-dark: #1a53a1;--r-link-color-hover: #5692e4;--r-selection-background-color: #98bdef;--r-selection-color: #fff}.reveal-viewport{background:#fff;background-color:var(--r-background-color)}.reveal{font-family:var(--r-main-font);font-size:var(--r-main-font-size);font-weight:normal;color:var(--r-main-color)}.reveal ::selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal ::-moz-selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:var(--r-heading-margin);color:var(--r-heading-color);font-family:var(--r-heading-font);font-weight:var(--r-heading-font-weight);line-height:var(--r-heading-line-height);letter-spacing:var(--r-heading-letter-spacing);text-transform:var(--r-heading-text-transform);text-shadow:var(--r-heading-text-shadow);word-wrap:break-word}.reveal h1{font-size:var(--r-heading1-size)}.reveal h2{font-size:var(--r-heading2-size)}.reveal h3{font-size:var(--r-heading3-size)}.reveal h4{font-size:var(--r-heading4-size)}.reveal h1{text-shadow:var(--r-heading1-text-shadow)}.reveal p{margin:var(--r-block-margin) 0;line-height:1.3}.reveal h1:last-child,.reveal h2:last-child,.reveal h3:last-child,.reveal h4:last-child,.reveal h5:last-child,.reveal h6:last-child{margin-bottom:0}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:bold}.reveal em{font-style:italic}.reveal ol,.reveal dl,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal dt{font-weight:bold}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:var(--r-block-margin) auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0px 0px 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:var(--r-block-margin) auto;text-align:left;font-size:.55em;font-family:var(--r-code-font);line-height:1.2em;word-wrap:break-word;box-shadow:0px 5px 15px rgba(0,0,0,.15)}.reveal code{font-family:var(--r-code-font);text-transform:none;tab-size:2}.reveal pre code{display:block;padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal .code-wrapper{white-space:normal}.reveal .code-wrapper code{white-space:pre}.reveal table{margin:auto;border-collapse:collapse;border-spacing:0}.reveal table th{font-weight:bold}.reveal table th,.reveal table td{text-align:left;padding:.2em .5em .2em .5em;border-bottom:1px solid}.reveal table th[align=center],.reveal table td[align=center]{text-align:center}.reveal table th[align=right],.reveal table td[align=right]{text-align:right}.reveal table tbody tr:last-child th,.reveal table tbody tr:last-child td{border-bottom:none}.reveal sup{vertical-align:super;font-size:smaller}.reveal sub{vertical-align:sub;font-size:smaller}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal img{margin:var(--r-block-margin) 0}.reveal a{color:var(--r-link-color);text-decoration:none;transition:color .15s ease}.reveal a:hover{color:var(--r-link-color-hover);text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:var(--r-link-color-dark)}.reveal .r-frame{border:4px solid var(--r-main-color);box-shadow:0 0 10px rgba(0,0,0,.15)}.reveal a .r-frame{transition:all .15s linear}.reveal a:hover .r-frame{border-color:var(--r-link-color);box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:var(--r-link-color)}.reveal .progress{background:rgba(0,0,0,.2);color:var(--r-link-color)}@media print{.backgrounds{background-color:var(--r-background-color)}}.top-right{position:absolute;top:1em;right:1em}.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none !important}.zindex-bottom{z-index:-1 !important}figure.figure{display:block}.quarto-layout-panel{margin-bottom:1em}.quarto-layout-panel>figure{width:100%}.quarto-layout-panel>figure>figcaption,.quarto-layout-panel>.panel-caption{margin-top:10pt}.quarto-layout-panel>.table-caption{margin-top:0px}.table-caption p{margin-bottom:.5em}.quarto-layout-row{display:flex;flex-direction:row;align-items:flex-start}.quarto-layout-valign-top{align-items:flex-start}.quarto-layout-valign-bottom{align-items:flex-end}.quarto-layout-valign-center{align-items:center}.quarto-layout-cell{position:relative;margin-right:20px}.quarto-layout-cell:last-child{margin-right:0}.quarto-layout-cell figure,.quarto-layout-cell>p{margin:.2em}.quarto-layout-cell img{max-width:100%}.quarto-layout-cell .html-widget{width:100% !important}.quarto-layout-cell div figure p{margin:0}.quarto-layout-cell figure{display:block;margin-inline-start:0;margin-inline-end:0}.quarto-layout-cell table{display:inline-table}.quarto-layout-cell-subref figcaption,figure .quarto-layout-row figure figcaption{text-align:center;font-style:italic}.quarto-figure{position:relative;margin-bottom:1em}.quarto-figure>figure{width:100%;margin-bottom:0}.quarto-figure-left>figure>p,.quarto-figure-left>figure>div{text-align:left}.quarto-figure-center>figure>p,.quarto-figure-center>figure>div{text-align:center}.quarto-figure-right>figure>p,.quarto-figure-right>figure>div{text-align:right}.quarto-figure>figure>div.cell-annotation,.quarto-figure>figure>div code{text-align:left}figure>p:empty{display:none}figure>p:first-child{margin-top:0;margin-bottom:0}figure>figcaption.quarto-float-caption-bottom{margin-bottom:.5em}figure>figcaption.quarto-float-caption-top{margin-top:.5em}div[id^=tbl-]{position:relative}.quarto-figure>.anchorjs-link{position:absolute;top:.6em;right:.5em}div[id^=tbl-]>.anchorjs-link{position:absolute;top:.7em;right:.3em}.quarto-figure:hover>.anchorjs-link,div[id^=tbl-]:hover>.anchorjs-link,h2:hover>.anchorjs-link,h3:hover>.anchorjs-link,h4:hover>.anchorjs-link,h5:hover>.anchorjs-link,h6:hover>.anchorjs-link,.reveal-anchorjs-link>.anchorjs-link{opacity:1}#title-block-header{margin-block-end:1rem;position:relative;margin-top:-1px}#title-block-header .abstract{margin-block-start:1rem}#title-block-header .abstract .abstract-title{font-weight:600}#title-block-header a{text-decoration:none}#title-block-header .author,#title-block-header .date,#title-block-header .doi{margin-block-end:.2rem}#title-block-header .quarto-title-block>div{display:flex}#title-block-header .quarto-title-block>div>h1{flex-grow:1}#title-block-header .quarto-title-block>div>button{flex-shrink:0;height:2.25rem;margin-top:0}tr.header>th>p:last-of-type{margin-bottom:0px}table,table.table{margin-top:.5rem;margin-bottom:.5rem}caption,.table-caption{padding-top:.5rem;padding-bottom:.5rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-top{margin-top:.5rem;margin-bottom:.25rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-bottom{padding-top:.25rem;margin-bottom:.5rem;text-align:center}.utterances{max-width:none;margin-left:-8px}iframe{margin-bottom:1em}details{margin-bottom:1em}details[show]{margin-bottom:0}details>summary{color:#6f6f6f}details>summary>p:only-child{display:inline}pre.sourceCode,code.sourceCode{position:relative}dd code:not(.sourceCode),p code:not(.sourceCode){white-space:pre-wrap}code{white-space:pre}@media print{code{white-space:pre-wrap}}pre>code{display:block}pre>code.sourceCode{white-space:pre}pre>code.sourceCode>span>a:first-child::before{text-decoration:none}pre.code-overflow-wrap>code.sourceCode{white-space:pre-wrap}pre.code-overflow-scroll>code.sourceCode{white-space:pre}code a:any-link{color:inherit;text-decoration:none}code a:hover{color:inherit;text-decoration:underline}ul.task-list{padding-left:1em}[data-tippy-root]{display:inline-block}.tippy-content .footnote-back{display:none}.footnote-back{margin-left:.2em}.tippy-content{overflow-x:auto}.quarto-embedded-source-code{display:none}.quarto-unresolved-ref{font-weight:600}.quarto-cover-image{max-width:35%;float:right;margin-left:30px}.cell-output-display .widget-subarea{margin-bottom:1em}.cell-output-display:not(.no-overflow-x),.knitsql-table:not(.no-overflow-x){overflow-x:auto}.panel-input{margin-bottom:1em}.panel-input>div,.panel-input>div>div{display:inline-block;vertical-align:top;padding-right:12px}.panel-input>p:last-child{margin-bottom:0}.layout-sidebar{margin-bottom:1em}.layout-sidebar .tab-content{border:none}.tab-content>.page-columns.active{display:grid}div.sourceCode>iframe{width:100%;height:300px;margin-bottom:-0.5em}a{text-underline-offset:3px}div.ansi-escaped-output{font-family:monospace;display:block}/*! +@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";@import"https://fonts.googleapis.com/css?family=Roboto+Condensed";@import"https://fonts.googleapis.com/css?family=Roboto+Mono";@import"./fonts/source-sans-pro/source-sans-pro.css";.large-font{font-size:1.1em}.small-font{font-size:.86em}.tiny-font{font-size:.66em}.xtiny-font{font-size:.5em}.title-font{font-family:"Roboto Condensed","Arial Narrow OS",Arial,sans-serif;font-weight:400;font-size:1.45em}.reveal h1{color:red;text-align:center;margin:0 !important}.reveal code:not(pre>code){font-size:.94em;line-height:1}.highlight{font-weight:bold;color:#91322f}.center-text{text-align:center}.move-up-half-em{margin-top:-0.5em}.move-up-1em{margin-top:-1em}.move-up-2em{margin-top:-2em}.move-up-3em{margin-top:-3em}.move-up-4em{margin-top:-4em}.move-up-5em{margin-top:-5em}.move-up-6em{margin-top:-6em}.move-down-1em{margin-top:1em}.move-down-2em{margin-top:2em}.move-down-3em{margin-top:3em}.absolute-bottom-left{position:absolute;bottom:0;left:0}.absolute-bottom-right{position:absolute;bottom:0;right:0}.date{font-size:.66em}.date:before{content:"Last updated: "}figcaption{display:none}.reveal .column-output-location .column:first-of-type div.sourceCode{height:auto !important}:root{--r-background-color: #fff;--r-main-font: Lato, Arial, sans-serif;--r-main-font-size: 36px;--r-main-color: #222;--r-block-margin: 12px;--r-heading-margin: 0 0 12px 0;--r-heading-font: Roboto Condensed, Arial Narrow OS, Arial, sans-serif;--r-heading-color: #222;--r-heading-line-height: 1.2;--r-heading-letter-spacing: normal;--r-heading-text-transform: none;--r-heading-text-shadow: none;--r-heading-font-weight: 400;--r-heading1-text-shadow: none;--r-heading1-size: 1.45em;--r-heading2-size: 1.45em;--r-heading3-size: 1.2em;--r-heading4-size: 1.2em;--r-code-font: Roboto Mono, Lucida Console, Monaco, Consolas, monospace;--r-link-color: #2a76dd;--r-link-color-dark: #1a53a1;--r-link-color-hover: #5692e4;--r-selection-background-color: #98bdef;--r-selection-color: #fff}.reveal-viewport{background:#fff;background-color:var(--r-background-color)}.reveal{font-family:var(--r-main-font);font-size:var(--r-main-font-size);font-weight:normal;color:var(--r-main-color)}.reveal ::selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal ::-moz-selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:var(--r-heading-margin);color:var(--r-heading-color);font-family:var(--r-heading-font);font-weight:var(--r-heading-font-weight);line-height:var(--r-heading-line-height);letter-spacing:var(--r-heading-letter-spacing);text-transform:var(--r-heading-text-transform);text-shadow:var(--r-heading-text-shadow);word-wrap:break-word}.reveal h1{font-size:var(--r-heading1-size)}.reveal h2{font-size:var(--r-heading2-size)}.reveal h3{font-size:var(--r-heading3-size)}.reveal h4{font-size:var(--r-heading4-size)}.reveal h1{text-shadow:var(--r-heading1-text-shadow)}.reveal p{margin:var(--r-block-margin) 0;line-height:1.3}.reveal h1:last-child,.reveal h2:last-child,.reveal h3:last-child,.reveal h4:last-child,.reveal h5:last-child,.reveal h6:last-child{margin-bottom:0}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:bold}.reveal em{font-style:italic}.reveal ol,.reveal dl,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal dt{font-weight:bold}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:var(--r-block-margin) auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0px 0px 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:var(--r-block-margin) auto;text-align:left;font-size:.55em;font-family:var(--r-code-font);line-height:1.2em;word-wrap:break-word;box-shadow:0px 5px 15px rgba(0,0,0,.15)}.reveal code{font-family:var(--r-code-font);text-transform:none;tab-size:2}.reveal pre code{display:block;padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal .code-wrapper{white-space:normal}.reveal .code-wrapper code{white-space:pre}.reveal table{margin:auto;border-collapse:collapse;border-spacing:0}.reveal table th{font-weight:bold}.reveal table th,.reveal table td{text-align:left;padding:.2em .5em .2em .5em;border-bottom:1px solid}.reveal table th[align=center],.reveal table td[align=center]{text-align:center}.reveal table th[align=right],.reveal table td[align=right]{text-align:right}.reveal table tbody tr:last-child th,.reveal table tbody tr:last-child td{border-bottom:none}.reveal sup{vertical-align:super;font-size:smaller}.reveal sub{vertical-align:sub;font-size:smaller}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal img{margin:var(--r-block-margin) 0}.reveal a{color:var(--r-link-color);text-decoration:none;transition:color .15s ease}.reveal a:hover{color:var(--r-link-color-hover);text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:var(--r-link-color-dark)}.reveal .r-frame{border:4px solid var(--r-main-color);box-shadow:0 0 10px rgba(0,0,0,.15)}.reveal a .r-frame{transition:all .15s linear}.reveal a:hover .r-frame{border-color:var(--r-link-color);box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:var(--r-link-color)}.reveal .progress{background:rgba(0,0,0,.2);color:var(--r-link-color)}@media print{.backgrounds{background-color:var(--r-background-color)}}.top-right{position:absolute;top:1em;right:1em}.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none !important}.zindex-bottom{z-index:-1 !important}figure.figure{display:block}.quarto-layout-panel{margin-bottom:1em}.quarto-layout-panel>figure{width:100%}.quarto-layout-panel>figure>figcaption,.quarto-layout-panel>.panel-caption{margin-top:10pt}.quarto-layout-panel>.table-caption{margin-top:0px}.table-caption p{margin-bottom:.5em}.quarto-layout-row{display:flex;flex-direction:row;align-items:flex-start}.quarto-layout-valign-top{align-items:flex-start}.quarto-layout-valign-bottom{align-items:flex-end}.quarto-layout-valign-center{align-items:center}.quarto-layout-cell{position:relative;margin-right:20px}.quarto-layout-cell:last-child{margin-right:0}.quarto-layout-cell figure,.quarto-layout-cell>p{margin:.2em}.quarto-layout-cell img{max-width:100%}.quarto-layout-cell .html-widget{width:100% !important}.quarto-layout-cell div figure p{margin:0}.quarto-layout-cell figure{display:block;margin-inline-start:0;margin-inline-end:0}.quarto-layout-cell table{display:inline-table}.quarto-layout-cell-subref figcaption,figure .quarto-layout-row figure figcaption{text-align:center;font-style:italic}.quarto-figure{position:relative;margin-bottom:1em}.quarto-figure>figure{width:100%;margin-bottom:0}.quarto-figure-left>figure>p,.quarto-figure-left>figure>div{text-align:left}.quarto-figure-center>figure>p,.quarto-figure-center>figure>div{text-align:center}.quarto-figure-right>figure>p,.quarto-figure-right>figure>div{text-align:right}.quarto-figure>figure>div.cell-annotation,.quarto-figure>figure>div code{text-align:left}figure>p:empty{display:none}figure>p:first-child{margin-top:0;margin-bottom:0}figure>figcaption.quarto-float-caption-bottom{margin-bottom:.5em}figure>figcaption.quarto-float-caption-top{margin-top:.5em}div[id^=tbl-]{position:relative}.quarto-figure>.anchorjs-link{position:absolute;top:.6em;right:.5em}div[id^=tbl-]>.anchorjs-link{position:absolute;top:.7em;right:.3em}.quarto-figure:hover>.anchorjs-link,div[id^=tbl-]:hover>.anchorjs-link,h2:hover>.anchorjs-link,h3:hover>.anchorjs-link,h4:hover>.anchorjs-link,h5:hover>.anchorjs-link,h6:hover>.anchorjs-link,.reveal-anchorjs-link>.anchorjs-link{opacity:1}#title-block-header{margin-block-end:1rem;position:relative;margin-top:-1px}#title-block-header .abstract{margin-block-start:1rem}#title-block-header .abstract .abstract-title{font-weight:600}#title-block-header a{text-decoration:none}#title-block-header .author,#title-block-header .date,#title-block-header .doi{margin-block-end:.2rem}#title-block-header .quarto-title-block>div{display:flex}#title-block-header .quarto-title-block>div>h1{flex-grow:1}#title-block-header .quarto-title-block>div>button{flex-shrink:0;height:2.25rem;margin-top:0}tr.header>th>p:last-of-type{margin-bottom:0px}table,table.table{margin-top:.5rem;margin-bottom:.5rem}caption,.table-caption{padding-top:.5rem;padding-bottom:.5rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-top{margin-top:.5rem;margin-bottom:.25rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-bottom{padding-top:.25rem;margin-bottom:.5rem;text-align:center}.utterances{max-width:none;margin-left:-8px}iframe{margin-bottom:1em}details{margin-bottom:1em}details[show]{margin-bottom:0}details>summary{color:#6f6f6f}details>summary>p:only-child{display:inline}pre.sourceCode,code.sourceCode{position:relative}dd code:not(.sourceCode),p code:not(.sourceCode){white-space:pre-wrap}code{white-space:pre}@media print{code{white-space:pre-wrap}}pre>code{display:block}pre>code.sourceCode{white-space:pre}pre>code.sourceCode>span>a:first-child::before{text-decoration:none}pre.code-overflow-wrap>code.sourceCode{white-space:pre-wrap}pre.code-overflow-scroll>code.sourceCode{white-space:pre}code a:any-link{color:inherit;text-decoration:none}code a:hover{color:inherit;text-decoration:underline}ul.task-list{padding-left:1em}[data-tippy-root]{display:inline-block}.tippy-content .footnote-back{display:none}.footnote-back{margin-left:.2em}.tippy-content{overflow-x:auto}.quarto-embedded-source-code{display:none}.quarto-unresolved-ref{font-weight:600}.quarto-cover-image{max-width:35%;float:right;margin-left:30px}.cell-output-display .widget-subarea{margin-bottom:1em}.cell-output-display:not(.no-overflow-x),.knitsql-table:not(.no-overflow-x){overflow-x:auto}.panel-input{margin-bottom:1em}.panel-input>div,.panel-input>div>div{display:inline-block;vertical-align:top;padding-right:12px}.panel-input>p:last-child{margin-bottom:0}.layout-sidebar{margin-bottom:1em}.layout-sidebar .tab-content{border:none}.tab-content>.page-columns.active{display:grid}div.sourceCode>iframe{width:100%;height:300px;margin-bottom:-0.5em}a{text-underline-offset:3px}div.ansi-escaped-output{font-family:monospace;display:block}/*! * * ansi colors from IPython notebook's * diff --git a/_freeze/slides/figure-design/execute-results/html.json b/_freeze/slides/figure-design/execute-results/html.json index e5d3662..56822c9 100644 --- a/_freeze/slides/figure-design/execute-results/html.json +++ b/_freeze/slides/figure-design/execute-results/html.json @@ -1,8 +1,8 @@ { - "hash": "a6f2a331e578b8b930837b5dfebc2159", + "hash": "56f42197448f507c5df04833955692d7", "result": { "engine": "knitr", - "markdown": "---\ntitle: \"Figure design\"\nauthor: \"Claus O. Wilke\"\ndate: last-modified\nformat: \n revealjs:\n theme:\n - default\n - Wilke-theme.scss\n auto-stretch: false\n chalkboard: true\nexecute:\n fig-format: svg\n fig-asp: 0.618\n fig-width: 5.5\n---\n\n\n\n\n\n# Working with ggplot themes\n\n---\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point()\n # default theme is theme_gray()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements1-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change overall font family\n # (requires font to be available)\n text = element_text(\n family = \"Comic Sans MS\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements2-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of axis titles\n axis.title = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements3-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of only the x axis title\n axis.title.x = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements4-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change all text colors?\n # why does it not work?\n text = element_text(color = \"royalblue2\")\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements5-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n text = element_text(color = \"royalblue2\"),\n axis.text = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements6-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n::: {.fragment .small-font}\nThe element `axis.text` has its own color set in the theme. Therefore it doesn't inherit from `text`.\n:::\n\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0 = left)\n hjust = 0\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements7-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0.5 = center)\n hjust = 0.5\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements8-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (1 = right)\n hjust = 1\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements9-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0 = bottom)\n vjust = 0\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements10-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0.5 = center)\n vjust = 0.5\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements11-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (1 = top)\n vjust = 1\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements12-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Remove elements entirely: `element_blank()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # all text gone\n text = element_blank()\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements13-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n## Remove elements entirely: `element_blank()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # no axis titles\n axis.title = element_blank()\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements14-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n plot.background = element_rect(\n fill = \"aliceblue\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements15-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n panel.background = element_rect(\n fill = \"aliceblue\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements16-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements17-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements18-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Move the legend: `legend.position`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend on top of plot\n legend.position = \"top\"\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements19-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n## Move the legend: `legend.position`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend inside plot\n legend.position = \"inside\", \n # relative position inside plot panel\n legend.position.inside = c(0.98, 0.02),\n # justification relative to position\n legend.justification = c(1, 0)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements20-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n\n## Further reading\n\n::: {.small-font}\n- Fundamentals of Data Visualization: [Chapter 23: Balance the data and the context](https://clauswilke.com/dataviz/balance-data-context.html)\n- Data Visualization—A Practical Introduction: [Chapter 8.3: Change the appearance of plots with themes](https://socviz.co/refineplots.html#change-the-appearance-of-plots-with-themes)\n- ggplot2 reference documentation: [Complete themes](https://ggplot2.tidyverse.org/reference/ggtheme.html)\n- ggplot2 reference documentation: [Modify components of a theme](https://ggplot2.tidyverse.org/reference/theme.html)\n:::", + "markdown": "---\ntitle: \"Figure design\"\nauthor: \"Claus O. Wilke\"\ndate: last-modified\nformat: \n revealjs:\n theme:\n - default\n - Wilke-theme.scss\n auto-stretch: false\n chalkboard: true\nexecute:\n fig-format: svg\n fig-asp: 0.618\n fig-width: 5.5\n---\n\n\n\n\n\n## {#how-do-we-go data-menu-title=\"How do we go from this\"}\n\n::: {.columns}\n\n::: {.column width=\"50%\"}\n[How do we go from this]{.title-font}\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-raw-1.svg){width=90%}\n:::\n:::\n\n\n:::\n\n::: {.fragment .column width=\"50%\"}\n[   to this?]{.title-font}\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-polished-1.svg){width=90%}\n:::\n:::\n\n\n:::\n\n:::\n\n::: {.fragment .small-font .move-up-1em}\nRequires coordinated modification of multiple elements:\n:::\n\n::: {.incremental .small-font}\n- geoms (via arguments to geoms)\n- scales (via `scale_*()` functions)\n- plot appearance (via themes)\n:::\n\n## The starting point, a rough draft\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression1-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n::: {.fragment .tiny-font}\nYou can download the dataset using this code:\n```r\nlincoln_temps <- readRDS(url(\"https://wilkelab.org/SDS366/datasets/lincoln_temps.rds\"))\n```\n:::\n\n## Set `scale` and `bandwidth` to shape ridgelines\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression2-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set `rel_min_height` to cut ridgelines near zero\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression3-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Use `scale_*()` functions to specify axis labels\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\"\n ) +\n scale_y_discrete(\n name = NULL # NULL means no label\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression4-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Specify scale expansion\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression5-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set overall plot theme\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() # from cowplot\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression6-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Align y axis labels to grid lines\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression7-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Change fill color from default gray to blue\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n fill = \"#7DCCFF\"\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression8-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Draw lines in white instead of black\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n fill = \"#7DCCFF\",\n color = \"white\"\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/lincoln-ridgeline-progression9-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n\n# Working with ggplot themes\n\n---\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point()\n # default theme is theme_gray()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_gray()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes2-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_gray(14) # most themes take a font-size argument to scale text size\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes3-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_bw(14)\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes4-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal(14)\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes5-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_classic(14)\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes6-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_half_open() # from package cowplot\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes7-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_grid() # from package cowplot\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes8-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_hgrid() # from package cowplot\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes9-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_vgrid() # from package cowplot\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes10-1.svg){width=60%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_economist(14) # from package ggthemes\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes11-1.svg){width=50%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_economist(14) + # from package ggthemes\n scale_color_economist() \n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes12-1.svg){width=50%}\n:::\n:::\n\n\n:::\n\n## Using ready-made themes\n\n::: {.small-font}\n\n\n::: {.cell}\n\n```{.r .cell-code}\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_fivethirtyeight(14) + # from package ggthemes\n scale_color_fivethirtyeight()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-complete-themes13-1.svg){width=50%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid()\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements1-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change overall font family\n # (requires font to be available)\n text = element_text(\n family = \"Comic Sans MS\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements2-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of axis titles\n axis.title = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements3-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of only the x axis title\n axis.title.x = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements4-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change all text colors?\n # why does it not work?\n text = element_text(color = \"royalblue2\")\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements5-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Customizing theme elements\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n text = element_text(color = \"royalblue2\"),\n axis.text = element_text(\n color = \"royalblue2\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements6-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n::: {.fragment .small-font}\nThe element `axis.text` has its own color set in the theme. Therefore it doesn't inherit from `text`.\n:::\n\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0 = left)\n hjust = 0\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements7-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0.5 = center)\n hjust = 0.5\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements8-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (1 = right)\n hjust = 1\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements9-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0 = bottom)\n vjust = 0\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements10-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0.5 = center)\n vjust = 0.5\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements11-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Horizontal and vertical alignment\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (1 = top)\n vjust = 1\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements12-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Remove elements entirely: `element_blank()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # all text gone\n text = element_blank()\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements13-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n## Remove elements entirely: `element_blank()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # no axis titles\n axis.title = element_blank()\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements14-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n plot.background = element_rect(\n fill = \"aliceblue\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements15-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n panel.background = element_rect(\n fill = \"aliceblue\"\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements16-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n )\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements17-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Set background color: `element_rect()`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements18-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n## Move the legend: `legend.position`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend on top of plot\n legend.position = \"top\"\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements19-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n## Move the legend: `legend.position`\n\n::: {.tiny-font}\n\n\n::: {.cell output-location='column'}\n\n```{.r .cell-code}\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend inside plot\n legend.position = \"inside\", \n # relative position inside plot panel\n legend.position.inside = c(0.98, 0.02),\n # justification relative to position\n legend.justification = c(1, 0)\n )\n```\n\n::: {.cell-output-display}\n![ ](figure-design_files/figure-revealjs/penguins-theme-elements20-1.svg){width=100%}\n:::\n:::\n\n\n:::\n\n\n\n## Further reading\n\n::: {.small-font}\n- Fundamentals of Data Visualization: [Chapter 23: Balance the data and the context](https://clauswilke.com/dataviz/balance-data-context.html)\n- Data Visualization—A Practical Introduction: [Chapter 8.3: Change the appearance of plots with themes](https://socviz.co/refineplots.html#change-the-appearance-of-plots-with-themes)\n- ggplot2 reference documentation: [Complete themes](https://ggplot2.tidyverse.org/reference/ggtheme.html)\n- ggplot2 reference documentation: [Modify components of a theme](https://ggplot2.tidyverse.org/reference/theme.html)\n:::", "supporting": [ "figure-design_files" ], diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-polished-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-polished-1.svg new file mode 100644 index 0000000..30e3e54 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-polished-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression1-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression1-1.svg new file mode 100644 index 0000000..1bc8cb4 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression1-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression2-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression2-1.svg new file mode 100644 index 0000000..f3b6e72 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression2-1.svg @@ -0,0 +1,482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression3-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression3-1.svg new file mode 100644 index 0000000..d3b2408 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression3-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression4-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression4-1.svg new file mode 100644 index 0000000..b33ca0d --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression4-1.svg @@ -0,0 +1,477 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression5-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression5-1.svg new file mode 100644 index 0000000..df04f8b --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression5-1.svg @@ -0,0 +1,452 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression6-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression6-1.svg new file mode 100644 index 0000000..984f183 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression6-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression7-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression7-1.svg new file mode 100644 index 0000000..fe1e962 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression7-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression8-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression8-1.svg new file mode 100644 index 0000000..8af16e6 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression8-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression9-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression9-1.svg new file mode 100644 index 0000000..30e3e54 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-progression9-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-raw-1.svg b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-raw-1.svg new file mode 100644 index 0000000..1bc8cb4 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/lincoln-ridgeline-raw-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes10-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes10-1.svg new file mode 100644 index 0000000..746c71d --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes10-1.svg @@ -0,0 +1,686 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes11-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes11-1.svg new file mode 100644 index 0000000..88a48af --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes11-1.svg @@ -0,0 +1,665 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes12-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes12-1.svg new file mode 100644 index 0000000..0e692eb --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes12-1.svg @@ -0,0 +1,665 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes13-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes13-1.svg new file mode 100644 index 0000000..a76cc9a --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes13-1.svg @@ -0,0 +1,621 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes2-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes2-1.svg new file mode 100644 index 0000000..5cee710 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes2-1.svg @@ -0,0 +1,775 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes3-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes3-1.svg new file mode 100644 index 0000000..c423f82 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes3-1.svg @@ -0,0 +1,775 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes4-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes4-1.svg new file mode 100644 index 0000000..a82b4fc --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes4-1.svg @@ -0,0 +1,781 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes5-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes5-1.svg new file mode 100644 index 0000000..b283a1d --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes5-1.svg @@ -0,0 +1,752 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes6-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes6-1.svg new file mode 100644 index 0000000..49f65ff --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes6-1.svg @@ -0,0 +1,657 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes7-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes7-1.svg new file mode 100644 index 0000000..5d20760 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes7-1.svg @@ -0,0 +1,645 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes8-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes8-1.svg new file mode 100644 index 0000000..079d909 --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes8-1.svg @@ -0,0 +1,709 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes9-1.svg b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes9-1.svg new file mode 100644 index 0000000..447b44f --- /dev/null +++ b/_freeze/slides/figure-design/figure-revealjs/penguins-complete-themes9-1.svg @@ -0,0 +1,668 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_quarto.yml b/_quarto.yml index b58e9c1..9978968 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -23,10 +23,13 @@ website: menu: - text: "Class 2: Aesthetic mappings" href: slides/aesthetic-mappings.qmd - - text: "Class 3: Telling a story" - href: slides/telling-a-story.qmd - - text: "Class 3: Visualizing amounts" + - text: "Class 3a: Visualizing amounts" href: slides/visualizing-amounts.qmd + - text: "Class 3b: Telling a story" + href: slides/telling-a-story.qmd + - text: "Class 13: Figure design" + href: slides/figure-design.qmd + - text: "Worksheets" menu: diff --git a/_site/index.html b/_site/index.html index de710bc..14290b8 100644 --- a/_site/index.html +++ b/_site/index.html @@ -145,14 +145,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • diff --git a/_site/schedule.html b/_site/schedule.html index b5bfbb0..48c65e3 100644 --- a/_site/schedule.html +++ b/_site/schedule.html @@ -110,14 +110,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • diff --git a/_site/search.json b/_site/search.json index 61303ed..dc0fa4d 100644 --- a/_site/search.json +++ b/_site/search.json @@ -1,402 +1,549 @@ [ { - "objectID": "slides/visualizing-amounts.html#many-datasets-contain-simple-amounts", - "href": "slides/visualizing-amounts.html#many-datasets-contain-simple-amounts", - "title": "Visualizing amounts", - "section": "Many datasets contain simple amounts", - "text": "Many datasets contain simple amounts\n\n\nExample: Highest grossing movies Dec. 2017\n\n\n\n\n\n\nrank\ntitle\namount\n\n\n\n\n1\nStar Wars\n71.57\n\n\n2\nJumanji\n36.17\n\n\n3\nPitch Perfect 3\n19.93\n\n\n4\nGreatest Showman\n8.81\n\n\n5\nFerdinand\n7.32\n\n\n\n\n\n\n\n\n\nData source: Box Office Mojo" + "objectID": "slides/figure-design.html#how-do-we-go", + "href": "slides/figure-design.html#how-do-we-go", + "title": "Figure design", + "section": "", + "text": "How do we go from this\n\n\n\n\n\n \n\n\n\n\n\n   to this?\n\n\n\n\n\n \n\n\n\n\n\n\nRequires coordinated modification of multiple elements:\n\n\n\ngeoms (via arguments to geoms)\nscales (via scale_*() functions)\nplot appearance (via themes)" }, { - "objectID": "slides/visualizing-amounts.html#we-can-visualize-amounts-with-bar-plots", - "href": "slides/visualizing-amounts.html#we-can-visualize-amounts-with-bar-plots", - "title": "Visualizing amounts", - "section": "We can visualize amounts with bar plots", - "text": "We can visualize amounts with bar plots" + "objectID": "slides/figure-design.html#the-starting-point-a-rough-draft", + "href": "slides/figure-design.html#the-starting-point-a-rough-draft", + "title": "Figure design", + "section": "The starting point, a rough draft", + "text": "The starting point, a rough draft\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges()\n\n\n\n\n\n \n\n\n\n\n\n\nYou can download the dataset using this code:\nlincoln_temps <- readRDS(url(\"https://wilkelab.org/SDS366/datasets/lincoln_temps.rds\"))" }, { - "objectID": "slides/visualizing-amounts.html#bars-can-also-run-horizontally", - "href": "slides/visualizing-amounts.html#bars-can-also-run-horizontally", - "title": "Visualizing amounts", - "section": "Bars can also run horizontally", - "text": "Bars can also run horizontally" + "objectID": "slides/figure-design.html#set-scale-and-bandwidth-to-shape-ridgelines", + "href": "slides/figure-design.html#set-scale-and-bandwidth-to-shape-ridgelines", + "title": "Figure design", + "section": "Set scale and bandwidth to shape ridgelines", + "text": "Set scale and bandwidth to shape ridgelines\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4\n )" }, { - "objectID": "slides/visualizing-amounts.html#avoid-rotated-axis-labels", - "href": "slides/visualizing-amounts.html#avoid-rotated-axis-labels", - "title": "Visualizing amounts", - "section": "Avoid rotated axis labels", - "text": "Avoid rotated axis labels" + "objectID": "slides/figure-design.html#set-rel_min_height-to-cut-ridgelines-near-zero", + "href": "slides/figure-design.html#set-rel_min_height-to-cut-ridgelines-near-zero", + "title": "Figure design", + "section": "Set rel_min_height to cut ridgelines near zero", + "text": "Set rel_min_height to cut ridgelines near zero\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n )" }, { - "objectID": "slides/visualizing-amounts.html#avoid-rotated-axis-labels-1", - "href": "slides/visualizing-amounts.html#avoid-rotated-axis-labels-1", - "title": "Visualizing amounts", - "section": "Avoid rotated axis labels", - "text": "Avoid rotated axis labels" + "objectID": "slides/figure-design.html#use-scale_-functions-to-specify-axis-labels", + "href": "slides/figure-design.html#use-scale_-functions-to-specify-axis-labels", + "title": "Figure design", + "section": "Use scale_*() functions to specify axis labels", + "text": "Use scale_*() functions to specify axis labels\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\"\n ) +\n scale_y_discrete(\n name = NULL # NULL means no label\n )" }, { - "objectID": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars", - "href": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars", - "title": "Visualizing amounts", - "section": "Pay attention to the order of the bars", - "text": "Pay attention to the order of the bars" + "objectID": "slides/figure-design.html#specify-scale-expansion", + "href": "slides/figure-design.html#specify-scale-expansion", + "title": "Figure design", + "section": "Specify scale expansion", + "text": "Specify scale expansion\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n )" }, { - "objectID": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars-1", - "href": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars-1", - "title": "Visualizing amounts", - "section": "Pay attention to the order of the bars", - "text": "Pay attention to the order of the bars" + "objectID": "slides/figure-design.html#set-overall-plot-theme", + "href": "slides/figure-design.html#set-overall-plot-theme", + "title": "Figure design", + "section": "Set overall plot theme", + "text": "Set overall plot theme\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() # from cowplot" }, { - "objectID": "slides/visualizing-amounts.html#we-can-use-dots-instead-of-bars", - "href": "slides/visualizing-amounts.html#we-can-use-dots-instead-of-bars", - "title": "Visualizing amounts", - "section": "We can use dots instead of bars", - "text": "We can use dots instead of bars" + "objectID": "slides/figure-design.html#align-y-axis-labels-to-grid-lines", + "href": "slides/figure-design.html#align-y-axis-labels-to-grid-lines", + "title": "Figure design", + "section": "Align y axis labels to grid lines", + "text": "Align y axis labels to grid lines\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )" }, { - "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes", - "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes", - "title": "Visualizing amounts", - "section": "Dots are preferable if we want to truncate the axes", - "text": "Dots are preferable if we want to truncate the axes" + "objectID": "slides/figure-design.html#change-fill-color-from-default-gray-to-blue", + "href": "slides/figure-design.html#change-fill-color-from-default-gray-to-blue", + "title": "Figure design", + "section": "Change fill color from default gray to blue", + "text": "Change fill color from default gray to blue\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n fill = \"#7DCCFF\"\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )" }, { - "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", - "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", - "title": "Visualizing amounts", - "section": "Dots are preferable if we want to truncate the axes", - "text": "Dots are preferable if we want to truncate the axes\n\n\n\n\n\n \n\n\n\n\n\nBar lengths donot accurately represent thedata values" + "objectID": "slides/figure-design.html#draw-lines-in-white-instead-of-black", + "href": "slides/figure-design.html#draw-lines-in-white-instead-of-black", + "title": "Figure design", + "section": "Draw lines in white instead of black", + "text": "Draw lines in white instead of black\n\n\n\nggplot(lincoln_temps) +\n aes(x = mean_temp, y = month_long) +\n geom_density_ridges(\n scale = 3, bandwidth = 3.4,\n rel_min_height = 0.01,\n fill = \"#7DCCFF\",\n color = \"white\"\n ) +\n scale_x_continuous(\n name = \"mean temperature (°F)\",\n expand = c(0, 0)\n ) +\n scale_y_discrete(\n name = NULL,\n expand = expansion(add = c(0.2, 2.6))\n ) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(vjust = 0)\n )" }, { - "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", - "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", - "title": "Visualizing amounts", - "section": "Dots are preferable if we want to truncate the axes", - "text": "Dots are preferable if we want to truncate the axes\n\n\n\n\n\n \n\n\n\n\n\nKey featuresof the dataare obscured" + "objectID": "slides/figure-design.html#using-ready-made-themes", + "href": "slides/figure-design.html#using-ready-made-themes", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point()\n # default theme is theme_gray()" }, { - "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", - "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", - "title": "Visualizing amounts", - "section": "Dots are preferable if we want to truncate the axes", - "text": "Dots are preferable if we want to truncate the axes" + "objectID": "slides/figure-design.html#using-ready-made-themes-1", + "href": "slides/figure-design.html#using-ready-made-themes-1", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_gray()" }, { - "objectID": "slides/visualizing-amounts.html#we-use-grouped-bars-for-higher-dimensional-datasets", - "href": "slides/visualizing-amounts.html#we-use-grouped-bars-for-higher-dimensional-datasets", - "title": "Visualizing amounts", - "section": "We use grouped bars for higher-dimensional datasets", - "text": "We use grouped bars for higher-dimensional datasets\n\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" + "objectID": "slides/figure-design.html#using-ready-made-themes-2", + "href": "slides/figure-design.html#using-ready-made-themes-2", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_gray(14) # most themes take a font-size argument to scale text size" }, { - "objectID": "slides/visualizing-amounts.html#we-are-free-to-choose-by-which-variable-to-group", - "href": "slides/visualizing-amounts.html#we-are-free-to-choose-by-which-variable-to-group", - "title": "Visualizing amounts", - "section": "We are free to choose by which variable to group", - "text": "We are free to choose by which variable to group\n\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" + "objectID": "slides/figure-design.html#using-ready-made-themes-3", + "href": "slides/figure-design.html#using-ready-made-themes-3", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_bw(14)" }, { - "objectID": "slides/visualizing-amounts.html#we-can-also-use-multiple-plot-panels-facets", - "href": "slides/visualizing-amounts.html#we-can-also-use-multiple-plot-panels-facets", - "title": "Visualizing amounts", - "section": "We can also use multiple plot panels (facets)", - "text": "We can also use multiple plot panels (facets)\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" + "objectID": "slides/figure-design.html#using-ready-made-themes-4", + "href": "slides/figure-design.html#using-ready-made-themes-4", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal(14)" }, { - "objectID": "slides/visualizing-amounts.html#dataset-highest-grossing-movies-dec.-2017", - "href": "slides/visualizing-amounts.html#dataset-highest-grossing-movies-dec.-2017", - "title": "Visualizing amounts", - "section": "Dataset: Highest grossing movies Dec. 2017", - "text": "Dataset: Highest grossing movies Dec. 2017\n\n# Data from Box Office Mojo for Dec. 22-24, 2017. \nboxoffice <- tibble(\n rank = 1:5,\n title = c(\n \"Star Wars\", \"Jumanji\", \"Pitch Perfect 3\",\n \"Greatest Showman\", \"Ferdinand\"\n ),\n amount = c(71.57, 36.17, 19.93, 8.81, 7.32) # million USD\n)\n\nboxoffice\n\n# A tibble: 5 × 3\n rank title amount\n <int> <chr> <dbl>\n1 1 Star Wars 71.6 \n2 2 Jumanji 36.2 \n3 3 Pitch Perfect 3 19.9 \n4 4 Greatest Showman 8.81\n5 5 Ferdinand 7.32" + "objectID": "slides/figure-design.html#using-ready-made-themes-5", + "href": "slides/figure-design.html#using-ready-made-themes-5", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_classic(14)" }, { - "objectID": "slides/visualizing-amounts.html#visualize-as-a-bar-plot", - "href": "slides/visualizing-amounts.html#visualize-as-a-bar-plot", - "title": "Visualizing amounts", - "section": "Visualize as a bar plot", - "text": "Visualize as a bar plot\n\nggplot(boxoffice, aes(title, amount)) +\n geom_col() # \"col\" stands for column" + "objectID": "slides/figure-design.html#using-ready-made-themes-6", + "href": "slides/figure-design.html#using-ready-made-themes-6", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_half_open() # from package cowplot" }, { - "objectID": "slides/visualizing-amounts.html#order-by-data-value", - "href": "slides/visualizing-amounts.html#order-by-data-value", - "title": "Visualizing amounts", - "section": "Order by data value", - "text": "Order by data value\n\nggplot(boxoffice, aes(fct_reorder(title, amount), amount)) +\n geom_col() # \"col\" stands for column" + "objectID": "slides/figure-design.html#using-ready-made-themes-7", + "href": "slides/figure-design.html#using-ready-made-themes-7", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_grid() # from package cowplot" }, { - "objectID": "slides/visualizing-amounts.html#order-by-data-value-descending", - "href": "slides/visualizing-amounts.html#order-by-data-value-descending", - "title": "Visualizing amounts", - "section": "Order by data value, descending", - "text": "Order by data value, descending\n\nggplot(boxoffice, aes(fct_reorder(title, -amount), amount)) +\n geom_col() + \n xlab(NULL) # remove x axis label" + "objectID": "slides/figure-design.html#using-ready-made-themes-8", + "href": "slides/figure-design.html#using-ready-made-themes-8", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_hgrid() # from package cowplot" }, { - "objectID": "slides/visualizing-amounts.html#flip-x-and-y-set-custom-x-axis-label", - "href": "slides/visualizing-amounts.html#flip-x-and-y-set-custom-x-axis-label", - "title": "Visualizing amounts", - "section": "Flip x and y, set custom x axis label", - "text": "Flip x and y, set custom x axis label\n\nggplot(boxoffice, aes(amount, fct_reorder(title, amount))) +\n geom_col() +\n xlab(\"amount (in million USD)\") +\n ylab(NULL)" + "objectID": "slides/figure-design.html#using-ready-made-themes-9", + "href": "slides/figure-design.html#using-ready-made-themes-9", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_minimal_vgrid() # from package cowplot" }, { - "objectID": "slides/visualizing-amounts.html#example-visualize-number-of-penguins-per-species", - "href": "slides/visualizing-amounts.html#example-visualize-number-of-penguins-per-species", - "title": "Visualizing amounts", - "section": "Example: Visualize number of penguins per species", - "text": "Example: Visualize number of penguins per species\n\n\n\n# A tibble: 344 × 8\n species island bill_length_mm bill_depth_mm flipper_length_mm body_mass_g\n <fct> <fct> <dbl> <dbl> <int> <int>\n 1 Adelie Torgersen 39.1 18.7 181 3750\n 2 Adelie Torgersen 39.5 17.4 186 3800\n 3 Adelie Torgersen 40.3 18 195 3250\n 4 Adelie Torgersen NA NA NA NA\n 5 Adelie Torgersen 36.7 19.3 193 3450\n 6 Adelie Torgersen 39.3 20.6 190 3650\n 7 Adelie Torgersen 38.9 17.8 181 3625\n 8 Adelie Torgersen 39.2 19.6 195 4675\n 9 Adelie Torgersen 34.1 18.1 193 3475\n10 Adelie Torgersen 42 20.2 190 4250\n# ℹ 334 more rows\n# ℹ 2 more variables: sex <fct>, year <int>" + "objectID": "slides/figure-design.html#using-ready-made-themes-10", + "href": "slides/figure-design.html#using-ready-made-themes-10", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_economist(14) # from package ggthemes" }, { - "objectID": "slides/visualizing-amounts.html#use-geom_bar-to-count-before-plotting", - "href": "slides/visualizing-amounts.html#use-geom_bar-to-count-before-plotting", - "title": "Visualizing amounts", - "section": "Use geom_bar() to count before plotting", - "text": "Use geom_bar() to count before plotting\n\nggplot(penguins, aes(y = species)) + # no x aesthetic needed\n geom_bar()" + "objectID": "slides/figure-design.html#using-ready-made-themes-11", + "href": "slides/figure-design.html#using-ready-made-themes-11", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_economist(14) + # from package ggthemes\n scale_color_economist()" }, { - "objectID": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order", - "href": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order", - "title": "Visualizing amounts", - "section": "Getting the bars into the right order", - "text": "Getting the bars into the right order\n\n\nOption 1: Manually, using fct_relevel()\n\nggplot(penguins, aes(y = fct_relevel(species, \"Chinstrap\", \"Gentoo\", \"Adelie\"))) +\n geom_bar() +\n ylab(NULL)" + "objectID": "slides/figure-design.html#using-ready-made-themes-12", + "href": "slides/figure-design.html#using-ready-made-themes-12", + "title": "Figure design", + "section": "Using ready-made themes", + "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point() +\n theme_fivethirtyeight(14) + # from package ggthemes\n scale_color_fivethirtyeight()" }, { - "objectID": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order-1", - "href": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order-1", - "title": "Visualizing amounts", - "section": "Getting the bars into the right order", - "text": "Getting the bars into the right order\n\nOption 2: Using fct_rev() and fct_infreq() from the forcats package\n\nggplot(penguins, aes(y = fct_rev(fct_infreq(species)))) +\n geom_bar() +\n ylab(NULL)" + "objectID": "slides/figure-design.html#customizing-theme-elements", + "href": "slides/figure-design.html#customizing-theme-elements", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid()" }, { - "objectID": "slides/visualizing-amounts.html#display-counts-by-species-and-sex", - "href": "slides/visualizing-amounts.html#display-counts-by-species-and-sex", - "title": "Visualizing amounts", - "section": "Display counts by species and sex", - "text": "Display counts by species and sex\n\n\nggplot(penguins, aes(sex, fill = species)) +\n geom_bar()" + "objectID": "slides/figure-design.html#customizing-theme-elements-1", + "href": "slides/figure-design.html#customizing-theme-elements-1", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change overall font family\n # (requires font to be available)\n text = element_text(\n family = \"Comic Sans MS\"\n )\n )" }, { - "objectID": "slides/visualizing-amounts.html#remove-missing-values-nas", - "href": "slides/visualizing-amounts.html#remove-missing-values-nas", - "title": "Visualizing amounts", - "section": "Remove missing values (NAs)", - "text": "Remove missing values (NAs)\n\n\npenguins2 <- na.omit(penguins) # remove all rows with any missing values\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar()" + "objectID": "slides/figure-design.html#customizing-theme-elements-2", + "href": "slides/figure-design.html#customizing-theme-elements-2", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of axis titles\n axis.title = element_text(\n color = \"royalblue2\"\n )\n )" }, { - "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown", - "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown", - "title": "Visualizing amounts", - "section": "Positions define how subgroups are shown", - "text": "Positions define how subgroups are shown\n\nposition = \"dodge\": Place bars for subgroups side-by-side\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"dodge\")" + "objectID": "slides/figure-design.html#customizing-theme-elements-3", + "href": "slides/figure-design.html#customizing-theme-elements-3", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of only the x axis title\n axis.title.x = element_text(\n color = \"royalblue2\"\n )\n )" }, { - "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-1", - "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-1", - "title": "Visualizing amounts", - "section": "Positions define how subgroups are shown", - "text": "Positions define how subgroups are shown\n\nposition = \"stack\": Place bars for subgroups on top of each other\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"stack\")" + "objectID": "slides/figure-design.html#customizing-theme-elements-4", + "href": "slides/figure-design.html#customizing-theme-elements-4", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change all text colors?\n # why does it not work?\n text = element_text(color = \"royalblue2\")\n )" }, { - "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-2", - "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-2", - "title": "Visualizing amounts", - "section": "Positions define how subgroups are shown", - "text": "Positions define how subgroups are shown\n\nposition = \"fill\": Like \"stack\", but scale to 100%\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"fill\")" + "objectID": "slides/figure-design.html#customizing-theme-elements-5", + "href": "slides/figure-design.html#customizing-theme-elements-5", + "title": "Figure design", + "section": "Customizing theme elements", + "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n text = element_text(color = \"royalblue2\"),\n axis.text = element_text(\n color = \"royalblue2\"\n )\n )\n\n\n\n\n\n \n\n\n\n\n\n\nThe element axis.text has its own color set in the theme. Therefore it doesn’t inherit from text." }, { - "objectID": "slides/visualizing-amounts.html#further-reading", - "href": "slides/visualizing-amounts.html#further-reading", - "title": "Visualizing amounts", - "section": "Further reading", - "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 6: Visualizing amounts\nData Visualization—A Practical Introduction: Chapter 4.4: Geoms can transform data\nggplot2 reference documentation: geom_bar(), geom_col()\nggplot2 reference documentation: position_stack(), position_fill()" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0 = left)\n hjust = 0\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#dataset-daily-average-temperatures-for-various-locations", - "href": "slides/aesthetic-mappings.html#dataset-daily-average-temperatures-for-various-locations", - "title": "Aesthetic mappings", - "section": "Dataset:Daily average temperatures for various locations", - "text": "Dataset:Daily average temperatures for various locations\n\n\n\n\n\n\nlocation\nday_of_year\nmonth\ntemperature\n\n\n\n\nDeath Valley\n1\n01\n51.0\n\n\nDeath Valley\n2\n01\n51.2\n\n\nDeath Valley\n3\n01\n51.3\n\n\nDeath Valley\n4\n01\n51.4\n\n\nDeath Valley\n5\n01\n51.6\n\n\nDeath Valley\n6\n01\n51.7\n\n\nDeath Valley\n7\n01\n51.9\n\n\nDeath Valley\n8\n01\n52.0\n\n\nDeath Valley\n9\n01\n52.2\n\n\nDeath Valley\n10\n01\n52.3\n\n\nDeath Valley\n11\n01\n52.5\n\n\nDeath Valley\n12\n01\n52.7\n\n\nDeath Valley\n13\n01\n52.9" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-1", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment-1", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0.5 = center)\n hjust = 0.5\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#temperatures-mapped-onto-y-position", - "href": "slides/aesthetic-mappings.html#temperatures-mapped-onto-y-position", - "title": "Aesthetic mappings", - "section": "Temperatures mapped onto y position", - "text": "Temperatures mapped onto y position" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-2", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment-2", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (1 = right)\n hjust = 1\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#temperatures-mapped-onto-color", - "href": "slides/aesthetic-mappings.html#temperatures-mapped-onto-color", - "title": "Aesthetic mappings", - "section": "Temperatures mapped onto color", - "text": "Temperatures mapped onto color" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-3", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment-3", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0 = bottom)\n vjust = 0\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#commonly-used-aesthetics", - "href": "slides/aesthetic-mappings.html#commonly-used-aesthetics", - "title": "Aesthetic mappings", - "section": "Commonly used aesthetics", - "text": "Commonly used aesthetics" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-4", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment-4", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0.5 = center)\n vjust = 0.5\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#the-same-data-values-can-be-mapped-to-different-aesthetics", - "href": "slides/aesthetic-mappings.html#the-same-data-values-can-be-mapped-to-different-aesthetics", - "title": "Aesthetic mappings", - "section": "The same data values can be mapped to different aesthetics", - "text": "The same data values can be mapped to different aesthetics" + "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-5", + "href": "slides/figure-design.html#horizontal-and-vertical-alignment-5", + "title": "Figure design", + "section": "Horizontal and vertical alignment", + "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (1 = top)\n vjust = 1\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#we-can-use-many-different-aesthetics-at-once", - "href": "slides/aesthetic-mappings.html#we-can-use-many-different-aesthetics-at-once", - "title": "Aesthetic mappings", - "section": "We can use many different aesthetics at once", - "text": "We can use many different aesthetics at once" + "objectID": "slides/figure-design.html#remove-elements-entirely-element_blank", + "href": "slides/figure-design.html#remove-elements-entirely-element_blank", + "title": "Figure design", + "section": "Remove elements entirely: element_blank()", + "text": "Remove elements entirely: element_blank()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # all text gone\n text = element_blank()\n )" }, { - "objectID": "slides/aesthetic-mappings.html#getting-the-data", - "href": "slides/aesthetic-mappings.html#getting-the-data", - "title": "Aesthetic mappings", - "section": "Getting the data", - "text": "Getting the data\nAll examples will use the temperatures dataset:\n\ntemperatures <- read_csv(\"https://wilkelab.org/SDS366/datasets/tempnormals.csv\") |>\n mutate(\n location = factor(\n location, levels = c(\"Death Valley\", \"Houston\", \"San Diego\", \"Chicago\")\n )\n ) |>\n select(location, station_id, day_of_year, month, temperature)" + "objectID": "slides/figure-design.html#remove-elements-entirely-element_blank-1", + "href": "slides/figure-design.html#remove-elements-entirely-element_blank-1", + "title": "Figure design", + "section": "Remove elements entirely: element_blank()", + "text": "Remove elements entirely: element_blank()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # no axis titles\n axis.title = element_blank()\n )" }, { - "objectID": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes", - "href": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes", - "title": "Aesthetic mappings", - "section": "We define the mapping with aes()", - "text": "We define the mapping with aes()\n\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = temperature, color = location)\n) + \n geom_line()" + "objectID": "slides/figure-design.html#set-background-color-element_rect", + "href": "slides/figure-design.html#set-background-color-element_rect", + "title": "Figure design", + "section": "Set background color: element_rect()", + "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n plot.background = element_rect(\n fill = \"aliceblue\"\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes-1", - "href": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes-1", - "title": "Aesthetic mappings", - "section": "We define the mapping with aes()", - "text": "We define the mapping with aes()\n\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = location, color = temperature)\n) + \n geom_point(size = 5)" + "objectID": "slides/figure-design.html#set-background-color-element_rect-1", + "href": "slides/figure-design.html#set-background-color-element_rect-1", + "title": "Figure design", + "section": "Set background color: element_rect()", + "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n panel.background = element_rect(\n fill = \"aliceblue\"\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#we-frequently-omit-argument-names", - "href": "slides/aesthetic-mappings.html#we-frequently-omit-argument-names", - "title": "Aesthetic mappings", - "section": "We frequently omit argument names", - "text": "We frequently omit argument names\nLong form, all arguments are named:\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = location, color = temperature)\n) + geom_point(size = 5)\n\n\nAbbreviated form, common arguments remain unnamed:\nggplot(temperatures, aes(day_of_year, location, color = temperature)) + \n geom_point(size = 5)" + "objectID": "slides/figure-design.html#set-background-color-element_rect-2", + "href": "slides/figure-design.html#set-background-color-element_rect-2", + "title": "Figure design", + "section": "Set background color: element_rect()", + "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n )\n )" }, { - "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown", - "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown", - "title": "Aesthetic mappings", - "section": "The geom determines how the data is shown", - "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) + \n geom_line()" + "objectID": "slides/figure-design.html#set-background-color-element_rect-3", + "href": "slides/figure-design.html#set-background-color-element_rect-3", + "title": "Figure design", + "section": "Set background color: element_rect()", + "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7)\n )" }, { - "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-1", - "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-1", - "title": "Aesthetic mappings", - "section": "The geom determines how the data is shown", - "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(day_of_year, location, color = temperature)) + \n geom_point(size = 5)" + "objectID": "slides/figure-design.html#move-the-legend-legend.position", + "href": "slides/figure-design.html#move-the-legend-legend.position", + "title": "Figure design", + "section": "Move the legend: legend.position", + "text": "Move the legend: legend.position\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend on top of plot\n legend.position = \"top\"\n )" }, { - "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-2", - "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-2", - "title": "Aesthetic mappings", - "section": "The geom determines how the data is shown", - "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot()" + "objectID": "slides/figure-design.html#move-the-legend-legend.position-1", + "href": "slides/figure-design.html#move-the-legend-legend.position-1", + "title": "Figure design", + "section": "Move the legend: legend.position", + "text": "Move the legend: legend.position\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend inside plot\n legend.position = \"inside\", \n # relative position inside plot panel\n legend.position.inside = c(0.98, 0.02),\n # justification relative to position\n legend.justification = c(1, 0)\n )" }, { - "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-3", - "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-3", - "title": "Aesthetic mappings", - "section": "The geom determines how the data is shown", - "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_violin() + \n facet_wrap(~location) # make separate panel per location" + "objectID": "slides/figure-design.html#further-reading", + "href": "slides/figure-design.html#further-reading", + "title": "Figure design", + "section": "Further reading", + "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 23: Balance the data and the context\nData Visualization—A Practical Introduction: Chapter 8.3: Change the appearance of plots with themes\nggplot2 reference documentation: Complete themes\nggplot2 reference documentation: Modify components of a theme" }, { - "objectID": "slides/aesthetic-mappings.html#distinguish-between-color-and-fill", - "href": "slides/aesthetic-mappings.html#distinguish-between-color-and-fill", + "objectID": "worksheets/coordinate-systems-axes.html", + "href": "worksheets/coordinate-systems-axes.html", + "title": "Coordinate systems and axes", + "section": "", + "text": "In this worksheet, we will discuss how to change and customize scales and coordinate systems.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with three different datasets, boxoffice, temperatures, and tx_counties. You have already seen the first two previously.\nThe boxoffice dataset contains box-office gross results for Dec. 22-24, 2017.\n\n\n\n\n\n\n\n\nThe temperatures dataset contains the average temperature for each day of the year for four different locations.\n\n\n\n\n\n\n\n\nThe tx_counties dataset holds information about how many people lived in Texas counties in 2010. The column popratio is the ratio of the number of inhabitants to the median across all counties, and the column index simply counts the counties from most populous to least populous." + }, + { + "objectID": "worksheets/coordinate-systems-axes.html#introduction", + "href": "worksheets/coordinate-systems-axes.html#introduction", + "title": "Coordinate systems and axes", + "section": "", + "text": "In this worksheet, we will discuss how to change and customize scales and coordinate systems.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with three different datasets, boxoffice, temperatures, and tx_counties. You have already seen the first two previously.\nThe boxoffice dataset contains box-office gross results for Dec. 22-24, 2017.\n\n\n\n\n\n\n\n\nThe temperatures dataset contains the average temperature for each day of the year for four different locations.\n\n\n\n\n\n\n\n\nThe tx_counties dataset holds information about how many people lived in Texas counties in 2010. The column popratio is the ratio of the number of inhabitants to the median across all counties, and the column index simply counts the counties from most populous to least populous." + }, + { + "objectID": "worksheets/coordinate-systems-axes.html#scale-customizations", + "href": "worksheets/coordinate-systems-axes.html#scale-customizations", + "title": "Coordinate systems and axes", + "section": "Scale customizations", + "text": "Scale customizations\nWe can modify the appearance of the x and y axis with scale functions. All scale functions have name of the form scale_aesthetic_type(), where aesthetic stands for an aesthetic to which we’re mapping data (e.g., x, y, color, fill, etc), and type stands for the specific type of the scale. What scale types are available depends on both the aesthetic and the data.\nHere, we only consider position scales, which are scales for the x and y aesthetics. The most commonly used scales types for position scales are continuous for continuous data and discrete for discrete data, yielding the scale functions scale_x_continuous(), scale_y_continuous(), scale_x_discrete(), and scale_y_discrete(). But there are others, such as date, time, or binned. You can look them up here: https://ggplot2.tidyverse.org/reference/index.html#section-scales\nPosition scale functions are used to modify both the appearance of the axis (axis title, axis labels, number and location of breaks, etc.) and the mapping from data to position (including the range of data values considered, i.e., axis limits, and whether the data should be transformed, as is the case in log scales).\nLet’s start with this plot of the boxoffice data:\n\n\n\n\n\n\n\n\nWe can use scale functions to modify the axis titles, by setting the name argument. For example, scale_x_continuous(name = \"the x value\") would set the axis title to “the x value” in a continuous scale along the x axis.\nUse the appropriate scale functions to modify both axis titles in the above plot. Think about which axes (if any) are continuous and which are discrete.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(___) +\n scale_y_discrete(___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(name = \"weekend gross (million USD)\") +\n scale_y_discrete(name = NULL)\n\n\n\n\nWe can also use scale functions to set axis limits, via the limits argument. For continuous scales, the limits argument takes a vector of two numbers representing the lower and upper limit. For example, limits = c(0, 80) would indicate an axis that runs from 0 to 80. For discrete scales, the limits argument takes a vector of all the categories that should be shown, in the order in which they should be shown.\nTry this out by setting a limit from 0 to 80 on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross (million USD)\",\n limits = ___\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross (million USD)\",\n limits = c(0, 80)\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nWhat happens if you set the axis limits such that not all data points can be shown, for example an upper limit of 65 rather than 80? Do you understand why?\n(Hint: Scale limits are applied before the plot is drawn, and data points outside the scale limits are discarded. If this is not what you want, there’s an alternative way of setting limits. See the very end of this worksheet under “Coords”.)\nNext, we can use the breaks and labels arguments to customize which axis ticks are shown and how they are labeled. In general, you need exactly as many breaks as labels. If you define only breaks but not labels then labels are automatically generated from the breaks.\nBuilding on the code from the previous example, set breaks at 0, 25, 50, and 75, and format the labels such that they can be read as currency. For example, write $25M instead of just 25.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = ___,\n labels = ___\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\")\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nWhen looking at the resulting plot, you may notice that the x axis extends beyond the limits you have set. This happens because by default ggplot scales expand the axis range by a small amount. You can set the axis expansion via the expand parameter. Setting the expansion can be a bit tricky, because we can set expansion at either end of a scale and we can define both additive and multiplicative expansion. (Additive expansion adds a fixed value, whereas multiplicative expansion adds a multiple of the scale range. ggplot uses additive expansion for discrete scales and multiplicative expansion for continuous scales, but you can use either for either scale.)\nThe simplest way to define expansions is with the expansion() function, which takes arguments mult for multiplicative expansion and add for additive expansion. Either takes a vector of two values, indicating expansion at the lower and upper end, respectively. Thus, expansion(mult = c(0, 0.1)) indicates multiplicative expansion of 0% at the lower end and 10% at the upper end, whereas expansion(add = c(2, 2)) indicates additive expansion of 2 units at either end of the scale.\nTry this yourself. Use the expand argument to remove the gap to the left of 0 on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\"),\n expand = expansion(___)\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\"),\n expand = expansion(mult = c(0, 0.06))\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nTry different settings for the expand argument. Try both multiplicative and additive expansions. Apply different expansions to the y axis as well." + }, + { + "objectID": "worksheets/coordinate-systems-axes.html#logarithmic-scales", + "href": "worksheets/coordinate-systems-axes.html#logarithmic-scales", + "title": "Coordinate systems and axes", + "section": "Logarithmic scales", + "text": "Logarithmic scales\nScales can also transform the data before plotting. For example, log scales such as scale_x_log10() and scale_y_log10() log-transform the data. To try this out, we’ll be working with the tx_counties dataset:\n\n\n\n\n\n\n\n\nModify this plot so the y axis uses a log scale.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10()\n\n\n\n\nNow customize the log scale by setting name, limits, breaks, and labels. These work exactly as they did in scale_x_continuous().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10(\n name = ___,\n limits = ___,\n breaks = ___,\n labels = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10(\n name = \"population number / median\",\n limits = c(0.003, 300),\n breaks = c(0.01, 1, 100),\n labels = c(\"0.01\", \"1\", \"100\")\n )" + }, + { + "objectID": "worksheets/coordinate-systems-axes.html#coords", + "href": "worksheets/coordinate-systems-axes.html#coords", + "title": "Coordinate systems and axes", + "section": "Coords", + "text": "Coords\nWhile scales determine how data values are mapped and represented along one dimension, e.g. the x or the y axis, coordinate systems define how these dimensions are projected onto the 2d plot surface. The default coordinate system is the Cartesian coordinate system, which uses orthogonal x and y axes. In the following example, I have added the coord explicitly, but this is not normally necessary.\n\n\n\n\n\n\n\n\nWe can however add a different coord, for example coord_polar() to use a polar coordinate system. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar()\n\n\n\n\nIn the polar coordinate system, the y axis (here, temperature) is mapped onto the radius, and the x axis (here, day of year) is mapped onto the angle. You can use scale_x_continuous() and scale_y_continuous() to modify the radial and angular axes. For example, you may want to change the temperature limits from 0 to 105 so the temperature curve for Chicago doesn’t hit the exact center of the plot. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar() +\n scale_y_continuous(limits = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar() +\n scale_y_continuous(limits = c(0, 105))\n\n\n\n\nThere are other useful coords. For example, coord_fixed() is a Cartesian coordinate system with fixed aspect ratio. This is useful when we plot variables along the x and y axes that are measured in the same units. In this case, we want the two axes to be coordinated, such that one step along x has the same meaning as one step along y.\nTo demonstrate this, we reshape the temperatures dataset into wide format, and then plot temperatures in San Diego versus temperatures in Houston.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n(A side remark: Do you know why we write `San Diego` and not \"San Diego\" or 'San Diego' inside the aes() function? If you don’t, see if you can find out.)\nThe units along both the x and the y axis are temperatures, but a 10 degree difference in Houston is shown as a shorter distance than a 10 degree difference in San Diego. To address this problem, add coord_fixed() to the above plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed()\n\n\n\n\nThis plot is technically correct but it doesn’t look good, because breaks are spaced differently along the two axes. Also, the plot looks strangely narrow and tall. We can fix both issues by manually setting breaks and limits for both axes. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed() +\n scale_x_continuous(\n limits = ___,\n breaks = ___\n ) +\n scale_y_continuous(\n limits = ___,\n breaks = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed() +\n scale_x_continuous(\n limits = c(45, 85),\n breaks = c(40, 50, 60, 70, 80)\n ) +\n scale_y_continuous(\n limits = c(48, 88),\n breaks = c(50, 60, 70, 80)\n )\n\n\n\n\nFinally, as the last example of what can be done with coords, we go back to the problem of setting limits on the box-office bar plot. Instead of setting limits with scale functions, we can also set them via the arguments xlim and ylim inside the coord, for example here coord_cartesian(). (This would be a good reason to explicity add coord_cartesian() to a plot.) When we set limits in the coord ggplot does not discard any data points. Instead it simply zooms in or out according to the limits set. Try this out by setting the x limits from 10 to 65 in the box-office plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n coord_cartesian(\n xlim = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n coord_cartesian(\n xlim = c(10, 65)\n )\n\n\n\n\nNote: It is normally not a good idea to start a bar plot at a value other than 0. This exercise was solely meant to demonstrate how limits in coords differ from limits in scales." + }, + { + "objectID": "worksheets/aesthetic-mappings.html", + "href": "worksheets/aesthetic-mappings.html", "title": "Aesthetic mappings", - "section": "Distinguish between color and fill", - "text": "Distinguish between color and fill\n\n\ncolor Applies color to points, lines, text, borders\n\n\n\nfill Applies color to any filled areas" + "section": "", + "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will first work with the dataset temps_houston which contains the average temperature for each day of the year for Houston, TX." }, { - "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill", - "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill", + "objectID": "worksheets/aesthetic-mappings.html#introduction", + "href": "worksheets/aesthetic-mappings.html#introduction", "title": "Aesthetic mappings", - "section": "Many geoms use both color and fill", - "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot()" + "section": "", + "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will first work with the dataset temps_houston which contains the average temperature for each day of the year for Houston, TX." }, { - "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-1", - "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-1", + "objectID": "worksheets/aesthetic-mappings.html#basic-use-of-ggplot", + "href": "worksheets/aesthetic-mappings.html#basic-use-of-ggplot", "title": "Aesthetic mappings", - "section": "Many geoms use both color and fill", - "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_boxplot()" + "section": "Basic use of ggplot", + "text": "Basic use of ggplot\nIn the most basic use of ggplot, we call the ggplot() function with a dataset and an aesthetic mapping (created with aes()), and then we add a geom, such as geom_line() to draw lines or geom_point() to draw points.\nTry this for yourself. Map the column day_of_year onto the x axis and the column temperature onto the y axis, and use geom_line() to display the data.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = day_of_year, y = temperature)) +\n geom_line()\n\n\n\n\nTry again. Now use geom_point() instead of geom_line().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = day_of_year, y = temperature)) +\n geom_point()\n\n\n\n\nAnd now swap which column you map to x and which to y.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = temperature, y = day_of_year)) +\n geom_point()" }, { - "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-2", - "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-2", + "objectID": "worksheets/aesthetic-mappings.html#more-complex-geoms", + "href": "worksheets/aesthetic-mappings.html#more-complex-geoms", "title": "Aesthetic mappings", - "section": "Many geoms use both color and fill", - "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, color = location, fill = location)) + \n geom_boxplot()" + "section": "More complex geoms", + "text": "More complex geoms\nYou can use other geoms to make different types of plots. For example, geom_boxplot() will make boxplots. For boxplots, we frequently want categorical data on the x or y axis. For example, we might want a separate boxplot for each month. Try this out. Puth month on the x axis, temperature on the y axis, and use geom_boxplot().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_houston, aes(x = month, y = temperature)) +\n ___()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = month, y = temperature)) +\n geom_boxplot()\n\n\n\n\nNow put the month on the y axis and the temperature on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_houston, aes(x = ___, y = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = temperature, y = month)) +\n geom_boxplot()" }, { - "objectID": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters", - "href": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters", + "objectID": "worksheets/aesthetic-mappings.html#adding-color", + "href": "worksheets/aesthetic-mappings.html#adding-color", "title": "Aesthetic mappings", - "section": "Aesthetics can also be used as parameters", - "text": "Aesthetics can also be used as parameters\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_boxplot(color = \"steelblue\")" + "section": "Adding color", + "text": "Adding color\nNext we will be working with the dataset temperatures, which is similar to temps_houston but contains data for three more locations.\n\n\n\n\n\n\n\n\nMake a line plot of temperature against day_of_year, using the color aesthetic to color the lines by location.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = temperature, color = ___)) +\n geom_line()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = temperature, color = location)) +\n geom_line()\n\n\n\n\nTry again, this time using location as the location along the y axis and temperature for the color. This plot looks better with geom_point() than geom_line(). (Try it out to see why. Also, try geom_point(size = 5) to create larger points.)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = ___, y = ___, color = ___)) +\n geom_point()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = location, color = temperature)) +\n geom_point()" }, { - "objectID": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters-1", - "href": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters-1", + "objectID": "worksheets/aesthetic-mappings.html#using-the-fill-aesthetic", + "href": "worksheets/aesthetic-mappings.html#using-the-fill-aesthetic", "title": "Aesthetic mappings", - "section": "Aesthetics can also be used as parameters", - "text": "Aesthetics can also be used as parameters\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot(fill = \"steelblue\")" + "section": "Using the fill aesthetic", + "text": "Using the fill aesthetic\nSome geoms use a fill aesthetic, which is similar to color but applies to shaded areas. (color applies to lines and points.) For example, we can use the fill aesthetic with geom_boxplot() to color the interior of the box. Try this yourself. Plot month on x, temperature on y, and color the interior of the box by location.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = ___, fill = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = location)) +\n geom_boxplot()\n\n\n\n\nCan you color the lines of the boxplot by location and the interior by month? Try it.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = ___, fill = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = location, fill = month)) +\n geom_boxplot()" }, { - "objectID": "slides/aesthetic-mappings.html#further-reading", - "href": "slides/aesthetic-mappings.html#further-reading", + "objectID": "worksheets/aesthetic-mappings.html#using-aesthetics-as-parameters", + "href": "worksheets/aesthetic-mappings.html#using-aesthetics-as-parameters", "title": "Aesthetic mappings", - "section": "Further reading", - "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 2: Visualizing data\nData Visualization—A Practical Introduction: Chapter 3: Make a plot\nggplot2 reference documentation\nggplot2 book\nggplot2 cheatsheet" + "section": "Using aesthetics as parameters", + "text": "Using aesthetics as parameters\nMany of the aesthetics (such as color, fill, and also size to change line size or point thickness) can be used as parameters inside a geom rather than inside an aes() statement. The difference is that when you use an aesthetic as a parameter, you specify a specific value, such as color = \"blue\", rather than a mapping, such as aes(color = location). Notice the difference: Inside the aes() function, we don’t actually specify the specific color values, ggplot does that for us. We only say that we want the data values of the location column to correspond to different colors. (We will learn later how to tell ggplot to use specific colors in this mapping.)\nTry this with the boxplot example from the previous section. Map location onto the fill aesthetic but set the color of the lines to \"navyblue\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = ___)) +\n geom_boxplot(color = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = location)) +\n geom_boxplot(color = \"navyblue\")\n\n\n\n\nNow do the reverse. Map location onto the line colors but fill the box with the color \"navyblue\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = ___)) +\n geom_boxplot(fill = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = location)) +\n geom_boxplot(fill = \"navyblue\")" }, { - "objectID": "worksheets/visualizing-amounts.html", - "href": "worksheets/visualizing-amounts.html", - "title": "Visualizing amounts", - "section": "", - "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with two datasets. First, box-office gross results for Dec. 22-24, 2017:\n\n\n\n\n\n\n\n\nSecond, data on individual penguins on Antarctica. Note that missing values have been removed:\npenguins2" + "objectID": "slides/telling-a-story.html#how-did-i-get-to-teach-data-visualization", + "href": "slides/telling-a-story.html#how-did-i-get-to-teach-data-visualization", + "title": "Telling a story", + "section": "How did I get to teach data visualization?", + "text": "How did I get to teach data visualization?" }, { - "objectID": "worksheets/visualizing-amounts.html#introduction", - "href": "worksheets/visualizing-amounts.html#introduction", - "title": "Visualizing amounts", - "section": "", - "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with two datasets. First, box-office gross results for Dec. 22-24, 2017:\n\n\n\n\n\n\n\n\nSecond, data on individual penguins on Antarctica. Note that missing values have been removed:\npenguins2" + "objectID": "slides/telling-a-story.html#what-is-a-story", + "href": "slides/telling-a-story.html#what-is-a-story", + "title": "Telling a story", + "section": "What is a story?", + "text": "What is a story?\n\n\nA story is a collection of observations, facts, or events presented in a specific order such that they create an emotional reaction." }, { - "objectID": "worksheets/visualizing-amounts.html#drawing-numerical-values-as-bars", - "href": "worksheets/visualizing-amounts.html#drawing-numerical-values-as-bars", - "title": "Visualizing amounts", - "section": "Drawing numerical values as bars", - "text": "Drawing numerical values as bars\nFor the boxoffice dataset, we want to draw the amount (Weekend gross, in million USD) for each movie as a bar. Somewhat confusingly, the ggplot geom that does this is called geom_col(). (There is also a geom_bar(), but it works differently. We’ll get to that later in this tutorial.) Make a bar plot of amount versus title. This means amount goes on the y axis and title on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = ___, y = ___)) +\n geom_col()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = title, y = amount)) +\n geom_col()\n\n\n\n\nNow flip which column you map onto x and which onto y.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col()\n\n\n\n\nThe x-axis label should specify that the amount is in million USD, and the y axis doesn’t need the word “title”. Use xlab() and ylab() to make these changes to the plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col() +\n xlab(___) +\n ylab(___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL) # NULL means nothing, don't show a y label" + "objectID": "slides/telling-a-story.html#every-story-needs-an-arc", + "href": "slides/telling-a-story.html#every-story-needs-an-arc", + "title": "Telling a story", + "section": "Every story needs an arc", + "text": "Every story needs an arc\n\nOpening\n\n\n\nChallenge\n\n\n\nAction\n\n\n\nResolution" }, { - "objectID": "worksheets/visualizing-amounts.html#getting-bars-into-the-right-order", - "href": "worksheets/visualizing-amounts.html#getting-bars-into-the-right-order", - "title": "Visualizing amounts", - "section": "Getting bars into the right order", - "text": "Getting bars into the right order\nWhenever we are making bar plots, we need to think about the correct order of the bars. By default, ggplot uses alphabetic ordering, but that is rarely appropriate. If there is no inherent ordering (such as, for example, a temporal progression), then it is usually best to order by the magnitude of the values, i.e., sort the bars by length.\nWe can do this with the fct_reorder() function, which takes two arguments: The categorical variable we want to re-order, and the values by which we want to order. Here, the categorical variable is the column title and the values are in the column amount. We can apply the fct_reorder() function right inside the aes() statement.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = fct_reorder(___, ___))) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = fct_reorder(title, amount))) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL)\n\n\n\n\nTry the following additional experiments in the above code:\n\nWhat happens when you run the above code without the ylab(NULL) statement?\nCan you make the bars blue?\nCan you color the bars by amount or by title?" + "objectID": "slides/telling-a-story.html#every-story-needs-an-arc-1", + "href": "slides/telling-a-story.html#every-story-needs-an-arc-1", + "title": "Telling a story", + "section": "Every story needs an arc", + "text": "Every story needs an arc\n\nOpening\n\n\n\nChallenge\n\n\n\nAction\n\n\n\nResolution\n\n\nChallenge and resolution arethe two most important parts" }, { - "objectID": "worksheets/visualizing-amounts.html#drawing-bars-based-on-a-count", - "href": "worksheets/visualizing-amounts.html#drawing-bars-based-on-a-count", - "title": "Visualizing amounts", - "section": "Drawing bars based on a count", - "text": "Drawing bars based on a count\nThe boxoffice dataset contains individual values, the dollar amounts, that we wanted to visualize with bars. Often, however, we encounter a slightly different scenario: A dataset doesn’t contain the numeric amounts directly, but instead contains observations we want to count. This is the case in the penguins2 dataset (see above).\nIt contains one row per penguin. If we want to make a bar plot of the number of penguins of each species (Adelie, Chinstrap, Gentoo), we cannot use geom_col() as before, because the dataset doesn’t have a column that contains these counts.\nThe solution here is to use geom_bar(), which performs a count and then displays the result of that count. Because geom_bar() counts automatically, you only have to provide it with a single aesthetic, which specifies the data column in which you are counting.\nTry this out. Make a bar plot of the number of penguins per species. Map the penguin species onto the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(penguins2, aes(x = ___)) +\n geom_bar()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species)) +\n geom_bar()\n\n\n\n\nTry the following additional modifications in the above code:\n\nMap penguin species onto the y axis.\nRemove the axis label that says “species”.\nChange the order of the bars manually, using fct_relevel() (see slides)." + "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format", + "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format", + "title": "Telling a story", + "section": "Mapping my story onto this format", + "text": "Mapping my story onto this format\n\nOpening: We need to make many data visualizations in my lab\n\n\nChallenge: I end up telling my students the same things over and over\n\n\nAction: I go and write a book about data visualization\n\n\nResolution: The book is written. But now I teach the material, so I still keep saying the same things over and over" }, { - "objectID": "worksheets/visualizing-amounts.html#counting-subgroups", - "href": "worksheets/visualizing-amounts.html#counting-subgroups", - "title": "Visualizing amounts", - "section": "Counting subgroups", - "text": "Counting subgroups\ngeom_bar() automatically counts how many cases there are in each unique combination of different categorical aesthetics. In the previous example, we had only one categorical aesthetic, species. But we can add a second one, for example sex. Then geom_bar() counts the number of cases in each unique combination of species and sex and draws separate bars for each. Try this out by mapping the sex column onto the fill aesthetic.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar()\n\n\n\n\nBy default, the bars for different fill values but identical x values will be drawn on top of one-another. But there are other possibilities, which are controled by the position argument to geom_bar(). For example, try to set the position to \"dodge\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar(position = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar(position = \"dodge\")\n\n\n\n\nIn the above code, also try positions \"stack\" and \"fill\"." + "objectID": "slides/telling-a-story.html#other-story-structures", + "href": "slides/telling-a-story.html#other-story-structures", + "title": "Telling a story", + "section": "Other story structures", + "text": "Other story structures\n\nAction\n\n\n\nBackground\n\n\n\nDevelopment\n\n\n\nClimax\n\n\n\nEnding\n\n\n(Better for action moviesthan for scientific reports)" + }, + { + "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format-1", + "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format-1", + "title": "Telling a story", + "section": "Mapping my story onto this format", + "text": "Mapping my story onto this format\n\nAction: In May 2017, I embark on a major project: Write a book on data visualization\n\n\nBackground: I do this because we need to make many data visualizations in my lab, and I end up telling my students the same things over and over\n\n\nDevelopment: Writing the book takes me almost two years; along the way, I add many features to ggplot2 and become a member of the ggplot2 team\n\n\nClimax: The book is released in April 2019\n\n\nEnding: Now I’m a dataviz teacher" + }, + { + "objectID": "slides/telling-a-story.html#other-story-structures-1", + "href": "slides/telling-a-story.html#other-story-structures-1", + "title": "Telling a story", + "section": "Other story structures", + "text": "Other story structures\n\n\nLead\n\n\n\nDevelopment\n\n\n(Commonly used in newspaper articles)" + }, + { + "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format-2", + "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format-2", + "title": "Telling a story", + "section": "Mapping my story onto this format", + "text": "Mapping my story onto this format\n\nLead: Because I see the need for more education in data visualization, I have written an entire book about the topic\n\n\nDevelopment: I had previously written an R package to improve figure design, but it wasn’t sufficient: Good judgement cannot be automated\n\n\nSo I wrote a book; the book is entirely about concepts, not about coding, and it is meant as a resource for anybody doing data visualizations, regardless of their preferred visualization software" + }, + { + "objectID": "slides/telling-a-story.html#example-preprints-in-biology", + "href": "slides/telling-a-story.html#example-preprints-in-biology", + "title": "Telling a story", + "section": "Example: Preprints in biology", + "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\n\nOpening" + }, + { + "objectID": "slides/telling-a-story.html#example-preprints-in-biology-1", + "href": "slides/telling-a-story.html#example-preprints-in-biology-1", + "title": "Telling a story", + "section": "Example: Preprints in biology", + "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\nWhat happened in 2014 to curtail the growth?\n\nChallenge" + }, + { + "objectID": "slides/telling-a-story.html#example-preprints-in-biology-2", + "href": "slides/telling-a-story.html#example-preprints-in-biology-2", + "title": "Telling a story", + "section": "Example: Preprints in biology", + "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\nbioRxiv opened in 2014\n\nResolution" + }, + { + "objectID": "slides/telling-a-story.html#keep-in-mind", + "href": "slides/telling-a-story.html#keep-in-mind", + "title": "Telling a story", + "section": "Keep in mind", + "text": "Keep in mind\n\n\nEvery figure needs a clear purpose within the story arc\nA complete arc will usually require at least two figures" + }, + { + "objectID": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point", + "href": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point", + "title": "Telling a story", + "section": "Prepare figures that make a clear point", + "text": "Prepare figures that make a clear point" + }, + { + "objectID": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point-1", + "href": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point-1", + "title": "Telling a story", + "section": "Prepare figures that make a clear point", + "text": "Prepare figures that make a clear point\n\n\n\n\n\n \n\n\n\n\nAmerican and Delta have the shortest delays" + }, + { + "objectID": "slides/telling-a-story.html#make-your-figures-memorable", + "href": "slides/telling-a-story.html#make-your-figures-memorable", + "title": "Telling a story", + "section": "Make your figures memorable", + "text": "Make your figures memorable" + }, + { + "objectID": "slides/telling-a-story.html#make-your-figures-memorable-1", + "href": "slides/telling-a-story.html#make-your-figures-memorable-1", + "title": "Telling a story", + "section": "Make your figures memorable", + "text": "Make your figures memorable" + }, + { + "objectID": "slides/telling-a-story.html#further-reading", + "href": "slides/telling-a-story.html#further-reading", + "title": "Telling a story", + "section": "Further reading", + "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 29: Telling a story and making a point\nJoshua Schimel (2011) Writing Science: How to Write Papers That Get Cited and Proposals That Get Funded" + }, + { + "objectID": "schedule.html#homeworks", + "href": "schedule.html#homeworks", + "title": "SDS 366 Schedule Spring 2025", + "section": "Homeworks", + "text": "Homeworks\nAll homeworks are due by 11:00pm on the day they are due. Homeworks need to be submitted as pdf files on Canvas." + }, + { + "objectID": "schedule.html#projects", + "href": "schedule.html#projects", + "title": "SDS 366 Schedule Spring 2025", + "section": "Projects", + "text": "Projects\nAll projects are due by 11:00pm on the day they are due. Projects need to be submitted on Canvas. Please carefully read the submission instructions for each project." + }, + { + "objectID": "index.html", + "href": "index.html", + "title": "SDS 366", + "section": "", + "text": "This is the home page for SDS 366, Data Visualization in R. All course materials will be posted on this site.\nInstructor: Claus O. Wilke\nMeeting times: TTH 5:00pm to 6:30pm Venue: MEZ B0.306 Syllabus: click here\nUpcoming lectures and assignments: click here" + }, + { + "objectID": "index.html#computing-requirements", + "href": "index.html#computing-requirements", + "title": "SDS 366", + "section": "Computing requirements", + "text": "Computing requirements\nFor students enrolled in this course, you only need a working web browser to access the edupod server, located at: https://edupod.cns.utexas.edu/\nIf you are using the edupod server, stop reading here. Everything is pre-installed and no further action is needed.\nTo run any of the materials locally on your own machine, you will need the following:\n\nA recent version of R, download from here.\nA recent version of RStudio, download from here, OR a recent version of Positron, download from here.\nThe following R packages:\nbroom, cluster, colorspace, cowplot, distill, gapminder, GGally, gganimate, ggiraph, ggdendro, ggdist, ggforce, ggplot2movies, ggrepel, ggridges, ggthemes, gifski, glue, knitr, learnr, naniar, margins, MASS, Matrix, nycflights13, palmerpenguins, patchwork, rmarkdown, rnaturalearth, rnaturalearthhires, scales, sf, shinyjs, sp, tidyverse, transformr, umap, xaringan\n\nYou can install all required R packages at once by running the following code in the R command line:\n# first run this command:\ninstall.packages(\n c(\n \"broom\", \"cluster\", \"colorspace\", \"cowplot\", \"distill\", \"gapminder\", \n \"GGally\", \"gganimate\", \"ggiraph\", \"ggdendro\", \"ggdist\", \"ggforce\",\n \"ggplot2movies\", \"ggrepel\", \"ggridges\", \"ggthemes\", \"gifski\", \"glue\",\n \"knitr\", \"learnr\", \"naniar\", \"margins\", \"MASS\", \"Matrix\",\n \"nycflights13\", \"palmerpenguins\", \"patchwork\", \"rmarkdown\", \"rnaturalearth\",\n \"scales\", \"sf\", \"shinyjs\", \"sp\", \"tidyverse\", \"transformr\", \"umap\",\n \"xaringan\"\n )\n)\n\n# then run this command:\ninstall.packages(\n \"rnaturalearthhires\", repos = \"https://packages.ropensci.org\", type = \"source\"\n)" }, { "objectID": "syllabus.html", @@ -478,631 +625,435 @@ { "objectID": "syllabus.html#email-policy", "href": "syllabus.html#email-policy", - "title": "Syllabus", - "section": "Email policy", - "text": "Email policy\nWhen emailing about this course, please put “SDS366” into the subject line. Emails to the instructor or TA should be restricted to organizational issues, such as requests for appointments, questions about course organization, etc. For all other issues, post in the discussions on Canvas, ask a question during open Zoom, or make an appointment for a one-on-one session.\nSpecifically, we will not discuss technical issues related to assignments over email. Technical issues are questions concerning how to approach a particular problem, whether a particular solution is correct, or how to use the statistical software R. These questions should be posted as issues on GitHub. Also, we will not discuss grading-related matters over email. If you have a concern about grading, schedule a one-on-one Zoom meeting." - }, - { - "objectID": "syllabus.html#special-accommodations", - "href": "syllabus.html#special-accommodations", - "title": "Syllabus", - "section": "Special accommodations", - "text": "Special accommodations\nStudents with disabilities. Students with disabilities may request appropriate accommodations from the Division of Diversity and Community Engagement, Services for Students with Disabilities, 512-471-6259, https://diversity.utexas.edu/disability/\nReligious holy days. Students who must miss a class or an assignment to observe a religious holy day will be given an opportunity to complete the missed work within a reasonable time after the absence. According to UT Austin policy, such students must notify me of the pending absence at least fourteen days prior to the date of observance of a religious holy day." - }, - { - "objectID": "syllabus.html#academic-dishonesty", - "href": "syllabus.html#academic-dishonesty", - "title": "Syllabus", - "section": "Academic dishonesty", - "text": "Academic dishonesty\nThis course is built upon the idea that student interaction is important and a powerful way to learn. We encourage you to communicate with other students, in particular through the discussion forums on Canvas. However, there are times when you need to demonstrate your own ability to work and solve problems. In particular, your homeworks and projects are independent work, unless explicitly stated otherwise. You are allowed to confer with fellow students about general approaches to solve the problems in the assignments, but you have to do the assignments on your own and describe your work in your own words. Students who violate these expectations can expect to receive a failing grade on the assignment and will be reported to Student Judicial Services. These types of violations are reported to professional schools, should you ever decide to apply one day. Don’t do it—it’s not worth the consequences." - }, - { - "objectID": "syllabus.html#sharing-of-course-materials-is-prohibited", - "href": "syllabus.html#sharing-of-course-materials-is-prohibited", - "title": "Syllabus", - "section": "Sharing of Course Materials is Prohibited", - "text": "Sharing of Course Materials is Prohibited\nAny materials in this class that are not posted publicly may not be shared online or with anyone outside of the class unless you have my explicit, written permission. This includes but is not limited to lecture hand-outs, videos, assessments (quizzes, exams, papers, projects, homework assignments), in-class materials, review sheets, and additional problem sets. Unauthorized sharing of materials promotes cheating. It is a violation of the University’s Student Honor Code and an act of academic dishonesty. We are well aware of the sites used for sharing materials, and any materials found online that are associated with you, or any suspected unauthorized sharing of materials, will be reported to Student Conduct and Academic Integrity in the Office of the Dean of Students. These reports can result in sanctions, including failure in the course.\nAny materials posted on the public class website (https://wilkelab.org/SDS366/) are considered public and can be shared under the Creative Commons Attribution CC BY 4.0 license." - }, - { - "objectID": "syllabus.html#class-recordings", - "href": "syllabus.html#class-recordings", - "title": "Syllabus", - "section": "Class Recordings", - "text": "Class Recordings\nIf any class recordings are provided they are reserved only for students in this class for educational purposes and are protected under FERPA. The recordings should not be shared outside the class in any form. Violation of this restriction by a student could lead to Student Misconduct proceedings." - }, - { - "objectID": "index.html", - "href": "index.html", - "title": "SDS 366", - "section": "", - "text": "This is the home page for SDS 366, Data Visualization in R. All course materials will be posted on this site.\nInstructor: Claus O. Wilke\nMeeting times: TTH 5:00pm to 6:30pm Venue: MEZ B0.306 Syllabus: click here\nUpcoming lectures and assignments: click here" - }, - { - "objectID": "index.html#computing-requirements", - "href": "index.html#computing-requirements", - "title": "SDS 366", - "section": "Computing requirements", - "text": "Computing requirements\nFor students enrolled in this course, you only need a working web browser to access the edupod server, located at: https://edupod.cns.utexas.edu/\nIf you are using the edupod server, stop reading here. Everything is pre-installed and no further action is needed.\nTo run any of the materials locally on your own machine, you will need the following:\n\nA recent version of R, download from here.\nA recent version of RStudio, download from here, OR a recent version of Positron, download from here.\nThe following R packages:\nbroom, cluster, colorspace, cowplot, distill, gapminder, GGally, gganimate, ggiraph, ggdendro, ggdist, ggforce, ggplot2movies, ggrepel, ggridges, ggthemes, gifski, glue, knitr, learnr, naniar, margins, MASS, Matrix, nycflights13, palmerpenguins, patchwork, rmarkdown, rnaturalearth, rnaturalearthhires, scales, sf, shinyjs, sp, tidyverse, transformr, umap, xaringan\n\nYou can install all required R packages at once by running the following code in the R command line:\n# first run this command:\ninstall.packages(\n c(\n \"broom\", \"cluster\", \"colorspace\", \"cowplot\", \"distill\", \"gapminder\", \n \"GGally\", \"gganimate\", \"ggiraph\", \"ggdendro\", \"ggdist\", \"ggforce\",\n \"ggplot2movies\", \"ggrepel\", \"ggridges\", \"ggthemes\", \"gifski\", \"glue\",\n \"knitr\", \"learnr\", \"naniar\", \"margins\", \"MASS\", \"Matrix\",\n \"nycflights13\", \"palmerpenguins\", \"patchwork\", \"rmarkdown\", \"rnaturalearth\",\n \"scales\", \"sf\", \"shinyjs\", \"sp\", \"tidyverse\", \"transformr\", \"umap\",\n \"xaringan\"\n )\n)\n\n# then run this command:\ninstall.packages(\n \"rnaturalearthhires\", repos = \"https://packages.ropensci.org\", type = \"source\"\n)" - }, - { - "objectID": "schedule.html#homeworks", - "href": "schedule.html#homeworks", - "title": "SDS 366 Schedule Spring 2025", - "section": "Homeworks", - "text": "Homeworks\nAll homeworks are due by 11:00pm on the day they are due. Homeworks need to be submitted as pdf files on Canvas." + "title": "Syllabus", + "section": "Email policy", + "text": "Email policy\nWhen emailing about this course, please put “SDS366” into the subject line. Emails to the instructor or TA should be restricted to organizational issues, such as requests for appointments, questions about course organization, etc. For all other issues, post in the discussions on Canvas, ask a question during open Zoom, or make an appointment for a one-on-one session.\nSpecifically, we will not discuss technical issues related to assignments over email. Technical issues are questions concerning how to approach a particular problem, whether a particular solution is correct, or how to use the statistical software R. These questions should be posted as issues on GitHub. Also, we will not discuss grading-related matters over email. If you have a concern about grading, schedule a one-on-one Zoom meeting." }, { - "objectID": "schedule.html#projects", - "href": "schedule.html#projects", - "title": "SDS 366 Schedule Spring 2025", - "section": "Projects", - "text": "Projects\nAll projects are due by 11:00pm on the day they are due. Projects need to be submitted on Canvas. Please carefully read the submission instructions for each project." + "objectID": "syllabus.html#special-accommodations", + "href": "syllabus.html#special-accommodations", + "title": "Syllabus", + "section": "Special accommodations", + "text": "Special accommodations\nStudents with disabilities. Students with disabilities may request appropriate accommodations from the Division of Diversity and Community Engagement, Services for Students with Disabilities, 512-471-6259, https://diversity.utexas.edu/disability/\nReligious holy days. Students who must miss a class or an assignment to observe a religious holy day will be given an opportunity to complete the missed work within a reasonable time after the absence. According to UT Austin policy, such students must notify me of the pending absence at least fourteen days prior to the date of observance of a religious holy day." }, { - "objectID": "slides/telling-a-story.html#how-did-i-get-to-teach-data-visualization", - "href": "slides/telling-a-story.html#how-did-i-get-to-teach-data-visualization", - "title": "Telling a story", - "section": "How did I get to teach data visualization?", - "text": "How did I get to teach data visualization?" + "objectID": "syllabus.html#academic-dishonesty", + "href": "syllabus.html#academic-dishonesty", + "title": "Syllabus", + "section": "Academic dishonesty", + "text": "Academic dishonesty\nThis course is built upon the idea that student interaction is important and a powerful way to learn. We encourage you to communicate with other students, in particular through the discussion forums on Canvas. However, there are times when you need to demonstrate your own ability to work and solve problems. In particular, your homeworks and projects are independent work, unless explicitly stated otherwise. You are allowed to confer with fellow students about general approaches to solve the problems in the assignments, but you have to do the assignments on your own and describe your work in your own words. Students who violate these expectations can expect to receive a failing grade on the assignment and will be reported to Student Judicial Services. These types of violations are reported to professional schools, should you ever decide to apply one day. Don’t do it—it’s not worth the consequences." }, { - "objectID": "slides/telling-a-story.html#what-is-a-story", - "href": "slides/telling-a-story.html#what-is-a-story", - "title": "Telling a story", - "section": "What is a story?", - "text": "What is a story?\n\n\nA story is a collection of observations, facts, or events presented in a specific order such that they create an emotional reaction." + "objectID": "syllabus.html#sharing-of-course-materials-is-prohibited", + "href": "syllabus.html#sharing-of-course-materials-is-prohibited", + "title": "Syllabus", + "section": "Sharing of Course Materials is Prohibited", + "text": "Sharing of Course Materials is Prohibited\nAny materials in this class that are not posted publicly may not be shared online or with anyone outside of the class unless you have my explicit, written permission. This includes but is not limited to lecture hand-outs, videos, assessments (quizzes, exams, papers, projects, homework assignments), in-class materials, review sheets, and additional problem sets. Unauthorized sharing of materials promotes cheating. It is a violation of the University’s Student Honor Code and an act of academic dishonesty. We are well aware of the sites used for sharing materials, and any materials found online that are associated with you, or any suspected unauthorized sharing of materials, will be reported to Student Conduct and Academic Integrity in the Office of the Dean of Students. These reports can result in sanctions, including failure in the course.\nAny materials posted on the public class website (https://wilkelab.org/SDS366/) are considered public and can be shared under the Creative Commons Attribution CC BY 4.0 license." }, { - "objectID": "slides/telling-a-story.html#every-story-needs-an-arc", - "href": "slides/telling-a-story.html#every-story-needs-an-arc", - "title": "Telling a story", - "section": "Every story needs an arc", - "text": "Every story needs an arc\n\nOpening\n\n\n\nChallenge\n\n\n\nAction\n\n\n\nResolution" + "objectID": "syllabus.html#class-recordings", + "href": "syllabus.html#class-recordings", + "title": "Syllabus", + "section": "Class Recordings", + "text": "Class Recordings\nIf any class recordings are provided they are reserved only for students in this class for educational purposes and are protected under FERPA. The recordings should not be shared outside the class in any form. Violation of this restriction by a student could lead to Student Misconduct proceedings." }, { - "objectID": "slides/telling-a-story.html#every-story-needs-an-arc-1", - "href": "slides/telling-a-story.html#every-story-needs-an-arc-1", - "title": "Telling a story", - "section": "Every story needs an arc", - "text": "Every story needs an arc\n\nOpening\n\n\n\nChallenge\n\n\n\nAction\n\n\n\nResolution\n\n\nChallenge and resolution arethe two most important parts" + "objectID": "worksheets/visualizing-amounts.html", + "href": "worksheets/visualizing-amounts.html", + "title": "Visualizing amounts", + "section": "", + "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with two datasets. First, box-office gross results for Dec. 22-24, 2017:\n\n\n\n\n\n\n\n\nSecond, data on individual penguins on Antarctica. Note that missing values have been removed:\npenguins2" }, { - "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format", - "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format", - "title": "Telling a story", - "section": "Mapping my story onto this format", - "text": "Mapping my story onto this format\n\nOpening: We need to make many data visualizations in my lab\n\n\nChallenge: I end up telling my students the same things over and over\n\n\nAction: I go and write a book about data visualization\n\n\nResolution: The book is written. But now I teach the material, so I still keep saying the same things over and over" + "objectID": "worksheets/visualizing-amounts.html#introduction", + "href": "worksheets/visualizing-amounts.html#introduction", + "title": "Visualizing amounts", + "section": "", + "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with two datasets. First, box-office gross results for Dec. 22-24, 2017:\n\n\n\n\n\n\n\n\nSecond, data on individual penguins on Antarctica. Note that missing values have been removed:\npenguins2" }, { - "objectID": "slides/telling-a-story.html#other-story-structures", - "href": "slides/telling-a-story.html#other-story-structures", - "title": "Telling a story", - "section": "Other story structures", - "text": "Other story structures\n\nAction\n\n\n\nBackground\n\n\n\nDevelopment\n\n\n\nClimax\n\n\n\nEnding\n\n\n(Better for action moviesthan for scientific reports)" + "objectID": "worksheets/visualizing-amounts.html#drawing-numerical-values-as-bars", + "href": "worksheets/visualizing-amounts.html#drawing-numerical-values-as-bars", + "title": "Visualizing amounts", + "section": "Drawing numerical values as bars", + "text": "Drawing numerical values as bars\nFor the boxoffice dataset, we want to draw the amount (Weekend gross, in million USD) for each movie as a bar. Somewhat confusingly, the ggplot geom that does this is called geom_col(). (There is also a geom_bar(), but it works differently. We’ll get to that later in this tutorial.) Make a bar plot of amount versus title. This means amount goes on the y axis and title on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = ___, y = ___)) +\n geom_col()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = title, y = amount)) +\n geom_col()\n\n\n\n\nNow flip which column you map onto x and which onto y.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col()\n\n\n\n\nThe x-axis label should specify that the amount is in million USD, and the y axis doesn’t need the word “title”. Use xlab() and ylab() to make these changes to the plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col() +\n xlab(___) +\n ylab(___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = title)) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL) # NULL means nothing, don't show a y label" }, { - "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format-1", - "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format-1", - "title": "Telling a story", - "section": "Mapping my story onto this format", - "text": "Mapping my story onto this format\n\nAction: In May 2017, I embark on a major project: Write a book on data visualization\n\n\nBackground: I do this because we need to make many data visualizations in my lab, and I end up telling my students the same things over and over\n\n\nDevelopment: Writing the book takes me almost two years; along the way, I add many features to ggplot2 and become a member of the ggplot2 team\n\n\nClimax: The book is released in April 2019\n\n\nEnding: Now I’m a dataviz teacher" + "objectID": "worksheets/visualizing-amounts.html#getting-bars-into-the-right-order", + "href": "worksheets/visualizing-amounts.html#getting-bars-into-the-right-order", + "title": "Visualizing amounts", + "section": "Getting bars into the right order", + "text": "Getting bars into the right order\nWhenever we are making bar plots, we need to think about the correct order of the bars. By default, ggplot uses alphabetic ordering, but that is rarely appropriate. If there is no inherent ordering (such as, for example, a temporal progression), then it is usually best to order by the magnitude of the values, i.e., sort the bars by length.\nWe can do this with the fct_reorder() function, which takes two arguments: The categorical variable we want to re-order, and the values by which we want to order. Here, the categorical variable is the column title and the values are in the column amount. We can apply the fct_reorder() function right inside the aes() statement.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = fct_reorder(___, ___))) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice, aes(x = amount, y = fct_reorder(title, amount))) +\n geom_col() +\n xlab(\"weekend gross (million USD)\") +\n ylab(NULL)\n\n\n\n\nTry the following additional experiments in the above code:\n\nWhat happens when you run the above code without the ylab(NULL) statement?\nCan you make the bars blue?\nCan you color the bars by amount or by title?" }, { - "objectID": "slides/telling-a-story.html#other-story-structures-1", - "href": "slides/telling-a-story.html#other-story-structures-1", - "title": "Telling a story", - "section": "Other story structures", - "text": "Other story structures\n\n\nLead\n\n\n\nDevelopment\n\n\n(Commonly used in newspaper articles)" + "objectID": "worksheets/visualizing-amounts.html#drawing-bars-based-on-a-count", + "href": "worksheets/visualizing-amounts.html#drawing-bars-based-on-a-count", + "title": "Visualizing amounts", + "section": "Drawing bars based on a count", + "text": "Drawing bars based on a count\nThe boxoffice dataset contains individual values, the dollar amounts, that we wanted to visualize with bars. Often, however, we encounter a slightly different scenario: A dataset doesn’t contain the numeric amounts directly, but instead contains observations we want to count. This is the case in the penguins2 dataset (see above).\nIt contains one row per penguin. If we want to make a bar plot of the number of penguins of each species (Adelie, Chinstrap, Gentoo), we cannot use geom_col() as before, because the dataset doesn’t have a column that contains these counts.\nThe solution here is to use geom_bar(), which performs a count and then displays the result of that count. Because geom_bar() counts automatically, you only have to provide it with a single aesthetic, which specifies the data column in which you are counting.\nTry this out. Make a bar plot of the number of penguins per species. Map the penguin species onto the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(penguins2, aes(x = ___)) +\n geom_bar()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species)) +\n geom_bar()\n\n\n\n\nTry the following additional modifications in the above code:\n\nMap penguin species onto the y axis.\nRemove the axis label that says “species”.\nChange the order of the bars manually, using fct_relevel() (see slides)." }, { - "objectID": "slides/telling-a-story.html#mapping-my-story-onto-this-format-2", - "href": "slides/telling-a-story.html#mapping-my-story-onto-this-format-2", - "title": "Telling a story", - "section": "Mapping my story onto this format", - "text": "Mapping my story onto this format\n\nLead: Because I see the need for more education in data visualization, I have written an entire book about the topic\n\n\nDevelopment: I had previously written an R package to improve figure design, but it wasn’t sufficient: Good judgement cannot be automated\n\n\nSo I wrote a book; the book is entirely about concepts, not about coding, and it is meant as a resource for anybody doing data visualizations, regardless of their preferred visualization software" + "objectID": "worksheets/visualizing-amounts.html#counting-subgroups", + "href": "worksheets/visualizing-amounts.html#counting-subgroups", + "title": "Visualizing amounts", + "section": "Counting subgroups", + "text": "Counting subgroups\ngeom_bar() automatically counts how many cases there are in each unique combination of different categorical aesthetics. In the previous example, we had only one categorical aesthetic, species. But we can add a second one, for example sex. Then geom_bar() counts the number of cases in each unique combination of species and sex and draws separate bars for each. Try this out by mapping the sex column onto the fill aesthetic.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar()\n\n\n\n\nBy default, the bars for different fill values but identical x values will be drawn on top of one-another. But there are other possibilities, which are controled by the position argument to geom_bar(). For example, try to set the position to \"dodge\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar(position = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(penguins2, aes(x = species, fill = sex)) +\n geom_bar(position = \"dodge\")\n\n\n\n\nIn the above code, also try positions \"stack\" and \"fill\"." }, { - "objectID": "slides/telling-a-story.html#example-preprints-in-biology", - "href": "slides/telling-a-story.html#example-preprints-in-biology", - "title": "Telling a story", - "section": "Example: Preprints in biology", - "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\n\nOpening" + "objectID": "slides/aesthetic-mappings.html#dataset-daily-average-temperatures-for-various-locations", + "href": "slides/aesthetic-mappings.html#dataset-daily-average-temperatures-for-various-locations", + "title": "Aesthetic mappings", + "section": "Dataset:Daily average temperatures for various locations", + "text": "Dataset:Daily average temperatures for various locations\n\n\n\n\n\n\nlocation\nday_of_year\nmonth\ntemperature\n\n\n\n\nDeath Valley\n1\n01\n51.0\n\n\nDeath Valley\n2\n01\n51.2\n\n\nDeath Valley\n3\n01\n51.3\n\n\nDeath Valley\n4\n01\n51.4\n\n\nDeath Valley\n5\n01\n51.6\n\n\nDeath Valley\n6\n01\n51.7\n\n\nDeath Valley\n7\n01\n51.9\n\n\nDeath Valley\n8\n01\n52.0\n\n\nDeath Valley\n9\n01\n52.2\n\n\nDeath Valley\n10\n01\n52.3\n\n\nDeath Valley\n11\n01\n52.5\n\n\nDeath Valley\n12\n01\n52.7\n\n\nDeath Valley\n13\n01\n52.9" }, { - "objectID": "slides/telling-a-story.html#example-preprints-in-biology-1", - "href": "slides/telling-a-story.html#example-preprints-in-biology-1", - "title": "Telling a story", - "section": "Example: Preprints in biology", - "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\nWhat happened in 2014 to curtail the growth?\n\nChallenge" + "objectID": "slides/aesthetic-mappings.html#temperatures-mapped-onto-y-position", + "href": "slides/aesthetic-mappings.html#temperatures-mapped-onto-y-position", + "title": "Aesthetic mappings", + "section": "Temperatures mapped onto y position", + "text": "Temperatures mapped onto y position" }, { - "objectID": "slides/telling-a-story.html#example-preprints-in-biology-2", - "href": "slides/telling-a-story.html#example-preprints-in-biology-2", - "title": "Telling a story", - "section": "Example: Preprints in biology", - "text": "Example: Preprints in biology\n\n\n\n\n\n \n\n\n\n\nbioRxiv opened in 2014\n\nResolution" + "objectID": "slides/aesthetic-mappings.html#temperatures-mapped-onto-color", + "href": "slides/aesthetic-mappings.html#temperatures-mapped-onto-color", + "title": "Aesthetic mappings", + "section": "Temperatures mapped onto color", + "text": "Temperatures mapped onto color" }, { - "objectID": "slides/telling-a-story.html#keep-in-mind", - "href": "slides/telling-a-story.html#keep-in-mind", - "title": "Telling a story", - "section": "Keep in mind", - "text": "Keep in mind\n\n\nEvery figure needs a clear purpose within the story arc\nA complete arc will usually require at least two figures" + "objectID": "slides/aesthetic-mappings.html#commonly-used-aesthetics", + "href": "slides/aesthetic-mappings.html#commonly-used-aesthetics", + "title": "Aesthetic mappings", + "section": "Commonly used aesthetics", + "text": "Commonly used aesthetics" }, { - "objectID": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point", - "href": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point", - "title": "Telling a story", - "section": "Prepare figures that make a clear point", - "text": "Prepare figures that make a clear point" + "objectID": "slides/aesthetic-mappings.html#the-same-data-values-can-be-mapped-to-different-aesthetics", + "href": "slides/aesthetic-mappings.html#the-same-data-values-can-be-mapped-to-different-aesthetics", + "title": "Aesthetic mappings", + "section": "The same data values can be mapped to different aesthetics", + "text": "The same data values can be mapped to different aesthetics" }, { - "objectID": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point-1", - "href": "slides/telling-a-story.html#prepare-figures-that-make-a-clear-point-1", - "title": "Telling a story", - "section": "Prepare figures that make a clear point", - "text": "Prepare figures that make a clear point\n\n\n\n\n\n \n\n\n\n\nAmerican and Delta have the shortest delays" + "objectID": "slides/aesthetic-mappings.html#we-can-use-many-different-aesthetics-at-once", + "href": "slides/aesthetic-mappings.html#we-can-use-many-different-aesthetics-at-once", + "title": "Aesthetic mappings", + "section": "We can use many different aesthetics at once", + "text": "We can use many different aesthetics at once" }, { - "objectID": "slides/telling-a-story.html#make-your-figures-memorable", - "href": "slides/telling-a-story.html#make-your-figures-memorable", - "title": "Telling a story", - "section": "Make your figures memorable", - "text": "Make your figures memorable" + "objectID": "slides/aesthetic-mappings.html#getting-the-data", + "href": "slides/aesthetic-mappings.html#getting-the-data", + "title": "Aesthetic mappings", + "section": "Getting the data", + "text": "Getting the data\nAll examples will use the temperatures dataset:\n\ntemperatures <- read_csv(\"https://wilkelab.org/SDS366/datasets/tempnormals.csv\") |>\n mutate(\n location = factor(\n location, levels = c(\"Death Valley\", \"Houston\", \"San Diego\", \"Chicago\")\n )\n ) |>\n select(location, station_id, day_of_year, month, temperature)" }, { - "objectID": "slides/telling-a-story.html#make-your-figures-memorable-1", - "href": "slides/telling-a-story.html#make-your-figures-memorable-1", - "title": "Telling a story", - "section": "Make your figures memorable", - "text": "Make your figures memorable" + "objectID": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes", + "href": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes", + "title": "Aesthetic mappings", + "section": "We define the mapping with aes()", + "text": "We define the mapping with aes()\n\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = temperature, color = location)\n) + \n geom_line()" }, { - "objectID": "slides/telling-a-story.html#further-reading", - "href": "slides/telling-a-story.html#further-reading", - "title": "Telling a story", - "section": "Further reading", - "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 29: Telling a story and making a point\nJoshua Schimel (2011) Writing Science: How to Write Papers That Get Cited and Proposals That Get Funded" + "objectID": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes-1", + "href": "slides/aesthetic-mappings.html#we-define-the-mapping-with-aes-1", + "title": "Aesthetic mappings", + "section": "We define the mapping with aes()", + "text": "We define the mapping with aes()\n\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = location, color = temperature)\n) + \n geom_point(size = 5)" }, { - "objectID": "worksheets/aesthetic-mappings.html", - "href": "worksheets/aesthetic-mappings.html", + "objectID": "slides/aesthetic-mappings.html#we-frequently-omit-argument-names", + "href": "slides/aesthetic-mappings.html#we-frequently-omit-argument-names", "title": "Aesthetic mappings", - "section": "", - "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will first work with the dataset temps_houston which contains the average temperature for each day of the year for Houston, TX." + "section": "We frequently omit argument names", + "text": "We frequently omit argument names\nLong form, all arguments are named:\nggplot(\n data = temperatures,\n mapping = aes(x = day_of_year, y = location, color = temperature)\n) + geom_point(size = 5)\n\n\nAbbreviated form, common arguments remain unnamed:\nggplot(temperatures, aes(day_of_year, location, color = temperature)) + \n geom_point(size = 5)" }, { - "objectID": "worksheets/aesthetic-mappings.html#introduction", - "href": "worksheets/aesthetic-mappings.html#introduction", + "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown", + "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown", "title": "Aesthetic mappings", - "section": "", - "text": "In this worksheet, we will discuss a core concept of ggplot, the mapping of data values onto aesthetics.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will first work with the dataset temps_houston which contains the average temperature for each day of the year for Houston, TX." + "section": "The geom determines how the data is shown", + "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) + \n geom_line()" }, { - "objectID": "worksheets/aesthetic-mappings.html#basic-use-of-ggplot", - "href": "worksheets/aesthetic-mappings.html#basic-use-of-ggplot", + "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-1", + "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-1", "title": "Aesthetic mappings", - "section": "Basic use of ggplot", - "text": "Basic use of ggplot\nIn the most basic use of ggplot, we call the ggplot() function with a dataset and an aesthetic mapping (created with aes()), and then we add a geom, such as geom_line() to draw lines or geom_point() to draw points.\nTry this for yourself. Map the column day_of_year onto the x axis and the column temperature onto the y axis, and use geom_line() to display the data.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = day_of_year, y = temperature)) +\n geom_line()\n\n\n\n\nTry again. Now use geom_point() instead of geom_line().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = day_of_year, y = temperature)) +\n geom_point()\n\n\n\n\nAnd now swap which column you map to x and which to y.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = temperature, y = day_of_year)) +\n geom_point()" + "section": "The geom determines how the data is shown", + "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(day_of_year, location, color = temperature)) + \n geom_point(size = 5)" }, { - "objectID": "worksheets/aesthetic-mappings.html#more-complex-geoms", - "href": "worksheets/aesthetic-mappings.html#more-complex-geoms", + "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-2", + "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-2", "title": "Aesthetic mappings", - "section": "More complex geoms", - "text": "More complex geoms\nYou can use other geoms to make different types of plots. For example, geom_boxplot() will make boxplots. For boxplots, we frequently want categorical data on the x or y axis. For example, we might want a separate boxplot for each month. Try this out. Puth month on the x axis, temperature on the y axis, and use geom_boxplot().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_houston, aes(x = month, y = temperature)) +\n ___()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = month, y = temperature)) +\n geom_boxplot()\n\n\n\n\nNow put the month on the y axis and the temperature on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_houston, aes(x = ___, y = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_houston, aes(x = temperature, y = month)) +\n geom_boxplot()" + "section": "The geom determines how the data is shown", + "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot()" }, { - "objectID": "worksheets/aesthetic-mappings.html#adding-color", - "href": "worksheets/aesthetic-mappings.html#adding-color", + "objectID": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-3", + "href": "slides/aesthetic-mappings.html#the-geom-determines-how-the-data-is-shown-3", "title": "Aesthetic mappings", - "section": "Adding color", - "text": "Adding color\nNext we will be working with the dataset temperatures, which is similar to temps_houston but contains data for three more locations.\n\n\n\n\n\n\n\n\nMake a line plot of temperature against day_of_year, using the color aesthetic to color the lines by location.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = temperature, color = ___)) +\n geom_line()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = temperature, color = location)) +\n geom_line()\n\n\n\n\nTry again, this time using location as the location along the y axis and temperature for the color. This plot looks better with geom_point() than geom_line(). (Try it out to see why. Also, try geom_point(size = 5) to create larger points.)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = ___, y = ___, color = ___)) +\n geom_point()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = day_of_year, y = location, color = temperature)) +\n geom_point()" + "section": "The geom determines how the data is shown", + "text": "The geom determines how the data is shown\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_violin() + \n facet_wrap(~location) # make separate panel per location" }, { - "objectID": "worksheets/aesthetic-mappings.html#using-the-fill-aesthetic", - "href": "worksheets/aesthetic-mappings.html#using-the-fill-aesthetic", + "objectID": "slides/aesthetic-mappings.html#distinguish-between-color-and-fill", + "href": "slides/aesthetic-mappings.html#distinguish-between-color-and-fill", "title": "Aesthetic mappings", - "section": "Using the fill aesthetic", - "text": "Using the fill aesthetic\nSome geoms use a fill aesthetic, which is similar to color but applies to shaded areas. (color applies to lines and points.) For example, we can use the fill aesthetic with geom_boxplot() to color the interior of the box. Try this yourself. Plot month on x, temperature on y, and color the interior of the box by location.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = ___, fill = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = location)) +\n geom_boxplot()\n\n\n\n\nCan you color the lines of the boxplot by location and the interior by month? Try it.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = ___, fill = ___)) +\n geom_boxplot()\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = location, fill = month)) +\n geom_boxplot()" + "section": "Distinguish between color and fill", + "text": "Distinguish between color and fill\n\n\ncolor Applies color to points, lines, text, borders\n\n\n\nfill Applies color to any filled areas" }, { - "objectID": "worksheets/aesthetic-mappings.html#using-aesthetics-as-parameters", - "href": "worksheets/aesthetic-mappings.html#using-aesthetics-as-parameters", + "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill", + "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill", "title": "Aesthetic mappings", - "section": "Using aesthetics as parameters", - "text": "Using aesthetics as parameters\nMany of the aesthetics (such as color, fill, and also size to change line size or point thickness) can be used as parameters inside a geom rather than inside an aes() statement. The difference is that when you use an aesthetic as a parameter, you specify a specific value, such as color = \"blue\", rather than a mapping, such as aes(color = location). Notice the difference: Inside the aes() function, we don’t actually specify the specific color values, ggplot does that for us. We only say that we want the data values of the location column to correspond to different colors. (We will learn later how to tell ggplot to use specific colors in this mapping.)\nTry this with the boxplot example from the previous section. Map location onto the fill aesthetic but set the color of the lines to \"navyblue\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = ___)) +\n geom_boxplot(color = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, fill = location)) +\n geom_boxplot(color = \"navyblue\")\n\n\n\n\nNow do the reverse. Map location onto the line colors but fill the box with the color \"navyblue\".\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = ___)) +\n geom_boxplot(fill = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(x = month, y = temperature, color = location)) +\n geom_boxplot(fill = \"navyblue\")" + "section": "Many geoms use both color and fill", + "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot()" }, { - "objectID": "worksheets/coordinate-systems-axes.html", - "href": "worksheets/coordinate-systems-axes.html", - "title": "Coordinate systems and axes", - "section": "", - "text": "In this worksheet, we will discuss how to change and customize scales and coordinate systems.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with three different datasets, boxoffice, temperatures, and tx_counties. You have already seen the first two previously.\nThe boxoffice dataset contains box-office gross results for Dec. 22-24, 2017.\n\n\n\n\n\n\n\n\nThe temperatures dataset contains the average temperature for each day of the year for four different locations.\n\n\n\n\n\n\n\n\nThe tx_counties dataset holds information about how many people lived in Texas counties in 2010. The column popratio is the ratio of the number of inhabitants to the median across all counties, and the column index simply counts the counties from most populous to least populous." + "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-1", + "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-1", + "title": "Aesthetic mappings", + "section": "Many geoms use both color and fill", + "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_boxplot()" }, { - "objectID": "worksheets/coordinate-systems-axes.html#introduction", - "href": "worksheets/coordinate-systems-axes.html#introduction", - "title": "Coordinate systems and axes", - "section": "", - "text": "In this worksheet, we will discuss how to change and customize scales and coordinate systems.\nFirst we need to load the required R packages. Please wait a moment until the live R session is fully set up and all packages are loaded.\n\n\n\n\n\n\n\n\nNext we set up the data.\n\n\n\n\n\n\n\n\nWe will be working with three different datasets, boxoffice, temperatures, and tx_counties. You have already seen the first two previously.\nThe boxoffice dataset contains box-office gross results for Dec. 22-24, 2017.\n\n\n\n\n\n\n\n\nThe temperatures dataset contains the average temperature for each day of the year for four different locations.\n\n\n\n\n\n\n\n\nThe tx_counties dataset holds information about how many people lived in Texas counties in 2010. The column popratio is the ratio of the number of inhabitants to the median across all counties, and the column index simply counts the counties from most populous to least populous." + "objectID": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-2", + "href": "slides/aesthetic-mappings.html#many-geoms-use-both-color-and-fill-2", + "title": "Aesthetic mappings", + "section": "Many geoms use both color and fill", + "text": "Many geoms use both color and fill\n\nggplot(temperatures, aes(month, temperature, color = location, fill = location)) + \n geom_boxplot()" }, { - "objectID": "worksheets/coordinate-systems-axes.html#scale-customizations", - "href": "worksheets/coordinate-systems-axes.html#scale-customizations", - "title": "Coordinate systems and axes", - "section": "Scale customizations", - "text": "Scale customizations\nWe can modify the appearance of the x and y axis with scale functions. All scale functions have name of the form scale_aesthetic_type(), where aesthetic stands for an aesthetic to which we’re mapping data (e.g., x, y, color, fill, etc), and type stands for the specific type of the scale. What scale types are available depends on both the aesthetic and the data.\nHere, we only consider position scales, which are scales for the x and y aesthetics. The most commonly used scales types for position scales are continuous for continuous data and discrete for discrete data, yielding the scale functions scale_x_continuous(), scale_y_continuous(), scale_x_discrete(), and scale_y_discrete(). But there are others, such as date, time, or binned. You can look them up here: https://ggplot2.tidyverse.org/reference/index.html#section-scales\nPosition scale functions are used to modify both the appearance of the axis (axis title, axis labels, number and location of breaks, etc.) and the mapping from data to position (including the range of data values considered, i.e., axis limits, and whether the data should be transformed, as is the case in log scales).\nLet’s start with this plot of the boxoffice data:\n\n\n\n\n\n\n\n\nWe can use scale functions to modify the axis titles, by setting the name argument. For example, scale_x_continuous(name = \"the x value\") would set the axis title to “the x value” in a continuous scale along the x axis.\nUse the appropriate scale functions to modify both axis titles in the above plot. Think about which axes (if any) are continuous and which are discrete.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(___) +\n scale_y_discrete(___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(name = \"weekend gross (million USD)\") +\n scale_y_discrete(name = NULL)\n\n\n\n\nWe can also use scale functions to set axis limits, via the limits argument. For continuous scales, the limits argument takes a vector of two numbers representing the lower and upper limit. For example, limits = c(0, 80) would indicate an axis that runs from 0 to 80. For discrete scales, the limits argument takes a vector of all the categories that should be shown, in the order in which they should be shown.\nTry this out by setting a limit from 0 to 80 on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross (million USD)\",\n limits = ___\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross (million USD)\",\n limits = c(0, 80)\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nWhat happens if you set the axis limits such that not all data points can be shown, for example an upper limit of 65 rather than 80? Do you understand why?\n(Hint: Scale limits are applied before the plot is drawn, and data points outside the scale limits are discarded. If this is not what you want, there’s an alternative way of setting limits. See the very end of this worksheet under “Coords”.)\nNext, we can use the breaks and labels arguments to customize which axis ticks are shown and how they are labeled. In general, you need exactly as many breaks as labels. If you define only breaks but not labels then labels are automatically generated from the breaks.\nBuilding on the code from the previous example, set breaks at 0, 25, 50, and 75, and format the labels such that they can be read as currency. For example, write $25M instead of just 25.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = ___,\n labels = ___\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\")\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nWhen looking at the resulting plot, you may notice that the x axis extends beyond the limits you have set. This happens because by default ggplot scales expand the axis range by a small amount. You can set the axis expansion via the expand parameter. Setting the expansion can be a bit tricky, because we can set expansion at either end of a scale and we can define both additive and multiplicative expansion. (Additive expansion adds a fixed value, whereas multiplicative expansion adds a multiple of the scale range. ggplot uses additive expansion for discrete scales and multiplicative expansion for continuous scales, but you can use either for either scale.)\nThe simplest way to define expansions is with the expansion() function, which takes arguments mult for multiplicative expansion and add for additive expansion. Either takes a vector of two values, indicating expansion at the lower and upper end, respectively. Thus, expansion(mult = c(0, 0.1)) indicates multiplicative expansion of 0% at the lower end and 10% at the upper end, whereas expansion(add = c(2, 2)) indicates additive expansion of 2 units at either end of the scale.\nTry this yourself. Use the expand argument to remove the gap to the left of 0 on the x axis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\"),\n expand = expansion(___)\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n scale_x_continuous(\n name = \"weekend gross\",\n limits = c(0, 80),\n breaks = c(0, 25, 50, 75),\n labels = c(\"0\", \"$25M\", \"$50M\", \"$75M\"),\n expand = expansion(mult = c(0, 0.06))\n ) +\n scale_y_discrete(name = NULL)\n\n\n\n\nTry different settings for the expand argument. Try both multiplicative and additive expansions. Apply different expansions to the y axis as well." + "objectID": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters", + "href": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters", + "title": "Aesthetic mappings", + "section": "Aesthetics can also be used as parameters", + "text": "Aesthetics can also be used as parameters\n\nggplot(temperatures, aes(month, temperature, fill = location)) + \n geom_boxplot(color = \"steelblue\")" }, { - "objectID": "worksheets/coordinate-systems-axes.html#logarithmic-scales", - "href": "worksheets/coordinate-systems-axes.html#logarithmic-scales", - "title": "Coordinate systems and axes", - "section": "Logarithmic scales", - "text": "Logarithmic scales\nScales can also transform the data before plotting. For example, log scales such as scale_x_log10() and scale_y_log10() log-transform the data. To try this out, we’ll be working with the tx_counties dataset:\n\n\n\n\n\n\n\n\nModify this plot so the y axis uses a log scale.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10()\n\n\n\n\nNow customize the log scale by setting name, limits, breaks, and labels. These work exactly as they did in scale_x_continuous().\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10(\n name = ___,\n limits = ___,\n breaks = ___,\n labels = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(tx_counties) +\n aes(x = index, y = popratio) +\n geom_point() +\n scale_y_log10(\n name = \"population number / median\",\n limits = c(0.003, 300),\n breaks = c(0.01, 1, 100),\n labels = c(\"0.01\", \"1\", \"100\")\n )" + "objectID": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters-1", + "href": "slides/aesthetic-mappings.html#aesthetics-can-also-be-used-as-parameters-1", + "title": "Aesthetic mappings", + "section": "Aesthetics can also be used as parameters", + "text": "Aesthetics can also be used as parameters\n\nggplot(temperatures, aes(month, temperature, color = location)) + \n geom_boxplot(fill = \"steelblue\")" }, { - "objectID": "worksheets/coordinate-systems-axes.html#coords", - "href": "worksheets/coordinate-systems-axes.html#coords", - "title": "Coordinate systems and axes", - "section": "Coords", - "text": "Coords\nWhile scales determine how data values are mapped and represented along one dimension, e.g. the x or the y axis, coordinate systems define how these dimensions are projected onto the 2d plot surface. The default coordinate system is the Cartesian coordinate system, which uses orthogonal x and y axes. In the following example, I have added the coord explicitly, but this is not normally necessary.\n\n\n\n\n\n\n\n\nWe can however add a different coord, for example coord_polar() to use a polar coordinate system. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar()\n\n\n\n\nIn the polar coordinate system, the y axis (here, temperature) is mapped onto the radius, and the x axis (here, day of year) is mapped onto the angle. You can use scale_x_continuous() and scale_y_continuous() to modify the radial and angular axes. For example, you may want to change the temperature limits from 0 to 105 so the temperature curve for Chicago doesn’t hit the exact center of the plot. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar() +\n scale_y_continuous(limits = ___)\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temperatures, aes(day_of_year, temperature, color = location)) +\n geom_line() +\n coord_polar() +\n scale_y_continuous(limits = c(0, 105))\n\n\n\n\nThere are other useful coords. For example, coord_fixed() is a Cartesian coordinate system with fixed aspect ratio. This is useful when we plot variables along the x and y axes that are measured in the same units. In this case, we want the two axes to be coordinated, such that one step along x has the same meaning as one step along y.\nTo demonstrate this, we reshape the temperatures dataset into wide format, and then plot temperatures in San Diego versus temperatures in Houston.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n(A side remark: Do you know why we write `San Diego` and not \"San Diego\" or 'San Diego' inside the aes() function? If you don’t, see if you can find out.)\nThe units along both the x and the y axis are temperatures, but a 10 degree difference in Houston is shown as a shorter distance than a 10 degree difference in San Diego. To address this problem, add coord_fixed() to the above plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed()\n\n\n\n\nThis plot is technically correct but it doesn’t look good, because breaks are spaced differently along the two axes. Also, the plot looks strangely narrow and tall. We can fix both issues by manually setting breaks and limits for both axes. Try this out.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed() +\n scale_x_continuous(\n limits = ___,\n breaks = ___\n ) +\n scale_y_continuous(\n limits = ___,\n breaks = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(temps_wide, aes(`San Diego`, Houston)) +\n geom_point() +\n coord_fixed() +\n scale_x_continuous(\n limits = c(45, 85),\n breaks = c(40, 50, 60, 70, 80)\n ) +\n scale_y_continuous(\n limits = c(48, 88),\n breaks = c(50, 60, 70, 80)\n )\n\n\n\n\nFinally, as the last example of what can be done with coords, we go back to the problem of setting limits on the box-office bar plot. Instead of setting limits with scale functions, we can also set them via the arguments xlim and ylim inside the coord, for example here coord_cartesian(). (This would be a good reason to explicity add coord_cartesian() to a plot.) When we set limits in the coord ggplot does not discard any data points. Instead it simply zooms in or out according to the limits set. Try this out by setting the x limits from 10 to 65 in the box-office plot.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHint\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n coord_cartesian(\n xlim = ___\n )\n\n\n\n\n\n\n\n\n\n\n\nSolution\n\n\n\n\n\nggplot(boxoffice) +\n aes(amount, fct_reorder(title, amount)) +\n geom_col() +\n coord_cartesian(\n xlim = c(10, 65)\n )\n\n\n\n\nNote: It is normally not a good idea to start a bar plot at a value other than 0. This exercise was solely meant to demonstrate how limits in coords differ from limits in scales." + "objectID": "slides/aesthetic-mappings.html#further-reading", + "href": "slides/aesthetic-mappings.html#further-reading", + "title": "Aesthetic mappings", + "section": "Further reading", + "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 2: Visualizing data\nData Visualization—A Practical Introduction: Chapter 3: Make a plot\nggplot2 reference documentation\nggplot2 book\nggplot2 cheatsheet" }, { - "objectID": "slides/figure-design.html#many-datasets-contain-simple-amounts", - "href": "slides/figure-design.html#many-datasets-contain-simple-amounts", + "objectID": "slides/visualizing-amounts.html#many-datasets-contain-simple-amounts", + "href": "slides/visualizing-amounts.html#many-datasets-contain-simple-amounts", "title": "Visualizing amounts", "section": "Many datasets contain simple amounts", "text": "Many datasets contain simple amounts\n\n\nExample: Highest grossing movies Dec. 2017\n\n\n\n\n\n\nrank\ntitle\namount\n\n\n\n\n1\nStar Wars\n71.57\n\n\n2\nJumanji\n36.17\n\n\n3\nPitch Perfect 3\n19.93\n\n\n4\nGreatest Showman\n8.81\n\n\n5\nFerdinand\n7.32\n\n\n\n\n\n\n\n\n\nData source: Box Office Mojo" }, { - "objectID": "slides/figure-design.html#we-can-visualize-amounts-with-bar-plots", - "href": "slides/figure-design.html#we-can-visualize-amounts-with-bar-plots", + "objectID": "slides/visualizing-amounts.html#we-can-visualize-amounts-with-bar-plots", + "href": "slides/visualizing-amounts.html#we-can-visualize-amounts-with-bar-plots", "title": "Visualizing amounts", "section": "We can visualize amounts with bar plots", "text": "We can visualize amounts with bar plots" }, { - "objectID": "slides/figure-design.html#bars-can-also-run-horizontally", - "href": "slides/figure-design.html#bars-can-also-run-horizontally", + "objectID": "slides/visualizing-amounts.html#bars-can-also-run-horizontally", + "href": "slides/visualizing-amounts.html#bars-can-also-run-horizontally", "title": "Visualizing amounts", "section": "Bars can also run horizontally", "text": "Bars can also run horizontally" }, { - "objectID": "slides/figure-design.html#avoid-rotated-axis-labels", - "href": "slides/figure-design.html#avoid-rotated-axis-labels", + "objectID": "slides/visualizing-amounts.html#avoid-rotated-axis-labels", + "href": "slides/visualizing-amounts.html#avoid-rotated-axis-labels", "title": "Visualizing amounts", "section": "Avoid rotated axis labels", "text": "Avoid rotated axis labels" }, { - "objectID": "slides/figure-design.html#avoid-rotated-axis-labels-1", - "href": "slides/figure-design.html#avoid-rotated-axis-labels-1", + "objectID": "slides/visualizing-amounts.html#avoid-rotated-axis-labels-1", + "href": "slides/visualizing-amounts.html#avoid-rotated-axis-labels-1", "title": "Visualizing amounts", "section": "Avoid rotated axis labels", "text": "Avoid rotated axis labels" }, { - "objectID": "slides/figure-design.html#pay-attention-to-the-order-of-the-bars", - "href": "slides/figure-design.html#pay-attention-to-the-order-of-the-bars", + "objectID": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars", + "href": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars", "title": "Visualizing amounts", "section": "Pay attention to the order of the bars", "text": "Pay attention to the order of the bars" }, { - "objectID": "slides/figure-design.html#pay-attention-to-the-order-of-the-bars-1", - "href": "slides/figure-design.html#pay-attention-to-the-order-of-the-bars-1", + "objectID": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars-1", + "href": "slides/visualizing-amounts.html#pay-attention-to-the-order-of-the-bars-1", "title": "Visualizing amounts", "section": "Pay attention to the order of the bars", "text": "Pay attention to the order of the bars" }, { - "objectID": "slides/figure-design.html#we-can-use-dots-instead-of-bars", - "href": "slides/figure-design.html#we-can-use-dots-instead-of-bars", + "objectID": "slides/visualizing-amounts.html#we-can-use-dots-instead-of-bars", + "href": "slides/visualizing-amounts.html#we-can-use-dots-instead-of-bars", "title": "Visualizing amounts", "section": "We can use dots instead of bars", "text": "We can use dots instead of bars" }, { - "objectID": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes", - "href": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes", + "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes", + "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes", "title": "Visualizing amounts", "section": "Dots are preferable if we want to truncate the axes", "text": "Dots are preferable if we want to truncate the axes" }, { - "objectID": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", - "href": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", + "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", + "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-1", "title": "Visualizing amounts", "section": "Dots are preferable if we want to truncate the axes", "text": "Dots are preferable if we want to truncate the axes\n\n\n\n\n\n \n\n\n\n\n\nBar lengths donot accurately represent thedata values" }, { - "objectID": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", - "href": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", + "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", + "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-2", "title": "Visualizing amounts", "section": "Dots are preferable if we want to truncate the axes", "text": "Dots are preferable if we want to truncate the axes\n\n\n\n\n\n \n\n\n\n\n\nKey featuresof the dataare obscured" }, { - "objectID": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", - "href": "slides/figure-design.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", + "objectID": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", + "href": "slides/visualizing-amounts.html#dots-are-preferable-if-we-want-to-truncate-the-axes-3", "title": "Visualizing amounts", "section": "Dots are preferable if we want to truncate the axes", "text": "Dots are preferable if we want to truncate the axes" }, { - "objectID": "slides/figure-design.html#we-use-grouped-bars-for-higher-dimensional-datasets", - "href": "slides/figure-design.html#we-use-grouped-bars-for-higher-dimensional-datasets", + "objectID": "slides/visualizing-amounts.html#we-use-grouped-bars-for-higher-dimensional-datasets", + "href": "slides/visualizing-amounts.html#we-use-grouped-bars-for-higher-dimensional-datasets", "title": "Visualizing amounts", "section": "We use grouped bars for higher-dimensional datasets", "text": "We use grouped bars for higher-dimensional datasets\n\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" }, { - "objectID": "slides/figure-design.html#we-are-free-to-choose-by-which-variable-to-group", - "href": "slides/figure-design.html#we-are-free-to-choose-by-which-variable-to-group", + "objectID": "slides/visualizing-amounts.html#we-are-free-to-choose-by-which-variable-to-group", + "href": "slides/visualizing-amounts.html#we-are-free-to-choose-by-which-variable-to-group", "title": "Visualizing amounts", "section": "We are free to choose by which variable to group", "text": "We are free to choose by which variable to group\n\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" }, { - "objectID": "slides/figure-design.html#we-can-also-use-multiple-plot-panels-facets", - "href": "slides/figure-design.html#we-can-also-use-multiple-plot-panels-facets", + "objectID": "slides/visualizing-amounts.html#we-can-also-use-multiple-plot-panels-facets", + "href": "slides/visualizing-amounts.html#we-can-also-use-multiple-plot-panels-facets", "title": "Visualizing amounts", "section": "We can also use multiple plot panels (facets)", "text": "We can also use multiple plot panels (facets)\n\n\n\n\n\n \n\n\n\n\n\nData source: United States Census Bureau, 2016" }, { - "objectID": "slides/figure-design.html#dataset-highest-grossing-movies-dec.-2017", - "href": "slides/figure-design.html#dataset-highest-grossing-movies-dec.-2017", + "objectID": "slides/visualizing-amounts.html#dataset-highest-grossing-movies-dec.-2017", + "href": "slides/visualizing-amounts.html#dataset-highest-grossing-movies-dec.-2017", "title": "Visualizing amounts", "section": "Dataset: Highest grossing movies Dec. 2017", "text": "Dataset: Highest grossing movies Dec. 2017\n\n# Data from Box Office Mojo for Dec. 22-24, 2017. \nboxoffice <- tibble(\n rank = 1:5,\n title = c(\n \"Star Wars\", \"Jumanji\", \"Pitch Perfect 3\",\n \"Greatest Showman\", \"Ferdinand\"\n ),\n amount = c(71.57, 36.17, 19.93, 8.81, 7.32) # million USD\n)\n\nboxoffice\n\n# A tibble: 5 × 3\n rank title amount\n <int> <chr> <dbl>\n1 1 Star Wars 71.6 \n2 2 Jumanji 36.2 \n3 3 Pitch Perfect 3 19.9 \n4 4 Greatest Showman 8.81\n5 5 Ferdinand 7.32" }, { - "objectID": "slides/figure-design.html#visualize-as-a-bar-plot", - "href": "slides/figure-design.html#visualize-as-a-bar-plot", + "objectID": "slides/visualizing-amounts.html#visualize-as-a-bar-plot", + "href": "slides/visualizing-amounts.html#visualize-as-a-bar-plot", "title": "Visualizing amounts", "section": "Visualize as a bar plot", "text": "Visualize as a bar plot\n\nggplot(boxoffice, aes(title, amount)) +\n geom_col() # \"col\" stands for column" }, { - "objectID": "slides/figure-design.html#order-by-data-value", - "href": "slides/figure-design.html#order-by-data-value", + "objectID": "slides/visualizing-amounts.html#order-by-data-value", + "href": "slides/visualizing-amounts.html#order-by-data-value", "title": "Visualizing amounts", "section": "Order by data value", "text": "Order by data value\n\nggplot(boxoffice, aes(fct_reorder(title, amount), amount)) +\n geom_col() # \"col\" stands for column" }, { - "objectID": "slides/figure-design.html#order-by-data-value-descending", - "href": "slides/figure-design.html#order-by-data-value-descending", + "objectID": "slides/visualizing-amounts.html#order-by-data-value-descending", + "href": "slides/visualizing-amounts.html#order-by-data-value-descending", "title": "Visualizing amounts", "section": "Order by data value, descending", "text": "Order by data value, descending\n\nggplot(boxoffice, aes(fct_reorder(title, -amount), amount)) +\n geom_col() + \n xlab(NULL) # remove x axis label" }, { - "objectID": "slides/figure-design.html#flip-x-and-y-set-custom-x-axis-label", - "href": "slides/figure-design.html#flip-x-and-y-set-custom-x-axis-label", + "objectID": "slides/visualizing-amounts.html#flip-x-and-y-set-custom-x-axis-label", + "href": "slides/visualizing-amounts.html#flip-x-and-y-set-custom-x-axis-label", "title": "Visualizing amounts", "section": "Flip x and y, set custom x axis label", "text": "Flip x and y, set custom x axis label\n\nggplot(boxoffice, aes(amount, fct_reorder(title, amount))) +\n geom_col() +\n xlab(\"amount (in million USD)\") +\n ylab(NULL)" }, { - "objectID": "slides/figure-design.html#example-visualize-number-of-penguins-per-species", - "href": "slides/figure-design.html#example-visualize-number-of-penguins-per-species", + "objectID": "slides/visualizing-amounts.html#example-visualize-number-of-penguins-per-species", + "href": "slides/visualizing-amounts.html#example-visualize-number-of-penguins-per-species", "title": "Visualizing amounts", "section": "Example: Visualize number of penguins per species", "text": "Example: Visualize number of penguins per species\n\n\n\n# A tibble: 344 × 8\n species island bill_length_mm bill_depth_mm flipper_length_mm body_mass_g\n <fct> <fct> <dbl> <dbl> <int> <int>\n 1 Adelie Torgersen 39.1 18.7 181 3750\n 2 Adelie Torgersen 39.5 17.4 186 3800\n 3 Adelie Torgersen 40.3 18 195 3250\n 4 Adelie Torgersen NA NA NA NA\n 5 Adelie Torgersen 36.7 19.3 193 3450\n 6 Adelie Torgersen 39.3 20.6 190 3650\n 7 Adelie Torgersen 38.9 17.8 181 3625\n 8 Adelie Torgersen 39.2 19.6 195 4675\n 9 Adelie Torgersen 34.1 18.1 193 3475\n10 Adelie Torgersen 42 20.2 190 4250\n# ℹ 334 more rows\n# ℹ 2 more variables: sex <fct>, year <int>" }, { - "objectID": "slides/figure-design.html#use-geom_bar-to-count-before-plotting", - "href": "slides/figure-design.html#use-geom_bar-to-count-before-plotting", + "objectID": "slides/visualizing-amounts.html#use-geom_bar-to-count-before-plotting", + "href": "slides/visualizing-amounts.html#use-geom_bar-to-count-before-plotting", "title": "Visualizing amounts", "section": "Use geom_bar() to count before plotting", "text": "Use geom_bar() to count before plotting\n\nggplot(penguins, aes(y = species)) + # no x aesthetic needed\n geom_bar()" }, { - "objectID": "slides/figure-design.html#getting-the-bars-into-the-right-order", - "href": "slides/figure-design.html#getting-the-bars-into-the-right-order", + "objectID": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order", + "href": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order", "title": "Visualizing amounts", "section": "Getting the bars into the right order", "text": "Getting the bars into the right order\n\n\nOption 1: Manually, using fct_relevel()\n\nggplot(penguins, aes(y = fct_relevel(species, \"Chinstrap\", \"Gentoo\", \"Adelie\"))) +\n geom_bar() +\n ylab(NULL)" }, { - "objectID": "slides/figure-design.html#getting-the-bars-into-the-right-order-1", - "href": "slides/figure-design.html#getting-the-bars-into-the-right-order-1", + "objectID": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order-1", + "href": "slides/visualizing-amounts.html#getting-the-bars-into-the-right-order-1", "title": "Visualizing amounts", "section": "Getting the bars into the right order", "text": "Getting the bars into the right order\n\nOption 2: Using fct_rev() and fct_infreq() from the forcats package\n\nggplot(penguins, aes(y = fct_rev(fct_infreq(species)))) +\n geom_bar() +\n ylab(NULL)" }, { - "objectID": "slides/figure-design.html#display-counts-by-species-and-sex", - "href": "slides/figure-design.html#display-counts-by-species-and-sex", + "objectID": "slides/visualizing-amounts.html#display-counts-by-species-and-sex", + "href": "slides/visualizing-amounts.html#display-counts-by-species-and-sex", "title": "Visualizing amounts", "section": "Display counts by species and sex", "text": "Display counts by species and sex\n\n\nggplot(penguins, aes(sex, fill = species)) +\n geom_bar()" }, { - "objectID": "slides/figure-design.html#remove-missing-values-nas", - "href": "slides/figure-design.html#remove-missing-values-nas", + "objectID": "slides/visualizing-amounts.html#remove-missing-values-nas", + "href": "slides/visualizing-amounts.html#remove-missing-values-nas", "title": "Visualizing amounts", "section": "Remove missing values (NAs)", "text": "Remove missing values (NAs)\n\n\npenguins2 <- na.omit(penguins) # remove all rows with any missing values\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar()" }, { - "objectID": "slides/figure-design.html#positions-define-how-subgroups-are-shown", - "href": "slides/figure-design.html#positions-define-how-subgroups-are-shown", + "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown", + "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown", "title": "Visualizing amounts", "section": "Positions define how subgroups are shown", "text": "Positions define how subgroups are shown\n\nposition = \"dodge\": Place bars for subgroups side-by-side\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"dodge\")" }, { - "objectID": "slides/figure-design.html#positions-define-how-subgroups-are-shown-1", - "href": "slides/figure-design.html#positions-define-how-subgroups-are-shown-1", + "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-1", + "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-1", "title": "Visualizing amounts", "section": "Positions define how subgroups are shown", "text": "Positions define how subgroups are shown\n\nposition = \"stack\": Place bars for subgroups on top of each other\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"stack\")" }, { - "objectID": "slides/figure-design.html#positions-define-how-subgroups-are-shown-2", - "href": "slides/figure-design.html#positions-define-how-subgroups-are-shown-2", + "objectID": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-2", + "href": "slides/visualizing-amounts.html#positions-define-how-subgroups-are-shown-2", "title": "Visualizing amounts", "section": "Positions define how subgroups are shown", "text": "Positions define how subgroups are shown\n\nposition = \"fill\": Like \"stack\", but scale to 100%\n\nggplot(penguins2, aes(sex, fill = species)) +\n geom_bar(position = \"fill\")" }, { - "objectID": "slides/figure-design.html#further-reading", - "href": "slides/figure-design.html#further-reading", - "title": "Figure design", + "objectID": "slides/visualizing-amounts.html#further-reading", + "href": "slides/visualizing-amounts.html#further-reading", + "title": "Visualizing amounts", "section": "Further reading", - "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 23: Balance the data and the context\nData Visualization—A Practical Introduction: Chapter 8.3: Change the appearance of plots with themes\nggplot2 reference documentation: Complete themes\nggplot2 reference documentation: Modify components of a theme" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements", - "href": "slides/figure-design.html#customizing-theme-elements", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid()" - }, - { - "objectID": "slides/figure-design.html#using-ready-made-themes", - "href": "slides/figure-design.html#using-ready-made-themes", - "title": "Figure design", - "section": "Using ready-made themes", - "text": "Using ready-made themes\n\n\nggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +\n geom_point()\n # default theme is theme_gray()" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements-1", - "href": "slides/figure-design.html#customizing-theme-elements-1", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change overall font family\n # (requires font to be available)\n text = element_text(\n family = \"Comic Sans MS\"\n )\n )" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements-2", - "href": "slides/figure-design.html#customizing-theme-elements-2", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of axis titles\n axis.title = element_text(\n color = \"royalblue2\"\n )\n )" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements-3", - "href": "slides/figure-design.html#customizing-theme-elements-3", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change color of only the x axis title\n axis.title.x = element_text(\n color = \"royalblue2\"\n )\n )" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements-4", - "href": "slides/figure-design.html#customizing-theme-elements-4", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # change all text colors?\n # why does it not work?\n text = element_text(color = \"royalblue2\")\n )" - }, - { - "objectID": "slides/figure-design.html#customizing-theme-elements-5", - "href": "slides/figure-design.html#customizing-theme-elements-5", - "title": "Figure design", - "section": "Customizing theme elements", - "text": "Customizing theme elements\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n text = element_text(color = \"royalblue2\"),\n axis.text = element_text(\n color = \"royalblue2\"\n )\n )\n\n\n\n\n\n \n\n\n\n\n\n\nThe element axis.text has its own color set in the theme. Therefore it doesn’t inherit from text." - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0 = left)\n hjust = 0\n )\n )" - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-1", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment-1", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (0.5 = center)\n hjust = 0.5\n )\n )" - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-2", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment-2", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.title.x = element_text(\n # horizontal justification\n # (1 = right)\n hjust = 1\n )\n )" - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-3", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment-3", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0 = bottom)\n vjust = 0\n )\n )" - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-4", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment-4", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (0.5 = center)\n vjust = 0.5\n )\n )" - }, - { - "objectID": "slides/figure-design.html#horizontal-and-vertical-alignment-5", - "href": "slides/figure-design.html#horizontal-and-vertical-alignment-5", - "title": "Figure design", - "section": "Horizontal and vertical alignment", - "text": "Horizontal and vertical alignment\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n axis.text.y = element_text(\n # vertical justification\n # (1 = top)\n vjust = 1\n )\n )" - }, - { - "objectID": "slides/figure-design.html#remove-elements-entirely-element_blank", - "href": "slides/figure-design.html#remove-elements-entirely-element_blank", - "title": "Figure design", - "section": "Remove elements entirely: element_blank()", - "text": "Remove elements entirely: element_blank()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # all text gone\n text = element_blank()\n )" - }, - { - "objectID": "slides/figure-design.html#remove-elements-entirely-element_blank-1", - "href": "slides/figure-design.html#remove-elements-entirely-element_blank-1", - "title": "Figure design", - "section": "Remove elements entirely: element_blank()", - "text": "Remove elements entirely: element_blank()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n # no axis titles\n axis.title = element_blank()\n )" - }, - { - "objectID": "slides/figure-design.html#set-background-color-element_rect", - "href": "slides/figure-design.html#set-background-color-element_rect", - "title": "Figure design", - "section": "Set background color: element_rect()", - "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n plot.background = element_rect(\n fill = \"aliceblue\"\n )\n )" - }, - { - "objectID": "slides/figure-design.html#set-background-color-element_rect-1", - "href": "slides/figure-design.html#set-background-color-element_rect-1", - "title": "Figure design", - "section": "Set background color: element_rect()", - "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n panel.background = element_rect(\n fill = \"aliceblue\"\n )\n )" - }, - { - "objectID": "slides/figure-design.html#set-background-color-element_rect-2", - "href": "slides/figure-design.html#set-background-color-element_rect-2", - "title": "Figure design", - "section": "Set background color: element_rect()", - "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n )\n )" - }, - { - "objectID": "slides/figure-design.html#set-background-color-element_rect-3", - "href": "slides/figure-design.html#set-background-color-element_rect-3", - "title": "Figure design", - "section": "Set background color: element_rect()", - "text": "Set background color: element_rect()\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7)\n )" - }, - { - "objectID": "slides/figure-design.html#move-the-legend-legend.position", - "href": "slides/figure-design.html#move-the-legend-legend.position", - "title": "Figure design", - "section": "Move the legend: legend.position", - "text": "Move the legend: legend.position\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend on top of plot\n legend.position = \"top\"\n )" - }, - { - "objectID": "slides/figure-design.html#move-the-legend-legend.position-1", - "href": "slides/figure-design.html#move-the-legend-legend.position-1", - "title": "Figure design", - "section": "Move the legend: legend.position", - "text": "Move the legend: legend.position\n\n\n\nggplot(penguins) +\n aes(flipper_length_mm, body_mass_g) +\n geom_point(aes(color = species)) +\n theme_minimal_grid() +\n theme(\n legend.box.background = element_rect(\n fill = \"aliceblue\",\n color = \"steelblue4\" # line color\n ),\n legend.box.margin = margin(7, 7, 7, 7),\n # legend inside plot\n legend.position = \"inside\", \n # relative position inside plot panel\n legend.position.inside = c(0.98, 0.02),\n # justification relative to position\n legend.justification = c(1, 0)\n )" + "text": "Further reading\n\n\nFundamentals of Data Visualization: Chapter 6: Visualizing amounts\nData Visualization—A Practical Introduction: Chapter 4.4: Geoms can transform data\nggplot2 reference documentation: geom_bar(), geom_col()\nggplot2 reference documentation: position_stack(), position_fill()" } ] \ No newline at end of file diff --git a/_site/site_libs/revealjs/dist/theme/quarto.css b/_site/site_libs/revealjs/dist/theme/quarto.css index 4dd59a7..bc90054 100644 --- a/_site/site_libs/revealjs/dist/theme/quarto.css +++ b/_site/site_libs/revealjs/dist/theme/quarto.css @@ -1,4 +1,4 @@ -@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";@import"https://fonts.googleapis.com/css?family=Roboto+Condensed";@import"https://fonts.googleapis.com/css?family=Roboto+Mono";@import"./fonts/source-sans-pro/source-sans-pro.css";.large-font{font-size:1.1em}.small-font{font-size:.86em}.tiny-font{font-size:.66em}.xtiny-font{font-size:.5em}.reveal h1{color:red;text-align:center;margin:0 !important}.reveal code:not(pre>code){font-size:.94em;line-height:1}.highlight{font-weight:bold;color:#91322f}.center-text{text-align:center}.move-up-half-em{margin-top:-0.5em}.move-up-1em{margin-top:-1em}.move-up-2em{margin-top:-2em}.move-up-3em{margin-top:-3em}.move-up-4em{margin-top:-4em}.move-up-5em{margin-top:-5em}.move-up-6em{margin-top:-6em}.move-down-1em{margin-top:1em}.move-down-2em{margin-top:2em}.move-down-3em{margin-top:3em}.absolute-bottom-left{position:absolute;bottom:0;left:0}.absolute-bottom-right{position:absolute;bottom:0;right:0}.date{font-size:.66em}.date:before{content:"Last updated: "}figcaption{display:none}.reveal .column-output-location .column:first-of-type div.sourceCode{height:auto !important}:root{--r-background-color: #fff;--r-main-font: Lato, Arial, sans-serif;--r-main-font-size: 36px;--r-main-color: #222;--r-block-margin: 12px;--r-heading-margin: 0 0 12px 0;--r-heading-font: Roboto Condensed, Arial Narrow OS, Arial, sans-serif;--r-heading-color: #222;--r-heading-line-height: 1.2;--r-heading-letter-spacing: normal;--r-heading-text-transform: none;--r-heading-text-shadow: none;--r-heading-font-weight: 400;--r-heading1-text-shadow: none;--r-heading1-size: 1.45em;--r-heading2-size: 1.45em;--r-heading3-size: 1.2em;--r-heading4-size: 1.2em;--r-code-font: Roboto Mono, Lucida Console, Monaco, Consolas, monospace;--r-link-color: #2a76dd;--r-link-color-dark: #1a53a1;--r-link-color-hover: #5692e4;--r-selection-background-color: #98bdef;--r-selection-color: #fff}.reveal-viewport{background:#fff;background-color:var(--r-background-color)}.reveal{font-family:var(--r-main-font);font-size:var(--r-main-font-size);font-weight:normal;color:var(--r-main-color)}.reveal ::selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal ::-moz-selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:var(--r-heading-margin);color:var(--r-heading-color);font-family:var(--r-heading-font);font-weight:var(--r-heading-font-weight);line-height:var(--r-heading-line-height);letter-spacing:var(--r-heading-letter-spacing);text-transform:var(--r-heading-text-transform);text-shadow:var(--r-heading-text-shadow);word-wrap:break-word}.reveal h1{font-size:var(--r-heading1-size)}.reveal h2{font-size:var(--r-heading2-size)}.reveal h3{font-size:var(--r-heading3-size)}.reveal h4{font-size:var(--r-heading4-size)}.reveal h1{text-shadow:var(--r-heading1-text-shadow)}.reveal p{margin:var(--r-block-margin) 0;line-height:1.3}.reveal h1:last-child,.reveal h2:last-child,.reveal h3:last-child,.reveal h4:last-child,.reveal h5:last-child,.reveal h6:last-child{margin-bottom:0}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:bold}.reveal em{font-style:italic}.reveal ol,.reveal dl,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal dt{font-weight:bold}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:var(--r-block-margin) auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0px 0px 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:var(--r-block-margin) auto;text-align:left;font-size:.55em;font-family:var(--r-code-font);line-height:1.2em;word-wrap:break-word;box-shadow:0px 5px 15px rgba(0,0,0,.15)}.reveal code{font-family:var(--r-code-font);text-transform:none;tab-size:2}.reveal pre code{display:block;padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal .code-wrapper{white-space:normal}.reveal .code-wrapper code{white-space:pre}.reveal table{margin:auto;border-collapse:collapse;border-spacing:0}.reveal table th{font-weight:bold}.reveal table th,.reveal table td{text-align:left;padding:.2em .5em .2em .5em;border-bottom:1px solid}.reveal table th[align=center],.reveal table td[align=center]{text-align:center}.reveal table th[align=right],.reveal table td[align=right]{text-align:right}.reveal table tbody tr:last-child th,.reveal table tbody tr:last-child td{border-bottom:none}.reveal sup{vertical-align:super;font-size:smaller}.reveal sub{vertical-align:sub;font-size:smaller}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal img{margin:var(--r-block-margin) 0}.reveal a{color:var(--r-link-color);text-decoration:none;transition:color .15s ease}.reveal a:hover{color:var(--r-link-color-hover);text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:var(--r-link-color-dark)}.reveal .r-frame{border:4px solid var(--r-main-color);box-shadow:0 0 10px rgba(0,0,0,.15)}.reveal a .r-frame{transition:all .15s linear}.reveal a:hover .r-frame{border-color:var(--r-link-color);box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:var(--r-link-color)}.reveal .progress{background:rgba(0,0,0,.2);color:var(--r-link-color)}@media print{.backgrounds{background-color:var(--r-background-color)}}.top-right{position:absolute;top:1em;right:1em}.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none !important}.zindex-bottom{z-index:-1 !important}figure.figure{display:block}.quarto-layout-panel{margin-bottom:1em}.quarto-layout-panel>figure{width:100%}.quarto-layout-panel>figure>figcaption,.quarto-layout-panel>.panel-caption{margin-top:10pt}.quarto-layout-panel>.table-caption{margin-top:0px}.table-caption p{margin-bottom:.5em}.quarto-layout-row{display:flex;flex-direction:row;align-items:flex-start}.quarto-layout-valign-top{align-items:flex-start}.quarto-layout-valign-bottom{align-items:flex-end}.quarto-layout-valign-center{align-items:center}.quarto-layout-cell{position:relative;margin-right:20px}.quarto-layout-cell:last-child{margin-right:0}.quarto-layout-cell figure,.quarto-layout-cell>p{margin:.2em}.quarto-layout-cell img{max-width:100%}.quarto-layout-cell .html-widget{width:100% !important}.quarto-layout-cell div figure p{margin:0}.quarto-layout-cell figure{display:block;margin-inline-start:0;margin-inline-end:0}.quarto-layout-cell table{display:inline-table}.quarto-layout-cell-subref figcaption,figure .quarto-layout-row figure figcaption{text-align:center;font-style:italic}.quarto-figure{position:relative;margin-bottom:1em}.quarto-figure>figure{width:100%;margin-bottom:0}.quarto-figure-left>figure>p,.quarto-figure-left>figure>div{text-align:left}.quarto-figure-center>figure>p,.quarto-figure-center>figure>div{text-align:center}.quarto-figure-right>figure>p,.quarto-figure-right>figure>div{text-align:right}.quarto-figure>figure>div.cell-annotation,.quarto-figure>figure>div code{text-align:left}figure>p:empty{display:none}figure>p:first-child{margin-top:0;margin-bottom:0}figure>figcaption.quarto-float-caption-bottom{margin-bottom:.5em}figure>figcaption.quarto-float-caption-top{margin-top:.5em}div[id^=tbl-]{position:relative}.quarto-figure>.anchorjs-link{position:absolute;top:.6em;right:.5em}div[id^=tbl-]>.anchorjs-link{position:absolute;top:.7em;right:.3em}.quarto-figure:hover>.anchorjs-link,div[id^=tbl-]:hover>.anchorjs-link,h2:hover>.anchorjs-link,h3:hover>.anchorjs-link,h4:hover>.anchorjs-link,h5:hover>.anchorjs-link,h6:hover>.anchorjs-link,.reveal-anchorjs-link>.anchorjs-link{opacity:1}#title-block-header{margin-block-end:1rem;position:relative;margin-top:-1px}#title-block-header .abstract{margin-block-start:1rem}#title-block-header .abstract .abstract-title{font-weight:600}#title-block-header a{text-decoration:none}#title-block-header .author,#title-block-header .date,#title-block-header .doi{margin-block-end:.2rem}#title-block-header .quarto-title-block>div{display:flex}#title-block-header .quarto-title-block>div>h1{flex-grow:1}#title-block-header .quarto-title-block>div>button{flex-shrink:0;height:2.25rem;margin-top:0}tr.header>th>p:last-of-type{margin-bottom:0px}table,table.table{margin-top:.5rem;margin-bottom:.5rem}caption,.table-caption{padding-top:.5rem;padding-bottom:.5rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-top{margin-top:.5rem;margin-bottom:.25rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-bottom{padding-top:.25rem;margin-bottom:.5rem;text-align:center}.utterances{max-width:none;margin-left:-8px}iframe{margin-bottom:1em}details{margin-bottom:1em}details[show]{margin-bottom:0}details>summary{color:#6f6f6f}details>summary>p:only-child{display:inline}pre.sourceCode,code.sourceCode{position:relative}dd code:not(.sourceCode),p code:not(.sourceCode){white-space:pre-wrap}code{white-space:pre}@media print{code{white-space:pre-wrap}}pre>code{display:block}pre>code.sourceCode{white-space:pre}pre>code.sourceCode>span>a:first-child::before{text-decoration:none}pre.code-overflow-wrap>code.sourceCode{white-space:pre-wrap}pre.code-overflow-scroll>code.sourceCode{white-space:pre}code a:any-link{color:inherit;text-decoration:none}code a:hover{color:inherit;text-decoration:underline}ul.task-list{padding-left:1em}[data-tippy-root]{display:inline-block}.tippy-content .footnote-back{display:none}.footnote-back{margin-left:.2em}.tippy-content{overflow-x:auto}.quarto-embedded-source-code{display:none}.quarto-unresolved-ref{font-weight:600}.quarto-cover-image{max-width:35%;float:right;margin-left:30px}.cell-output-display .widget-subarea{margin-bottom:1em}.cell-output-display:not(.no-overflow-x),.knitsql-table:not(.no-overflow-x){overflow-x:auto}.panel-input{margin-bottom:1em}.panel-input>div,.panel-input>div>div{display:inline-block;vertical-align:top;padding-right:12px}.panel-input>p:last-child{margin-bottom:0}.layout-sidebar{margin-bottom:1em}.layout-sidebar .tab-content{border:none}.tab-content>.page-columns.active{display:grid}div.sourceCode>iframe{width:100%;height:300px;margin-bottom:-0.5em}a{text-underline-offset:3px}div.ansi-escaped-output{font-family:monospace;display:block}/*! +@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";@import"https://fonts.googleapis.com/css?family=Roboto+Condensed";@import"https://fonts.googleapis.com/css?family=Roboto+Mono";@import"./fonts/source-sans-pro/source-sans-pro.css";.large-font{font-size:1.1em}.small-font{font-size:.86em}.tiny-font{font-size:.66em}.xtiny-font{font-size:.5em}.title-font{font-family:"Roboto Condensed","Arial Narrow OS",Arial,sans-serif;font-weight:400;font-size:1.45em}.reveal h1{color:red;text-align:center;margin:0 !important}.reveal code:not(pre>code){font-size:.94em;line-height:1}.highlight{font-weight:bold;color:#91322f}.center-text{text-align:center}.move-up-half-em{margin-top:-0.5em}.move-up-1em{margin-top:-1em}.move-up-2em{margin-top:-2em}.move-up-3em{margin-top:-3em}.move-up-4em{margin-top:-4em}.move-up-5em{margin-top:-5em}.move-up-6em{margin-top:-6em}.move-down-1em{margin-top:1em}.move-down-2em{margin-top:2em}.move-down-3em{margin-top:3em}.absolute-bottom-left{position:absolute;bottom:0;left:0}.absolute-bottom-right{position:absolute;bottom:0;right:0}.date{font-size:.66em}.date:before{content:"Last updated: "}figcaption{display:none}.reveal .column-output-location .column:first-of-type div.sourceCode{height:auto !important}:root{--r-background-color: #fff;--r-main-font: Lato, Arial, sans-serif;--r-main-font-size: 36px;--r-main-color: #222;--r-block-margin: 12px;--r-heading-margin: 0 0 12px 0;--r-heading-font: Roboto Condensed, Arial Narrow OS, Arial, sans-serif;--r-heading-color: #222;--r-heading-line-height: 1.2;--r-heading-letter-spacing: normal;--r-heading-text-transform: none;--r-heading-text-shadow: none;--r-heading-font-weight: 400;--r-heading1-text-shadow: none;--r-heading1-size: 1.45em;--r-heading2-size: 1.45em;--r-heading3-size: 1.2em;--r-heading4-size: 1.2em;--r-code-font: Roboto Mono, Lucida Console, Monaco, Consolas, monospace;--r-link-color: #2a76dd;--r-link-color-dark: #1a53a1;--r-link-color-hover: #5692e4;--r-selection-background-color: #98bdef;--r-selection-color: #fff}.reveal-viewport{background:#fff;background-color:var(--r-background-color)}.reveal{font-family:var(--r-main-font);font-size:var(--r-main-font-size);font-weight:normal;color:var(--r-main-color)}.reveal ::selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal ::-moz-selection{color:var(--r-selection-color);background:var(--r-selection-background-color);text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:var(--r-heading-margin);color:var(--r-heading-color);font-family:var(--r-heading-font);font-weight:var(--r-heading-font-weight);line-height:var(--r-heading-line-height);letter-spacing:var(--r-heading-letter-spacing);text-transform:var(--r-heading-text-transform);text-shadow:var(--r-heading-text-shadow);word-wrap:break-word}.reveal h1{font-size:var(--r-heading1-size)}.reveal h2{font-size:var(--r-heading2-size)}.reveal h3{font-size:var(--r-heading3-size)}.reveal h4{font-size:var(--r-heading4-size)}.reveal h1{text-shadow:var(--r-heading1-text-shadow)}.reveal p{margin:var(--r-block-margin) 0;line-height:1.3}.reveal h1:last-child,.reveal h2:last-child,.reveal h3:last-child,.reveal h4:last-child,.reveal h5:last-child,.reveal h6:last-child{margin-bottom:0}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:bold}.reveal em{font-style:italic}.reveal ol,.reveal dl,.reveal ul{display:inline-block;text-align:left;margin:0 0 0 1em}.reveal ol{list-style-type:decimal}.reveal ul{list-style-type:disc}.reveal ul ul{list-style-type:square}.reveal ul ul ul{list-style-type:circle}.reveal ul ul,.reveal ul ol,.reveal ol ol,.reveal ol ul{display:block;margin-left:40px}.reveal dt{font-weight:bold}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:var(--r-block-margin) auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0px 0px 2px rgba(0,0,0,.2)}.reveal blockquote p:first-child,.reveal blockquote p:last-child{display:inline-block}.reveal q{font-style:italic}.reveal pre{display:block;position:relative;width:90%;margin:var(--r-block-margin) auto;text-align:left;font-size:.55em;font-family:var(--r-code-font);line-height:1.2em;word-wrap:break-word;box-shadow:0px 5px 15px rgba(0,0,0,.15)}.reveal code{font-family:var(--r-code-font);text-transform:none;tab-size:2}.reveal pre code{display:block;padding:5px;overflow:auto;max-height:400px;word-wrap:normal}.reveal .code-wrapper{white-space:normal}.reveal .code-wrapper code{white-space:pre}.reveal table{margin:auto;border-collapse:collapse;border-spacing:0}.reveal table th{font-weight:bold}.reveal table th,.reveal table td{text-align:left;padding:.2em .5em .2em .5em;border-bottom:1px solid}.reveal table th[align=center],.reveal table td[align=center]{text-align:center}.reveal table th[align=right],.reveal table td[align=right]{text-align:right}.reveal table tbody tr:last-child th,.reveal table tbody tr:last-child td{border-bottom:none}.reveal sup{vertical-align:super;font-size:smaller}.reveal sub{vertical-align:sub;font-size:smaller}.reveal small{display:inline-block;font-size:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal img{margin:var(--r-block-margin) 0}.reveal a{color:var(--r-link-color);text-decoration:none;transition:color .15s ease}.reveal a:hover{color:var(--r-link-color-hover);text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:var(--r-link-color-dark)}.reveal .r-frame{border:4px solid var(--r-main-color);box-shadow:0 0 10px rgba(0,0,0,.15)}.reveal a .r-frame{transition:all .15s linear}.reveal a:hover .r-frame{border-color:var(--r-link-color);box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:var(--r-link-color)}.reveal .progress{background:rgba(0,0,0,.2);color:var(--r-link-color)}@media print{.backgrounds{background-color:var(--r-background-color)}}.top-right{position:absolute;top:1em;right:1em}.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none !important}.zindex-bottom{z-index:-1 !important}figure.figure{display:block}.quarto-layout-panel{margin-bottom:1em}.quarto-layout-panel>figure{width:100%}.quarto-layout-panel>figure>figcaption,.quarto-layout-panel>.panel-caption{margin-top:10pt}.quarto-layout-panel>.table-caption{margin-top:0px}.table-caption p{margin-bottom:.5em}.quarto-layout-row{display:flex;flex-direction:row;align-items:flex-start}.quarto-layout-valign-top{align-items:flex-start}.quarto-layout-valign-bottom{align-items:flex-end}.quarto-layout-valign-center{align-items:center}.quarto-layout-cell{position:relative;margin-right:20px}.quarto-layout-cell:last-child{margin-right:0}.quarto-layout-cell figure,.quarto-layout-cell>p{margin:.2em}.quarto-layout-cell img{max-width:100%}.quarto-layout-cell .html-widget{width:100% !important}.quarto-layout-cell div figure p{margin:0}.quarto-layout-cell figure{display:block;margin-inline-start:0;margin-inline-end:0}.quarto-layout-cell table{display:inline-table}.quarto-layout-cell-subref figcaption,figure .quarto-layout-row figure figcaption{text-align:center;font-style:italic}.quarto-figure{position:relative;margin-bottom:1em}.quarto-figure>figure{width:100%;margin-bottom:0}.quarto-figure-left>figure>p,.quarto-figure-left>figure>div{text-align:left}.quarto-figure-center>figure>p,.quarto-figure-center>figure>div{text-align:center}.quarto-figure-right>figure>p,.quarto-figure-right>figure>div{text-align:right}.quarto-figure>figure>div.cell-annotation,.quarto-figure>figure>div code{text-align:left}figure>p:empty{display:none}figure>p:first-child{margin-top:0;margin-bottom:0}figure>figcaption.quarto-float-caption-bottom{margin-bottom:.5em}figure>figcaption.quarto-float-caption-top{margin-top:.5em}div[id^=tbl-]{position:relative}.quarto-figure>.anchorjs-link{position:absolute;top:.6em;right:.5em}div[id^=tbl-]>.anchorjs-link{position:absolute;top:.7em;right:.3em}.quarto-figure:hover>.anchorjs-link,div[id^=tbl-]:hover>.anchorjs-link,h2:hover>.anchorjs-link,h3:hover>.anchorjs-link,h4:hover>.anchorjs-link,h5:hover>.anchorjs-link,h6:hover>.anchorjs-link,.reveal-anchorjs-link>.anchorjs-link{opacity:1}#title-block-header{margin-block-end:1rem;position:relative;margin-top:-1px}#title-block-header .abstract{margin-block-start:1rem}#title-block-header .abstract .abstract-title{font-weight:600}#title-block-header a{text-decoration:none}#title-block-header .author,#title-block-header .date,#title-block-header .doi{margin-block-end:.2rem}#title-block-header .quarto-title-block>div{display:flex}#title-block-header .quarto-title-block>div>h1{flex-grow:1}#title-block-header .quarto-title-block>div>button{flex-shrink:0;height:2.25rem;margin-top:0}tr.header>th>p:last-of-type{margin-bottom:0px}table,table.table{margin-top:.5rem;margin-bottom:.5rem}caption,.table-caption{padding-top:.5rem;padding-bottom:.5rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-top{margin-top:.5rem;margin-bottom:.25rem;text-align:center}figure.quarto-float-tbl figcaption.quarto-float-caption-bottom{padding-top:.25rem;margin-bottom:.5rem;text-align:center}.utterances{max-width:none;margin-left:-8px}iframe{margin-bottom:1em}details{margin-bottom:1em}details[show]{margin-bottom:0}details>summary{color:#6f6f6f}details>summary>p:only-child{display:inline}pre.sourceCode,code.sourceCode{position:relative}dd code:not(.sourceCode),p code:not(.sourceCode){white-space:pre-wrap}code{white-space:pre}@media print{code{white-space:pre-wrap}}pre>code{display:block}pre>code.sourceCode{white-space:pre}pre>code.sourceCode>span>a:first-child::before{text-decoration:none}pre.code-overflow-wrap>code.sourceCode{white-space:pre-wrap}pre.code-overflow-scroll>code.sourceCode{white-space:pre}code a:any-link{color:inherit;text-decoration:none}code a:hover{color:inherit;text-decoration:underline}ul.task-list{padding-left:1em}[data-tippy-root]{display:inline-block}.tippy-content .footnote-back{display:none}.footnote-back{margin-left:.2em}.tippy-content{overflow-x:auto}.quarto-embedded-source-code{display:none}.quarto-unresolved-ref{font-weight:600}.quarto-cover-image{max-width:35%;float:right;margin-left:30px}.cell-output-display .widget-subarea{margin-bottom:1em}.cell-output-display:not(.no-overflow-x),.knitsql-table:not(.no-overflow-x){overflow-x:auto}.panel-input{margin-bottom:1em}.panel-input>div,.panel-input>div>div{display:inline-block;vertical-align:top;padding-right:12px}.panel-input>p:last-child{margin-bottom:0}.layout-sidebar{margin-bottom:1em}.layout-sidebar .tab-content{border:none}.tab-content>.page-columns.active{display:grid}div.sourceCode>iframe{width:100%;height:300px;margin-bottom:-0.5em}a{text-underline-offset:3px}div.ansi-escaped-output{font-family:monospace;display:block}/*! * * ansi colors from IPython notebook's * diff --git a/_site/slides/figure-design.html b/_site/slides/figure-design.html index f4a9bd5..89d5930 100644 --- a/_site/slides/figure-design.html +++ b/_site/slides/figure-design.html @@ -11,7 +11,7 @@ - + SDS 366 – Figure design @@ -404,7 +404,316 @@

    Figure design

    -

    2024-12-27

    +

    2024-12-28

    + +
    +

    +
    +
    +

    How do we go from this

    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +

       to this?

    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +

    Requires coordinated modification of multiple elements:

    +
    +
    +
      +
    • geoms (via arguments to geoms)
      • +
    • scales (via scale_*() functions)
      • +
    • plot appearance (via themes)
      • +
    +
    +
    +
    +

    The starting point, a rough draft

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges()
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +

    You can download the dataset using this code:

    +
    lincoln_temps <- readRDS(url("https://wilkelab.org/SDS366/datasets/lincoln_temps.rds"))
    +
    +
    +
    +

    Set scale and bandwidth to shape ridgelines

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Set rel_min_height to cut ridgelines near zero

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Use scale_*() functions to specify axis labels

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01,
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)"
+  ) +
+  scale_y_discrete(
+    name = NULL  # NULL means no label
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Specify scale expansion

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)",
+    expand = c(0, 0)
+  ) +
+  scale_y_discrete(
+    name = NULL,
+    expand = expansion(add = c(0.2, 2.6))
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Set overall plot theme

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)",
+    expand = c(0, 0)
+  ) +
+  scale_y_discrete(
+    name = NULL,
+    expand = expansion(add = c(0.2, 2.6))
+  ) +
+  theme_minimal_grid()  # from cowplot
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Align y axis labels to grid lines

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)",
+    expand = c(0, 0)
+  ) +
+  scale_y_discrete(
+    name = NULL,
+    expand = expansion(add = c(0.2, 2.6))
+  ) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(vjust = 0)
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Change fill color from default gray to blue

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01,
+    fill = "#7DCCFF"
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)",
+    expand = c(0, 0)
+  ) +
+  scale_y_discrete(
+    name = NULL,
+    expand = expansion(add = c(0.2, 2.6))
+  ) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(vjust = 0)
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Draw lines in white instead of black

    +
    +
    +
    +
    ggplot(lincoln_temps) +
+  aes(x = mean_temp, y = month_long) +
+  geom_density_ridges(
+    scale = 3, bandwidth = 3.4,
+    rel_min_height = 0.01,
+    fill = "#7DCCFF",
+    color = "white"
+  ) +
+  scale_x_continuous(
+    name = "mean temperature (°F)",
+    expand = c(0, 0)
+  ) +
+  scale_y_discrete(
+    name = NULL,
+    expand = expansion(add = c(0.2, 2.6))
+  ) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(vjust = 0)
+  )
    +
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    @@ -415,9 +724,9 @@

    Working with ggplot themes

    Using ready-made themes

    -
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
-  geom_point()
-  # default theme is theme_gray()
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point()
+  # default theme is theme_gray()
    @@ -429,15 +738,233 @@

    Using ready-made themes

    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_gray()
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_gray(14) # most themes take a font-size argument to scale text size
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_bw(14)
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_minimal(14)
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_classic(14)
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_half_open()  # from package cowplot
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_minimal_grid()  # from package cowplot
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_minimal_hgrid()  # from package cowplot
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_minimal_vgrid()  # from package cowplot
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_economist(14)       # from package ggthemes
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_economist(14) + # from package ggthemes
+  scale_color_economist()
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +
    +
    +

    Using ready-made themes

    +
    +
    +
    ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) +
+  geom_point() +
+  theme_fivethirtyeight(14) + # from package ggthemes
+  scale_color_fivethirtyeight()
    +
    +
    +
    +

    +
     
    +
    +
    +
    +
    +
    +

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid()
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid()
    @@ -455,17 +982,17 @@

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # change overall font family
-    # (requires font to be available)
-    text = element_text(
-      family = "Comic Sans MS"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # change overall font family
+    # (requires font to be available)
+    text = element_text(
+      family = "Comic Sans MS"
+    )
+  )
    @@ -483,16 +1010,16 @@

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # change color of axis titles
-    axis.title = element_text(
-      color = "royalblue2"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # change color of axis titles
+    axis.title = element_text(
+      color = "royalblue2"
+    )
+  )
    @@ -510,16 +1037,16 @@

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # change color of only the x axis title
-    axis.title.x = element_text(
-      color = "royalblue2"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # change color of only the x axis title
+    axis.title.x = element_text(
+      color = "royalblue2"
+    )
+  )
    @@ -537,15 +1064,15 @@

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # change all text colors?
-    # why does it not work?
-    text = element_text(color = "royalblue2")
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # change all text colors?
+    # why does it not work?
+    text = element_text(color = "royalblue2")
+  )
    @@ -563,16 +1090,16 @@

    Customizing theme elements

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    text = element_text(color = "royalblue2"),
-    axis.text = element_text(
-      color = "royalblue2"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    text = element_text(color = "royalblue2"),
+    axis.text = element_text(
+      color = "royalblue2"
+    )
+  )
    @@ -593,17 +1120,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.title.x = element_text(
-      # horizontal justification
-      # (0 = left)
-      hjust = 0
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.title.x = element_text(
+      # horizontal justification
+      # (0 = left)
+      hjust = 0
+    )
+  )
    @@ -621,17 +1148,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.title.x = element_text(
-      # horizontal justification
-      # (0.5 = center)
-      hjust = 0.5
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.title.x = element_text(
+      # horizontal justification
+      # (0.5 = center)
+      hjust = 0.5
+    )
+  )
    @@ -649,17 +1176,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.title.x = element_text(
-      # horizontal justification
-      # (1 = right)
-      hjust = 1
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.title.x = element_text(
+      # horizontal justification
+      # (1 = right)
+      hjust = 1
+    )
+  )
    @@ -677,17 +1204,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.text.y = element_text(
-      # vertical justification
-      # (0 = bottom)
-      vjust = 0
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(
+      # vertical justification
+      # (0 = bottom)
+      vjust = 0
+    )
+  )
    @@ -705,17 +1232,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.text.y = element_text(
-      # vertical justification
-      # (0.5 = center)
-      vjust = 0.5
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(
+      # vertical justification
+      # (0.5 = center)
+      vjust = 0.5
+    )
+  )
    @@ -733,17 +1260,17 @@

    Horizontal and vertical alignment

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    axis.text.y = element_text(
-      # vertical justification
-      # (1 = top)
-      vjust = 1
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    axis.text.y = element_text(
+      # vertical justification
+      # (1 = top)
+      vjust = 1
+    )
+  )
    @@ -761,14 +1288,14 @@

    Remove elements entirely: element_blank()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # all text gone
-    text = element_blank()
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # all text gone
+    text = element_blank()
+  )
    @@ -786,14 +1313,14 @@

    Remove elements entirely: element_blank()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    # no axis titles
-    axis.title = element_blank()
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    # no axis titles
+    axis.title = element_blank()
+  )
    @@ -811,15 +1338,15 @@

    Set background color: element_rect()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    plot.background = element_rect(
-      fill = "aliceblue"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    plot.background = element_rect(
+      fill = "aliceblue"
+    )
+  )
    @@ -837,15 +1364,15 @@

    Set background color: element_rect()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    panel.background = element_rect(
-      fill = "aliceblue"
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    panel.background = element_rect(
+      fill = "aliceblue"
+    )
+  )
    @@ -863,16 +1390,16 @@

    Set background color: element_rect()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    legend.box.background = element_rect(
-      fill = "aliceblue",
-      color = "steelblue4" # line color
-    )
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    legend.box.background = element_rect(
+      fill = "aliceblue",
+      color = "steelblue4" # line color
+    )
+  )
    @@ -890,17 +1417,17 @@

    Set background color: element_rect()

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    legend.box.background = element_rect(
-      fill = "aliceblue",
-      color = "steelblue4" # line color
-    ),
-    legend.box.margin = margin(7, 7, 7, 7)
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    legend.box.background = element_rect(
+      fill = "aliceblue",
+      color = "steelblue4" # line color
+    ),
+    legend.box.margin = margin(7, 7, 7, 7)
+  )
    @@ -918,19 +1445,19 @@

    Move the legend: legend.position

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    legend.box.background = element_rect(
-      fill = "aliceblue",
-      color = "steelblue4" # line color
-    ),
-    legend.box.margin = margin(7, 7, 7, 7),
-    # legend on top of plot
-    legend.position = "top"
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    legend.box.background = element_rect(
+      fill = "aliceblue",
+      color = "steelblue4" # line color
+    ),
+    legend.box.margin = margin(7, 7, 7, 7),
+    # legend on top of plot
+    legend.position = "top"
+  )
    @@ -948,23 +1475,23 @@

    Move the legend: legend.position

    -
    ggplot(penguins) +
-  aes(flipper_length_mm, body_mass_g) +
-  geom_point(aes(color = species)) +
-  theme_minimal_grid() +
-  theme(
-    legend.box.background = element_rect(
-      fill = "aliceblue",
-      color = "steelblue4" # line color
-    ),
-    legend.box.margin = margin(7, 7, 7, 7),
-    # legend inside plot
-    legend.position = "inside", 
-    # relative position inside plot panel
-    legend.position.inside = c(0.98, 0.02),
-    # justification relative to position
-    legend.justification = c(1, 0)
-  )
    +
    ggplot(penguins) +
+  aes(flipper_length_mm, body_mass_g) +
+  geom_point(aes(color = species)) +
+  theme_minimal_grid() +
+  theme(
+    legend.box.background = element_rect(
+      fill = "aliceblue",
+      color = "steelblue4" # line color
+    ),
+    legend.box.margin = margin(7, 7, 7, 7),
+    # legend inside plot
+    legend.position = "inside", 
+    # relative position inside plot panel
+    legend.position.inside = c(0.98, 0.02),
+    # justification relative to position
+    legend.justification = c(1, 0)
+  )
    diff --git a/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-1.svg b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-1.svg new file mode 100644 index 0000000..18840b0 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-1.svg @@ -0,0 +1,690 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad1-1.svg b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad1-1.svg new file mode 100644 index 0000000..b4c12f8 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad1-1.svg @@ -0,0 +1,837 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad2-1.svg b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad2-1.svg new file mode 100644 index 0000000..553a702 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect-bad2-1.svg @@ -0,0 +1,836 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect2-1.svg b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect2-1.svg new file mode 100644 index 0000000..18840b0 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/Americas-life-expect2-1.svg @@ -0,0 +1,690 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-dotplot-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-dotplot-1.svg new file mode 100644 index 0000000..f49cdaf --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-dotplot-1.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-1.svg new file mode 100644 index 0000000..331966d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-1.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-unordered-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-unordered-1.svg new file mode 100644 index 0000000..481abc9 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal-unordered-1.svg @@ -0,0 +1,260 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal2-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal2-1.svg new file mode 100644 index 0000000..331966d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal2-1.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal3-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal3-1.svg new file mode 100644 index 0000000..331966d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-horizontal3-1.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-naive-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-naive-1.svg new file mode 100644 index 0000000..6c0d54e --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-naive-1.svg @@ -0,0 +1,326 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered-1.svg new file mode 100644 index 0000000..7524507 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered-1.svg @@ -0,0 +1,388 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered2-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered2-1.svg new file mode 100644 index 0000000..0cd21c4 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered2-1.svg @@ -0,0 +1,304 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered3-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered3-1.svg new file mode 100644 index 0000000..b7cff01 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-ordered3-1.svg @@ -0,0 +1,344 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-rot-axis-tick-labels-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-rot-axis-tick-labels-1.svg new file mode 100644 index 0000000..497d360 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-rot-axis-tick-labels-1.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/boxoffice-vertical-1.svg b/_site/slides/figure-design_files/figure-revealjs/boxoffice-vertical-1.svg new file mode 100644 index 0000000..b9d899c --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/boxoffice-vertical-1.svg @@ -0,0 +1,273 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-dodged-1.svg b/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-dodged-1.svg new file mode 100644 index 0000000..3f6c0ef --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-dodged-1.svg @@ -0,0 +1,395 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-faceted-1.svg b/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-faceted-1.svg new file mode 100644 index 0000000..8c5acf6 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/income-by-age-race-faceted-1.svg @@ -0,0 +1,582 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/income-by-race-age-dodged-1.svg b/_site/slides/figure-design_files/figure-revealjs/income-by-race-age-dodged-1.svg new file mode 100644 index 0000000..9da6db6 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/income-by-race-age-dodged-1.svg @@ -0,0 +1,396 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-polished-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-polished-1.svg new file mode 100644 index 0000000..30e3e54 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-polished-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression1-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression1-1.svg new file mode 100644 index 0000000..1bc8cb4 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression1-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression2-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression2-1.svg new file mode 100644 index 0000000..f3b6e72 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression2-1.svg @@ -0,0 +1,482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression3-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression3-1.svg new file mode 100644 index 0000000..d3b2408 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression3-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression4-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression4-1.svg new file mode 100644 index 0000000..b33ca0d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression4-1.svg @@ -0,0 +1,477 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression5-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression5-1.svg new file mode 100644 index 0000000..df04f8b --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression5-1.svg @@ -0,0 +1,452 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression6-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression6-1.svg new file mode 100644 index 0000000..984f183 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression6-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression7-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression7-1.svg new file mode 100644 index 0000000..fe1e962 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression7-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression8-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression8-1.svg new file mode 100644 index 0000000..8af16e6 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression8-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression9-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression9-1.svg new file mode 100644 index 0000000..30e3e54 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-progression9-1.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-raw-1.svg b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-raw-1.svg new file mode 100644 index 0000000..1bc8cb4 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/lincoln-ridgeline-raw-1.svg @@ -0,0 +1,487 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-bars-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-bars-1.svg new file mode 100644 index 0000000..4e7ce03 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-bars-1.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-bars2-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-bars2-1.svg new file mode 100644 index 0000000..f506da3 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-bars2-1.svg @@ -0,0 +1,212 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-bars3-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-bars3-1.svg new file mode 100644 index 0000000..f506da3 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-bars3-1.svg @@ -0,0 +1,212 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes10-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes10-1.svg new file mode 100644 index 0000000..746c71d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes10-1.svg @@ -0,0 +1,686 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes11-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes11-1.svg new file mode 100644 index 0000000..88a48af --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes11-1.svg @@ -0,0 +1,665 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes12-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes12-1.svg new file mode 100644 index 0000000..0e692eb --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes12-1.svg @@ -0,0 +1,665 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes13-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes13-1.svg new file mode 100644 index 0000000..a76cc9a --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes13-1.svg @@ -0,0 +1,621 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes2-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes2-1.svg new file mode 100644 index 0000000..5cee710 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes2-1.svg @@ -0,0 +1,775 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes3-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes3-1.svg new file mode 100644 index 0000000..c423f82 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes3-1.svg @@ -0,0 +1,775 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes4-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes4-1.svg new file mode 100644 index 0000000..a82b4fc --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes4-1.svg @@ -0,0 +1,781 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes5-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes5-1.svg new file mode 100644 index 0000000..b283a1d --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes5-1.svg @@ -0,0 +1,752 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes6-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes6-1.svg new file mode 100644 index 0000000..49f65ff --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes6-1.svg @@ -0,0 +1,657 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes7-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes7-1.svg new file mode 100644 index 0000000..5d20760 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes7-1.svg @@ -0,0 +1,645 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes8-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes8-1.svg new file mode 100644 index 0000000..079d909 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes8-1.svg @@ -0,0 +1,709 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes9-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes9-1.svg new file mode 100644 index 0000000..447b44f --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-complete-themes9-1.svg @@ -0,0 +1,668 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-1.svg new file mode 100644 index 0000000..d73fcff --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-1.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-dodge-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-dodge-1.svg new file mode 100644 index 0000000..324e271 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-dodge-1.svg @@ -0,0 +1,277 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-fill-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-fill-1.svg new file mode 100644 index 0000000..8762879 --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-fill-1.svg @@ -0,0 +1,305 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-stack-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-stack-1.svg new file mode 100644 index 0000000..257eb4f --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species-stack-1.svg @@ -0,0 +1,276 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species2-1.svg b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species2-1.svg new file mode 100644 index 0000000..257eb4f --- /dev/null +++ b/_site/slides/figure-design_files/figure-revealjs/penguins-sex-species2-1.svg @@ -0,0 +1,276 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_site/syllabus.html b/_site/syllabus.html index a9735ab..9acf4c6 100644 --- a/_site/syllabus.html +++ b/_site/syllabus.html @@ -110,14 +110,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • diff --git a/_site/worksheets/aesthetic-mappings.html b/_site/worksheets/aesthetic-mappings.html index e844c6b..abf9b22 100644 --- a/_site/worksheets/aesthetic-mappings.html +++ b/_site/worksheets/aesthetic-mappings.html @@ -148,14 +148,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • @@ -228,7 +232,7 @@

    Introduction

    @@ -239,7 +243,7 @@

    Introduction

    @@ -250,7 +254,7 @@

    Introduction

    @@ -265,7 +269,7 @@

    Basic use of ggplot

    @@ -295,7 +299,7 @@

    Basic use of ggplot

    @@ -325,7 +329,7 @@

    Basic use of ggplot

    @@ -358,7 +362,7 @@

    More complex geoms

    @@ -407,7 +411,7 @@

    More complex geoms

    @@ -459,7 +463,7 @@

    Adding color

    @@ -470,7 +474,7 @@

    Adding color

    @@ -519,7 +523,7 @@

    Adding color

    @@ -571,7 +575,7 @@

    Using the f

    @@ -620,7 +624,7 @@

    Using the f

    @@ -673,7 +677,7 @@

    Using aesth

    @@ -722,7 +726,7 @@

    Using aesth

    @@ -767,10 +771,10 @@

    Using aesth
    diff --git a/_site/worksheets/coordinate-systems-axes.html b/_site/worksheets/coordinate-systems-axes.html index 19556ee..bce182a 100644 --- a/_site/worksheets/coordinate-systems-axes.html +++ b/_site/worksheets/coordinate-systems-axes.html @@ -148,14 +148,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • @@ -228,7 +232,7 @@

    Introduction

    @@ -239,7 +243,7 @@

    Introduction

    @@ -251,7 +255,7 @@

    Introduction

    @@ -262,7 +266,7 @@

    Introduction

    @@ -273,7 +277,7 @@

    Introduction

    @@ -290,7 +294,7 @@

    Scale customizations<

    @@ -302,7 +306,7 @@

    Scale customizations<

    @@ -358,7 +362,7 @@

    Scale customizations<

    @@ -422,7 +426,7 @@

    Scale customizations<

    @@ -489,7 +493,7 @@

    Scale customizations<

    @@ -560,7 +564,7 @@

    Logarithmic scales

    @@ -571,7 +575,7 @@

    Logarithmic scales

    @@ -603,7 +607,7 @@

    Logarithmic scales

    @@ -669,7 +673,7 @@

    Coords

    @@ -680,7 +684,7 @@

    Coords

    @@ -711,7 +715,7 @@

    Coords

    @@ -765,7 +769,7 @@

    Coords

    @@ -775,7 +779,7 @@

    Coords

    @@ -787,7 +791,7 @@

    Coords

    @@ -818,7 +822,7 @@

    Coords

    @@ -885,7 +889,7 @@

    Coords

    @@ -939,10 +943,10 @@

    Coords

    diff --git a/_site/worksheets/visualizing-amounts.html b/_site/worksheets/visualizing-amounts.html index 6fc379f..f2a53ad 100644 --- a/_site/worksheets/visualizing-amounts.html +++ b/_site/worksheets/visualizing-amounts.html @@ -148,14 +148,18 @@
  • Class 2: Aesthetic mappings +
    • +
  • + + Class 3a: Visualizing amounts
  • - Class 3: Telling a story + Class 3b: Telling a story
  • - - Class 3: Visualizing amounts + + Class 13: Figure design
    • @@ -228,7 +232,7 @@

    Introduction

    @@ -239,7 +243,7 @@

    Introduction

    @@ -250,7 +254,7 @@

    Introduction

    @@ -263,7 +267,7 @@

    Introduction

    @@ -278,7 +282,7 @@

    Drawing n @@ -327,7 +331,7 @@

    Drawing n @@ -357,7 +361,7 @@

    Drawing n @@ -414,7 +418,7 @@

    Getting @@ -479,7 +483,7 @@

    Drawing bars @@ -537,7 +541,7 @@

    Counting subgroups

    @@ -567,7 +571,7 @@

    Counting subgroups

    @@ -613,10 +617,10 @@

    Counting subgroups

    diff --git a/slides/Wilke-theme.scss b/slides/Wilke-theme.scss index afcbf57..34403f4 100644 --- a/slides/Wilke-theme.scss +++ b/slides/Wilke-theme.scss @@ -26,6 +26,12 @@ $code-block-font-size: 0.66em; /* equivalent to .tiny-font by default */ .tiny-font { font-size: 0.66em; } .xtiny-font { font-size: 0.50em; } +.title-font { + font-family: 'Roboto Condensed', 'Arial Narrow OS', Arial, sans-serif; + font-weight: 400; + font-size: 1.45em; +} + .reveal h1 { color: red; text-align: center; diff --git a/slides/figure-design.qmd b/slides/figure-design.qmd index 53eab1e..6f224ea 100644 --- a/slides/figure-design.qmd +++ b/slides/figure-design.qmd @@ -33,6 +33,294 @@ update_geom_defaults("line", list(linewidth = 1)) lincoln_temps <- readRDS(here("datasets", "lincoln_temps.rds")) ``` +## {#how-do-we-go data-menu-title="How do we go from this"} + +::: {.columns} + +::: {.column width="50%"} +[How do we go from this]{.title-font} + +```{r} +#| label: lincoln-ridgeline-raw +#| fig-cap: " " +#| out-width: "90%" +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges() +``` +::: + +::: {.fragment .column width="50%"} +[   to this?]{.title-font} + +```{r} +#| label: lincoln-ridgeline-polished +#| fig-cap: " " +#| out-width: "90%" +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01, + fill = "#7DCCFF", + color = "white" + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) + + theme_minimal_grid() + + theme( + axis.text.y = element_text(vjust = 0) + ) +``` +::: + +::: + +::: {.fragment .small-font .move-up-1em} +Requires coordinated modification of multiple elements: +::: + +::: {.incremental .small-font} +- geoms (via arguments to geoms) +- scales (via `scale_*()` functions) +- plot appearance (via themes) +::: + +## The starting point, a rough draft + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression1 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges() +``` +::: + +::: {.fragment .tiny-font} +You can download the dataset using this code: +```r +lincoln_temps <- readRDS(url("https://wilkelab.org/SDS366/datasets/lincoln_temps.rds")) +``` +::: + +## Set `scale` and `bandwidth` to shape ridgelines + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression2 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4 + ) +``` +::: + +## Set `rel_min_height` to cut ridgelines near zero + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression3 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01 + ) +``` +::: + +## Use `scale_*()` functions to specify axis labels + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression4 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01, + ) + + scale_x_continuous( + name = "mean temperature (°F)" + ) + + scale_y_discrete( + name = NULL # NULL means no label + ) +``` +::: + +## Specify scale expansion + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression5 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01 + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) +``` +::: + +## Set overall plot theme + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression6 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01 + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) + + theme_minimal_grid() # from cowplot +``` +::: + +## Align y axis labels to grid lines + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression7 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01 + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) + + theme_minimal_grid() + + theme( + axis.text.y = element_text(vjust = 0) + ) +``` +::: + +## Change fill color from default gray to blue + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression8 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01, + fill = "#7DCCFF" + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) + + theme_minimal_grid() + + theme( + axis.text.y = element_text(vjust = 0) + ) +``` +::: + +## Draw lines in white instead of black + +::: {.tiny-font} +```{r} +#| label: lincoln-ridgeline-progression9 +#| echo: true +#| fig-cap: " " +#| out-width: "100%" +#| output-location: column +ggplot(lincoln_temps) + + aes(x = mean_temp, y = month_long) + + geom_density_ridges( + scale = 3, bandwidth = 3.4, + rel_min_height = 0.01, + fill = "#7DCCFF", + color = "white" + ) + + scale_x_continuous( + name = "mean temperature (°F)", + expand = c(0, 0) + ) + + scale_y_discrete( + name = NULL, + expand = expansion(add = c(0.2, 2.6)) + ) + + theme_minimal_grid() + + theme( + axis.text.y = element_text(vjust = 0) + ) +``` +::: + + + # Working with ggplot themes --- @@ -53,6 +341,202 @@ ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + ``` ::: +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes2 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_gray() +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes3 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_gray(14) # most themes take a font-size argument to scale text size +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes4 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_bw(14) +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes5 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_minimal(14) +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes6 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_classic(14) +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes7 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_half_open() # from package cowplot +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes8 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_minimal_grid() # from package cowplot +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes9 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_minimal_hgrid() # from package cowplot +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes10 +#| echo: true +#| fig-cap: " " +#| fig.width: 6 +#| out-width: "60%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_minimal_vgrid() # from package cowplot +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes11 +#| echo: true +#| fig-cap: " " +#| fig.width: 4.944 +#| fig.asp: 0.75 +#| out-width: "50%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_economist(14) # from package ggthemes +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes12 +#| echo: true +#| fig-cap: " " +#| fig.width: 4.944 +#| fig.asp: 0.75 +#| out-width: "50%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_economist(14) + # from package ggthemes + scale_color_economist() +``` +::: + +## Using ready-made themes + +::: {.small-font} +```{r} +#| label: penguins-complete-themes13 +#| echo: true +#| fig-cap: " " +#| fig.width: 4.944 +#| fig.asp: 0.75 +#| out-width: "50%" +#| fig-show: hold +ggplot(penguins, aes(flipper_length_mm, body_mass_g, color = species)) + + geom_point() + + theme_fivethirtyeight(14) + # from package ggthemes + scale_color_fivethirtyeight() +``` +::: ## Customizing theme elements