D3 Step-by-step Guide — (Part 1 of 4) Singapore HDB Resale Price on Planning Map — Ideation

4 min readMar 22, 2020

This is a practical step-by-step guide to creating a map visualization in d3. In this 4-part guide, we set off to create a visualization to display whether the area where the resale prices of HDB flats have changed throughout the years. I call this a practical guide as we will be using full-sized datasets and working it into a full-featured visualization. There will be no kid-boxing gloves handed out in this tutorial. I will be walking you through a step-by-step from ideation to deployment on a Github page.

Here’s a demo of what you will be creating in this tutorial. Here’s where you can find the source code.

If you have queries, please feel free to leave them in the comments below. If you’re quick with this, feel free to help others who have issues.

Prerequisites

As this is mainly a tutorial for d3, I will do a little more handholding for the d3 parts but will assume some knowledge for the other areas. Here are the prerequisites.

You know your way around an IDE (i.e. VS Code) and a CLI
You are familiar with the HTML DOM and CSS
You are familiar with nodeJS and ES6
You have a basic understanding of d3

Tutorial Parts

Ideation

“If I had an hour to solve a problem and my life depended on it, I would use the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”
— Albert Einstein

While I doubt I can solve this problem in less than five minutes, it is still crucially important that we ask ourselves, what we are trying to show in this visualization. In that vein, I will walk you through my thought process on how I ended up on this idea.

I had wanted to work on a map-related visualization (not knowing how easy or difficult it was), and I thought of doing something related to Singapore, which is where I’m from and where I’m based at. With that, I started looking for how to display the Singapore map in d3.

I found this example block from Imaduddin Haetami (https://bl.ocks.org/artidata/4a25aff39864ec088d0a61a7d31a6f44) which shows planning areas in Singapore.

I thought this looked like a good base for what I wanted to do.

I then dove into data.gov.sg and dug through the various data sources to see what was interesting. I came across the HDB resale prices.

I started to wonder:

Have HDB flat prices changed across the years? (duh, of course!)
Have the most expensive areas stayed the same, or have they changed?
Relatively newer areas such as Sengkang and Punggol have been developed in the last 5–10 years, has it affected the way the prices are in the area (or other areas)?

I then decided on building some sort of a heatmap of HDB prices (relative to each other) across the years from 1990 to 2020.

Note that the planning districts have been revised a few times (i.e. 1998, 2008, 2014). I will display the data on the 2014 districts.

Data Collection

HDB resale prices from 1990–2020

https://data.gov.sg/dataset/resale-flat-prices

OneMap API — Lat/Long geocoding search of addresses and Planning Area (Districts) information (SLA)

https://docs.onemap.sg/

Note on respecting API Terms of Service

When using an API, be sure to look through their Terms of Service and any Licenses. For example, in the case of OneMap, we have an attribution clause which will require that I provide an attribution notice on the visualization.

Acknowledgements

HDB for curating and preparing the resale price data
SLA for OneMap’s API and data
Imaduddin Haetami for sharing the topoJSON of Singapore’s planning areas

Next, we will process our datasets.