top of page
  • Writer's pictureSimon Beaumont

Raising the Bar part 2 - 'Toblerone' bar charts


I recently shared a blog post, 'raising the bar', within which I shared techniques to adapt the visual appearance of a bar chart in Tableau.


Whilst the blog post shared numerous ways of customising a bar chart I couldn't help but wonder if there were some other bar chart customisations that could be done, so I set myself a challenge this week to find some of them! This blog post shares one of the customisations I discovered, the 'Toblerone' bar chart (at this point I should add the credit for the name should go to Colin Wojtowycz, along with any ensuing legal action that Mondelez International may bring against us!!!).


Where did the idea come from?

The 'Toblerone' originated purely as an aesthetic concept; I will admit it was completely style over substance!


I was playing around with the #WinterGamesViz #MakeoverMonday data set and wondered if i could plot the number of medals won by each country in the style of alternating triangles, where by each triangle represented a medal won by the country and the odd number medals, i.e. 1,3,5 etc were down triangles and the even number medals, i.e. 2,4,6 etc were up triangles. The up and down arrows could then be coloured differently to create a 'Toblerone' appearance of the bar as follows:

How to create a 'Toblerone' bar chart


If your data lacks a unique identifier [Unique], create one:

For the #WinterGamesViz data set I used str([Country]) + [Name of Athlete or Team] + str([Year]) + [Event] + [Medal]


Create an index for your data points [Index]:

Index()


Use the index to create a calculated field that identifies if a data point is to be plotted as an 'odd' or 'even' shape [Unique shape]:

if [index] % 2 = 0 then 'Even' else 'Odd' END


To plot the chart in a worksheet:


- Add [Unique] to detail

- Add [Index] to Columns and compute using [Unique]

- Add [Country] to Rows

- Add [Unique shape] to the Colour Mark and compute using [Unique]

- Change your Marks type to Shape and add [Unique shape] to Shape and compute using [Unique]

- Set the 'Odd' shape type as a solid down arrow and the 'Even' shape type as a solid up arrow

- Set the 'Odd' and 'Even' shapes to different colours

- You may need to adjust the Size of the shape to ensure the triangles 'fit' correctly

OK, so far so good, I have a visually interesting chart but it offers no additional value than a traditional bar chart, so not so good! Here is where the 'Toblerone' chart may start to become a useful addition to your viz chart library.


How to create a useful 'Toblerone' bar chart

What if we coloured the arrows based on a trend? For example if you could compare the number of medals a country won in 2014 with the number of medals won in 2010. If a country won more medals in 2014 the up 'Even' arrows could be coloured a positive colour where as if the country won less medal in 2010 the down 'Odd' arrows could be coloured a negative colour.

Filter the worksheet to only select the year 2014.


The next step can be completed in a variety of ways using Table Calculations but for simplicity create 2 calculations [2010] and [2014]:

{fixed [Country] : sum(if [Year] = 2010 then [Number of Records] else 0 end)}

{fixed [Country] : sum(if [Year] = 2014 then [Number of Records] else 0 end)}


Create a calculated field that combines if a country had greater, less or the same medals in 2014 with the 'Odd' and 'Even' triangle shape [Greater?]:

if sum([2014]) > sum([2010]) then 'Greater'

elseif sum([2014]) < sum([2010]) then 'Less'

else 'Same' END

+

if [index] % 2 = 0 then 'Even' else 'Odd' END


To plot the chart in a worksheet:


- Add [Unique] to detail

- Add [Index] to Columns and compute using [Unique]

- Add [Country] to Rows

- Add [Greater?] to the Colour Mark and compute using [Unique]

- Change your Marks type to Shape and add [Unique shape] to Shape and compute using [Unique]

- Set the 'Odd' shape type as a solid down arrow and the 'Even' shape type as a solid up arrow

-Set the colours so that the 'GreaterEven' option is the increasing colour and the 'LessOdd' option is the decreasing colour, all other colours can be set to grey

In the above example you can visually see that Russia won the most medals in 2014 and this was an increase when compared to 2010 (due to the up arrow being coloured in a positive, warmer, colour), where as the United States won the 2nd most medals but this was fewer than they won in 2010 (demonstrated by the down arrow being coloured in a negative, colder, colour). Please note, if you are questioning the number of medals won, in this example the medals are per athlete, so team sport medals are counted per individual as opposed to per team.


I appreciate this type of chart may not have regular use cases, however I felt it was a quirky and creative way to visually represent a trend within a single bar, thus providing the reader with a little bit more context for the value visualised.

91 views0 comments

Recent Posts

See All
bottom of page