This is a sequel to my recent post: #TweakThursday 22: Ordering By Narrative. That one is focusing on dashboard tweaking. Here I would give details on ways of boosting a stacked area chart.

Stacked area chart is visually attractive in displaying multiple members' values evolving along another dimension, such as time series.

There may be various ways of coloring the stacked area chart. But I found that using gradient shades of the same color makes the chart highly attractive.

On the other hand, stacked area chart is vertically challenged because we can't compare easily along the vertical dimension. The contrast is not as sharp as in bar chart. We will add a bar chart in tooltips to boost the vertical comparison.

The example here is based on a viz by Andy Cotgreave and a recent Viz of the Day, results of the #MakeoverMonday.

1. Coloring the chart
The main steps include:
- Using gradient (discrete) shades of the same color
- Darker to lighter from bottom to top
- Highlighting one member using a different color if needed

Please refer to this article on highlighting one member among others in gradient shades of the same color. The highlighting can be made dynamic via a parameter.

2. Tooltip design
In the bar chart in tooltips, I would like to highlight the data mark I am hovering opon in a different color. I thus need 3 sets of new fields/variables. For a given dimension member, only one of the blue bar and the orange bar is lighted up at anytime.

The creation of the following variables can be made easier by a technique here. The bar chart in tooltips is described here.

Blue bars for the data marks when they are not hovered upon. Note that a window function has to be used to get the values of non-hovered data marks.
- Orange bars for the data marks when they are hovered upon.
- Labels for the orange bars. Only one label will show at anytime.
The code for the tooltips are as follows:
The resulting tooltip is as follows:

That's how we can make a boosted stacked area chart. This technique can apply to stacked bar chart or any chart where you want to enhance the contrast in some dimension.

The workbook can be accessed here to view the tooltips in action.
1

View comments

(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.