Featured

Titanic – Great Loss of Life

Background

The visualisation was my November submission for the #SWDChallenge – Explain Change.  When I saw the briefing for the challenge I made up my mind to look at a previous submission back in 2018.  This was a Waterfall chart showing the passenger and crew numbers boarding the titanic with then the decrease representing the tragic end to over 1,400 lives. Here is is below.

Initially I was just going to “redo” this but I quite quickly changed my mind and decided to build something completely new.

After a little research on Pinterest and Google Images I settled on a background that was effectively in two parts, the sky and the water with very subtle gradient shading of the moon (top left) and the darkening of the ocean as it got deeper.  Finally, I added a few stars with a very subtle size difference of those closest to the horizon.  This was done in Figma. Here is the background image without any additional text or visuals.

With my background complete I wanted to show the journey of how the various demographics (Age, Class/Crew, Gender) broke down before the sinking and then after. I had never used animations before and wanted to build a viz that really showed the movement. My other purpose was to show each individual as a single point. Despite occurring a long time ago, it’s still a sensitive subject and I thought this was the right way.

Data

From the 2018 Waterfall viz, I already had the data I needed for the passengers and crew and so just needed to work out where they would be placed for each of the views.

Essentially, I had one worksheet which I used a X/Y canvas. Each dot would stay on the same worksheet and simply move position when the view changed using a parameter.

