Equally scaled table cell visualisations

One handy feature of Looker’s table visualisation type is Cell Visualisation. This allows you to show a bar in the table’s cells so that viewers can get an easier idea of the values without having to read lots of numbers.

The Cell Visualisation setting in the table visualisation’s series settings.

This is great for adding some quick readability, but if you have several series/measures and you want the cell visualisations to use the same scale there’s no setting for that. This is a real shame as it largely defeats the purpose of making your tables easier to read when you have several series/measure you want to compare!

Cell Visualisations for different series have different size and colour gradient scales and so aren’t easy to visually compare.

Luckily there’s a way you can have all the cell visualisation bars use the same scale, via LookML, Liquid, and HTML/CSS.

Looker’s built-in Liquid variables give you access to the raw value being displayed: {{ value }}. For percentage measures this is usually (but not always) a decimal value between 0 and 1. Using the measures’ html: parameter, some Liquid maths, and whatever HTML/CSS tags & attributes Looker allows, we can create our own version of the cell visualisation and ensure the sizes of the bars are scaled proportionally the same for all of our measures.

Below is an example of what the html: might look like for one of our measures. For the others I've used a different background-color for each.

By doing the same thing for all our measures (with different colours) we’re able to achieve our goal - a table with in-cell visualisation that are easy to compare at a glance. Note that you need to disable Looker’s cell visualisations or you’ll end up with a visual mess!

Our simple, but equally/proportionally scale in-cell visualisation bars.

This is just a very basic example. My HTML skills are pretty poor and this approach can cause a few other challenges or problems, but it does give us what we want and demonstrate how you can build customised visualisations for fields based on their value. Notably our series only have a single colour each. I’m not sure if colour gradients are doable, and if they they are it would likely be a lot of messy code, which needs to be applied in every measure.

What do you think? How would you do this differently? What other potential problems are there? Let me know in the comments!