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.