[First, this is mainly a server feature. You have to publish the viz to the server to see it in action. It doesn't work well on Tableau Desktop. There exists a curious discrepancy between desktop and server renderings of visual tooltips.]

Here are a couple of facts about visual tooltips:
  • They are based on regular charts
  • They are turned on/off by action filters
By laying "visual tooltips" on top of "visual tooltips", or "Viz on Viz" we can create recursive drilldowns.

In theory, we can repeat the drilldown process infinitely. In practice, the process is limited by the number of dimensions in the dataset or by our imagination.

An interesting feature of this technique is that we can do all the drilldowns in place/in context, instead of jumping to another tab or page.

Let's see an example as follows, which is built on the Superstore dataset. Click the image to view the interactive version.
There will be 4 levels of drilldown hierarchy on sales figures:
  • Year>Segment>Category>SubCategory
The chart for each level is as follows:
  1. By Year: Vertical Bars
  2. By Segment: Vertical Bars + Title Sheet
  3. By Category: Donut Chart
  4. By SubCategory: Horizontal Bars + Title Sheet
Feel free to pick the chart types you like in your own design.

The main design steps are:
- Create the above charts and sheets

- Create a new dashboard.
Here we use the sales by year bar chart as the base. Drag vertical containers (in FLOATING mode) into desired positions where visual tooltips will appear. Put every chart/sheet (in TILED mode) into a respective container. Remember to hide sheet titles. If you need titles, use another sheet. The reason is that the action filters won't hide regular sheet titles.

- Create drilldown action filters between every 2 successive drilldown charts
Note that each chart/sheet has to carry all the previous drilldown dimensions.

- Use the layout manager at the lower left corner:
  1. Fine tune the position and size of each container. 
  2. Move lower hierarchy containers on top of higher hierarchy ones. Just press mouse and move.
- Set the action filters to be "Select" and/or set the last drilldown action filter to be "Hover"

- Validate all the drilldown filters in Desktop

- Publish the design to the Server and validate the resulting viz again

Voila, that's about it.

A few further design tips:
- Plan your visual tooltips first. The number of tooltips can be as many as that of data marks. We can reduce the number of tooltips by sharing one per multiple data marks.
- We need one sheet per tooltip. Most of them are lookalike. We can create them by replicating.
- Create a single hierarchy of tooltips and validate it first, before replicating tooltip sheets.
- Create sets as filters that allow action filters to turn the sheets on/off.
- Set tooltip background different from the overlapping chart.
- Show successive dimensions in lower hierarchy tooltips.
3

View comments

  1. That's a great way to continue the drill-down through the pop-up windows. Is there a way to add a close (x) button on each of the pop-up windows? Then it would be easier for the user to know how to close the pop-up window. Seems the clicking again option to close the windows isn't that intuitive.

    ReplyDelete
    Replies
    1. Added tips in tooltips. Check again. Thanks for the comment.

      Delete
    2. Thanks for the info. So, I guess it's not possible to add a close button directly on the pop-up window? The tooltip is a nice workaround.

      Delete

(Refresh the page if you want to view the gif image multiple times. Or go to Tableau Public and click the button at the top-right corner.)

Jake and I collaborated on a dashboard. He told me that he learnt a way to create an in-place help page in Tableau. He first saw it at a conference somewhere and couldn't recall who the speaker was. So I am blogging here about it but the credit goes to somebody else. If anyone knows who the original creator is, leave a comment below.

The key idea is to float a semi transparent worksheet on top of the dashboard, where a help text box is strategically placed on top of each chart. This way, we can explain how to view each chart and what data points are important, etc. This worksheet is collapsible by a show/hide button. 

Below I would like to show how this worksheet can be constructed.

1. Sheet with a single data mark.

  • Double click the empty space in Marks panel and add two single quotes. Make the null pill a text label. This creates a single null mark.
  • Set the view as "Entire View"

2. Create an show/hide button

  • Go to the target dashboard
  • Drag a floating vertical container to the dashboard, making it cover all the area of interest.
  • Drag the Single Null Mark sheet and drop it into the above container. Hide the sheet title.
  • Create an open/close button for the container and place the button at the top-right corner.

3. Add annotations

  • Format the sheet background opacity as 70% in the layout manager             
  • Select area annotations and place them anywhere of interest. 
  • Write help text and format it to highlight important messages.  
  • The text can serve as functional guide and/or insight guide.

Here is an example. Feel free to download the workbook and explore. Click the "i" button at the top-right corner to view the in-place help. 

0

Add a comment

Blog Archive
Loading
Dynamic Views theme. Powered by Blogger. Report Abuse.