Hong Kong District Councillors - Shiny Contest Submission

Hong Kong District Councillors

Authors: Avision Ho, Martin Chan, Gabriel Tam

Abstract: Pools together disparate information on district councillors including names, contact details, Facebook feed and their constituency into a mobile friendly Shiny app.

Full Description: # Objective

To encourage civic participation through creating a single website (Shiny app) that empowers citizens with better access to information on district councillors.

Throughout our development of the app, we were strongly focussed on our potential users by making it as mobile-friendly and easy-to-use as possible.

Note, we are politically neutral.


Our project was mainly motivated by an observation that the engagement of the Hong Kong public with their local politicians was very low.[1] Historically, the work of Hong Kong’s District Councillors (DCs) are neither widely known nor closely scrutinised by the public media. Until recently, most District Councillors did not use webpages or Facebook pages to share their work, but instead favour distributing physical copies of ‘work reports’ via Direct Mail. This has changed significantly with the 2019 District Council election, which was a significant election where the turnout has jumped to 71% (from 47% in 2015), for different reasons. For context, Hong Kong’s District Councils is the most local level of government, and is the only level in which there is full universal suffrage for all candidates.

As of the summer of 2020, we identified that 96% (434) of the 452 District Councillors elected in 2019 actually have a dedicated Facebook page for delivering updates to and engaging with local residents. However, these Facebook pages have to be manually searched for online, and there is not a readily available tool where people can quickly map a District to a District Councillor and to their Facebook feeds.

How was the data collected?

Since there was no existing single data source on the DCs, we had to put this together ourselves. All the data on each DC, their constituency, the party they belong to, and their Facebook page was all collected manually through a combination of Wikipedia and Facebook. The data was initially housed on Google Sheets, for multiple reasons:

  1. Using Google Sheets made it easy for multiple people to collaborate on data entry.
  2. Keeping the data outside of the repo has the advantage of keeping the memory size minimal, in line with best practices.
  3. By storing the data in Google Sheets, non-technical users would also be able to access the data too.

We then decided to migrate from Google Sheets to creating our own R data package hkdatasets. We chose this approach, for the following reasons:

  1. An R data package could allow us to provide more detailed documentation and tracking of how the data would change over time. If we choose to expand the dataset in the future, we can easily add this to the package release notes.

  2. An R data package would fit well with our broader ambition to work on other Hong Kong themed, open-source projects. From sharing our project with friends, we were approached to help with another project to visualise Hong Kong traffic collisions data, where the repo is here. As part of this, we obtained this data via an FOI request on traffic collisions, where the data is also available through hkdatasets.

  3. Make it easier for learners and students in the R community to practise with the datasets we’ve put together, without having to learn about the googlesheets4 package. Our thinking is that this would benefit others as other data packages like nycflights13 and babynames have benefitted us as we learned R.


We think some particularly cool features of the app are:

  1. Interactive tutorial: We understood our users are unlikely to read user-guides, so have built a feature where you can click "Tutorial" on the app and have a dynamic and interactive tutorial highlighting and describing each component of the app. rintrojs
  2. English-Chinese translations: We understood our users may read Chinese or English, so we embedded this within the app to make it accessible to more people. shiny.i18n
  3. TypeForm embed: We understood if we wanted to capture as much feedback as possible, we need to make it seamless for our users to do this. This is why we have embedded the survey within the Shiny app. We used Typeform survey for its great user-experience, namely the use of keyboard keys to transition through the survey.
  4. Google Analytics: We wanted analytics captured on our app to understand who is using our app, including where our actual audience are coming from. From this, we found we have users as far wide as Brazil and Russia!
  5. Facebook embed: To ensure we presented unbiased information on district councillors, we embedded Facebook within our app of what these district councillors posted on their pages.

Further cool things

We created more than just a Shiny app though, and we highly recommend you explore and feedback on the code as well as the Shiny app. Some of the other great things we did as part of this was:

  1. Establish additional dev and pre-prod versions of the app to isolate and test experimental changes from the front-facing app.
  2. Implement a CI/CD travis pipeline to test deployments whenever a change is made.
  3. Implement a CI/CD GitHub Action pipeline to test whether the repo passes R command line checks.
  4. Adhere to conventional commits to standardise commit message so it's easier to follow the commit history.
  5. Modularised the Shiny code to keep long scripts to a minimum and better represent how Shiny apps are composed of 'objects'. This is by representing each of these 'objects' as separate R scripts.

About us

We are a politically neutral, self-organising group of volunteers with skills in programming, design and project management to leverage data on Hong Kong. This is our first publicly released project.

This project is an attempt to help make a difference with R programming. It’s an opportunity for us to learn, to code, to have fun, and to make a difference.

Keywords: civic participation, information empowerment, translation, bilingual, chinese, english, hongkong, district councillors, typeform survey embed, google analytics embed, hkdatasets package (created alongside app), rintrojs package, shinydashboard package, shinyi18n package, leaflet package, facebook embed, mobile friendly
Shiny app: https://hkdistricts-info.shinyapps.io/dashboard-hkdistrictcouncillors/
Repo: GitHub - Hong-Kong-Districts-Info/dashboard-hkdistrictcouncillors: Shiny app dashboard of HK district councillors' information include FB pages.
RStudio Cloud: Posit Cloud


Full image:

  1. There are many reasons for this, and arguably a similar phenomenon can be observed in most local elections in other countries. See Lee, F. L., & Chan, J. M. (2008). Making sense of participation: The political culture of pro-democracy demonstrators in Hong Kong. The China Quarterly, 84-101. ↩︎