ASCII and ye shall receive: approximating graphs in tooltips

by Gwilym Lockwood

One of the exciting announcements from the Tableau conference last month was that we’ll soon be able to put graphs inside tooltips. That’ll come out in a new release of Tableau at some point in the future, but if you can’t wait (or if you’re not planning on upgrading), you can actually kind of do it already. All you need is a couple of ASCII characters and some calculated fields.

Let’s have a look at the current Premiership table and plot the number of wins, draws, and losses in the tooltip:

first-one-with-bars

This looks rather impressive, but it’s really rather straightforward. First, create a calculated field with nothing but this blocky ASCII character repeated several times (you’ll probably want dozens of them, depending on what you’re doing):

"▉▉▉▉▉▉▉▉▉▉"

Let’s call that calculated field Blocks. Other ASCII blocks available here.

Then, write a calculated field which adds up the number of wins a team has had, and takes that number from the string of blocks:

LEFT([Blocks], SUM([Wins]))

Let’s call that field Win blocks. Do the same for two more calculated fields calculating the number of draws and losses, and then drag them all onto the tooltip shelf. You can then write out your tooltips like this, colouring the different blocks by changing the text colour:

Team: <Team>
Pts: <SUM(Pts)>
Wins: <AGG(Win blocks)> <SUM(Wins)>
Draws: <AGG(Draw blocks)> <SUM(Draws)>
Losses: <AGG(Loss blocks)> <SUM(Losses)>

That’s all!

But we can take it further. How about making a continuous bar showing percent of total? Here’s the current Premiership goals data – the number of goals a team has scored is on the y-axis, the number of goals a team has conceded is on the x-axis, the points are coloured by the team’s league position, and the tooltip shows a continuous bar, coloured with the team’s percentage of wins, draws, and losses:

second-one-percent-of-total

(like the viridis colour scheme? see here for a list of hex codes to copy and paste into your Preferences file)

This follows a similar logic to the last one, but with a different ASCII character that takes up the entire width of the character space. This means that when you put them side by side, they look like a continuous block.

First, create a calculated field with 100 of these characters. I’ve put ten here for blog space reasons, but just copy/paste it into your calculated field ten times:

"▆▆▆▆▆▆▆▆▆▆"

…and call it Blocks (percent).

The next calculated field is slightly more complicated than last time. Instead of just taking the number of wins, we’re going to calculate the percentage of wins (i.e. 100 * number of wins divided by number of games played). We also need to round it to the nearest whole number, because we have 100 blocks. We can do that as follows:

LEFT([Blocks (percent)], 
ROUND((SUM([Wins])/SUM([Played]))*100, 0)
)

…and call it Win percent blocks. Do the same for draws and losses too.

Let’s also create a calculated field called Positional Affix to take the correct affix for positions (1st, 2nd, 3rd, nth) to make our tooltips have proper sentences:

IF [Position] = 1 THEN "st"
ELSEIF [Position] = 2 THEN "nd"
ELSEIF [Position] = 3 THEN "rd"
ELSE "th"
END

Now, drag all these fields into the tooltip, and modify it as follows:

<Team> are <AVG(Position)><ATTR(Positional Affix)> in the table
<AGG(Win percent blocks)><AGG(Draw percent blocks)><AGG(Loss percent blocks)>

If you’ve followed this exactly, you’ll see that the continuous bar created by this is absolutely massive. You can change that in the tooltip field by highlighting all that text and changing the font size. Make it really, really small; in my example, I’ve changed it to 2 point. This then makes it almost impossible to see in the tooltip field, so do all your colour changing first.

One caveat is that this isn’t completely precise. Since we’re rounding to the nearest whole number for the percentage, there’ll be times where the numbers round to 99, 100, or 101 continuous blocks. However, this is barely noticeable once you’ve changed the font size, it becomes a matter of a couple of pixels. As a quick visual gauge of percentages, it’s a “good enough” kind of hack.

(this blog was inspired by sitting next to Andy while he was playing around with baseball data, but this has a better sport)