Viewpoint: Tableau & Adobe Illustrator

An opinion piece on how the two tools can work in unison and what we can learn.

Since Tableau version 2019.2 brought us the ability to utilise vector graphics in our visualisations via image and button objects, I felt this moved Tableau a significant step towards the design world of Adobe Illustrator. In doing so, Tableau has forged a path between the two companies through this product development helping them become closer than ever before. It must be said of this point that this is not a re-direction of Tableau and their future goals, but more of a broadening of their software capabilities. I do not think anyone is expecting Tableau to move into a position to become a competitor to the Adobe suite of creative Apps (InDesign, Illustrator, Photoshop etc). Yet, this semi-recent Tableau development, of opening up the ability to utilise vector graphics to its repertoire, now means Tableau and Illustrator can forge a close symbiosis that all us visualisation developers should be chomping at the bit to be involved with.

I personally am massively excited by the potential of using both tools together in harmony.

At the end of 2019, I identified a personal development point where I wanted to progress my own learning curve with Adobe Illustrator, having only dabbled to an extent up to that point.  A couple of weeks ago I spent a whole week on an intensive five day training course in Adobe Illustrator, taking me from 'beginner' to 'advanced' and culminating in becoming Adobe Certified at the end of the course. This training has given me a real solid base understanding of the Illustrator App and as I progressed through the training, I was finding more and more Illustrator features that I felt would be transferable into our Tableau visualisations, giving a couple of examples such as: graphic design of titles - with near endless control over letter placement and form, and also building iconography for your dashboards buttons.

It is exciting to think along these lines of how Illustrator can supplement your visualisation work, but you would be mistaken if you thought this was my reason for seeking to develop my skills with Illustrator.  My requirements were quite the reverse - I wanted to learn Illustrator from the prospect of bringing my visualisation work out of Tableau and into Illustrator, to create data driven infographics and data stories.

Why Illustrator then, why not just build them in Tableau? 

Tableau in my experience is the market leading data visualisation tool, built for powerful manipulation of vast data sources and bringing that data to consumable interactive visualisations.  The Tableau community push the tool to its creative limits through a multitude of projects and Tableau's own competition - IronViz.  The fabulous creative work from the community is a consequence of the Tableau continually progressing its product with each new release, adding new features and functionality.  Yet, Tableau is not specifically designed for graphic work and not designed for printing professionally.  It understandably has limited features in allowing its users control over their visualisation compositions and designs.

*For purposes of this blog post I will use this dashboard set up

A good example of how Tableau is not set up for graphic work is this: you can now import SVG graphics into Tableau,  these graphics will not lose their definition as you zoom in on them while they are in the Tableau visualisation because they are vector based and built through mathematical calculations and not pixel based.  Yet, as soon as you try to turn your Tableau visualisation in to a suitable format for printing, these elements become rasterised in their output.

A recent common trend coming from professional printing companies is the to request work to be sent to them in PDF format, rather than in Illustrator files or such like.  Have you every tried printing to PDF from Tableau?  When you do print,  it can be really powerful to turn your visualisations into SVG based images.  Text included in your dashboards and also every mark on your charts, are all converted to SVG.  In the PDF you can zoom into to them without any pixelization, but have you also noticed how your button icon images on the same dashboard, that were originally SVG files, are now rasterised (i.e. they pixelate when zoomed on)?  The same would go for any other vector graphics you place as objects in your wider visualisation composition.

See how the icons are now pixelated despite the source file for them being a vector graphic

We have all used Tableau Public for creating fun, non-business dashboards and when doing so, we find the list of acceptable web-fonts on Tableau Public is very limiting creatively.  So what do we all do?  We find a typeface we like and create our text copy outside of Tableau and import it back into our visualisation as an image - normally a raster based PNG file.  Which is fine for displaying on Tableau Public's own website, but as soon as you want to print that same visualisation for any display, you run the risk of any images in your visualisation, vector or raster based, becoming pixelated during the print process.

*Now I must admit here, that good poster design would donate that some pixilation on printing in large sizes is acceptable.  This is because graphics at that scale are intended to be viewed at a distance and not necessarily up close, where pixilation can be spotted.  It can even be beneficial to use lower resolution raster images (such as 150dpi rather than 300dpi) when sending to printers, which will actually speed up the print process - but that is another story as to why!

So my solution, and the basis for my Illustrator training was to utilise Tableau's ability to turn charts into SVG images via a PDF print and combine it with Illustrators ability to read and open PDF's while maintaining their SVG status.  Suddenly, we have the ability to use the best of Tableau (creating data driven visuals) with the best of Illustrator (graphic design control built for print).  It was the need to create data driven infographics designed for posters for my day job within Dyson that kicked off my drive to better understand Adobe Illustrator.

