Skip to Content
Author's profile photo Michael Howles

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:


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


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Leandro Cardoso
      Leandro Cardoso

      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.



      Author's profile photo Christoph Wassermann
      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.

      Author's profile photo Anders Vastfalt
      Anders Vastfalt

      Thanks for sharing all those posts on SDK with the community. Highly appreciated!

      Author's profile photo Former Member
      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!

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      David, thanks.

      For creating an animated GIF, I use 2 freeware tools, one to capture a the browser window as a .AVI (CamStudio) and then another to convert the .AVI to a .GIF (Movie2AVI.exe - Evan's Freeware Site)

      Author's profile photo Former Member
      Former Member


      Thanks for sharing 😀 , this is my fisrt DS 1.3 app using this component (with D3):

      sample D3.JPG

      I´m going to try to do this component, using Hierarchical Edge Bundling:



      Author's profile photo Former Member
      Former Member

      Hi Mike,

      i have a problem with the Zoom , it´s seems that it doesnt work for me

      any idea ?

      Thank you


      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      What version of IE?

      Author's profile photo Former Member
      Former Member

      i tried with diffrent browsers , i think i have smth wrong with the zoom  functionality