Tableau Slope Graphs

We’ve all seen those “before and after” pictures on the internet. They are super popular and there’s a good reason for that.

People love seeing transformation over a certain period of time.

When you are working with data, showing transformation over time is done all the time. It’s such a powerful way to tell a story with your data.

As part of the Makeover Monday weekly social data project, I came across the table below showing 2017-2018 Premier League predictions and the actual outcomes, created by the fine fine folks at The Guardian

So the underlying data here is a great example of “before” (predictions) and “after” (reality).

But the visualization is pretty boring (basically an Excel looking table with some team icons) and doesn’t really tell me anything interesting.

Here’s what I mean

• The data table is very busy. The team icons are pretty distracting from the overall point of the visualization.
• You have to hunt around to find the team you are interested in each column. My eyes are getting a real workout here!
• I kinda want to know how well The Guardian was at predicting the outcome overall. There’s no summary here…just a list of teams.

You get the point. This Excel-looking table can be visualized to give more context and to make it more interesting to the intended audience.

Slope graphs are a great way of showing “before and after” data in an interesting way.

Here’s the problem: most people overcomplicate Tableau slope graphs.

It’s true: check out all of these people searching for help on Tableau slope graphs.

Now I know why these people don’t know the exact step-by-step process for creating a slope graph in Tableau. It’s not a “standard” graph. It’s a bit more advanced. So it’s rarely taught in trainings and in classrooms.

But slope graphs are too powerful to ignore and Tableau makes them pretty easy (if you follow the 7-step proven process outlined below).

So, I decided to build the slope graph in Tableau. I also knew that I wanted to add some context to show how well the predictions actually were for The Guardian team.

Here’s the final result (this is the most basic Tableau slope graph)

The 6-Step Process to Create Tableau Slope Graphs

(NOTE: if you want something more advanced, check out the more advanced version down below)

1. Open this Excel file in Tableau

2. Drag the Predicted Finish measure to the Rows shelf and drag the Actual Finish to the x-axis label to automatically create two bar charts

3. Drag Team to the Label section of the Marks card and change the Mark type to Lines

4. Right-click the x-axis and select Edit from the popup menu and check off the Reverse box in the Scale section so the numbers show 0 at the top of the slope graph and 20 at the bottom

5. Create a calculated field to show the Change from Predicted Finish to Actual Finish and drag that field to the colors section of the Marks card. Adjust the size of the lines as needed (Field Name: Change Calculation: [Predicted Finish] – [Actual Finish])

6. Add line markers, adjust the formatting, and sort the Measure Name fields so that the Predicted column is to the left of the Actual column and format as needed.

Here’s the full process in one image if you want to follow along 🙂

Congratulations! You’ve now created your own basic slope graph in Tableau.

Next steps

Of course, there are more advanced options for Tableau slope graphs

Here is a dashboard I built for the same makeover Monday project I mentioned earlier.

Take a look at the differences

• I added a dashboard title to make the point of the dashboard super obvious
• I added a short paragraph to give more context to the graphs below
• I created a few prediction accuracy groups so that we can see how well The Guardian actually did overall with their predictions

But I didn’t stop there

• Next, I added big numbers to the top with color-coded circles. The purpose of that section is a) to give some more context on the overall accuracy of their predictions and b) to provide a color legend for the slope graph beneath it. It’s always good to remove extra stuff from a dashboard when possible.
• Then I created a few calculated fields to show some icons and describe what was showing in the graph. This was a bit overkill, but I had some fun and I think it helped tell the story.
• For example, I created an up or down arrow based on the prediction vs. reality scoring. I also included the numeric value along with the icon.

I also added some text and emojis to let the reader know if the team performed better or worse than predicted by The Guardian.

I mentioned it before, but these pieces weren’t absolutely critical. They do give some personality to the dashboard and I’m thinking about the intended audience. Remember that the original data table is on the Guardian website so I built my dashboard thinking that it might be dropped in place of the original.

I also adjusted the fonts and colors to match the style of The Guardian article. I think this is always a nice touch and is pretty easy to get done so why not?

Here are the calculated fields I added to my Tableau slope graph to give even more context and add some personality to the dashboard to make it more interesting.

[Predicted Finish] -  [Actual Finish]

IF [Prediction Change] < 0 then STR([Prediction Change]) ELSEIF [Prediction Change] > 0 then "+"+STR([Prediction Change]) else "+"+STR([Prediction Change]) END

IF [Prediction Change] < -5 then "Much worse than Predicted" ELSEIF [Prediction Change] < 0 then "Worse than Predicted" ELSEIF [Prediction Change] > 5 then "Much better than Predicted" ELSEIF [Prediction Change] > 0 then "Better than Predicted" else "Exactly as Predicted" END

IF [Prediction Change] < -5 then "much worse than predicted" ELSEIF [Prediction Change] < 0 then "worse than predicted" ELSEIF [Prediction Change] > 5 then "much better than predicted" ELSEIF [Prediction Change] > 0 then "better than predicted" else "exactly as predicted" END

IF [Prediction Change] < 0 then "▼" ELSEIF [Prediction Change] > 0 then "▲" else "◀▶" END

IF [Prediction Change] < 0 then "😓" ELSEIF [Prediction Change] > 0 then "🤩" else "😌" END

IF [Prediction Change] = 1 then "improved 1 spot" ELSEIF [Prediction Change] = -1 then "dropped 1 spot" ELSEIF [Prediction Change] < 0 then "dropped " + STR(abs([Prediction Change])) +" spots" ELSE if [Prediction Change] > 0 then "improved " + str(ABS([Prediction Change])) +" spots" ELSE "matched our prediction" END