I started with my original data and then added a blank column for each column and row combination (X/Y) that I needed. Six different sets in total. They were

  • Matrix Row/Column (The overall view)
  • Matrix Fate Row/Column (The overall view split by those survived and those that didn’t)
  • Class Row/Column (Separate blocks for each of 1st, 2nd 3rd Class and Crew
  • Class Fate Row/Column (The above spilt by survived/died)
  • Age Row/Column (Distribution of numbers by age)
  • Age Fate Row/Column – (Same distribution with those not surviving the tragedy going below a line)

Getting the X/Ys

Quite possibly there are better ways of working out all of the X/Y dot placements but I went for a more manual approach.  For the initial view I made had a test worksheet in Tableau and plotted each person in a grid form across 50 columns with c2,500 that got me a nice 50×50 grid initially.   Something like below

Because I wanted to colour the Men and Women differently I sorted the view based on gender and once I was happy I selected all the points -> View Data and copied the Row / Column information into Excel and simply did a lookup to my master sheet to fill in the respective columns and rows.

For all subsequent views I followed a similar approach, made the test view that I wanted and then exported the row and column numbers to my main data sheet in excel.

The only tweaks I had to make to this were when I had broken the view down.  At this point, in Tableau, each row or column would start again at 0 so after exporting I simply had to add on the number from the previous column/row.  For example, when looking at the Class/Crew breakdown, the crew section finished at row 21 so the 3rd class section needed to start at row 23 (one blank row for spacing). Here it is visually with a before and after.

Transitions

At this point I need to call out an amazing viz I recall seeing a while back from animation and general Tableau legend Alexander Varlamov (twitter).  I checked it out to make sure I was on the right lines and adapted the main X and Y move calculations.  Ultimately, this was a series of IF/ELSE IFs to check the value of the parameter and then based on that, selecting the appropriate Column and Row.

The Titanic Images

This all looked good but I didn’t really have a good start and end point.  Beginning and ending with a block of dots didn’t really have the impact I was looking for.  For the final shot, I quickly decided on using an image of Titanic underwater and then remembered a blog post I had seen from CJ Mayes hosted by Amar Singh around using an image to make a series of dots with X/Y co-ordinates.  I found an image of blueprint image of Titanic that closest resembled what I was looking for and then with a bit of editing/cleanup in Pixelmator it was ready.  Check out the amazingly detailed blog post for all the details.

I now had an X/Y for each of the people on Titanic that looked like the Titanic! All the main views were now ready.

Narrative and Annotation

I’ve come to learn that good annotations and narrative really make a good viz so I set about a way which annotations and narratives could update when each transition was made.  Initially I tried to use images as shapes but quickly realised this wasn’t going to work as the resolution isn’t good enough.

After a bit of research, I discovered an excellent post by Eric Parker.  It was exactly what I was looking for.  Now I had a concept I set about making a separate image for the main header texts and an overall annotation image for the views. I made all these in Figma.

This was the main header text for the starting page
This was the annotation layer for the Crew and Fate breakdown. It’s difficult to see because this is a white background. If you look closely you will see the text.

Then, I brought them into Tableau using Map -> Background Images ensuring the X/Y were the same as the background image size.

Finally, the key to showing just one image based on the transition is to create a calculated field from the Parameter that moves the view, use that as a detail and in the background image options select the “Only show when” option and select the transition number .  This links the specific image to the specific transition number. I did the same with the annotation images. The set up looked something like this.

Dashboard Layout

Building on top of my main Background Image, I added the main text banner sheet, again using the same dimension as the images and background images. For the main body I added the main matrix view, then the annotation layer sheet. One particularly frustrating element was when scrolling “in the wrong place” the axis for my annotations views scrolled in and out. To fix this, I brought a blank sheet on top which worked well and then finally a 0% opacity matrix view (so that the tool tips would work).

The move forward and backwards arrows were separate sheets which had an arrow image assigned to shapes. The move was controlled with a parameter action and a simple calculated field to either move the parameter on or, if it was already at the beginning/end then do nothing.

Wrap Up

I really enjoyed putting this together. Learning more about animations in Tableau was good and I would also encourage anyone interested in them to check out. If you have any comments, feedback or questions please let me know.

Thanks for reading,
Simon

Lacrosse D1 Championships

#SportsVizSunday – April 2021
An adventure into Map Layers in Tableau

Introduction

After tackling Adaptive Sports in the last #SportsVizSunday I decided to give another topic I knew very little about, Lacrosse, a go in the latest challenge. Whilst I find it easier to viz about subject I know very well and have a keen interest in I also think it’s really important to dive into unfamiliar topics from time to time to 1) evolve the skill of analysing data that you might not be familiar with and 2) learning something new. I certainly know more about Lacrosse now than I did a week ago!

As with most of my designs I tried to give a bit of thought to what the layout might be. Looking through the data provided, I liked the idea of plotting the various championships over the years. I thought about visualising most successful teams, longest winning streaks, longest time between championships and elements like that. But in the end, I decided to go with the small multiple (cards) approach with a consistent card for each championship final with the user being able to scan through the years. It was also important for me to be able to include the women’s game as well as the mens.

As I was playing with initial ideas of how to set up the cards I began with a trick I had used before for #SportsVizSunday (Google Trends). This works well and gives a lot of control but does get a bit fiddly lining up all the different sheets on top of each other in a dashboard.

So my thoughts turned to Map Layers. I recent feature in Tableau 2020.4 and one which I had seen a few Blog tutorials on and more recently a really innovative viz on FIFA 21 Players by CJ Mayes.

I did a bit of research and came across these three blogs which I used for my inspiration and learning.

They were all incredibly useful and I picked up a pretty decent understanding of how to get going from reading them.

Map Layers

Firstly, I had to create my small multiples. There are a few ways I have seen this done but they all revolve around creating a [column] and a [rows] field and placing them on the view. The way they are calculated drives the small multiple or panel layout. My calculations are below using a calculated field called [Index] and a Parameter called [Select Number of Columns]

This gave the basic structure that I could then apply the map layers to. The first principle with Map Layers is the Makepoint() function. Essentially, this is a geographical field using a X and Y co-ordinate. The full description is here

I decided that I wanted a grid for each of my small multiples to go from -15 to 15 on the X Axis and 0 to 20 on the Y Axis. I wanted a 0 point in the middle of the X Axis and then wanted to have a 3:4 ratio for the grids. I guess I could have gone -10 to 10 on the Y Axis.

The first Map Layer was an easy one. I wanted to put the year of the final onto the top of each card and in the middle so I created a calculated field called [MP | Year]. This was simply putting the first argument as 0 (in the middle of my -15 to 15 axis) and the second argument as 16.5 (pretty near the top of my 0 to 20 Y Axis)

Then dragging this field onto the view automatically creates a Latitude and Longitude field. Placing Year on Shape allowed me to create an individual image for each year and use a custom font. I also took the opportunity to fix the X (Latitude) and Y (Longitude) Axis to the dimensions I mentioned above. At the end of this first stage I had something like this.

I repeated this process using simple MakePoint calculated fields to create placeholders for the following items

  • Venue
  • Winning Score Label
  • Runner Up Score Label
  • Winner Badge
  • Runner Up Badge

This got me to a card which looked something like this

It was taking shape nicely but I wanted to show visually, the difference between the two teams. My idea was to create two horizontal bars next to the scores which indicated the scores.

There were a few parts to this. Firstly, as my axis was up to 15 I needed some kind of normalisation as in some cases the winning score was more than 15. In addition, I only wanted for the maximum length bar to go up to 10 on the X Axis to give a bit of breathing room for each card.

To achieve this I first created a LOD calculation which gave the maximum winning score for each gender (as I was creating a separate view for Men and Women).

Then, using this maximum score I was able to take each individual winning score and by dividing that by the maximum score gave me a normalised number between 0 and 1 and then all multiplied by 10 to use the full range I was looking for. In an example, if the maximum winning score for men was 21 and the winning score of a particular year was 15. 15 / 21 = 07.14 multiplied by 10 = 7.14 which is where the end point of the bar would be.

Next, I needed a starting point for the line. All I had at the moment was the end point (the winning or runner up score). To do this I simply added another copy of the data with a union join which gave we two points now. Finally, I brought it all together in the calculated field below.

This gave me the path, now all I needed was to use the MakePoint function to place it on my view. Again, 10 is just a manual reference to being in the middle of my 0 to 20 Y Axis.

I did the same with the Runner Up score and this gave me the following. You can see how 12-11 draws the bars very close to each other but quite a long way back from the maximum possible value, 10. This is because 12 as a winning score is a fair way from the maximum score across the whole view, which is 21 in 1990.

The other line I wanted to draw was an indicator of how successful the team had been by showing the number of championships they had one as the years progressed. What I wanted here was a line just above the winners badge that showed the cumulative championships. To create this I used my recently densified data to give me 2 points, the first I set to -10 (the position on the X Axis where I wanted the line to begin) and the second was simply the cumulative number of championships (I had added this to the dataset so it was available as a field).

As per previous steps, the final part was to create a calculated field using MakePoint() to set my points. Again, the manual 12.9 referred to how high I wanted the bar to be on the card. This took a bit of trial and error to get exactly where I wanted it.

As an aside, when adding each of these calculated MakePoint fields as a new MapLayer I had to also include the correct fields to ensure the information spread over the small multiples correctly. This included adding the [Year] field to the detail shelf and also changing my Row and Column Table Calculations to incorporate the respective new information. At this stage my small multiples looked like this.

At this stage I was quite happy with what I’d done but wanted to make it look a little nicer. Usually, in these situation I would go for a background image using something like Figma to create some nice shapes underneath or shadows. However, on this occasions I wanted to see whether something would be possible using Map Layers.

Firstly, I wanted to create a little focus on the score bars. This was easy enough, essentially I created a duplicate series of calculations for the Winner and Runner Up bars and placed them onto the view. Expanding the size of the lines and changing the colour gave this effect.

Onto the final stage, I wanted each of the cards to have their own backgrounds and some kind of border or drop shadow. To get started I created a simple sheet in Excel in which I created a path outline which followed my -15 to 15 and 0 to 20 Axis but taking a point off of each.

I brought this into my Workbook and joined it to my main data using a relationship and using a many to many join (1 to 1). This gave me access to a path to begin creating some backgrounds. Firstly, I created an overall background shape. To do this, I created a MakePoint calculated field and in the arguments placed the [X] and [Y] fields from my sheet above. Placing this as an additional Map Layer and ensuring that I had placed the [Path] field onto the Path shelf and setting the mark type to Polygon gave me this.

At this stage I probably got a little carried away, I wanted to see what else I could do. I decided to try and create a drop shadow using a similar technique to the background but just changing the path slightly and of course the X and Y placements to offset slightly from the main background.

Using these X and Y fields in my MakePoint function gave me the following

Just one final, final touch! A very small cosmetic line on either side of the year. Using identical techniques to the score and cumulative championship bars I used the two different tables to create two dots and joined them together using some trial and error on where they should be placed onto the card. My cards were finished!

All I needed to do now was a bit of tidying up, removing the headers obviously and then creating the dashboards. Because the Mens and Women’s games had started at different years I decided to create two operate dashboards and then a navigation between the two. I also added a information hidden container so the user could see the details that each card contained and finally, I did use Figma to create a background image using fonts that I thought gave a college, USA, sports type of feel. NOTE – I had a bit of trouble with my background images as while they looked great in my own Tableau they didn’t render when published to Server. It took a lot of trial and error to work out that it was the name I had given the image which caused it to fail. Lesson learned – Don’t use special characters when naming background images. I had called mine “M | Background”

Summary

Initially, when I saw Map Layers as a feature I couldn’t really see how they could be useful other than a bit of a gimmick and potentially an excuse to add more than is necessary to a view. I have to say, after the the great work of those I have referenced above and having explored in more detail I am converted! The possibilities are pretty much endless. The first thing I would say to anyone who asks is to remove “Map” from the conversation, just think of it as additional layers and it will open up a whole new world.

I really enjoyed putting this together and as always, extended gratitude to the #SportsVizSunday team for providing such an excellent platform.

The final viz is here. Please feel free to download and have a play if any of the ramblings above didn’t make sense!

Thank you for reading, I hope it was useful and please let me know if you have any questions.

Simon

Tallest Cities in the World

#SWDChallenge – March 2021 – MAPness

This months #SWDChallenge had one simple requirement, to make a design which included a map. Just last month I had published a viz of the Great Fire of London using maps so I was already in the “map zone”. As usual the first thing I needed to do was think of an idea. 2 options quickly came to mind, firstly, something around Phileas Fog’s 80 days around the world and secondly, a plot of the tallest buildings or tallest cities.

After researching on the internet, I found a really good resource SkyscraperCentre.com which had loads of information and facts so I went ahead with my second option.

Continue to read on or jump to a specific section if it’s more appealing.

The Data

After looking through what the website had to offer, I decided to create two map views. The first, main map which had the top 20 cities based on the number of tall buildings they had and the second, a pop out view which showed the top 10 buildings in that city. I choose to limit at these numbers because I had a manual task ahead of me.

The first data was simple. The Top 20 cities contained details around the population, density, area and of course the number of tall buildings each had.

The second was more interesting, for each of the 20 cities I wanted to plot their top 10 buildings and for that I needed each of their Latitude and Longitude details. Luckily the Skyscraper site had each building listed and then a useful section which had the address which clicked into a map.

Then I used the super useful resource that I had used to draw previously to find the corresponding map. Then I simply clicked the point and collected the Lat and Long details. Whilst this was very manual (around 4 hours to collect all 200) it was quite interesting exploring each of the cities.

Designing the Background

Pretty much everything I do in Tableau now has a background layer underneath. My tools of choice, Figma and Pixelmator Pro and used interchangeably and often based on how much playing around I want to do. For this I went with Pixelmator Pro.

Very quickly I had decided to have a blueprint style background and after a bit of research, decided to create my own. This was quite straightforward by filling the background with blue, adding a layer of “noise” to create a grain effect and then creating a series of lines criss-crossing the blueprint. The biggest challenge was working out how much to fade them to make them visible but not over power the main design. This was very much trial and error with colours, opacities and sizes.

Next, I did a small amount of fraying of the paper around the edges, just to give it a bit of a worn feel.

The main font I used I found by searching for architectural fonts was called CRAFTED and I also used another one which I wanted to look more handwritten, called CHALKBOARD this was used for some of the legends and also the comparison selections.

Because I wanted to create an effect of this being actually drawn I added some chalk effects including a few indeterminate smudges, crossings out and underlines. Originally I had a lot more but it seemed a bit busy by the end so I removed a lot of them. I also drew some chalk borders around the maps as they tend to end a bit abruptly in Tableau.

Finally, I added a shadowy Burj Khalifa. I think it looks a bit like a watermark but other than that I just liked it, and of course, it is currently the world’s tallest building. Below is the final background.

Building the maps

As I did last month for the Great Fire of London, I reference the excellent the two excellent resources for Mapbox that I use regularly.

Mapbox styling webinar by Jonny Walker
Using Mapbox in Tableau

I created two slightly different Map styles. The main cities one was a very plain map with minimal features, ensuring the colours were consistent with the chalky effect of the background.

The second map was a little more detailed, as it was a city specific view I added road detail and also water detail to bring out any city rivers that would help the viewer get their bearings.

Creating the Tableau Workbook

With the background and map designs done the last part was to bring it, and link it, all together in Tableau. The first part was to create two parameters. [Select City] and [Comparison], I’ll reference these later.

The main map view was very simple, placing the [Long] and [Lat] fields on Columns and Rows and [City] on detail, gave me a point for each of the 20 cities. With size on [Total number of tall buildings] and a bit of formatting for the dots to work alongside the map layer it was done.

The second “pop out” map was very similar. Using the City dataset again I placed the [Long] and [Lat] fields on Columns and Rows and put [Building] on detail. I created a ranking of the buildings by using Index.

The final part was to ensure that only the selected cities building were selected and therefore shown on the map. For this I created a calculated field called [City = Selected City] and filtered this to True.

Whilst the City map view was interesting I wanted to compliment that with a simple bar chart showing the Top 10 buildings. I went with a rounded bar chart view as it was slightly softer and again, ensured my [City = Selected City] was set to True. The trick with a rounded bar chart is to create two measures, the first being the actual end value and the second a hardcoded zero. Then with those two measures on the view, joining them together with a line type creates the rounded effect. There is an excellent tutorial here by Andy Kriebel.

The second trick was to ensure my labels would fit on the chart at the end of the bars. To do this, I created a calculated field called [Max Height + 25 -%] which takes the height of the tallest building and adds on 25%. Then I placed this field on the view as a reference line. Hiding the reference line formatting creates space at the end of the chart to ensure labels are shown.



The final part was to create a Dashboard Parameter Action to change the value of [Select City] when a City dot on the main map was hovered over. This controlled the pop out map and also the Top 10 buildings chart.

The section at the bottom I wanted to have a range of chart available to the viewer to see an overall city comparison and then 3 scatter plots showing the comparison between the number of tall buildings each city had compared with their populations, densities and areas. I didn’t want all four on the viz at the same time so went with the sheet swapping option. The main principles behind this are

  • A parameter (and parameter action) to control what’s been selected. [Comparison]
  • All the potentially selected sheets together in one container
  • The titles of all of the sheets hidden. Very important!
  • Filters on each of the sheets which select only themselves.

What this does is show only one sheet at a time and because all the other sheets have nothing visible they are collapsed into the container.

The individual sheets themselves were very simple, 3 scatter plots and 1 bar chart with 4 separate axis, which I prefer to a stacked bar.

The final part was connecting them together. For this I created 4 images, for each of the sheets, added them to my Tableau Repository and then created a sheet which laid these images out as a series of selection options. Then I needed a parameter action to link what was being hovered over to drive the [Comparison] parameter.

To finish off the design, I wanted to make sure that my charts were selectable but also had a feeling they were part of the design rather than added on top of a background. To achieve this, I created a “layer of noise” in Pixelmator which I added over the top the dashboard and then created transparent duplicates of the sheets. This ensured parameter actions would work but the whole view would seem as one. In essence, a bit of a design sandwich with

Original Background (Pixelmator)
Main Sheets (Tableau)
Noise Background (Pixelmator)
Transparent Sheets (Tableau)

Conclusions…and disappointments

The first thing to point out is that whilst the story above looks like a very linear journey from idea, to design, to Tableau it certainly didn’t pan out like that. I did mock ups in Tableau, played with the data, went back to Pixelmator to move some of the text, back to Tableau etc etc …..You get the point but rarely anything I do follows a certain pattern and I guess that’s probably similar with most people.

I really enjoyed designing the background with this one and spent the majority of focus on this above any Tableau technical aspects. That being said, there were a few little tricks in Tableau which I was quite pleased with. Whilst collecting the data was a very manual exercise it was good to explore each city and zoom in and around particular landmarks, I learned quite a bit especially about some of the Asian cities.

However, I leave with a slight feeling of unfulfillment as I have a nagging doubt that this could have been a little better. There are three main reasons for this

  1. The performance of Tableau Public doesn’t lend itself to interactive exploration. I think I had a pretty simple set of parameter actions but hovering on dots simply takes too long to change. It works so well on the standalone version it’s pretty frustrating to see it so slow in the public domain.
  2. Trying to download an image from Tableau Public usually works so well, but for whatever reason the maps didn’t show.
  3. I wanted to show a nice “City Selected” summary using background images and linking them to the parameter action so I created 20 city specific images and linked them together. These worked perfectly until I published to Tableau Public and then the Maps disappeared. The maps only returned when I removed the worksheet that had the background images. I spent a lot of time trying to resolve but found nothing that would work.

If anyone reading this has any thoughts then please let me know. I’ll probably raise a question on the Tableau Community Forums to see if anyone else has had the experience or maybe I was doing something unforeseen!

As always, thanks for reading and hopefully it was useful. Any questions, thoughts or comments, please drop me a line.

Simon

The Great Fire of London

#IronQuest – February 2020 – History

One of the most difficult things about #IronQuest is deciding the topic to pick in the first place. With a subject so broad as History this was definitely the case here. I had a look at the recommended resources but nothing caught my eye. In the end, I decided to go with something my son has been interested for a while, the great fire of London.

With the subject decided, I quite quickly landed upon a design idea. I wanted to show how the fire spread over the days and also incorporate a timeline, similar to what you might see in a museum. Finally, I wanted to add an old feel to the viz and if possible a burnt look although I thought this might challenge my design skills!

The Background

Most of the backgrounds I do for my vizzes are in Figma but on occasion I need to add a few more effects so I used Pixelmator Pro which is a photo editing software, similar to Photoshop.

I started off with a brownish background which I then added the noise effect to. This gives it the grainy view. The next step was to cut around the edge with a series of random cuts to give the effects of the fire burning the edges.

For the border, I selected the image and brought the selection inside the original image, to create the border. I filled that selection with the brownish/orange colour and again added noise.

The final step was to use the darken effect and a fairly large brush size to go and concentrate on a few areas which had been badly fire damaged as well as randomily darken other areas as well.

With the background done I needed to add the text. As Tableau only renders a few selected fonts anything more bespoke I’ve found works best this way. The font I found was called Grandjean and it was just the look I was after.

After adding the text elements I wanted, a title, a narrative, a prompt for the timeline and the footer and credits I was finished. Here is the final image below.

The Maps

There were two main things I wanted to achieve with the maps. 1) Make them look like they were old and 2) allow me to draw the fire and points of interest.

