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.
Next, let's create bins (Padded) based on Point. This will help us create the extra 47 points we need for drawing the Sigmoid curve, through data densification.
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.

2

View comments

  1. This is so awesome! Thanks for the really good walkthrough :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete

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