How to Build a Brain-Friendly Bar Chart in R

I’m a sucker for a tactical blog post, and I’m a sucker for solid data visualization advice. As such, I was double-suckered by Lea Pica’s recent post on the Search Discovery blog: How to Build a Brain-Friendly Bar Chart in Domo. The end result of her chart makeover was this:

 
For giggles, I thought it would be illuminating to start in the exact same spot – with the default – and then build to the exact same result… but using R. Our stakeholders never care what tool was used to build a visualization, so, in my mind, any visualization platform worth its salt can build exactly what I want it to. And, WWLD (What Would Lea Do) is a pretty solid best practice.

I didn’t nail it, but I came pretty close (and we’ll get to some rationalization as to the lingering differences at the end of this exercise):

With luck, this will illustrate both “the basics” of visualization with ggplot2, as well as some of the hoops that have to be jumped through – and where those hoops are located – to tweak the visuals. I’ll try to also call out the things that are very much one-time operations, as this will undoubtedly seem pretty brutal if every chart required every one of these steps.

The Data

We’ll start with the raw data (I’ll need this loaded into the file I’m building this with, anyway, so might as well show it to you!). I’ve created a simple data frame called channel_data with the following values:

Marketing.Channel	Sales
Social Media	67
Display	180
Email	648
Organic Search	937
Paid Search	1305

Already, we can spot two things that may require tweaking in our final plot:

• The “.” in the column heading; we’re working with code, and we don’t really want spaces floating around until the very last minute (the underlying data actually does have a space in it, but that gets converted to “.” when outputting here). We’re not going to worry about that (for now; we’ll get there!).
• There are no comma-delimiters in the numbers! Again, that’s because this data is “just the data” – there is no formatting. I certainly could force the output above to have commas, but, like spaces, those are something we’ll worry about later – even if I showed these with commas in the table, I’d still have to do the same thing in my final chart.

As it turns out (see Lea’s final chart) we won’t actually need to get the “.” removed. But we will have to deal with adding comma delimiters!

The Default Chart

Lea started with the default Domo bar chart:

 
That’s where we’ll start with R, too. Below is the bare-bones ggplot2 code and the resulting output:

# Normally, the entire expression below would be assigned to an object, but we're
# going bare bones here.
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
         geom_bar(stat = "identity") +
         coord_flip()

EEK!

For whatever reason, this is the “default.” Almost no one will want this to be the final product (obviously). This is actually because this basic treatment is the default for all possible visualizations with ggplot(), and there are some cases where things like horizontal and vertical grids would make sense. But, I’m not going to defend it.

And, while this post is not meant to be a full-blown tutorial on building data visualizations with ggplot2, it seemed worthwile to at least provide a quick breakdown of this initial plot:

---

ggplot(channel_data, aes(x = Marketing.Channel, y = Sales))

This is always the first call, as it is the call to the ggplot() function. Everthing else after that is just “adding” to that base call. The two arguments in this function:

• data = channel_data – this is really just the overall data set to be used; it could have a bunch of other stuff that never gets plotted, but it’s the set or superset of data to be visualized
• mapping = aes(x = Marketing.Channel, y = Sales) – this is one of the most confusing aspects of ggplot2. It’s the mapping of which values in the data to use for what aspects of the plot…by default. The aes() is for “aesthetic,” which is a horribly misleading descriptor of what this is. I’m not going to go into any more detail here, other than to say that, if you’re wondering why the y is set to Sales, when that’s actually the value on the x axis, then read on – it should become clear when you get to coord_flip() in a couple of paragraphs. Mainly, just know that these “mappings” can be used multiple times in a single visualization. We’ll start to see how this works as we get farther along.

---

geom_bar(stat = "identity")

The ggplot() function doesn’t actually say how to visualize anything. We have to add one or more “geoms” in order to do that. We’ll be adding a few more by the time we’re done. In this case, we’re doing a bar chart (we use the same geom_bar() regardless of whether it’s horizontal or vertical). And, since the data is already aggregated (as opposed to having a data set where each row is an order with an associated channel and sales amount), we have to use the stat = "identity" argument. That’s confusing, too… although it becomes second nature pretty quickly.

---

coord_flip()

Did you catch how I said we’d use geom_bar() for both horizontal and vertical bar charts? Well, the default is that it’s a vertical bar chart, so we have to add an instruction to “flip the coordinates” to make it horizontal. And, that’s why our “aesthetic” seemed to be backwards – specifying Sales for y and Marketing.Channel for x, even though they’re the opposite of that in the actual chart.

