This zoomable packed circle visualization I designed and wrote for a client of mine was an interesting piece to show part-in-part comparisons without cluttering up the visual space.

The ask was to write a visualization piece that could dynamically load and layout a complicated JSON tree in an aesthetically pleasing way, and yet look visually appealing.

In this case the visualization is adapted for my own Budget 2018 visualization project with a few tweaks.

Hierarchy trees can be displayed as trees (as a graph), as a treemap, sunbursts, or as packed bubble charts.

Personally I prefer packed bubble charts to treemaps. I think that circles are more aesthetically pleasing to the eye than rectangles, but this is me.

The key idea, though, was not to a show the whole hierarchy, but to have some kind of zoom-in and zoom-out transition at the node level so as not to clutter the entire visual field for complicated trees.

You may lose seeing the whole overall picture of the entire tree hierarchy, but for that you get to concentrate on a slice of the tree.

Was pretty happy with the zoom-in and zoom-out transitions as I hope it is intuitive to users.

One other interesting code portion was how to pack and scale words into the bubble so that it aesthetically fit within the bubble. After lots of experimentation to find a nice scaling algorithm, found something that works reasonably well.

Also had to tweak small portions of the code such that mouseover gives more information and context for desktop users, but this functionality does not clash for mobiles and tablets.

All in all, this was the final result, which I am quite happy about. 😀

All of the following code was written in D3.

This is behind the scenes work that we do for clients – designing UX interactions, animations / transitions, dashboard designs and form factor layout solutions.