Creating data driven infographics for poster printing is just one of the benefits of working with Tableau and Illustrator in harmony.  There are many more benefits that can be gained from combining the best of both, particularly using Illustrator's graphic control to create elements to bring into Tableau, such as:

Iconography - Create your own library of icons, that can be built using rules that you define, without the need to sign up to multiple icon sites or even compromise your design by using unsuitable icons or icons in a low resolution.

Title graphic design - Controlling text is one of the big plusses in Illustrator, be creative and use the features available to create titles that support and are in keeping with your visualisation composition and avoid overpowering the rest of the piece.

Button design - Similar to Iconography, you can build a suite of button designs that support the theme of your work.  Again bring them through as SVG, to make the most of Tableau features.

Backdrops - Create more interesting backgrounds to supplement your visualisations, whether they are straightforward gradients or host a more defined structure to frame your charts and text and to help direct the reader through the viz.

Chart Frames - more interesting boxes  / shapes that charts are placed on top of.  When done right, framing charts can draw your readers attention to particular charts and will not distract.

Wireframing dashboards - using Illustrators ability to place objects accurately to the pixel, you can quickly mock up a dashboard or investigate design tweaks outside of the actual viz build.

Infographics - as spoken about above, bringing Tableau charts into Illustrator and combining with the Illustrator App capability for graphic work.

Tableau Mobile Design - designing for mobile will require as many of your objects in your viz to be vector based.  Why?  because your users will naturally pinch / opposite-of-pinch their mobile screens, like with any mobile app, to zoom in and out and potentially zoom in to extreme levels.  You will want your viz to stand that sort of scrutiny and not pixelate.

Interesting typography - I mentioned briefly above that those using Tableau Public have a long standing issue with hosting their vizzes on the Tableau Public site and being limited to a set number of fonts, unless you bring those in as images - normally PNG.  Illustrator would allow you to write your text copy using a typeface of your choice and then convert that to SVG.  Which is particularly useful when wanting to create clean crisp titles for your visualisations, or even knowing that a high number of people viewing your visualisation will do so via mobiles or tablets.

Where can Tableau improve?

There is one element left in our Tableau builds where we cannot utilise vector graphics currently (at the time of writing version 2020.1).  That is Tableau's shape marks.  Shape marks are a heavily utilised feature in conjunction with custom shapes, such as iconography files (rather than your standard circles, diamonds, squares and other mathematical shapes).  We use iconography to visually represent topics, categories, results etc and at the moment, we do this using typically PNG raster images (for their transparency), as this is all that is available to us.

What I would really like to see Tableau adopt is to open up shape marks in our chart for using vector based graphics.  This would complete the product in my eyes and as a visualisation developer, you then have the comfort that dashboards you have developed will be able to stand close scrutiny on any device AND when printed professional - if you go through the steps outlined above using an App such as Adobe Illustrator.

I mentioned at the beginning of this post, that converting Tableau workbooks to PDF meant SVG images are converted to raster, so the solution was to take the charts (that are SVG in a PDF output) and place them into Illustrator separately and build from there.  Well, there is an issue with the shape marks in Tableau, these are raster based and if you had a chart that was using custom shape marks and printed it to PDF those marks would remain raster based and opening the PDF in Illustrator was have no effect.  The same would be for sending those charts for printing, they would not print well in a large scale.

Standard bar charts in PDF are converted into vector graphics

Standard circle marks in PDF are converted into vector graphics

Standard shape marks in PDF are NOT converted into vector graphics and they PIXELATE

So my wish / ask / hope of Tableau, please expand the shape mark options to include vector graphics.  For me that would complete that part of the Tableau package.

I would like to finish this blog post with another observation on where I think Tableau can improve.  This time, this observation is driven from my learning of Adobe Illustrator and where I think Tableau can look towards other market leading software (such as this one) and learn from them.

If you were to ask a Tableau developer colleague "what features would I like Tableau to introduce that will aid the design of dashboards / visualisations?", you would typically expect a response such as: 'gradient fills', 'rotating objects', 'add effects to objects, such as drop shadows' and even 'draw lines, shapes and arrows on a dashboard', sounds familiar right?  Whilst these responses are not wrong in any way, I personally feel that this would be pushing Tableau further into graphic design package than is necessary, when in fact I feel there are bigger gains to be had when asking for development of the Tableau.

So, what can Tableau learn from Illustrator?