I have done a few maps before in Tableau and so I know that I could use MapBox to do a huge degree of customisation to a map layer which I could then use with my data. For anyone who is new to this or needs a reminder, like I did, then I’d throughly recommend checking out this tutorial from Jonni Walker.

I started in MapBox studio with a Blank style, follow the tutorial above to add the basic layers and then began playing with colours and opacities to get to something that I thought could pass as an old style map.

The other challenge I had was to try and make the map look old I needed to remove some of the newer additions to London, like train stations, main roads and bridges! This was quite easy using layer filtering. The only problem was that by removing buildings and bridges I also lost St Pauls and London Bridge, key landmarks that I wanted to remain as reference points. More on that later….

Bringing a new map layer into Tableau from Mapbox is easy. There is a far better tutorial than my explanation could offer. Here it is.

The final part was to draw the fire (and now key landmarks) onto the map. I did a bit of research and couldn’t find anything online which helped me apart from some images of maps which showed the fire on each day so I had to get manual.

I found a great online resource which allowed me to draw a series of points, creating a polygon, with the points recording the longitude and latitude. Perfect! The website is here.

Rather painstakingly, I drew points for each of the days of the fire, London Bridge, St Pauls and Pudding Lane (where the fire started). This took a lot of trail and error to try and best match up with the online resources but changes the points in the tool was quite easy. I ended with a dataset consisting of

  • Day (The day of the fire)
  • Type – Fire, St Pauls, London Bridge or Pudding Lane
  • Lat
  • Long
  • Point – Just a iterating ID for each of the types to create the path of the polygon