Domo starts out wayyyyyy ahead of this default, no doubt!

Enter…Themes!

The first thing we want to do is get the ickiness of the gray background and gridlines and tickmarks and such stripped away. We’ll need to do more than that, but that will do a lot of the cleanup for us. Themes are like CSS in HTML – not only do they provide a ton of control over the look and feel of the visualization, but they actually “cascade” in a way: if you set one attribute of a theme in one place, you can easily override it later as the visualization is being built.

There are some default themes that are part of the ggplot2 package. So, let’s start by looking at our plot using theme_light(). All we have to do is “add” the theme to the plot that we’re building up.

ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  theme_light()   # Add a theme

Hmmmm. We still have gridlines and ticks and a border and axis labels. So, we actually need to “add” some overrides to that theme. This is where things start to look a bit cumbersome, but we’ll cover the reusability of these shortly.

ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  theme_light() +
  # Tweak the theme a bit with additional theme() settings
  theme(panel.grid = element_blank(),
        panel.border = element_blank(),
        axis.title = element_blank(),
        axis.ticks = element_blank(),
        axis.text.x = element_blank())

It’s getting better! Hopefully, most of those theme() arguments are fairly self-explanatory. In most cases, we were removing both the x and y aspects of the plot, but, for the axis text, we only wanted to remove the x-axis text, so we specified a .x for axis.text.

But, one other change we want to do with the theme: let’s change the font (for all theme-controlled elements) and adjust the text size and color for the y-axis text. We’ll define the font family as a text argument (so it will apply to all text-based elements in the theme, unless overridden), and then specify the size and color for axis.text.y:

ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  theme_light() +
  theme(text = element_text(family = "Open Sans"),               # DOMO APPEARS TO USE 'OPEN SANS'
        panel.grid = element_blank(),
        panel.border = element_blank(),
        axis.title = element_blank(),
        axis.ticks = element_blank(),
        axis.text.x = element_blank(),
        axis.text.y = element_text(size = 9, color = "gray10"))  # SET THE AXIS TEXT SIZE AND COLOR

Voila! We’re getting closer. Now, before we reveal that we’re going to double the length of this code to actually get to our final result, it’s worth a quick little diversion on themes.

First off, just like saving a chart style in Excel (but more powerful, actually), you can define an entire theme as a centralized function – in the code, in a separate file that gets referenced, or even in a package you build that you distribute to others in your organization. I’m going to just set this theme as its own function right above my plot for now. The output will be identical, but, hopefully, you’ll see how you can then reuse that same theme time and again. And, we’re going to have some other fun with it, too.

my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  my_theme()

So, now, imagine that you were doing multiple plots. Each one of them could simply include a call to my_theme() – even if they are not horizontal bar charts! – and get the same styling. And, if you tweak the definition in just that one function and rebuild your charts, the change will be reflected in all of them (remember how I said themes are like CSS?)!

And (and this is handy), remember that we can still override specific aspects of the chart. If, for instance, I wanted just one instance of the chart to have bold, red, larger text for the axis text (which would be silly), I could keep my function the same, but then add that override:

my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  my_theme() +
  theme(axis.text.y = element_text(size = 13, color = "red", face = "bold"))   # THE 'OVERRIDE' LINE

That’s yucky, so we won’t keep that, but, hopefully, you get the idea. I’m also using base colors here, but I could also use RGB hex colors or defined palettes.

If you happen to be a Stephen Few, Edward Tufte, or FiveThirtyEight.com junky, you can actually install the ggthemes package and get predefined themes – put to use just like I used my_theme() here – to match their specific styles. That is cool!

I’m digressing. It’s what I do.

Let’s get back on track to the chart improvements we needed to make.

Get the Text Closer to the Axis

The text is so far from the axis not because it’s the default spacing, but, rather, by default, the x-axis and y-axis don’t cross at zero. So, we have do a little goofiness to make that happen (I don’t have to keep repeating the theme definition, but I want each block to show the “full set of code needed”):

my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  scale_y_continuous(expand = c(0, 0)) +  # Set the axes to cross at 0
my_theme()

How about lightening up that gray (we could also turn it to a neutral blue, but Lea proposed gray with blue to highlight, so that’s what we’re going to go with)? This isn’t something we do in the theme because we could have multiple geoms in play (and we will be adding some!), and the theme is universally applied. So, rather, we need to define that at the geom level. We would define that inside the aesthetic if we actually had multiple data series and we wanted each series to be a different color. That’s actually one way to do something we’re going to do later (but it’s not how we’re going to do it). But, for now, we can just do that as its own argument in geom_bar(). While we’re at it, let’s increase the space between the bars a bit.

