Home | About | Services | Contact | Insights


3/25/2014
A Graph Recreation in Tableau - Part 2: How To Build


I received a number of pings about yesterday's post showing the sankey-style slopegraph in Tableau (here). Here are the basics of the recreation using calculations in Tableau to simplify the process even further.

Original graph is here.

INSTRUCTIONS UPDATED 4/4/2014- Thanks to Tableau Zen Master Jonathan Drummey for pointing out that the Xval field is not needed. Simply replace Xval with t.

To create this visualization I use the Sigmoid Function: S(t )=1/(1+e (-t ))
(more information here.)

In Tableau I use the function EXP(1) for e. So we need the input variable t. We also need a dummy variable for the x-axis ranging from 1 to 2. Therefore we need 5 4 fields.

State, 2012 Ranking, 2013 Ranking, t, Xval

To get the shape of the line I am going to plot 49 points for each state (49 was simply used to get enough points to plot the shape of the curves and is the same number of values in t ).
t = a value between -6 and 6 in .25 increments (which is 49 values)
Xval = a value between 1 and 2 in 49 equal increments (this could also be 1 to 49 in increments of 1 if that's easier - this is simply an x-axis value to plot the curves)

The data file is available here so you can load and follow along in Tableau. There are 3 extra fields in the Excel file to show the calculations, but they are not needed in Tableau.

Step 1: Open Tableau and Import Data

Step 2: Create some calculated fields

   Calculated Field Name: Sigmoid Function
   Formula: 1/(1+EXP(1)^-[t])

   Calculated Field Name: Curve
   Formula:

Formula Updated 4/8/2014- Thanks to Catherine Rivier for offering a much more elegant solution.
      IF [2013 Ranking]>[2012 Ranking] then
      MIN([2012 Ranking],[2013 Ranking])+([Sigmoid Function]*ABS([2013 Ranking]-[2012 Ranking]))
      ELSE
      MAX([2012 Ranking],[2013 Ranking])-([Sigmoid Function]*ABS([2013 Ranking]-[2012 Ranking]))
      END
      [2012 Ranking] + (([2013 Ranking]-[2012 Ranking])*[Sigmoid Function])

   Calculated Field Name: Color
   Formula:
      IF [Curve] <10.5 then 1
      ELSEIF [Curve] <20.5 then 2
      ELSEIF [Curve] <30.5 then 3
      ELSEIF [Curve] <40.5 then 4
      ELSE 5 END

   Calculated Field Name: Size
   Formula: ABS([2013 Ranking]-[2012 Ranking])

Step 3: Build the Viz

   Move Xval t to Columns
   Move Curve to Rows
   Move State to Details
   Move Xval t to Details and Convert to Dimension
   Set Marks to Line
   Edit X-Axis to Fixed with Start = -6.5 and End = 6.5 (the extra .5 allows room for the labels)
   Edit Y-Axis and Reverse Scale
   Move Size to Size
   Move Color to Color
   Edit Color using Stepped Color with 5 Steps
   Uncheck "Show Header" on Y-Axis and X-Axis
   Move State to Label
   Select Left most points (at X = -6) and Select "Always Show" under Marks Label
   Repeat for Right most points (at X = 6)
   Format Curve to Number Format with 0 decimals
   Move Curve to Label
   Format Label to "<SUM(Curve)>. <State>"
   Format Sheet Lines to remove Gridlines and Zero Line (set to "None")
   Format Sheet Borders to remove border (Row Divider and Column Divider Pane to "None")
   Format Font Style/Color and Viz Spacing as needed

   UPDATED 4/2/2014
   Click Color on the sheet and set "Markers" to "None". This will remove the dots at the end points.


You should now have a visualization that looks like the example. Use ColorPic (free color tool) to get the colors just right and import into the Tableau Preference file using type="ordered-sequential" for this categorical color scheme.

I hope you find this helpful. If you have any questions feel free to email me at Jeff@DataPlusScience.com

Also, check out the visualizations in the Elite 8 of the Tableau Sports Viz Competition and vote for my Viz here!

Jeffrey A. Shaffer

Follow on Twitter @HighVizAbility


Learn About Tableau