Then, I dropped [Long] (Columns) and [Lat] (Rows) onto the view. I created a map for each day so dropped [Day] onto Filter and because I wanted to colour the fire and landmarks differently added [Type] to colour. Finally, adding [Point] to path and changing the mark type to Polygon displayed the shapes I had created.

The only additional element was that I wanted to display Pudding Lane as a circle and so using the new Tableau feature Map Layers, I added a second layer for Pudding Lane and hid all the other items using a simple calculated field.

I did the same for each of the three maps.

Timeline

I wanted a timeline to allow viewers to scan through the key points of the fire but without becoming distracting to the impact the maps had. This was quite simple to create. For the data, I had a date and time field and then the narrative I wanted for which I used the excellent website greatfireoflondon.net.

I created a fire symbol which I save to my Tableau shapes repository and then added the [Date] and [Time] to columns as a combined field [Combo]

Then, by adding the [Date], [Time] and [Narrative] elements to the Marks Card was able to create a tooltip.

Map “Filters”

When looking through, I wasn’t happy with a couple of parts of the maps. Firstly, they looked to “clean” and secondly, the landmarks I had coloured differently weren’t labelled and so difficult to understand what they were.

In the end, I created a image overlay for the maps, again in Pixelmator, which used the same techniques as previously for the main images to create a frame, with a bit of noise and also adding the landmark names as well. Placed over the top of the maps as floating images, I was now happy.

