Sigmoid function can provide a smooth curve connecting two points in space. We have seen it in a number of graphical representations such as Sankey chart or this one.
Given any two points, a Sigmoid curve can be drawn between the two. As a result, all we need are two rows of data which define the two points in space. Below will lay out the steps to create a Sigmoid curve. And we will also re-create the chart that Jeffrey Shaffer has done with a table of over 2000 rows of data. This creation is inspired by Rody Zakovich's recent post. Rody also has been creating Sigmoid curves using two rows. Joe Mako, Chris Love and Alan Eldridge have done great work on creating curved line by data densification. I am just building on their prior work.
What is a Sigmoid function?
Its math function is written as
y(x)=1/(1+exp(-x)) or y(x)=1/(1+e^(-x))
The drawing of this function is as follows (Curve=y)
Using the Sigmoid curve for connecting two dots could be a better visual representation than just a straight line.
Implementation in Tableau
In our example to show the ranking change from 2012 to 2013, we need two rows data as follows
Then we need to define the number of points we need to draw the Sigmoid as smooth as it can be. Let's pick 49 as the number. Here the first point is at 2012, and the 49th is at 2013.
Another property of the Sigmoid curve is the range of horizontal coordinates. Let's define it to be from -6 to +6.
We will need to create the following calculated fields:
- Index = Index()
- X = 0.25*Index-6.25 (This maps the 49 points from index to horizontal coordinates.)
- Sigmoid = 1/(1+EXP(-X))
- Curve = [2012 Rank]+Sigmoid*([2013 Rank]-[2012 Rank])
Curve is the Y coordinate.
To trigger the densification, we need to first drag Padded to the rows and right click it. Then select Show Missing Values. We can see that the two rows are becoming 49 rows.
After, drag Padded to the Details shelf. Drag Index to the Details as well. Make it compute using Padded.
Drag X to Columns and Curve to Rows, and set them to compute along Padded. Now we will get our beautiful Sigmoid curve!
On the above, we showed all the 49 points in the curve. Selecting the following option in Color, we can remove the dots and get a smooth curve.
Voila that is how we can draw a Sigmoid curve using two rows.
Included in the attached workbook, we provided an example of comparing the 2012-2013 rankings for 50 US states, which is the same data set used by Jeffrey Shaffer.
In this particular example, we have to reverse the vertical axis so that the smaller ranks are on top.
We only need 2 rows of data per state and there are a total of 100 rows of data for 50 states. Here is a screenshot of the final dashboard, colored by the change scale in rankings.
Also included is a parametric Sigmoid. User can define the number of points and the range of the horizontal coordinates.
Feel free to download the workbook and play with it.
This is so awesome! Thanks for the really good walkthrough :)
ReplyDeleteThis comment has been removed by the author.
ReplyDelete