Christmas is coming!

I think that if my family will allow me, I will probably put the Christmas decorations the entire year. As a nice parade, I like to build a #datafam calendar to put myself into the Christmas Mood. Link

That is already the 3rd years in a row that I do that, and each time, I was capable to do it with a new techniques. The first year, I just use a dual axis, the second year some map layers and a lot of floating sheets with a control visibility. But this year, I wanted to improve the technique, let me know what you think.

The colourful windows

I know that I could have using Figma, but I like to make my dashboard 99% using only Tableau, except for the necessary evils as title or icons. The windows are drawn using map layers and polygons.

To draw it, you need to draw each windows separately, for instance for the window n°2, the data looks like this.

I need 5 points to be able to close the rectangle, the point 1 and 5 are on top of each other like on the following drawing. I apologize the notation X and Y can be misleading, as we are speaking about latitude and longitude.

To use the map layer, I need to create a geographic field, so I created a calculation like this

Point square : if [Map Type]=”square” then MAKEPOINT(-[X],[Y]) END

As you can imagine, I have several Map Types in this dataset, ( we will see it later), so I need to distinguish them. In that case I use a column called “map type” to create the different layers I need.

I repeat the same principle for the 25 days that my dataset will have. Some day will be rectangle, some squares but the principal is the same.

To draw it in Tableau, you need to put the calculation point square and the field day ( as we will draw 25 polygons). In path, we will put the field “number map” so the polygon is drawn following the order 1 to 5

As you can notice there is a field called “color naughty or not” in colour. The idea is that if you are “nice” you should see the entire advent calendar in shiny colours, but if you are naughty and you open the windows before the time comes, you will see them in variation of greys. the calculation is the following

if [naughty?] then [Day]+25 else [Day] END

That way I can use a new colour variation for day fro 26 (25+1) to 50 (25+25)

Adding the day

To adding the day into the calendar, we will need to add a new layer. I will need to position my square with the day number a little bit on the left hand-side and below the point number 4. To do it, the latitude has to be lower by 0.2 which make it below the segment 1-4 and to have it on the left, we lower the longitude by 0.2. The coordinates of the day n°2 is now (-1.2, 1.8).

I created a new category for the “map type” on my dataset called “date” and I used the following formula to create the new map layer:

if [Map Type]=”date” then MAKEPOINT(-[X],[Y]) END

Here instead of choosing the colour manually for every day, I used again the field “color naughty or not” for which I add 4, which creates a little variation. Now on day 2, we used the colour of the window number 6.. etc

Christmas Icons

Now for the icon placement, I need to add a new layer for the icon at the centre of the window. The coordinates are half way between 1 and 4 and 1 and 2.

To create the map layer, I have used the same technique with 2 subtleties :

• I have adapted the size of the icon within the size of the window
• I have distinguished if the icon can be clickable or not. If it is clickable the icon is visible and you can access the web link, otherwise the icon is grey out.

I have created two calculations that I used for each of the map layers “icon clickable” or “icon non clickable”. What is important is that the map layer “non clickable” has the selection disabled and that is on top so the icons are visible. The map layer “clickable” has the selection enabled.

Point Clickable = if [Map Type]=”icon” then MAKEPOINT(-[X clickable],[Y clickable]) END

with X clickable = if [Are you naughty?]=1 then [X]
ELSEif [Are you naughty?]=0 and DAY([Parameter of Today])>=[Day] and DAY([Parameter of Today])<26 then [X] END

What it means is that if you want to be naughty and open the windows before the time, you can do it, otherwise you have to wait for the day in question. After the 25th the calendar is hidden again.

Point non Clickable = if [Map Type]=”icon” then MAKEPOINT(-[X non clickeable],[Y non clickeable]) END

with X non clickable = if ([Are you naughty?]=0 and DAY([Parameter of Today])<[Day]) or ([Are you naughty?]=0 and DAY([Parameter of Today])>25)
then [X] END

Here that means that if you are nice you cannot see the content before the day, or after the 25th. Meaning that as soon as you are naughty this map layer will be null, and you will be able to click on the icon.

Last but not least in order to achieve the shadowing on the icon, you just have to add a value into colour, in my case “attr(1)”

Interactions

The slider is a chart created in Tableau with a parameter action. For more explanation, check the previous blog post here

When you click on a window, 2 things happens :

• the window has a dotted contour which is also a map layer with a dotted line selected on the path section. The calculation is the following : selected day =if [selected day]=[Day] then OUTLINE([point square]) END with selected day being a parameter and we change the day with a parameter action
• an explication grey window appear, with more detail about the content that you can access.

The parameter action “change the day” will feed the value of the day that you click on, into the parameter “select the day”. That will draw the dotted line around the selected day, but also display the content window.

The content window is displayed or not based on a control visibility condition, called “hide the text” =[selected day]<>0. If no day is selected, the window stayed hidden.

If you click on the “X”, the parameter action “reset the view” will feed the parameter “select the day” to zero, which will hide the dotted window but also the content text and the “X” button.

What is next ?

Globally, I am quite happy by the end result, as it allows me the design flexibility but it is also quite elegant, compared to last year, as we do not have to create 24 visibility zone to hide the icons. Here we have the best of 2 worlds, we see the icons but we cannot click on it as it is controlled by a non-clickable map layer. Let me know what you think 🙂

The question is : would I be able to reinvent a new visualisation in 2024?

Have a nice holidays and a beautiful entry of the year.

Thank you to Anne-Sophie Pereira De Sá, Shazeera Zawawi and George Koursaros for their feedbacks and encouragement!