Guten Tag!

Many greetings from Ulm, Germany.

Last week we talked about how HTML and CSS can benefit R users in various packages. Today, we’re going to focus on the data visualization aspect of that.

And before we dive into our newsletter, let me remind you that all code can be found on GitHub. If you enjoy this newsletter, think about supporting my work financially with a coffee.

Recap from last week

Take a look at this image from last week where I have used {ggtext} to colorize the words in the title instead of using a legend.

The key steps were enabling HTML + CSS via element_markdown() in theme and using span-tags in the label. Take a look:

Notice that the span-tags use only style=”color: …;” and then used the Markdown notation for bold text inside the span-tags. In theory, I could have just used font-weight: 600; inside the style argument to achieve the same effect. In practice, {ggtext} cannot use all styles.

I focus on this because you can already do so much with just span-tags. Let’s have a look.

The power of span-tags

Take a look at this case study I have created in my {gt}-book. It is a recreation of a table Tanya Shapiro created with {ggplot2}.

Notice the little colored dots? They are indicators of how many weeks an author was in the NYT’s bestseller list. And the cool thing is, that these are just empty span-tags styled so that they have a background color and rounded corners.

So, let’s learn how to use them. For practice’s sake, you can just take the following code chunks and render them in a Quarto document. This let’s you play around with HTML and CSS.

<span style="
  font-weight:bold;
  color:blue;">
This text is bold and blue.
</span>

<span style="
  background-color: darkblue;
  color:white;">
This text is white with blue background
</span>

Usually, you wouldn’t indent the style tags like this. But I do this anyway so that you can follow along better. In any case, here is the output from the rendered Quarto doc.

I think this code is kind of self-explanatory, so I will just skip to the more advanced examples.

<span style="
  background-color: darkblue;
  color:white;
  padding: 5px;
  border-radius: 10px;">
This background now has rounded corners and the text a little bit of room to breathe. 
</span>

Here we have added a little bit of padding to all sides (left, right, top, bottom), so that the background color does not wrap around the text as tightly as before. Also, we have increased the border-radius to get rounded corners.

One more thing: Don’t confuse padding with margin. Padding refers to the the space inside a tag to its borders and margin refers to the space between tags.

Next, let us create span-tags that are visible even when there is no content in them. This would look something like this:

The key ingredient to make this happen is to change the display-style, and fix height and width.

<span style="
  display: inline-block; 
  background-color: pink; 
  width: 1cm;
  height: 1cm;">
</span>
<span style="
  display: inline-block; 
  background-color: pink; 
  width: 1cm;
  height: 1cm;">
</span>

Next, we can combine this with our knowledge from before to create dots.

<span style="
  display: inline-block; 
  background-color: pink; 
  width: 1cm;
  height: 1cm;
  border-radius: 100%;
  border: black 1px solid;
  margin-left: 5px;">
</span>
<span style="
  display: inline-block; 
  background-color: pink; 
  width: 1cm;
  height: 1cm;
  border-radius: 100%;
  border: black 1px solid;
  margin-left: 5px;">
</span>

Notice that we have set the border-radius to 100% to go full circle. Also, we have added a little bit of margin on the left of each element and a black, solid border with one pixel width. Here’s how that looks.

Dot chart in {gt}

Now that you understand how I have created the dots in the NYT bestseller table. Let me show you one simple example how to apply them with {gt} to create a dot-plot column like this.

The trick to make this work is to create a variable circle that contains one of our previously created span-tags. Then, you can use rep() and paste(collapse = ‘‘) to repeat said circle multiple times in a single text variable.

Once you have thrown all of this into a tibble and passed this to {gt}, all that is left to do is to activate HTML/CSS for the column that contains the circles. This is done with fmt_markdown.

That’s a wrap. Hope you’ve enjoyed this week’s newsletter. If you want to reach out to me, just reply to this mail or find me on Twitter.

See you next week!
Albert 👋