In version 2018.3, Tableau introduced the ability to give your charts transparent backgrounds.  Doesn't sound like much a change on the face of it, but in fact from a design perspective this was ground breaking.  When combined with the ability to 'float' sheets on your dashboard, this gave all Tableau developers the ability to layer chart over each other to create more complex and sophisticated visuals.  This has been an undoubted success from the development team.  This feature is highly used in one-off creative work on Tableau Public, but less so in your work environment within your business dashboards.  Why?  Maybe a lack of trust that floating objects will stay where intended when publishing to Tableau Server?  Maybe some of you are still developing dashboards with automatic sizing dimensions or constraining the dimensions within fixed dashboard boundaries?  Or is it because, layering sheets is a pain to edit and tweak.  For the one-off visualisation on Tableau Public, this is an evil we can tolerate, but for mass producing Business Dashboards in this way is just not effective.

So Illustrator to the rescue!

There are three elements to Illustrator that I feel make it such an effective design tool to use:

1. the Pen tool  - drawing Bezier Curves between editable anchor points
2. the Smart guides - guide lines that connect to other objects highlighting alignment
3. the Layer panel - giving full control with what you are developing

It is this Layer Panel that in my opinion from a UI perspective is the 'jewel in the crown' for Illustrator and one that Tableau can massively learn from.  Both products have their version of a Layer Panel, but their capabilities are vastly different.  I will try to briefly explain each.

Tableau
The 'layer panel' in Tableau is called "Item hierarchy" and is found in the bottom of the Layout toolbar and lists all the objects placed on the dashboard in the order of how they are layered on top of each other.  The user has the ability to rename the objects and change the layering order by dragging and dropping the objects up and down the list.  That's it for the Tableau 'layer panel'.

Illustrator
The layer panel is accessed by selecting the layer icon from the right-side toolbar.  This toolbar is designed to separate the objects placed on the Artboard (Illustrator's equivalent of a dashboard) and give the users full control of their objects when creating their designs.  It achieves this with a number features within the Layer panel.

These features are:

Sub-layering - Layers are a build at parent and child levels.  At child level, objects are ordered and arranged in the same way as the Tableau layering.  At parent level, layers are ordered and arranged on top of each other.  These layers are then used to separate groups of objects from each other.

Layer / Object locking (padlocks) - you can isolate and lock down single and multiple layers, so that the user cannot select any objects within that layer.  You can also lock down individual object within layers.  If objects are placed on top of each other in separate layers and the top most layer is locked, then selections made will automatically target the object on the next available layer.

Visibility (eye icons) - you can isolate layers or objects and choose to remove them from view or add them back at will.  This allows you to de-clutter the artboard when working on specific layers, and also allows you to add layers that act as guides to the layers above and turn them off when finished.

Move - like with Tableau, you are able to move objects order that they are placed and also move the order of the layers.

If Tableau were to increase the functionality of their layer panel to mirror the abilities of Illustrator then open a whole world of control in Tableau design.  Imagine this hypothetical set up in Tableau:

(top layer)
Layer 5 - overlay charts
Layer 4 - base charts
Layer 3 - icons and buttons
Layer 2 - titles, footer and context. Text objects
Layer 1 - corporate frame backdrop.svg
(bottom layer)

You would now be able to interact with each of these layers as you choose by turning on and off the locking of each layer or its visibility.  You could move the layer order as you see fit.  You would even be able to lock certain objects that would stop users interacting with them, without workaround solutions such as floating blanks over them.

If you have ever tried having multiple collapsible containers in Tableau, that all open their container in the same space / dashboard coordinates, then you will find dragging objects into the container stops working.  Tableau doesn't seem to be able to process this and so you have to move the containers away from each other, place the objects within them as you need and then return the containers to layer over each other.  Well, what if you could choose which layer the container could open on, making it easier for you to place objects within them - by controlling the layers locking status.

Imagine if each layer could be given the option to Tile or Float, you would then be able to tile on each layer, gaining total control on building a dashboard that could resize automatically in conjunction with layering charts over each other.

This parent and child layering, would help to give real control and depth to your dashboard designs.  

There are other features I could continue to highlight and talk about within this blog, that Tableau could benefit learning from Illustrator's interface, features such as: Smart guides, standard ruler guides and a lovely little feature of choosing where on an object it's x/y positioning is taken from (i.e. object centre, top-left corner... etc).  However, I have probably written enough at this point on this blog post.

If you have made it this far, thank you for reading!  I appreciate you taking the time to read it.  If you have any feedback for me, please do contact me, via any of my contact details.

I hope this post has given you some food for thought and I hope I have done the benefits of working with Tableau and Adobe Illustrator in tandem justice!

Thanks for reading

Sam