This is the sixth year running that I am doing this project and updating with the latest Singapore government budget data.

Rather than looking at specific budget policy announcements, which the media covers better, I prefer to just visualize long-term macro data trends.

As usual, if you have an interest in embedding any of the charts on your site, please feel free to do so. Examples are below, and you can easily tweak them to what you need.

Beyond just updating the data, I did consider tweaking some of the animation and artwork. However, prepping a Singapore Skyline SVG for animation was going to take too much time, so I settled for some font and color changes.

Besides, I did spend some time on both a new dataset, and also some major tweaks to one of the charts: The zoomable circle packing visualization I added last year.

Expenditure by Sector / Type :

<iframe src="" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>

This chart has undergone quite a few changes this year, namely, when you mouseover the bubble, you get to see the bubbles underneath.

I feel that in terms of user experience, this is more intuitive – you naturally see that the bigger bubble is comprised of smaller bubbles. It doesn’t clutter up the field, which was the original inspiration for the design in the first place, but you get to see the components underneath (fill-opacity change).

One issue: In D3 the packed circles are normally drawn biggest first, and then the smaller ones are overlaid on top of that.

In SVG there is no z-index order – what is layered on top of other objects is the order in which things are drawn. To do this version, I had to flip the order and draw the leaf-nodes first, then the bigger ones.

The simple trick to this is to sort the order in which the objects (SVG circles in this case) are drawn when binding the selection data to D3.

I also added animation (using Greensock’s library, which I always feel is more intuitive for animations) when loading a different JSON tree, and a toggle button to load the other data set. The animation, again, helps to show that the big bubbles are comprised of smaller ones.

One key problem is that when you add more buttons, animations and interaction points, there is a possibility of the transitions going out of whack if you don’t control how they interact with each other.

For example, when some animation is firing, when you click the button it would throw the animation off.

Originally, I tried locking the mouse click during animation fires, but doing this well was proving not as easy as it seemed, and felt very brute force. In the end I opted for a more elegant solution – rewriting the logic code to reset the zoom view every time a new JSON file was loaded, and properly reconstructing the SVG on every reload.

In the future, if I want to extend this piece even more, I will design a version that works well for touch screens.

Because there is no mouseover function, and only tap and drag functions, the UX probably has to be redesigned for those form factors. 😀

Below are all the existing charts, and their embed codes.

Revenue vs Expenditure Chart:

<iframe src="" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>

Expenditure Chart:

<iframe src="" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>

Revenue Chart:

<iframe src="" style="border:0; overflow:hidden; width:100%; height:600px;"></iframe>