class: center, middle, inverse, title-slide # Tables and Fonts ### Daniel Anderson ### Week 8, Class 1 --- layout: true <script> feather.replace() </script> <div class="slides-footer"> <span> <a class = "footer-icon-link" href = "https://github.com/uo-datasci-specialization/c2-dataviz-2021/raw/main/static/slides/w8p1.pdf"> <i class = "footer-icon" data-feather="download"></i> </a> <a class = "footer-icon-link" href = "https://dataviz-2021.netlify.app/slides/w8p1.html"> <i class = "footer-icon" data-feather="link"></i> </a> <a class = "footer-icon-link" href = "https://github.com/uo-datasci-specialization/c2-dataviz-2021"> <i class = "footer-icon" data-feather="github"></i> </a> </span> </div> <style type="text/css"> table { font-size: 1rem; } .rt-table { font-size: 0.5rem; } .rt-pagination { font-size: 0.5rem; } .rt-search { font-size: 0.5rem; } </style> --- class: inverse-blue # Data viz in the wild Sarah Donaldson Hyeonjin ### Anwesha & Ping on deck --- # Agenda * Tables with `gt` * Fonts with `showtext` and/or `extrafont` -- ### Learning objectives * Be comfortable with the basics of `gt` + create a table + format columns + create spanner heads + etc. * Understand how to use additional fonts (if you so choose) --- class: inverse-green background-image:url(https://github.com/rstudio/gt/raw/master/man/figures/logo.svg?sanitize=TRUE) background-size: contain --- # Overview * Pipe-oriented * Beautiful tables easy * Spanner heads/grouping used to be a total pain - not so anymore * Renders to HTML/PDF without even thinking about it -- Probably my favorite package for creating static tables, although [**kableExtra**](https://haozhu233.github.io/kableExtra/) is great too. My experience is that fewer people are generally familiar with [**gt**](https://gt.rstudio.com), which is why I cover it here. --- # Install ```r install.packages("gt") # or remotes::install_github("rstudio/gt") ``` --- # The hard part * Getting your data in the format you want a table in * Utilize your `pivot_*` skills regularly ```r library(fivethirtyeight) flying ``` ``` ## # A tibble: 1,040 x 27 ## respondent_id gender age height children_under_18 household_income ## <dbl> <chr> <ord> <ord> <lgl> <ord> ## 1 3436139758 <NA> <NA> <NA> NA <NA> ## 2 3434278696 Male 30-44 "6'3\"" TRUE <NA> ## 3 3434275578 Male 30-44 "5'8\"" FALSE $100,000 - $149,999 ## 4 3434268208 Male 30-44 "5'11\"" FALSE $0 - $24,999 ## 5 3434250245 Male 30-44 "5'7\"" FALSE $50,000 - $99,999 ## 6 3434245875 Male 30-44 "5'9\"" TRUE $25,000 - $49,999 ## # … with 1,034 more rows, and 21 more variables: education <ord>, ## # location <chr>, frequency <ord>, recline_frequency <ord>, ## # recline_obligation <lgl>, recline_rude <ord>, recline_eliminate <lgl>, ## # switch_seats_friends <ord>, switch_seats_family <ord>, ## # wake_up_bathroom <ord>, wake_up_walk <ord>, baby <ord>, ## # unruly_child <ord>, two_arm_rests <chr>, middle_arm_rest <chr>, ## # shade <chr>, unsold_seat <ord>, talk_stranger <ord>, get_up <ord>, ## # electronics <lgl>, smoked <lgl> ``` --- ```r flying %>% count(gender, age, recline_frequency) ``` ``` ## # A tibble: 53 x 4 ## gender age recline_frequency n ## <chr> <ord> <ord> <int> ## 1 Female 18-29 Never 24 ## 2 Female 18-29 Once in a while 36 ## 3 Female 18-29 About half the time 10 ## 4 Female 18-29 Usually 13 ## 5 Female 18-29 Always 10 ## 6 Female 18-29 <NA> 19 ## # … with 47 more rows ``` --- ```r smry <- flying %>% count(gender, age, recline_frequency) %>% drop_na(age,recline_frequency) %>% pivot_wider(names_from = "age", values_from = "n") smry ``` ``` ## # A tibble: 10 x 6 ## gender recline_frequency `18-29` `30-44` `45-60` `> 60` ## <chr> <ord> <int> <int> <int> <int> ## 1 Female Never 24 21 19 23 ## 2 Female Once in a while 36 25 30 36 ## 3 Female About half the time 10 22 18 17 ## 4 Female Usually 13 22 26 28 ## 5 Female Always 10 21 29 12 ## 6 Male Never 24 17 20 18 ## # … with 4 more rows ``` --- # Turn into table ```r library(gt) smry %>% gt() ``` -- ## Disclaimer: these all look slightly different on the slides --- class: middle
gender
recline_frequency
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Female
Once in a while
36
25
30
36
Female
About half the time
10
22
18
17
Female
Usually
13
22
26
28
Female
Always
10
21
29
12
Male
Never
24
17
20
18
Male
Once in a while
19
39
40
29
Male
About half the time
11
11
16
11
Male
Usually
14
30
15
27
Male
Always
11
14
21
14
--- ## Add gender as a grouping variable ```r smry %>% * group_by(gender) %>% gt() ``` --- class: middle
recline_frequency
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Once in a while
36
25
30
36
About half the time
10
22
18
17
Usually
13
22
26
28
Always
10
21
29
12
Male
Never
24
17
20
18
Once in a while
19
39
40
29
About half the time
11
11
16
11
Usually
14
30
15
27
Always
11
14
21
14
-- This is an example of a table that looks better with the default CSS --- # Add a spanner head ```r smry %>% group_by(gender) %>% gt() %>% * tab_spanner( * label = "Age Range", * columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) * ) ``` --- class: middle
recline_frequency
Age Range
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Once in a while
36
25
30
36
About half the time
10
22
18
17
Usually
13
22
26
28
Always
10
21
29
12
Male
Never
24
17
20
18
Once in a while
19
39
40
29
About half the time
11
11
16
11
Usually
14
30
15
27
Always
11
14
21
14
--- # Change column names ```r smry %>% group_by(gender) %>% gt() %>% tab_spanner( label = "Age Range", columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) ) %>% * cols_label(recline_frequency = "Recline") ``` --- class: middle
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Once in a while
36
25
30
36
About half the time
10
22
18
17
Usually
13
22
26
28
Always
10
21
29
12
Male
Never
24
17
20
18
Once in a while
19
39
40
29
About half the time
11
11
16
11
Usually
14
30
15
27
Always
11
14
21
14
--- # Align columns ```r smry %>% group_by(gender) %>% gt() %>% tab_spanner( label = "Age Range", columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) ) %>% cols_label(recline_frequency = "Recline") %>% * cols_align(align = "left", * columns = vars(recline_frequency)) ``` -- They are already left-aligned because of the CSS, but that's not typical --- class: middle
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Once in a while
36
25
30
36
About half the time
10
22
18
17
Usually
13
22
26
28
Always
10
21
29
12
Male
Never
24
17
20
18
Once in a while
19
39
40
29
About half the time
11
11
16
11
Usually
14
30
15
27
Always
11
14
21
14
--- # Add a title ```r smry %>% group_by(gender) %>% gt() %>% tab_spanner( label = "Age Range", columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) ) %>% cols_label(recline_frequency = "Recline") %>% cols_align(align = "left", columns = vars(recline_frequency)) * tab_header( * title = "Airline Passengers", * subtitle = "Leg space is limited, what do you do?" * ) ``` --- class: middle
Airline Passengers
Leg space is limited, what do you do?
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24
21
19
23
Once in a while
36
25
30
36
About half the time
10
22
18
17
Usually
13
22
26
28
Always
10
21
29
12
Male
Never
24
17
20
18
Once in a while
19
39
40
29
About half the time
11
11
16
11
Usually
14
30
15
27
Always
11
14
21
14
--- # Format columns ```r smry %>% * mutate(across(c(`18-29`, `30-44`, `45-60`, `> 60`), * ~.x/100)) %>% group_by(gender) %>% gt() %>% tab_spanner( label = "Age Range", columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) ) %>% * fmt_percent( * vars(`18-29`, `30-44`, `45-60`, `> 60`), * decimals = 0 * ) %>% cols_label(recline_frequency = "Recline") %>% cols_align(align = "left", columns = vars(recline_frequency)) %>% tab_header( title = "Airline Passengers", subtitle = "Leg space is limited, what do you do?" ) ``` --- class: middle
Airline Passengers
Leg space is limited, what do you do?
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24%
21%
19%
23%
Once in a while
36%
25%
30%
36%
About half the time
10%
22%
18%
17%
Usually
13%
22%
26%
28%
Always
10%
21%
29%
12%
Male
Never
24%
17%
20%
18%
Once in a while
19%
39%
40%
29%
About half the time
11%
11%
16%
11%
Usually
14%
30%
15%
27%
Always
11%
14%
21%
14%
--- # Add a source note ```r smry %>% * mutate(across(c(`18-29`, `30-44`, `45-60`, `> 60`), * ~.x/100)) %>% group_by(gender) %>% gt() %>% tab_spanner( label = "Age Range", columns = vars(`18-29`, `30-44`, `45-60`, `> 60`) ) %>% * fmt_percent( * vars(`18-29`, `30-44`, `45-60`, `> 60`), * decimals = 0 * ) %>% cols_label(recline_frequency = "Recline") %>% cols_align(align = "left", columns = vars(recline_frequency)) %>% tab_header( title = "Airline Passengers", subtitle = "Leg space is limited, what do you do?" ) %>% * tab_source_note( * source_note = md("Data from [fivethirtyeight](https://fivethirtyeight.com/features/airplane-etiquette-recline-seat/)") * ) ``` --- class: middle
Airline Passengers
Leg space is limited, what do you do?
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24%
21%
19%
23%
Once in a while
36%
25%
30%
36%
About half the time
10%
22%
18%
17%
Usually
13%
22%
26%
28%
Always
10%
21%
29%
12%
Male
Never
24%
17%
20%
18%
Once in a while
19%
39%
40%
29%
About half the time
11%
11%
16%
11%
Usually
14%
30%
15%
27%
Always
11%
14%
21%
14%
Data from
fivethirtyeight
--- # Color cells ```r ... %>% data_color( vars(`18-29`, `30-44`, `45-60`, `> 60`), colors = scales::col_numeric( palette = c("#FFFFFF", "#FF0000"), domain = NULL ) ) %>% ... ``` --- class: middle
Airline Passengers
Leg space is limited, what do you do?
Recline
Age Range
18-29
30-44
45-60
> 60
Female
Never
24%
21%
19%
23%
Once in a while
36%
25%
30%
36%
About half the time
10%
22%
18%
17%
Usually
13%
22%
26%
28%
Always
10%
21%
29%
12%
Male
Never
24%
17%
20%
18%
Once in a while
19%
39%
40%
29%
About half the time
11%
11%
16%
11%
Usually
14%
30%
15%
27%
Always
11%
14%
21%
14%
Data from
fivethirtyeight
--- # What else? * Lots more it can do, and lots more in development * See the [website](https://gt.rstudio.com) -- [Thomas Mock](https://twitter.com/thomas_mock) does a lot of great work with tables and often has tutorials showing your how to go further (e.g., see [here](https://themockup.blog/posts/2020-10-31-embedding-custom-features-in-gt-tables/) and [here](https://themockup.blog/posts/2020-09-26-functions-and-themes-for-gt-tables/) and [here](https://themockup.blog/posts/2020-09-04-10-table-rules-in-r/)). --- class: inverse-red center middle # A few other table options --- # kableExtra ### A few quick examples Make sure to specify `results = "asis"` in your chunk options. .pull-left[ ```r library(knitr) library(kableExtra) dt <- mtcars[1:5, 1:6] kable(dt) %>% kable_styling("striped") %>% column_spec(5:7, bold = TRUE) ``` ] .pull-right[ <table class="table table-striped" style="margin-left: auto; margin-right: auto;"> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:right;"> mpg </th> <th style="text-align:right;"> cyl </th> <th style="text-align:right;"> disp </th> <th style="text-align:right;"> hp </th> <th style="text-align:right;"> drat </th> <th style="text-align:right;"> wt </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> Mazda RX4 </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;font-weight: bold;"> 110 </td> <td style="text-align:right;font-weight: bold;"> 3.90 </td> <td style="text-align:right;font-weight: bold;"> 2.62 </td> </tr> <tr> <td style="text-align:left;"> Mazda RX4 Wag </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;font-weight: bold;"> 110 </td> <td style="text-align:right;font-weight: bold;"> 3.90 </td> <td style="text-align:right;font-weight: bold;"> 2.88 </td> </tr> <tr> <td style="text-align:left;"> Datsun 710 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108 </td> <td style="text-align:right;font-weight: bold;"> 93 </td> <td style="text-align:right;font-weight: bold;"> 3.85 </td> <td style="text-align:right;font-weight: bold;"> 2.32 </td> </tr> <tr> <td style="text-align:left;"> Hornet 4 Drive </td> <td style="text-align:right;"> 21.4 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 258 </td> <td style="text-align:right;font-weight: bold;"> 110 </td> <td style="text-align:right;font-weight: bold;"> 3.08 </td> <td style="text-align:right;font-weight: bold;"> 3.21 </td> </tr> <tr> <td style="text-align:left;"> Hornet Sportabout </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360 </td> <td style="text-align:right;font-weight: bold;"> 175 </td> <td style="text-align:right;font-weight: bold;"> 3.15 </td> <td style="text-align:right;font-weight: bold;"> 3.44 </td> </tr> </tbody> </table> ] --- ```r kable(dt) %>% kable_styling("striped") %>% column_spec(5:7, bold = TRUE) %>% row_spec(c(2, 4), bold = TRUE, color = "#EFF3F7", background = "#71B0DE") ``` <table class="table table-striped" style="margin-left: auto; margin-right: auto;"> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:right;"> mpg </th> <th style="text-align:right;"> cyl </th> <th style="text-align:right;"> disp </th> <th style="text-align:right;"> hp </th> <th style="text-align:right;"> drat </th> <th style="text-align:right;"> wt </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> Mazda RX4 </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;font-weight: bold;"> 110 </td> <td style="text-align:right;font-weight: bold;"> 3.90 </td> <td style="text-align:right;font-weight: bold;"> 2.62 </td> </tr> <tr> <td style="text-align:left;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> Mazda RX4 Wag </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 21.0 </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 6 </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 160 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 110 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 3.90 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 2.88 </td> </tr> <tr> <td style="text-align:left;"> Datsun 710 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108 </td> <td style="text-align:right;font-weight: bold;"> 93 </td> <td style="text-align:right;font-weight: bold;"> 3.85 </td> <td style="text-align:right;font-weight: bold;"> 2.32 </td> </tr> <tr> <td style="text-align:left;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> Hornet 4 Drive </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 21.4 </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 6 </td> <td style="text-align:right;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 258 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 110 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 3.08 </td> <td style="text-align:right;font-weight: bold;font-weight: bold;color: #EFF3F7 !important;background-color: #71B0DE !important;"> 3.21 </td> </tr> <tr> <td style="text-align:left;"> Hornet Sportabout </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360 </td> <td style="text-align:right;font-weight: bold;"> 175 </td> <td style="text-align:right;font-weight: bold;"> 3.15 </td> <td style="text-align:right;font-weight: bold;"> 3.44 </td> </tr> </tbody> </table> --- ```r kable(dt) %>% kable_styling("striped", full_width = FALSE) %>% pack_rows( "Group 1", 1, 3, label_row_css = "background-color: #666; color: #fff;" ) %>% pack_rows( "Group 2", 4, 5, label_row_css = "background-color: #666; color: #fff;") ``` <table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;"> <thead> <tr> <th style="text-align:left;"> </th> <th style="text-align:right;"> mpg </th> <th style="text-align:right;"> cyl </th> <th style="text-align:right;"> disp </th> <th style="text-align:right;"> hp </th> <th style="text-align:right;"> drat </th> <th style="text-align:right;"> wt </th> </tr> </thead> <tbody> <tr grouplength="3"><td colspan="7" style="background-color: #666; color: #fff;"><strong>Group 1</strong></td></tr> <tr> <td style="text-align:left;padding-left: 2em;" indentlevel="1"> Mazda RX4 </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;"> 3.90 </td> <td style="text-align:right;"> 2.62 </td> </tr> <tr> <td style="text-align:left;padding-left: 2em;" indentlevel="1"> Mazda RX4 Wag </td> <td style="text-align:right;"> 21.0 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 160 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;"> 3.90 </td> <td style="text-align:right;"> 2.88 </td> </tr> <tr> <td style="text-align:left;padding-left: 2em;" indentlevel="1"> Datsun 710 </td> <td style="text-align:right;"> 22.8 </td> <td style="text-align:right;"> 4 </td> <td style="text-align:right;"> 108 </td> <td style="text-align:right;"> 93 </td> <td style="text-align:right;"> 3.85 </td> <td style="text-align:right;"> 2.32 </td> </tr> <tr grouplength="2"><td colspan="7" style="background-color: #666; color: #fff;"><strong>Group 2</strong></td></tr> <tr> <td style="text-align:left;padding-left: 2em;" indentlevel="1"> Hornet 4 Drive </td> <td style="text-align:right;"> 21.4 </td> <td style="text-align:right;"> 6 </td> <td style="text-align:right;"> 258 </td> <td style="text-align:right;"> 110 </td> <td style="text-align:right;"> 3.08 </td> <td style="text-align:right;"> 3.21 </td> </tr> <tr> <td style="text-align:left;padding-left: 2em;" indentlevel="1"> Hornet Sportabout </td> <td style="text-align:right;"> 18.7 </td> <td style="text-align:right;"> 8 </td> <td style="text-align:right;"> 360 </td> <td style="text-align:right;"> 175 </td> <td style="text-align:right;"> 3.15 </td> <td style="text-align:right;"> 3.44 </td> </tr> </tbody> </table> --- # KableExtra wrapup Many other options, please see the documentation. Works well for PDF and HTML. -- What about Microsoft Word? --- # flextable [![](img/flextable.png)](https://davidgohel.github.io/flextable/index.html) --- # Many others * [huxtable](https://hughjonesd.github.io/huxtable/) * [formattable](https://renkun-ken.github.io/formattable/) * [DT](https://rstudio.github.io/DT/) (my former favorite for [shiny](https://shiny.rstudio.com)) * [rhandsontable](https://jrowen.github.io/rhandsontable/) -- ### Particularly helpful for modeling * [stargazer](https://www.jakeruss.com/cheatsheets/stargazer/) * [pixiedust](https://github.com/nutterb/pixiedust) * [modelsummary](https://github.com/vincentarelbundock/modelsummary) -- ### For descriptives * [gtsummary](https://github.com/ddsjoberg/gtsummary) --- class: inverse-red middle # reactable My favorite for interactive tables --- [![](img/reactable.png)](https://glin.github.io/reactable/index.html) Works great with [**shiny**](https://shiny.rstudio.com) too --- # Penguins data ```r library(palmerpenguins) library(reactable) reactable(penguins) ```
--- # Rename columns ```r penguins %>% reactable( columns = list( bill_length_mm = colDef(name = "Bill Length (mm)"), bill_depth_mm = colDef(name = "Bill Depth (mm)") ) ) ``` ---
--- # Or use a function ```r library(stringr) penguins %>% reactable( defaultColDef = colDef( header = function(x) str_to_title(gsub("_", " ", x)) ) ) ``` ---
--- # Add filter ```r reactable(penguins, filterable = TRUE) ```
--- # Searchable ```r reactable(penguins, searchable = TRUE) ```
--- # Pagination ```r reactable(penguins, defaultPageSize = 3) ```
--- # Page jump ```r reactable(penguins, defaultPageSize = 3, paginationType = "jump") ```
--- # Grouping ```r reactable(penguins, groupBy = c("species", "island")) ```
--- # Aggregate ```r penguins %>% reactable( groupBy = c("species", "island"), columns = list( bill_length_mm = colDef(aggregate = "mean", format = colFormat(digits = 2)) ) ) ```
--- # Sparklines ```r library(sparkline) table_data <- penguins %>% group_by(species) %>% summarize(bill_length = list(bill_length_mm)) %>% mutate(boxplot = NA, sparkline = NA) table_data ``` ``` ## # A tibble: 3 x 4 ## species bill_length boxplot sparkline ## * <fct> <list> <lgl> <lgl> ## 1 Adelie <dbl [152]> NA NA ## 2 Chinstrap <dbl [68]> NA NA ## 3 Gentoo <dbl [124]> NA NA ``` --- ```r table_data %>% reactable( columns = list( bill_length = colDef(cell = function(value) { sparkline(value, type = "bar") }), boxplot = colDef(cell = function(value, index) { sparkline(table_data$bill_length[[index]], type = "box") }), sparkline = colDef(cell = function(value, index) { sparkline(table_data$bill_length[[index]]) }) ) ) ``` ---
--- # Lots more! Idea of today is not to teach you everything, but to give you an idea of what's possible. Check out the [documentation]() for more information. --- class:inverse-blue center middle # Fonts --- # General advice * Use different fonts to distinguish things + Specifically code + Consider different fonts for different heading levels, and/or to distinguish headers from the body * .bolder[Always] choose a sans-serif font for code * Explore and try - it makes a big impact on the overall look/feel (bigger than you may expect if you haven't played with fonts much before) * Try not to get sucked into too deep of a rabbit hole --- # {ragg} *Brand* new pacakge - just learning about it myself. Alternative device to Cairo, png, etc. See the announcement [here](https://www.tidyverse.org/blog/2021/02/modern-text-features/) After install, be sure to set *Global Options > General > Graphics* to *AGG* Use with RMarkdown with `knitr::opts_chunk$set(dev = "ragg_png")` Will automatically detect fonts you have installed on your computer --- ```r ggplot(mtcars, aes(wt, mpg)) + geom_point() + labs(title = "Fuel Efficiency of 32 Cars", x = "Weight (x1000 lb)", y = "Miles per Gallon") + * theme(text = element_text(family = "Luminari", size = 30)) ``` ![](w8p1_files/figure-html/extrafont-plot-1.png)<!-- --> --- # Support for lots of things! Ligatures and font-awesome icons ```r library(ragg) ggplot() + geom_text( aes(x = 0, y = 2, label = "x <- y != z"), family = "Fira Code" ) + labs(title = "twitter") + theme(plot.title = element_text( family = "Font Awesome 5 brands" ) ) ``` --- ![](w8p1_files/figure-html/unnamed-chunk-20-1.png)<!-- --> --- # emojis ```r ggplot(mtcars, aes(disp, mpg)) + geom_text(label = "🎉", family = "Apple Color Emoji", size = 10) ``` ![](w8p1_files/figure-html/unnamed-chunk-21-1.png)<!-- --> --- # Google fonts https://fonts.google.com * Open source, designed for the web * Good place to explore fonts * Can be incorporated via the `{showtext}` package! --- # {showtext} example ```r devtools::install_github("yixuan/showtext") library(showtext) font_add_google('Monsieur La Doulaise', "mld") font_add_google('Special Elite', "se") showtext_auto() quartz() ggplot(mtcars, aes(disp, mpg)) + geom_point() + labs(title = "An amazing title", subtitle = "with the world's most boring dataset") + * theme(plot.subtitle = element_text(size = 18, family = "se"), * plot.title = element_text(size = 22, family = "mld"), * axis.title = element_text(size = 18, family = "mld"), * axis.text.x = element_text(size = 12, family = "se"), * axis.text.y = element_text(size = 12, family = "se")) ``` --- background-image:url("w8p1_files/figure-html/font-change.png") background-size: contain --- class: inverse-blue center middle # Why fonts matter ### A few examples of epic fails h/t [Will Chase](https://twitter.com/W_R_Chase) --- # Megaflicks .center[ ![](https://pbs.twimg.com/media/CGwg2F3XIAAQpRA?format=jpg&name=small) ] --- background-image: url(https://i.redd.it/38jjcgaqu1g11.jpg) --- background-image: url(img/always-mine.png) --- # Quick aside ### Change the font of your R Markdown! Create a CSS code chunk - write tiny bit of CSS - voila! ```css @import url('https://fonts.googleapis.com/css?family=Akronim&display=swap'); body { font-family: 'Akronim', cursive; } ``` --- # Render! ![](img/font-change-rmd.png) --- # Aside I actually did this for these slides to make the tables a bit smaller! ![](img/css-chunk.png) --- # Resource for learning more * I'm not an expert on fonts. I have mostly just picked what looks nice to me. -- .center[ <img src="https://www.exopermaculture.com/wp-content/uploads/2013/01/alice-falling-down-rabbit-hole1.jpeg" width="475px" /> ] --- Best I've heard of is [practical typography](https://practicaltypography.com) ![](img/practical-typography.png) --- # Identify fonts Use others work to help you - I found the font for these slides from a different theme that I liked. Use google chrome's developer tools to help! --- class: inverse-green middle # Next time ## Create your own blog!