Design Studio 1.2/1.3 SDK – Hierarchy Eye Candy – Packed Circles

Update (July 3):

The Utility Pack has been updated with this example: Design Studio 1.2/1.3 SDK – Design Studio Utility Pack

Original Post:

I’ve been playing around with D3 again and thought I’d see how well some of Mike Bostock’s example visualizations would port over to Design Studio.  I decided to focus on hierarchies in this experiment.  Thinking through what hierarchies are about, they are a parent-child relationship and in terms of visualizations, that usually comes in the form of a tree, or a sum of parts chart like a treemap or heatmap.  One of Mike Bostock’s visuals that I liked was the packed circles visualization:

References:

1. Circle Packing:
   Circle Packing
2. Flattened Version:
   Bubble Chart
3. Zoomable Version:
   Zoomable Circle Packing

Each of these charts has a few advantages and I’ll leave it to the eye of the beholder to decide which, if any, offer some meaningful functionality.  For the scope of this exercise, I focused on the flattened version and the zoomable version.

Let start at the end (pictures!) for those who do not care about the coding part:

And, an animated GIF showing the zooming at runtime.  (Click Image if not playing):

Note: Labels can be shown however I’ve turned them off so that I didn’t have to black out a bunch of data for this blog.

With the end out of the way, some boring technical code stuff for those still reading…

1. The first thing I had to do was figure out a way to convert an SDK hierarchy into something that D3’s pack functionality would take.  Refer to the getHier function in my code to see how this conversion was done.  This was pretty straightforward however I’d still love for SAP to make available a means for interacting with the datasource with our SDK components instead of relying on a standard component to expand nodes.
2. I then took Mike Bostock’s sample D3 code and began to port it over to the SDK.  Both are JavaScript based so not much had to change, aside from some ‘this’ and ‘that’ scoping, and changing how the zoom out event handler worked for the zoomable chart.
3. I ran into one little wrinkle with the zoomable chart, where the d3.interpolateZoom was not available to me.  It turns out that this does not come out-of-box with D3 v2 that DS comes with, but rather as a plugin.  This wasn’t a huge showstopper however I’d love to see SAP include d3 v3 in their next release.  After pulling down the javascript plugin, I added it as another jsInclude in the contribution.xml and moved on.

The end result was pretty cool from a visualization standpoint.  Since this was just a Monday morning mental calisthenics exercise, there’s a lot that could be added to it later, but are not included in this version:

1. An onclick handler to provide a mechanism to use a selected node in BIAL scripting.  This would be cool to make the visualization work as a selector component.
2. Different color palettes
3. Selecting a measure column (right now it’ll just pick the first column in your Measures structure, if you need to specify a different column, use the ‘Sizes’ data selector in the property panel)
4. Showing the measure values in the labels or tooltips.  I just didn’t get around to it but would be trivial to get working by studying the code.

I will release the source code later today on my GitHub repo link that you can find in my Utility Pack blog post (Design Studio 1.2/1.3 SDK – Design Studio Utility Pack).  I will also update the deployable version for those of you who don’t want to package it themselves in Eclipse  (Same post).

Enjoy!