14 Use Cases for Transparent Shapes & Images

July 27, 2020
Read



Luke Stanke and the Tessellation team put out a ton of content.  Over the past year or so, FlerlageTwins and Tessellation have had a bit of a battle as it pertains for blog post material.  When I released my Case Statement Generator tool/blog post, I received a note from Luke that he had that exact same blog post planned for the upcoming weeks.  Then about a month later, he released his Color Palette Creator, which was a project I had planned to tackle; you had better believe he heard about it.  At that point, we were all knotted up at 1-1…that was until he posted Six Tips for Transparent Shapes in Tableau.  That one hurt a little bit.  I have been utilizing transparent shapes and images in Tableau for as long as I can remember.  And for the past 6 months, I had been compiling a list of different uses cases.  But Luke beat me to it.  Now it’s 2-1 Tessellation.  


In Luke’s blog post, he provides some fantastic uses cases for transparent shapes.  I sincerely recommend that you check it out.  As I read it however, I realized that he and I did not have on ton of overlap in the ways in which we used them.  So, I decided that I would write up my use cases for transparent shapes as well.  In this blog post I will provide you with 14 uses case for transparent shapes AND transparent images.  Some of the use cases are very common and others are incredibly obscure.  The idea is to simply show their versatility and help you to recognize when it might be beneficial in your own visualizations.


Before we get started, I’d like to thank Josh Tapley as he provided three transparent shape/image tricks for this blog post.  Thank you, Josh.  I'll also be linking to one of Ken's trick (that he already wrote about).


And one last thing...you can create a transparent shape in PowerPoint by drawing a square or rectangle, then set the fill color and outline to none.  From there, save it as a image.  Or, you can download a variety of them from here.


The Workbook


Like many of my blog posts, I created a Tableau workbook to house all of these different use cases.  The main page includes 14 buttons (hex shapes).  Click on any button to be taken to that particular use case.  The majority of them are built right into the workbook, but several will reference other, previously created materials from myself, Josh Tapley, and Ken Flerlage.  You should also note that the landing page itself uses 16 transparent images.  The main buttons are simply an image built in PowerPoint with 14 transparent navigation buttons and URL images floating on top – a technique the Lindsay Betzendahl recently wrote about.  (Check out her blog post and associated viz).  The other two transparent images are used to turn the text at the bottom into hyperlinks – something we will address later in the blog post.  So before you get started, please open the corresponding Tableau Workbook.  Alright, let’s get to it!



1. Label Second Axis with No Mark

 

A common practice is to utilize a second axis for labeling.  I did this on the Unemployment Workbook I created for my company Tableau Public page.  For the chart on the right, I used a second axis to place all the state labels out to the right (I placed them at the Window Max plus some padding). 


 


This technique is also very common when labeling small multiple charts.  Lorna Brown does a great job of explaining this technique in her Tableau Tip Tuesday video.


