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:
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:
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)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
13 | |
10 | |
10 | |
7 | |
7 | |
6 | |
5 | |
5 | |
5 | |
4 |