Animation Foundry

By Chi-Loong Chan | | Animation, V/R, Visualization


Add bling to your websites. No cod or infrastructure on your end needed!

Animation Foundry was an idea both Kok Keong and I had been toying around for some time.

We already did all of these beautiful interactive pieces that are embedded into sites via iFrames.

A lot of times the content is hosted locally at the client’s website, and the choice of iFrames is such that integration is easier (cross-code CSS pollution is a nightmare to fix).

At other times, the content is distributed to blogs, etc. and other content portals to use as part of their visualization work. Examples include the GE2015 visualization and more recently the 2016 Budget one.

I was thinking – why not turn all of these into a proper service?

You do not have to worry about code or infrastructure of any sort. Just give us your brief and we can work out and deliver an interactive piece that not only you can embed on your website, but any other blog can embed on their site.

What you get:

  • A beautiful interactive and/or animated piece.
  • Our animations and visualizations are typically responsive, and they work on desktops and mobiles/tablets.
  • Hosting and infrastructure is not something you have to worry about – we will take of this on our end. All we do is charge a simple maintenance fee (for a year) for hosting the code art on our servers.
  • Data visualizations can be updated live via live feeds.
  • You do not have to host it on our servers and host this locally on your servers. This typically makes more sense for data products or complicated pieces.
  • Costing wise, we expect that even for a wow-like responsive animation piece, it should be relatively affordable (below S$5K).

Drop us a ping if you’re intrigued!

Population by Housing

By Chi-Loong Chan | | Visualization


We just released a new Subzone: Housing visualization.

It was written up some time ago (together with Subzone: Age + gender), but due to it having some data and UI issues I didn’t have the time to fix and polish it, so didn’t release until now.

This visualization and the Subzone: Age + gender one now has been updated with the latest 2016 June information from the Department of Statistics of Singapore

There are lot of small UI improvements, which might be interesting for those who do UX/UI. Am going to detail some of them here.

Exceptions to data

As a visualization designer, I’ve chosen to set the chorolpleth buckets to be specific thresholds such that they reflect best what I think is most interesting for the story.

For example, in this case, the chorolpleth percentage scale is set from 0% to 40%, which I think gives a good representation for a lot of the data.


However, often because the data has a wide variance, the buckets can easily be exceeded. Anything that used to exceed the threshold of 40%, the colours often go out of whack, and for the legend bar, the pointer will go off the box.

The way to fix this is to add exception code to polish up the visualization. If it exceeds a certain threshold value, shade the area a specific colour. If the pointer exceeds the bar, trigger the exception. In this case it is flipping the pointer 90 degrees to the right to cue the reader that the threshold had been exceeded.

If the histogram bars are too short for the bar text to be within the bar, it is now outside the bar.

Hover vs tap interaction

The interaction between the histogram (or population pyramid for the Subzone: Age + gender one) and the map was one which took me some time to work out.

I was’t happy with the map changing on a hover on band interaction, and the on click interaction needed some kind of marker to show that that category was chosen.

So the change of exactly that – a new marker that showed which band you were pointing to, and the on hover interaction just highlights what band is chosen (but does not select it).

This also allowed using the category and gender icons itself as additional ways to switch bands, and I think the UI is overall more intuitive and functional, and the animation of the marker makes for an interesting effect!

Future Work

The visualizations are mostly complete, but there are ways to expand it further. For example:

  • Adding a new UI for allowing the user to select the threshold of the choropleth distribution. I have curated it with specific thresholds because I have looked at the data and felt that these thresholds make the most sense for me, but perhaps it would be good to let people explore.
  • Adding historical past year data sets (up to early 2000s). This could perhaps require optimization when downloading the dataset, which is not small.


Live Dengue + Zika case data visualization updates!

The NEA has recently started publishing Zika case updates for clusters, including total number of current cases per cluster.

Using this information, it was time to revamp the live dengue + zika visualization.

Because the two viruses are spread by the same vector (Aedes aegypti mosquito), it makes sense to plot cases where it might overlap. Thanks to more information from NEA, the visualization is now more useful.

Things added for ease of use (and asked for!):

  • New table with sort and search properties on Zika case clusters. Easy to immediately find the biggest Zika case cluster!
  • Dengue and zika case clusters use the same clustering mechanic on the same map, and this is intentional as you can see at a glance combined dengue + zika cases.
  • However, you can easily toggle between the two case sets by using the UI buttons at the top of the main visualization.
  • Also, the case markers, when you zoom down to the highest level, are different to help differentiate between the two.
  • Added 20th September: Ability to jump to zoomed map location by clicking on row of any of the tables.
  • Added 9th November: Data is finally live. We had to write a custom script to ping the site to get the data when it appears.

Will wait and see how stable the NEA site is in terms of format, plus how often they update before attempting such a feature. 🙂

Hope you find the updated visualization useful!

Zika data will be updated when NEA releases new information and time permits.


Live Dengue + Zika case data visualization.

Singapore has been hit by the Zika virus recently, as we have locally transmitted cases occurring since August 28th, and the numbers have climbed dramatically (currently 115 as of 1st September 2016).

I saw this annotated Google map mentioned in a article. I think I also saw it on Today Online and I was thinking why don’t I mash it up with the current live dengue heatmap that I wrote sometime back.

Because the visualization had already been written, it would have taken far less work than if I were to write it from scratch. And I know lots of people genuinely worried about Zika (including myself) so many people might be interested in this.

So here is the current Live Dengue website, with Zika virus data added, all gleaned from media reports.

Caveats: The data is pretty sparse, and there is no complete case data, which would be perfect for the visualization.

But mashing these two sets up allows you to see both the current live dengue case data with the zika virus data at the same time.

For example, to my untrained layman eyes, both Joo Seng and Circuit Road (where I live) has cases of dengue, meaning the Aedes aegypti mosquito had to be active in the area.

If anyone has a more complete data set (or knows of a more complete data set) please drop me a note. Meanwhile I’ll update this when the public gets new data.


When we started the site one and a half years ago, it was a showcase for our Singapore-based visualizations that we had written.

It morphed into a site where we think the visualizations are also genuinely useful to Singaporeans if they need to find out certain information. And then, one final evolution: A curation of excellent data visualizations on Singapore.

Setting up a business in a housing subzone and want to know what the population is like? Interested in getting up-to-date and historical information about dengue cases in Singapore? Wondering where are all the taxis at your current location and time? Want a data repository and timeline of all MRT breakdowns?

You can find the answers to these questions on the site and lots more as we link to and showcase some of the best visualizations on Singapore.

We’re not affiliated with the government in any way – this is an entirely ground-up project initiative.

The idea: A free repository of visualizations on Singapore by Singaporeans. Available for anyone to use. Students, businesses, civil servants, general public.

Coded with love, one dataset at a time.

The old website structure wasn’t cutting it, and so it was time for a redesign of the website, where we could easily add in more data cards and have it sortable and easy to access.

Thus the new, with some animation bling and an easier way to categorize and find visualizations.

If you have any visualization on Singapore that you would like to showcase and have a link, please drop me a note at Thanks!