I really enjoyed this #IronQuest and while this isn’t the most technical Tableau design I’ve ever done I was pleased to increase my MapBox skills and I was happy with the design of my background.

Thanks for taking the time to read, I hope it was useful.

Simon

#SWDChallenge – Dec 2020 Critique the (re)create

This months challenge was an interesting one and very similar to a popular visualisation community scheme, #MakeoverMonday, where an existing visual is shown with the task to review it and then build something different and hopefully better. Below was the initial chart.

Critique

Whenever giving feedback, I always try and be fair and considered in my responses and give feedback in a way that I wouldn’t mind receiving it. In this case it’s not to any one individual but it’s important to try and bear in mind that someone could well have created this at some point in time.

Starting off with what I liked

  • The headline is clear and has the currency denominator mentioned
  • The legend is well placed and also clear
  • The colours are fine and I quite like the bold line at the top of the blue area

Moving onto what I would consider changing

  • I don’t think area charts or lines in general are the best way of comparing distinct categories. In this case Sectors. More often these chart types are reserved for continuous data points, like time. I’m trying to associate Travel with Government, Travel with Consumer, Government with Tech which doesn’t need to be done
  • Because the two area overlap each other it’s impossible to see (without the labels) how far above/below the target the respective sectors might be.
  • Very rarely I think it’s necessary to label both the points and have an axis. I would choose one depending on the view.
  • The sector names being at a 45 degree angle makes it more difficult for the viewer than it should be
  • Gridlines – I would consider making the gridlines lighter or potentially removing them completely.
  • If the current view were to remain I would sort it differently, potentially by progress vs target or so at least there is a flow of some kind.

