Design Studio SDK - Hexagonal Binning

[mike_howles4]

This component I've had for quite some time in the SCN SDK Community pack, but never had the time to spend blogging about it until now.  I've taken the time to show it now, as I've used it as a use case of porting it over as a Lumira Visualization Extension as well.  (SAP Lumira Visualization Extension - Hexagonal Binning)

So what is it?  A HexBin Chart allows us to visualize x/y data in a bit of a different way.  Traditional Scatter Plots and Bubble Charts are good at showing correlations (or lack thereof) such as below:

A Scatter Plot showing Hits (x-axis) compared to unique visitors (y-axis).

The example above is a manageable visualization because of the low volume of data points where the legend and colors are identifiable and can for the most part be distinguished from one another.

For larger data points, this may not be as useful:

A Scatter Plot showing 2000 data points.  Or a broken gumball machine.

This visualization doesn't seem to be as useful.  There's no indication if there's a certain area of more plot density than another.  Generally, the data points seem to be within a range of 0 to 500 and 200 to 700, but how uniform is the distribution?

I took a look at some of Mike Bostock's examples and liked what I saw with his HexBin example here: Hexagonal Binning

Let's look at the HexBin's representation of this same data:

A HexBin using 'Median' sampling to set color binning.

As you can see above, we can use hexagonal binning to start binning certain thresholds of density into a color scale (dictated in color and occurrence by your color palette).  I have 3 automated options to try to bin them.  Above was using Median, and below we see two others.  Depending on the profile of your data, one may work better than another:

Mean and Max methods shown.  Same data, but note the difference in the color distribution thresholds in the legend.

And finally, I have a 'Manual' Method where you can manually set the low and high to distribute across.  I've set the low tolerance to 20 and the upper threshold to 100 in this case to peg the color scales to that range:

A focused coloring range from 20 to 100.

Next, suppose you need a little more fidelity or less fidelity in your hexagon bins.  I have a radius parameter that you can control how large the hexagons are.  Below are examples of different sizes and colors for sake of variety:

A smaller hexagon size with a multi-hue color range.

A larger hexagon size with simpler color range

And finally, below are some quick YouTube recordings I did a while back showing how you can even us BI Action Language at runtime to make this truly interactive:

Feedback always welcomed.  You can download this in the package available here:

SCN Design Studio SDK Development Community

Enjoy!