Update (July 3):
The Utility Pack has been updated with this example: Design Studio 1.2/1.3 SDK – Design Studio Utility Pack
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:
- Circle Packing:
- Flattened Version:
- 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…
- 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.
- I ran into one little wrinkle with the zoomable chart, where the
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:
- 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.
- Different color palettes
- 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)
- 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).