(re)create

With that critique in mind, my main goal was to show each of the sectors performance vs target clearly. I also wanted to sort the view in a way that made it easier to view the performance across all the areas and finally use a little colour to easily call out those out or underperforming.

I saw an interesting tutorial from Andy Kriebel on how to create a Candlestick Bar Chart in Tableau. I thought this would be a great starting point. Check out the YouTube video below for the tutorial. Well worth watching

Using the data and applying the methods from the tutorial got me a first view that looked something like this.

This looked ok. The Sectors were clear now, the comparisons between Actual and Target were easier and the Candlestick provided a little bit of extra context and was also used to sort. The original view used Measure Names in the view to break out into 3 rows per sector, the two bars for Actual and Target and then a Dual Axis to add on the Candlestick element.


However, I wasn’t too happy with the separate bars for Actual and Target. Quite often a bullet chart or Bar-In-Bar is used to show performance vs target. So I decided to create a version that should the Actual vs Target as a Bar-In-Bar.

To begin with, I had to set up the data slightly differently. I now didn’t want to split the view by Measure Names as I wanted Actual and Target on top of each other, not next to each other. The way I achieved this was to union another copy of the data onto the original. This duplicated the data but allowed me to use one copy of the data for the Bar-In-Bar and the other for the Candlestick using the [Table Name] field.

