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 mothership.sg 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 Viz.sg 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 viz.sg, 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 chiloong@vslashr.com. Thanks!


Interested in finding out what the population distribution is like (age and gender) for every subzone district in Singapore in detail?

We just released a new data visualization on Singapore: Population by age and gender, that we think is unique that no one else has yet. (I may be wrong, and if so, please drop me a note and we will correct it).

We had wanted to rewrite the original choropleth maps that we released about two years ago such that they have more granularity.

It would also give us an opportunity to update the visualization with a new responsive layout that would work well on mobile and tablet. Additionally a map tiling base was added so that you can have a sense of the actual URA subzone boundaries (and where each district was).

Because the data existed for the population values, the only major drawback was the map data. Ever since data.gov.sg was revamped last year, they started cleaning up their datasets. Late last year they released high fidelity versions of the subzone district maps, which made it far easier to mash-up the various datasets to come up with the visualization.

Note: The maps existed before, but the map data was not the cleanest, which meant it was necessary to do corrections. Also the map data itself had no meta-tagging (like district names), which would mean laborious work was needed to give the shapes context so you could mash-up the data.

For the final result, we went through over 10 revisions in the user interface (about the norm in UX projects) as we tweaked and iterated our way to a design we liked. This included the placement of the legend and slider display, how to toggle between the age bands (on click or on hover functionality), how to show missing data, etc.

Responsive design for mobile was also a challenge (as is expected), and the mobile UI is similar but also in subtle ways different from the desktop and tablet versions.

A lot of tools and libraries went into making this. The code base is mainly D3, but it also uses libraries like JQuery, Bootstrap (for responsiveness), Queue (for data loading). Map base we’re using Mapbox, which is built on top of Leaflet, and map data is Data.gov.sg’s GeoJSON data that we used cartoDB to help clean up a little.

For the data work R was used to both preprocess and transform the data into the JSON formats that feeds into the visualization. For minimization and deployment, Kok Keong likes to use his own custom bash script (rather than something like Grunt or a NPM script).