my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity", 
           fill = "gray90",     # ADD THE FILL COLOR
           width = 0.75) +      # ADJUST THE BAR WIDTH
  coord_flip() +
  scale_y_continuous(expand = c(0, 0)) +
my_theme()

Neat, huh?

Add Data Labels

Since we removed our x-axis, we have no sense of scale! We need to add labels onto the chart. This is where ggplot really diverges from Excel or Domo or Tableau. We don’t just say “show labels.” Rather, we use a different geom that we “add” to the plot. We use geom_text(), which requires three mapping (“aesthetic”) values:

• The x value – this matches what we used for geom_bar() and what we’d set as the default in the ggplot() function!
• The y value (where to place the text) – OMG! This matches the default, too!
• The actual text to display – Uh-oh. We haven’t defined that yet. But…we just want to display the value of y.

Let’s do the basics and then work on the fine-tuning.

my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(channel_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = Sales)) +  # x AND y INHERITED. WE JUST NEED TO SPECIFY "label"
  coord_flip() +
  scale_y_continuous(expand = c(0, 0)) +
my_theme()

Oh, boy. That’s the basic label, but, clearly, it has some problems:

• The largest value is truncated
• The values are centered on the end
• There’s no comma in the (truncated) value
• There’s no percentage
• The font isn’t right

These are all solvable! But, this initial pass was a good place to start, because, if you understand how we got to this, then you’ve got a great grasp on how ggplot() and geoms and aes() mappings work!

Where to begin? Ultimately, we want our labels to display cleanly, so let’s start by getting the complete labels. For this, we’re actually going to go back to our data set and add a column with labels that are both the properly formatted number and have the percentage. This will be a minor digression where I’m not actually going to re-draw the plot.

What we want to do is calculate the “percent of total” for each row in our data frame, and then combine that with the actual value. This gets into dplyr-land, so I’m not going to describe too much of what is going on exactly. At this point, we’re starting to add to our data, which I could do to the original channel_data data frame. But, it’s a small data frame, so I’m going to copy it to a new one that I start munging for the final tweaks to the plot. Lea’s chart goes to two decimal places (except for the 41.6%, which is 41.60%, so the zero gets dropped). I actually think this sort of chart is probably best served with no decimal places. But, since the exercise is to replicate… I’m going to split the difference and just go with a single decimal place (that’s what the "1.f%%" below does):

final_data <- channel_data %>% 
  # Calculate -- and format -- the percentage for each channel
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  # Combine that percentage with the actual value
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  # Remove the "just the percentage" column
  select(-bar_percentage)
# Display the table
kable(final_data, align=c('l','r','r'))

Marketing.Channel	Sales	bar_label
Social Media	67	67, 2.1%
Display	180	180, 5.7%
Email	648	648, 20.7%
Organic Search	937	937, 29.9%
Paid Search	1305	1,305, 41.6%

Got it?

Now, thinking back to our geom_text() setup, we realize why we needed to have a y (position…which is really the x position in the final plot thanks to coord_flip()) that is different from label. We’re still going to have layout issues, but let’s make a subtle tweak to at least see more robust labels appearing. And, heck, why not go ahead and switch those to use Open Sans at the same time?

# Add in the supplemental data that we need
final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage)
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +  # Switched from `channel_data` to `final_data`
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),     # Changed this from `Sales` to `bar_label`
            family = "Open Sans",       # Specified a font
            size = 3.5) +               # Specified a font size
  coord_flip() +
  scale_y_continuous(expand = c(0, 0)) +
  my_theme()

We’re getting there!

But, of course, we want the labels outside the end of the bar. By default the text is centered. We want to change it to be left-justified, which we can do by adding hjust = 0 as an argument. hjust and vjust can be confusing, and, in different situations they are / are not recommended. In its simplest application (like here) hjust gets set between 0 and 1, where 0 is left-justified and 1 is right-justified. But, you’re not constrained to setting a value between 0 and 1, which can deliver surprising (but sometimes desired) results. You can also “nudge” text, which provides a lot of control over the layout. but, we don’t need to do that here.

# Add in the supplemental data that we need
final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage)
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +  # Switched from `channel_data` to `final_data`
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),
            family = "Open Sans",
            size = 3.5,                 
            hjust = 0) +        # Change the "horizontal justification" to be left-justified
  coord_flip() +
  scale_y_continuous(expand = c(0, 0)) +
  my_theme()

