Dynamic annotations: 10 tips for better text

Shiny in Production 2023 Keynote | Ten tips for better text in dataviz, using data from the Great British Bake Off

Text is an integral part of our visualisations. This talk explores tips from the worlds of visual perception, design, and typography, to make text our dataviz text more engaging.

Here they are:

• Decrease reliance on text
• Add text hierarchy
• Reduce unnecessary eye movement
• Declutter, declutter, declutter
• Tie your text to the data
• Don’t neglect your tables!
• Signpost additional information
• Manipulate text in tibbles
• Optimise text functionality
• Give everything space to breathe

Recording

Slides

Final table code

reactable(tidied_data,
          theme = reactableTheme(
            color = "#200000",
            headerStyle = list(fontWeight = "bold",
                               color = "#4C3232",
                               fontSize = "11pt"),
            style = list(fontFamily = "Cabin",
                         fontSize = "10pt"),
            highlightColor = "#f9f9f7",
            borderColor = "#E5E2E1",
          ),
          columns = list(
            series = colDef(name = "Series", 
                            align = "center",
                            maxWidth = 100,
                            minWidth = 100),
            episode = colDef(name = "Episode",
                             align = "center",
                             maxWidth = 100,
                             minWidth = 100),
            star_baker = colDef(name = "Star baker"),
            technical_bake = colDef(name = "Technical challenge",
                                    style = list(whiteSpace = "nowrap"),
                                    maxWidth = 375,
                                    minWidth = 375),
            uk_airdate = colDef(name = "UK air date",
                                format = colFormat(date = TRUE, locales = "en-GB"),
                                style = list(fontFamily = "Ubuntu Mono"),
                                maxWidth = 100,
                                minWidth = 100),
            viewers_7day = colDef(name = "Viewers within 7 days",
                                  minWidth = 150,
                                  align =  "left",
                                  cell = reactablefmtr::data_bars(tidied_data,
                                                                  text_color = "#200000",
                                                                  fill_color_ref = "fill_colour", 
                                                                  text_position = "outside-end",
                                                                  background = "#E9E6E5",
                                                                  number_fmt = function(x) grkmisc::pretty_num(x))),
            hosts = colDef(name = "Hosts",
                           maxWidth = 100,
                           minWidth = 100, 
                           show = FALSE),
            fill_colour = colDef(show = FALSE)
          ),
          highlight = TRUE
)

Reuse

Citation

For attribution, please cite this work as:

Thompson, Cara. 2023. “Dynamic Annotations: 10 Tips for Better Text.” October 13, 2023. https://www.cararthompson.com/talks/shiny-dynamic-annotations.