"Drillable" KPI Tree with Animation Custom Lumira Extension

[JayThvV]

Lots of the type of reporting we do involves hierarchies. Whether it is a geographical hierarchy, a product hierarchy, an organizational one or otherwise, hierarchies of multiple levels are common in larger enterprises. In the past we handled that largely through drillable reports, whether OLAP or Web Intelligence, for instance, and any chart might update as we do so, but that is not ideal, as by drilling down we tend to lose the higher level overview.

Using Lumira and D3.js we can solve that problem. This extension had its seed in a request from a customer but I took it a little further. Hierarchies are essentially trees, and D3.js has a tree layout that we can use, so what if we visualized the hierarchy in a way that we could quickly see how we are doing at different levels?

This visualization is based on a geographical hierarchy using (fictious) data on revenue, cost and profit, where the color of the circles is determined  by the margin. This gives us a quick overview of where we're doing well and where not - and how that cascades up the hierarchy. The tree structure is based on this simple example by D3noob that shows how tree layouts work.

Now, this is useful, but using animations we can make this substantially more compelling. Animations in D3.js work on the enter-update-exit model, and probably the best explanation (and further reading) is the Three Little Circles article by Mike Bostock. We can show details for a particular hierarchy level, show the actual revenue, cost and profit, and use the circle radius to visualize the percentage contribution to the selected higher level. See for instance here for EMEA:

We hovered over the EMEA circle and the following things happen:

1. The selected node is sized to 100% (radius of 50). The circles below it have their radius determined by the contribution they make to the EMEA profit
2. A label is shown on each of the nodes containing (in the circle color indicating margin) profit (balance), followed by revenue (black) and costs (red)
3. All other nodes apart from the selected node and its immediate children are greyed out.

But, we can still do better than that: what if we could provide an explanation as well? If we have a particular reason to communicate, we can show that as well, whether on a node with children, or one without:

In the attached .profile file you can see how this was done. The key enter-update-exit section are named nodeEnter, nodeUpdate and nodeExit, doing these following things:

• nodeEnter: create the layout of the tree, append the circles (at small radius), and append the labels and text, but with near-zero opacity.
• nodeUpdate: this is where we set the circle size: a default radius if no nodes are selected (see top image), a max radius for the selected node (representing 100%), and the calculated radius for any child nodes. We also set opacity to 1 for the labels and text of the selected node and its children, and the selected node's label is expanded from an acronym to the full name (LA to LatAm, or TH to Thailand, for instance)
• nodeExit: for non-selected nodes (unless no nodes are selected at all), we set the fill to grey and the opacity of the circle label to 0.5

Once you have the extension installed, you can use it in compositions.

I hope this is a good illustration of what you can do with animations in custom extensions for SAP Lumira that allow a degree of interactivity and allow you to communicate such hierarchical data in an easily comprehensible way. Attached you'll find a .profile file (with .txt extension, just remove the .txt) and the data file (again, remove the .txt extension)