Interactive visualisation of commute pattern in Hong Kong


I wrote a webpage (with interactive charts!) using Shiny and R to visualise the commute pattern dataset I used in the previous article.

Are you interested to play and mess with the commute pattern dataset of Hong Kong? Want to select your area of focus without touching the dataset? Or, you are just looking for examples of web applications developed using Shiny? This is the article for you.

This article serves as a place to introduce the webpage I created for interactively visualising the commute pattern dataset. The webpage is created using Shiny and available at the following link:

The background of this dataset is already explained in my previous article. And there is a short intro paragraph waiting for you on the top of the webpage to refresh your memory.

Interactive charts available

You can find three charts on the webpage. There is a short paragraph on the top of each chart to explain how to read the chart. Here, I will add some footnotes for each chart.

I: Interactive OD matrix heatmap

the interactive heatmap with a small pop-up when hover on the grid

This OD matrix is created using the same visualisation ideology in the article. That is a coloured OD matrix.

You can hover on the coloured grids to check how many workers are in that living/working place pattern (which act as a small explanation on WTH the chart is going on).

II: Interactive flow (sankey) diagram

the interactive sankey diagram with a small pop-up when hover on the flow

The next chart is a sankey diagram. Same as the heatmap above, when you hover on the flows, a tooltip will appear, explaining that specific flow (i.e. how many workers are in that living/working place pattern).

The sankey diagram worths some explanations. The dataset behind this sankey diagram is entirely the same as the one used for the heatmap. The differences are in the method of visualisation. Just like you could use a stacked bar chart or a pie chart to present the proportion of a total, the OD matrix could be visualised in many different ways.

In my opinion, heatmap is strong for:

  • viewing the overall trend
  • more common for readers

Sankey diagram is strong for:

  • viewing how PART (or even ONE single flow) plays in the whole dataset

III: Sankey diagram, highlighted version

The last chart is not interactive — you cannot see the details of each flow when hovered on the flow. This is on purpose, as the aim of this chart is to compare the proportion of the selected living/working districts (coloured flows) to the overall trend of Hong Kong (grey flows). Sometimes, interactive charts may hinder the readers to grasp the message behind them.

Selecting your area of interest

The point where Shiny shines is allowing users’ input more than merely some hover-and-check-details actions. There is a section on the webpage for choosing your specific area of interest. The two drop-down menus let you choose the living area and working area you are interested in. The OD heatmap and flow diagrams will display only the selected living/working area pair of flows.

By default, the app selects the 4 districts in Hong Kong Island as the living area and all 5 districts in Kowloon as the working area. Therefore, the OD heatmap has 4 rows (i.e. origin) and 5 columns (i.e. destinations).

Choosing your interested place of residence
Choosing your interested place of work

You can select living and working regions according to your interest. The charts will change immediately after you select/unselect some regions. Observe how the charts change!

You could even recreate the chart in the article by selecting all place of residence and place of work.

Recreate the whole OD heatmap

Though, under the heatmap we now have a crazy sankey diagram. That’s why you probably should not consider using sankey diagram to derive insights lying behind the dataset.

A crazy sankey diagram


Hope you enjoy playing with the data and charts! Let me know if you have any questions about the website. Even better, let me know if you have any ideas on how to improve the webpage :)

I also wrote a short note in my blog on how to write paragraphs in markdown in Shiny.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store