There are a few calculated fields needed to differentiate the two different tables but once I had them I was able to create the view I wanted. Screenshot below of this first stage

Looking ok, but I now wanted to add some colour, maybe an indicator of some kind and finally some labels for some added context on both the performance and the Candlestick. I prefer labelling directly rather than an axis if it keeps the view clean which I think it does here. Here is the final view.

I’m pleased with this version. At a glance it’s easy to see who is performing better and by how much. It’s easy to see who is underperforming with the ‘dot’ (which turns to | in Tableau Public!) indicator and if a little extra detail is needed that is available too.

Finally, the view was added to a dashboard with a title and use of colour to link the headline to the view. Here is the final dashboard (click to see on Tableau Public).


I enjoyed this challenge, it’s a really useful exercise to really look at a viz and see how it might be done differently and then of course, put those thoughts into practice.

Thanks for reading,
Simon

My experience of the Tableau Desktop Certified Associate Exam

I was pretty blown away by the response I got from my recent successful Tableau Associate Certification on Twitter so I decided to share my experiences in the hope that maybe one or two of the tips will help those in the future.


Resources I used –
Weeks before the exam

Firstly, there are a couple of really good Blog posts I read more than once when preparing for the exam.

  • This blog by Sarah Bartlett has 8 really useful tips on how to approach the exam.
  • This is a great resource by Elias Nordlinder covering lots of elements to the exam, both Associate and Specialist and covers all elements of preparation and good content as well.

And there were two main learning resources I used specifically for the exam.

LearningTableau.Com – This was extremely useful as it has a number of practice quizzes, questions and for a reasonable price three full length practice exams. I found the questions similar in style to the exam but more importantly it got me into the rhythm of the style of questions that would come up.

Emin Cengay’s Tableau Desktop Certified Associate YouTube video – This is a very useful watch to help prepare for the exam conditions on the day itself but if you watch the video there is also a link to a Udemy course by Emin which goes into great detail around the main concepts that will be tested in the exam and also includes two full length exams to try. Similar to the LearningTableau exams the questions are good and it’s a great help to get exam ready.


Preparation for the Exam – Recreate the environment –
Days before the exam

If at all possible try and recreate the environment you will be experiencing in the exam, for me this meant

  • A different room.  Because I wanted to have a hardwired LAN connection rather than a wifi one I moved my iMac downstairs.
  • One screen.  This is a big one.  If you are used to multiple screens when working then getting some practice with one is going to be really important.  When taking the exam you can only use one screen and this is checked by the proctor.
  • You’ll get an email in advance from the exam board with some pre-exam instructions.  Log into your portal a few days beforehand and you’ll see a countdown until the exam.  Even logging in and ensuring you know the login details will save potential panic on exam day.
  • Try using Tableau with the mouse avoiding keyboard shortcuts as the virtual environment doesn’t accept everything.  I didn’t even try Alt+Tab just in case it threw me out of the virtual environment!

Connecting to the Proctor –
Minutes before the Exam

Beforehand, reading the various instructions it seemed like the Proctor element might be a bit troublesome.  I read that it could take up to 30 minutes to connect to the Proctor!

Luckily it was far simpler than that.  But, do be ready to enable microphones, speakers and I also had to download and install a new Zoom style video call app called GoToMeeting.  You might want to do that beforehand.

If you have a portable WebCam, use it.  Unfortunately for me I don’t and just have the camera on the front of the iMac.  This made verification of a clean and clear living space slightly challenging and involved me having to pick up the iMac (while being careful not to pull the plug out) and hovering it in various positions across the desk and living room.

Finally, the exam began. The virtual environment isn’t the best and certainly very different to my normal set up so you might find yourself spending a minute of two playing with the windows to get them into decent positions. It didn’t really make a huge difference, the practical questions aren’t so complicated that you need a whole screen to solve them.


You’ve got time, pace it out –
During the Exam

The questions are balanced between theoretical and practical and I tended to get two or three on one type before two or three on the next.  The questions didn’t get progressively more difficult so it was possible to pace and ensure that there was enough time at the end.

I tried to do this pretty simply, if I was at question 18 or later half way in then I was on track.  In the end I hit the hour mark on about question 23.  Don’t forget to build in time to go back to any flagged questions.


Don’t second guess and use Google! – Practical vs Theoretical  – During the Exam

Personally, I found the practical questions easier.  It’s much more straightforward to know if you are right or wrong.  Typically I built my view, got an answer and then checked whether it was an available option.  In most cases it was and I simply reconfirmed my filters, calculations and moved on.  On a couple of occasions the answer wasn’t there, in these cases I resolved all but one by re-reading the question and correcting something.  There was only one that I really didn’t have any idea about and had to guess.  