Now, we’ve got that pesky clipping to deal with. Frankly, ggplot2 starts to get annoying at this point. There are various ways to address this. One option is to use hjust = "inward" instead of hjust = 0, which would put the labels for the longer bars on the inside of the bars. But, if we want them all to be on the outside, there are various clunky approaches. The one used below is to just make the (hidden) x-axis 30% longer than the maximum value to “make room” for the label.

# Add in the supplemental data that we need
final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage)
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),
            family = "Open Sans",
            size = 3.5,                 
            hjust = 0) + 
  coord_flip() +
  scale_y_continuous(expand = c(0, 0),
                     limits = c(0, max(final_data$Sales) * 1.3)) +  # Make the x-axis 30% longer than the max
  my_theme()

The spacing of the Paid Search label is kind of cramped, isn’t it? It’s easy to head down into a rabbit hole trying to figure out how to address this (without whacking the other labels). That can definitely happen with R data visualizations – there is enormous control… except when there is something that seems like it should be simple, and it’s not. I’m going to say we can live with this spacing glitch and move on.

Add Some Color

What’s next? Let’s go ahead and finish the chart area by highlighting the Paid Search bar. Or, let’s say we want to highlight the largest bar (both would be done the same way with the same bit of code tweaking). Just as with adding labels, this is where the “grammar of graphics” (which ggplot2 is built on) really diverges from other platforms conceptually. To highlight one bar, we actually want to put another geom_bar() on top of the initial one. This new plot will have the actual value of the largest bar, and will then be 0 (or could be NA) for the other channels. That means we need to add a new column to our data:

final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage) %>%
  mutate(highlight_bar = ifelse(Sales == max(.$Sales), Sales, 0))  # Add a new column
# Quick look at the updated data
kable(final_data, align = c("l", "r", "r", "r"))

Marketing.Channel	Sales	bar_label	highlight_bar
Social Media	67	67, 2.1%	0
Display	180	180, 5.7%	0
Email	648	648, 20.7%	0
Organic Search	937	937, 29.9%	0
Paid Search	1305	1,305, 41.6%	1305

# And now back to our usual plotting, but with an extra geom_bar()
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),
            family = "Open Sans",
            size = 3.5,                 
            hjust = 0) + 
  geom_bar(stat = "identity",                   # Additional geom_bar()
           mapping = aes(y = highlight_bar),    # Uses the highlight_bar data
           fill = "#90c4e4",                    # Hex color -- matching what Lea/Domo had
           width = 0.75) +
  coord_flip() +
  scale_y_continuous(expand = c(0, 0),
                     limits = c(0, max(final_data$Sales) * 1.3)) +  # Make the x-axis 30% longer than the max
  my_theme()

We’re getting closer!

Final Touches

That’s pretty close on the chart itself. But, what about the title? Lea’s post has a few different versions here, but I’m going to go for matching this one:

 
Let’s start by adding the title and subtitle. There are two aspects of this:

1. Specifying the content for those, which we do by adding ggtitle() to our plot (and, since the subtitle has a calculated value in it, we do a little work to figure out what that is – I actually like this, because it shows much more flexibility as to what can be dynamically put in a title than, say, Excel provides).

2. Defining the theme for the title and subtitle.

In addition to making those additions, let’s also add some white space to the left of the plot using plot.margin in the theme:

# Munge the data
final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage) %>%
  mutate(highlight_bar = ifelse(Sales == max(.$Sales), Sales, 0))
# Define the theme
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          plot.title = element_text(size = 13, color = "gray30"),   # Set up the title style
          plot.subtitle = element_text(size = 11, color = "black"), # Set up the subtitle style
          plot.margin = unit(c(0.5,0,0,2.5), "cm"),                 # Add white space at the top and left
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
  }
# Calculate the total sales and make it nicely formatted. This could be embedded
# in the ggtitle() call, but it gets a little messy
total_sales <- paste0("Total Sales: ",
                      format(sum(final_data$Sales), big.mark = ","))
# Create the actual plot
ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +
  ggtitle("What Is Our Count of Sales per Marketing Channel?",  # Add the title and subtitle
          subtitle = total_sales) +                             # to the plot
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),
            family = "Open Sans",
            size = 3.5,                 
            hjust = 0) + 
  geom_bar(stat = "identity",
           mapping = aes(y = highlight_bar),
           fill = "#90c4e4",
           width = 0.75) +
  coord_flip() +
  scale_y_continuous(expand = c(0, 0),
                     limits = c(0, max(final_data$Sales) * 1.3)) +
  my_theme()

