Blogs / Tableau / Creating Unique Custom Visuals in Tableau – Part 2

Creating Unique Custom Visuals in Tableau – Part 2

Jan 5, 2021

SHARE

Tableau provides one of the best platforms for dashboard designers to create unique stories with their data, using custom visualizations. Part 1 of this blog series explains a particular customization technique – Image overlaying to enhance bar charts.

This blog will explain:

  • Adding images or icons to data points.
  • Creating a combination of visual using three measures with different mark types (Circles, Shape & Bar) in a single axis and displayed in a single view.

This blog is an addition to compliment the previous blog as it includes a detailed guide to achieve the mentioned customizations with the help of a use case.

Here is the use case (data taken from the Regional sample workbook provided by Tableau):

You have college admissions data for various ethnic groups in the US. You wish to create an interesting visual by including emoticons and lollipop chart customization for college student’s count belonging to different ethnic groups.

Here is how you can achieve that:

Adding images to data points

1. Download the images you want to use in your dashboard. Images with white or transparent backgrounds are preferable.

Examples of emoticons to depict different ethnic groups:

Creating Unique Custom Visuals in Tableau – Part 2
Fig 1: Emoticons for different ethnic groups

2. Go to This PC –> Documents –>My Tableau Repository –> Create a separate folder for ethnicity. Move the ethnicity emoticons to this folder.

Creating Unique Custom Visuals in Tableau – Part 2
Fig 2: Ethnicity folder created in This PC–> Documents–> My Tableau Repository–>Shapes
Creating Unique Custom Visuals in Tableau – Part 2
Fig 3: Emoticons added to Ethnicity folder

Next, we will walk you through the steps to add these emoticons to data points.

Creating a combination visual with three different mark types (A detailed Guide)

In general, when adding measures to the same axis, you can use two methods:

  1. Using Measure Names dimension, which results in all measures (included in Measure Names) having the same mark type.
  2. Using Measure Names, add another measure beside it, and enable the Dual-axis This would result in measures included in Measure Names having the same mark type and the other measure having a different mark type (if needed).

But to have more than two mark types in a single view is tricky. You can follow the below steps (using the college admissions data) to achieve it:

Creating ‘Circle’ mark type

1. Create a calculated measure Count of Students as sum(1), which will provide the count of students based on the dimension used in the visual:

Creating Unique Custom Visuals in Tableau – Part 2
Fig 4: ‘Count of Students’ calculated measure

2. Drag the Count of Students measure to the Rows shelf and the Ethnicity dimension to the Columns Change the mark type to Circle in the Marks pane. Drag Ethnicity to the Label shelf in the Marks pane. Increase the circle size from the Size shelf and select the desired color from the Color shelf.

Creating Unique Custom Visuals in Tableau – Part 2
Fig 5: Adding ‘Count of Students’ to visual and changing the mark type

Creating ‘Shape’ mark type

1. Create another calculated measure- Icon measure as Count of Students + 2000, which will be used to place the ethnicity emoticons just above the Count of students datapoint.

Creating Unique Custom Visuals in Tableau – Part 2
Fig 6: ‘Icon measure’ calculated measure

2. Add Icon measure before Count of Students in the Rows On clicking the small in the Count of Students pill, select Dual Axis. Change the mark type of Icon measure to Shape in the Marks pane. Remove any dimensions or measures that is automatically added to the Label and Color shelf. Add the Ethnicity dimension to the Shape shelf. Click on Shape and select Ethnicity in the dropdown. You will see the emoticons you added to the Ethnicity folder in the 1st part of the blog. Assign the ethnic emoticons to their corresponding values. Change the size of emoticons from the Size shelf as needed. Right-click on the Count of Students axis and click Synchronize Axis. Right-click again and deselect Show Header. In sheet formatting, set the sheet shading to None and remove the gridlines.

Creating Unique Custom Visuals in Tableau – Part 2
Fig 7: Assigning emoticons to values in the Ethnicity dimension
Creating Unique Custom Visuals in Tableau – Part 2
Fig 8: Final result after adding emoticons to the visual

Creating ‘Bar’ mark type

1. Create a new sheet and drag Icon measure and Count of Students to the Rows On clicking the small in the Count of Students pill, select Dual Axis. Right-click on the Count of Students axis and click Synchronize Axis. Right-click again and deselect Show Header. Change the mark type of Icon measure to Circle in the Marks pane. Click on Color and change color to white. Change mark type of Count of Students to Bar. Reduce the bar size from the Size shelf so that you get a thin bar like this:

Creating Unique Custom Visuals in Tableau – Part 2
Fig 9: Final result after creating bars for ‘Count of Students’

Creating a Combination visual

1. Edit the axis of both sheets and set the Range to Fixed. Set an appropriate Fixed start and Fixed end This is a crucial step as the visual might become haphazard after filtering if the Range was ‘Automatic’.

Creating Unique Custom Visuals in Tableau – Part 2
Fig 10: Editing axis to make the Range fixed.

2. Create a new dashboard, select Floating, and pull in the sheet with the bars. Go to Layout and fix the position as required. Now pull in the sheet with the ethnic emoticons (sheet with transparent background) and superimpose it on the first sheet so their positions match precisely. Remove the sheet title of the first sheet. The result is a combination visual like this (3 different mark types in a single view):

Creating Unique Custom Visuals in Tableau – Part 2
Fig 11: Three different mark types in a single view

Since the axis range is set to Fixed, the visual will work even upon filtering:

Creating Unique Custom Visuals in Tableau – Part 2
Fig 12: Combination visual after filtering for ‘Business’ College type

Thus, you can use techniques like image overlaying, transparency, animations to create some really interesting and out-of-the-box custom visuals in Tableau.

Thanks for reading! Hope you found this blog interesting and useful. For more blogs on Tableau, you can visit here. To learn more about Visual BI’s Tableau Consulting & End User Training Programs, contact us here.


Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!