The key is to breakdown the question and work through the view in a logical way.  Apply the filters first, then get the right level of detail in the view (Category, Region etc) and then look at the calculations, sets, groups etc you might need.  Whilst we all want to solve the question using the most elegant approach in Tableau, ultimately, you just need to get the answer right and that’s the beauty about Tableau, there is more than one way to do something.  There were times when I’m sure the correct approach flew out of my head so I ended up doing something completely different.  That’s OK, it’s the result that’s important here.  

On the theoretical side, the good thing is that they are multiple choice, the bad thing is that some of the questions are (Select all that apply).  This led to a lot of second guessing so I would probably suggest two things 1) trust your instincts and 2) USE GOOGLE.  This is allowed so take advantage.  I found a couple of the answers were almost word for word from the Tableau Help website so definitely look for these in the returned results.  Clearly Google isn’t going to help every question and it has the potential to be a time burner so use it wisely.


Where’s my certificate?! –
After the exam

Obviously I was really happy and wanted to run upstairs, tell my wife, do the #CertifiablyTableau tweet and so opened up my dashboard expecting to see the download certificate option.

Nothing.

The page hadn’t changed and the exam looked like it hadn’t even started.  In fact, the “reschedule exam” button was there!  “Oh no, the Proctor had shut down the session too quickly, I’ve lost my hard earned result!”  I even emailed the exam board helpdesk to see what had happened.

They told me to wait, it can take up to 48 hours to receive the notification, certificate etc.  Luckily within about 30 minutes everything had come through and I was able to celebrate properly.  That last part may well be a reflection on my personality but the slight worry did take the edge of initially so remember, the result doesn’t come through immediately!


I hope sharing some of these experiences will help when you come to take your certification and assist in some small way to a successful result.  

Thanks for reading.

A little bit about me

I guess in a way I’ve always been interested in data visualisation. I have an image in my head of one of my first attempts. I was looking to visualise the goalscorers from the 1991-92 Football League Division 4 season for Maidstone United. The vision in my mind is of a 3D, Patterned Textured, Staked Bar Chart in grayscale. If I find it in my parents loft I’ll scan it in and maybe use it as my logo. It’s a thing of beauty!

During the course of my career I have worked a lot with data and on occasion worked with Tableau to produce outputs. I’ve always really enjoyed this aspect but my output for work were always functional and rarely explored the fantastic potential Tableau has or, in fact, any design elements which I’ve come to learn are so important.

It was only really after I attended the fantastic Storytelling with Data course in 2018 with the excellent Cole Nussbaumer Knaflic that I really began to get the bug again. One of the most useful things from that course? The list of Twitter resources on the back page. I now had a place to begin!

Excellent resources list from the Storytelling with Data course

I got back home from the course and resurrected my Twitter profile page, which had been completely dormant until that point, it now had a purpose. I began following those on the list and having a look at the great content and blog articles.

Of course, the next most important thing to do, set up a Tableau Public Profile page. The first great thing about Tableau is that Tableau Public is free! What’s there to think about!

Twitter operational? Check. Tableau downloaded? Check. What next? Well, I had to actually do something. The second great thing about Tableau is the Community not only is it truly supportive and engaging but there are so many projects and programs that you can take part in. My first visualisation on Tableau Public was for the #SWDChallenge in March 2018.

Cycle Journeys in London for the #SWDChallenge – March 2028

From then on I have been gradually building up my profile, continuing to follow people on both Twitter and Tableau Public and submitting visualisations for a number of different community projects including #MakeOverMonday, #SportsVizSunday, #IronQuest and #Ironviz. All are amazing with some seriously dedicated and inspirational people supporting them. Each have their own plus points and as a way of practising visualisation skills and design techniques are incredibly useful.

The third great thing about Tableau is the Tableau User Groups (TUGs). I wouldn’t put networking particularly high up on my list of skills so I was a little nervous when I registered for my first London TUG in September 2019. I shouldn’t have worried it was a great group of friendly people and had begun to really look forward to them before lockdown kicked in. It’s a shame that they are having to be virtual at the moment. I am definitely looking forward to the day we can get back “to normal”.

As I write this, I have now 83 vizzes on my Tableau Public Profile and 120 followers. I also have 745 followers on Twitter. I am very proud of these numbers because I know the amount of hours of dedication I have put into increasing my design and visualisation skills and in some way I believe these numbers are a reflection of that.

Where will this blog go? To be honest, I’ve got no idea. For the time being I plan to just right about the visualisations I have published, my design choices and how I may have put together some of the more technical aspects. I’m hoping that even if one or two people read it and take something that it’s been worthwhile.

In time, I’d like to expand, and include sections on other great blogs that I regularly read and of course examples of visualisations that I have personally found engaging and inspirational.

Thank you for your time and do not hesitate to reach out if any questions or comments.

Simon