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 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:
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.
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
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 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).
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.
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.
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 in my blog on how to write paragraphs in markdown in Shiny.
