Skip to Content

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:


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


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Former Member

    Great work Michael,

    Looking foward to see the code, I envy you, I’ve been really busy and not able to get stuff like this done.

    Keep up the good work.



  2. Christoph Wassermann

    Great job, the visualization possibilities with D3 really are endless. Quality stuff, and (I think I’m speaking for everybody here) your sharing of code and finished addons is much appreciated.

  3. Former Member

    Hi Mike,

    Great post from you as always.

    How did you create the animated gif? What software did you use? It is a great way to show what the end result looks like. I Would like to create such a gif for some future posts if there is an easy and fast way for it. ๐Ÿ™‚ Thanks!


Leave a Reply