DexCharts : Sankey Update

I am taking a small break from the series on small multiples to release an updated version of DexCharts.

Software atrophies, and things which were working at one time, broke over time.  Mostly due to small changes in foundation frameworks such as D3.  There even was a puzzling error in the US State Map topology.  For some reason, Virginia broke and the polygon mapping to be fixed.  Weird, and time consuming.

Sankey Diagrams

I really like the work which d3noob and timelyportfolio have done with the Sankey diagrams.  Horizontal drag makes sense and I also liked the migration towards a more cohesive data input format.  Building on this foundation, I’ve worked on a few additions in the DexCharts version of Sankey.

  • Categorical links – basically, this means that I added category to the link structure.  The main thing I am using it for is for link coloring.  This allows you to easily trace a link dependency through many values.
  • Acyclic Links – Mike Bostock’s sankey.js breaks as soon as the linkages become acyclic (or circular).  I added a visitation structure to short circuit such things.  The current behavior is to hang forever (or until is crashes your browser) while it processes the infinite loop.
  • Configurability – There’s a ton of configurability in the Sankey.  There will be a ton more.  My examples will run through some of the specifics.
  • Link Styling – I added support for different strokes for different folks.  More styling options will come later.

Lets look at a few examples:

Example 1

The first example code looks like:

Click on the image for a live version

image

Created from the code:

image

Example 2:

Here, a couple of small configuration changes lead to a very different Sankey appearance.

Click on the image for a live version

image

image

The main difference here is that we changed the stroke color to blue and added a dasharray pattern instead of a solid fill.

Example 3:

In this example, I tried to represent the famous visualization of Napolean’s disastrous Russian campaign of 1812.  This is a rough draft so go easy on me.  Green linkages represent Napolean marching into battle while red links depict a retreat.  The size of the linkages represent the number of troops involved.

Also note that this is a highly acyclic graph.  When you jump to the live version, it won’t lay out so nicely.  I am working to fix this, but the fix involves some graph theory I haven’t had time to overcome yet.

Click on the image for a live version

image

Here’s the data.  The dataset consists of 4 columns.

  1. FROM – Where the troops were marching from.
  2. TO – Where the troops were marching to.
  3. DIRECTION – Whether they were attacking or retreating.
  4. TROOPS – The number of troops when they arrived at the TO location.

image

And here is the Sankey code:

image

Note that we color links via category.  We’re taking a Napoleonic perspective and using red for retreat, green for attack.  Next, we add a single relationship.  Source is column 0, or the FROM column.  Target is column 1, or the TO column.  The value is sized by column 3 which contains TROOPS.  Lastly, we assign categorical data from column 2 which contains whether or not the army was in ATTACK mode or RETREATING.

Example 4:

This one shows a very simple acyclic linkage {A->C, A->B, B->C, C->A}.

Click on the image for a live version

image

image

Example 5:

This example depicts our Presidential dataset.  Here we’re mapping Home State to Political Party to President.  The linkage colorings are really effective in this diagram.  There is also a manual override on the color of the Democratic party (blue) and the Republican party (Red).

Click on the image for a live version

image

image

Example 6:

Last is an example containing sales data.  The new thing here is that we’re using functions to assign our sources and targets rather than absolute column references.  This is because it would make no sense to map the flow of a MONTH to a numeric value unless those numeric values were binned.  Instead, we’re assigning the header name programmatically.

Click on the image for a live version

image

image

image

Wrapping Up…

That’s it for now.  If you like what you see, please retweet my work.

Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s