In my unemployment viz, on the second axis, I used a circle that was made very small and with 0% opacity.  In Lorna’s example viz, she used a line with 0% opacity.  The problem with both of these techniques is that the circle, line, or whatever else you use can be inadvertently selected, causing a weird experience for users.  Below are examples of what this looks like in both vizzes.  In mine, you can see the dot being selected and in Lorna’s, you can see the line being selected (I did get Lorna's permission to use this, by the way). 

 


 

 

For a better user experience, we can utilize a transparent shape.  The nature of a transparent shape means that they cannot be selected (this will be very important for many of the tips in this blog post).  If you click on them, you see nothing.  So if we were to swap out my circle and Lorna’s line with a transparent shape, that shape cannot be selected and that potential “weird experience” for your user cannot occur.

 

The example in my corresponding workbook uses a chart similar to my Unemployment Viz.  The first image below shows the possible selection with a circle.  The second shows how a transparent shape cannot be selected:

 

 


 

It’s no extra work to swap out that circle for a transparent shape, so just avoid any odd user interactions and use the transparent shape. 

 


2. Quickly Select Whatever Marks You Like

 

At work, I’ve built several visualizations for print.  I can’t really get into the details, but in general, we look at the percentage of accounts and how to optimize profit with those accounts.  The chart might look something like this:


 

 

For print, I typically will call out one percentage of accounts and see how that relates to profit.  For example, at 30% of the accounts, we see 46% of the profit.  But I don’t have to call out 30%.  I may choose to call out 40%. 

 

I could write a calculation that says that if the % of the Accounts = .3 then give me the percentage else null.  Or I could keep it really simple and really flexible and simply use transparent shapes.  In this case, on the second axis, I changed the mark type from circle to shape, placed the “% of Accounts” pill onto Shape, changed the 30% mark to a filled circle shape then changed everything else to transparent shape. 



 

 

 

It’s quick, easy and flexible.  If I want to see the filled circle at 40%, I can easily change it…or I can mark several different percentages.  All I have to do is change the shape. 

 


3. Points/Shapes with Different Colors in One Calculation

 

I commonly create charts that look at a measure over time and call out both the min and the max values.  Here is an example:


 

 

This particular example is fairly easy to build using Superstore data.  First I placed MONTH(Order Date) on Columns, SUM(Sales) on Rows and change that to an area chart.  Then I create another calculation to determine the min and max values:

 

IF SUM([Sales]) = WINDOW_MAX(SUM([Sales])) OR

   SUM([Sales]) = WINDOW_MIN(SUM([Sales]))

   THEN SUM([Sales])

   ELSE NULL

END

 

Basically, this calculation will return the SUM of Sales when it’s the maximum in the view or the minimum, otherwise it will return a null.  I then take that calculation and place it next to SUM(Sales) on Rows, make it a dual axis, and change the mark type to a circle (you could actually use a line as well as the broken line will yield circles).  As a side note, there are a number of different ways to do this including Measure Names & Values. 

 

However, what would you do if you wanted the circles to be different colors, maybe blue for the max and orange for the min?  Or what if you wanted different shapes, maybe a circle for the max and a square for the min?  Or what if you wanted them to be different shapes AND different colors?  Regardless of the method you chose to employ, this means additional calculations. Well, if you use a transparent shape, you can do it all in one simple calculation and you don’t even have to use that calculation on the Rows shelf. 

 

So let’s start like we did before, place MONTH(Order Date) on Columns, SUM(Sales) on Rows and change that to an area chart.  Rather than creating another calc to make a dual axis, place SUM(Sales) again on the Rows shelf and dual axis them (remember to synchronize the axes).  Now create one calculation, I’ll call it “@Mark Min & Max Shape” (I like to precede my calcs with a @ symbol):

 

IF     SUM([Sales]) = WINDOW_MAX(SUM([Sales])) THEN 'MAX'

ELSEIF SUM([Sales]) = WINDOW_MIN(SUM([Sales])) THEN 'MIN'

ELSE   'TRANSPARENT'  

END

 

This calculation is similar to the one before yet it calls out the Max as a value, the Min as a value, and if it’s neither, it will be transparent. 

 

From here, change the mark type of the second axis to Shape, then place this calculation onto the Shape card.  Here I changed the Max to be a circle, the Min to be a diamond and Transparent to be a transparent shape. 


 

 

I also placed this same exact calculation onto the Color card then made the Max purple, the Min gray and it doesn’t matter what color Transparent is because the shape is transparent and will not appear. 


 

 

Other methods require different measures to be used on each axis and three or four calculations.  This method is much more straightforward as I can simply use the same measure on both axes and I have maximum flexibility with just a single calculation.

 


4. Deselect Button Outline

 

Recently, there has been a lot of discussion about how to automatically deselect a mark.  Take this visual for example.  Here I have a simple area chart plotting sales.  In another sheet, I’ve created four buttons by placing YEAR(Order Date) on Columns and on Text then changed the shapes to a custom button I created in PowerPoint.  I placed them all on the dashboard and set up parameter actions so that when I click on one of the buttons, the area chart is filtered to that year.  (There is a bit more too it, but the details are unnecessary for this example). 


 

 

When I click the button, however, the buttons look like this.  Do you see that weird outline to the button?  It just looks bad. 


 

 

Luke Stanke recently wrote a blog post on this where he compiled the history of the discussion involving techniques from Jonathan Drummey & Yuri Fal.  Luke also had a method but according to his blog post: “Yuri is the originator of this methodology and I just wanted to blog on it because I think it is very elegant and requires only simple calculations. Because I like simple solutions, I’m deleting my post and sharing this simple methodology.”

 

The method is probably the best...and it's super easy.  However, for the past year or so, I’ve used an entirely different method than Luke, Jonathan and Yuri when interacting with buttons.  Yep, you guessed it, transparent shapes.  You can see it all over my work, but the most evident use of it is in my NFL Scatter Plots viz where every button uses a transparent shape.  But I’m certainly not the only one doing this, Josh Tapley has also been doing it for quite some time.  You can see it all over his work as well, one example being his 2019 Viz in Review (Change Author button). Therefore, this tip is from both Josh and I.


So let’s start where we left off – with this:


 

 

Go to the sheet where you created your buttons and duplicate that sheet.  We are going to leave YEAR(Order Date) on Columns, but take everything off the marks cards.  We will then change the mark type to Shape and put MIN(1) (we just need something) onto the Shape card.  It might look like this:


 

 

From here, we just change our shapes to be transparent shapes so you don’t see them at all.  But remember, the values are still associated with each year. 

 

One dashboard, we float this sheet on top of our original buttons.  You’ll need to make sure they align properly.  To do this, I often leave them as circles to get the alignment then change them to transparent shapes.  Once aligned on top of the original buttons, set up the dashboard actions to interact with the transparent overlay versus the actual buttons. 

 

As we mentioned at the beginning of this blog post, transparent shapes can’t really be “selected” so the experience of clicking on a transparent shape is very clean.  Below is what it looks like when selected:


 

 

As a side note, some people have suggested just using a square or circle with 0% opacity.  The problem with that is that when you click on it, it selects that shape. So stick with the transparent shape.


 

 

 

5. BANs without Weird Selection

 

Why the heck would we use transparent shapes for BANs?  Well this one came from Josh Tapley and I absolutely love it!

 

Let’s say we were building BANs for Superstore data.  Your worksheet might look like this:


 

 

You’re just showing the different Measure Names and Values using the text mark type.  There’s nothing wrong with that, right?  We all do it.  Well, what happens if a user clicks on it on your dashboard?


 

 

Yikes!  That looks awful!  Well, as Josh showed me, all you need to do is change the mark type to a shape, add in a transparent shape, and the text marks will act as a label on that transparent shape.