That’s close… except the title is aligned with the axis (and left-justified) rather than with the entire left of the plot. It’s actually something of a royal pain to fully left-justify the title. It involves using “grobs” which, in my experience to date, are every bit as hacky as the term connotes! But, if you want to explore that option, you can read about it here.

And, this isn’t showing the total sales as a BIG, BOLD number. That, too, could be done with some grobbing, but I actually am pretty happy with it how it is.

Add Interactivity!

Perhaps you’ve been thinking, “Well, that’s all well and good. But, in Domo, I’ve got a chart that has some interactivity! I can mouse over things (which is one reason, perhaps, that their default chart does not have labels displayed). All you’ve done is generate a static chart!”

As one of my favorite professors used to say: “Maybe so.”

It’s actually super easy to add interactivity to the chart we’ve been building. There are two steps to this:

• Eaaarrrrrly on, I said we would normally assign the actual ggplot() plot to an object and then just display the object. We actually need to do that now. Because…
• We’re going to use a package (of which there are several) that adds interactivity to ggplot() objects

# Munge the data
final_data <- channel_data %>% 
  mutate(bar_percentage = sprintf("%.1f%%", 100*(Sales / sum(.$Sales)))) %>% 
  mutate(bar_label = paste0(format(Sales, big.mark = ","), ", ", bar_percentage)) %>% 
  select(-bar_percentage) %>%
  mutate(highlight_bar = ifelse(Sales == max(.$Sales), Sales, 0))
# Define the theme
my_theme <- function(){
  theme_light() +
    theme(text = element_text(family = "Open Sans"),  
          plot.title = element_text(size = 13, color = "gray30"),   
          plot.subtitle = element_text(size = 11, color = "black"),
          plot.margin = unit(c(0.5,0,0,2.5), "cm"),
          panel.grid = element_blank(),
          panel.border = element_blank(),
          axis.title = element_blank(),
          axis.ticks = element_blank(),
          axis.text.x = element_blank(),
          axis.text.y = element_text(size = 9, color = "gray10"))
}
# Calculate the total sales and make it nicely formatted. 
total_sales <- paste0("Total Sales: ",
                      format(sum(final_data$Sales), big.mark = ","))
# Create the actual plot. Note the subtle change that the whole plot definition is now
# being *assigned* to `my_plot`
my_plot <- ggplot(final_data, aes(x = Marketing.Channel, y = Sales)) +
  ggtitle("What Is Our Count of Sales per Marketing Channel?",  
          subtitle = total_sales) +                            
  geom_bar(stat = "identity", 
           fill = "gray90",     
           width = 0.75) +
  geom_text(aes(label = bar_label),
            family = "Open Sans",
            size = 3.5,                 
            hjust = 0) + 
  geom_bar(stat = "identity",
           mapping = aes(y = highlight_bar),
           fill = "#90c4e4",
           width = 0.75) +
  coord_flip() +
  scale_y_continuous(expand = c(0, 0),
                     limits = c(0, max(final_data$Sales) * 1.3)) +
  my_theme()
# Load the library (normally we would do this at the very beginning) that we're going to use
# to add interactivity.
library(plotly)
# Plot the result
ggplotly(my_plot, width = 750, height = 350)

We now have an interactive chart! Mouse over the bars! Click around on some of the options in the menu at the top right (these are…pretty useless in a chart as simple as this, but illustrative nonetheless). Unfortunately, we also lost our data labels, the channel names got a bit crowded up to their bars, and the title isn’t left-justified. There are some settings for ggplotly() that you can fiddle with to make up for information that gets lost or dropped, but this was the best I was able to do here. So, I’d probably just stick with the static chart.

Takeaways

How did we do? The end result (the static one, at least), seems pretty darn close to the original. The main difference is the layout of the subtitle with the total sales figure. And, that’s not an insurmountable tweak if that was, truly, exactly what I wanted.

Summarizing the approach with Domo: start with a pretty good chart, and then tweak/massage it a bit, within the constraints of the platform (the “three font sizes” seems pretty limiting)

Summarizing the approach with ggplot2 in R: I’m going to put this in a list form:

• Start with a fairly hideous rendering of just the core data
• Use a theme (that can be reused across many visualizations) to adjust which elements are displayed and how
• Layer on additional “geoms” to add additional information to the plot. Some of these require creating derivatives (or “mutations” in dplyr-speak) of the original data

Fiddle and experiment along the way.

The code – and the underlying “grammar of graphics” paradigm that ggplot uses – can seem intimidating. It is! And, for a simple horizontal bar chart, it can seem unnecessarily unwieldy. But, hopefully, it’s also apparent that there is a lot of power in this text-based definition of a chart.