Tableau Software : Creating 538’s Election Prediction Chart in Tableau 2018.3

I stated earlier that my favorite part of the 538 chart was the arrow at the bottom that grows as you hover and shows which party would be gaining seats and how many. Creating the first iteration of this was relatively simple-it was just a bar chart that is either red or blue and grows in size based on a filter action sourced from the primary bar chart.

To create the arrow points on each end, I used PowerPoint to create two custom shapes. Each shape is essentially a white rectangle with a transparent triangle cut out of either the left or right. Note: In the images below, the checked area indicates that it is transparent.

Using a dual axis at the end of the bar chart, I was able to create what looks like an arrow point.

But, the original 538 chart used a gradient color from white to red/blue and I wanted to do the same. Unfortunately, Tableau does not allow bar charts to be colored using gradient color palettes. So, I needed to get a bit creative. I decided that I would try to break up the bar chart into 100 separate stacked marks using bins. I created an additional data set which I called Range with just one column and two rows.

Then, I joined that to my original data set and created bins on the Range field, and created a calculated field that divided the original bar size by 100. By placing the bins field on detail, it created 100 individual stacked marks. Since each is 1/100th the size of the original bar, the 100 marks added up to be the same size as the original. Next, using an Index table calculation-computed using the bins-I was able to assign a stepped gradient color to each individual mark. Finally, I used a dual axis and the same custom arrow end shapes to create the arrow point. The gif below attempts to show the individual marks.

Note: My apologies if this is a bit confusing. Feel free to download the workbook if you'd like to see exactly how it works. And let me know if you'd be interested in a more detailed explanation of how to create a gradient colored bar chart.