Skip to content

Instantly share code, notes, and snippets.

@KHwong12

KHwong12/blog.md Secret

Created Mar 27, 2021
Embed
What would you like to do?

Interactive visualisation of commute pattern in Hong Kong

Interactive charts and (sort-of) scrollytelling with R & Shiny

TL;DR

I wrote a webpage (with interactive charts!) using Shiny from R using 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? Or, you are just checking examples of the web application developed using Shiny? This article is for you.

This article is a short description of the webpage I created for interactively visualising the commute pattern dataset. The webpage is created using Shiny and available at the following link:

https://kenneth-12.shinyapps.io/place-of-work-od/

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.

https://medium.com/@khwongk12/commute-pattern-of-2-8-million-workers-in-hong-kong-visualised-8e430ef723d7?sk=08b4a369dc1d3bac9ec85174c0594bc8


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 on each chart on why I included them.

I: Interactive OD matrix heatmap

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).

heatmap-hover-screenshot

II: Interactive flow (sankey) diagram

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).

sankey-hover-screenshot

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 intended, 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.

sankey-overall-sample


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).

choose-origin

choose-destination

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!

change-selected-region

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

all-selected-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.

all-selected-sankey


Hiatus

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 of how I wrote the paragraphs in markdown in shiny in my blog.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment