, , , , , , ,

The hope for pro-democracy camp to regain its veto power in the legislature vanished as Edward Yiu Chung Yim failed to beat his rival Vincent Cheng Wing-shun in last week’s by-election.

Legislative By-election 2018 was held on 11 March for four vacant seats in the council, following after the oath-taking saga which disqualified six councilors. New legislators were elected from three regions – New Territories East, Kowloon West, and Hong Kong Island, as well as Architectural, Surveying, Planning and Landscape functional constituency.

Election is all about numbers – voter turnout rate, numbers of votes, and percentage of voters supporting candidate A or B, making it a golden opportunity for data visualization. In this article, we select three local news media, which are Initium, SCMP, and HK01, to discuss their different coverages on the by-election.


1.1 The Power distribution for different camps in Legislative Council


螢幕快照 2018-03-21 下午8.47.45.png

The graph shows the power distribution of political camps in Legislative Council after the 2016 Legislative Council Election. Most of the seats, which was red in colour, were occupied by the pro-establishment camp. This clearly shows that the non-establishment parties were weak in the Legislative Council. The message is clear in this graph.

1.2 Pro-democracy Camp may no longer have the advantage of getting more votes

The Initium:


The graph clearly shows that the vote distance of the Pro-democracy candidates and Pro-Beijing candidates was narrowed, using the data from 2016 Legislative Council and the By-Election this year. In Kowloon West constituency district, it shows that the votes for the pro-democracy camp decline more than the pro-establishment camp. The pro-establishment camp claimed that they had broken the rule of 6:4 proportion in the local district election.

1.3 Edward Yiu lost votes in the direct local election

In Kowloon West constituency district, Edward Yiu lost to Vincent, Cheng Wing Shun, the candidate representing the pro-establishment, in nearly 2400.

Edward Yiu lost votes surprisingly in the by-election. To analyze the election result, The Initium visualized the data, which revealed the votes he lost, and compared the votes pro-democracy camp get in the same district.

The Initium:


The graph minus the votes that other pro-democracy political party got in 2016 Legislative Council Election, and the votes Yiu got, to find how Edward Yiu lost support in some constituency, especially for the districts that are controlled by  Hong Kong Association for Democracy and People’s Livelihood (ADPL).

Also, the graph shows that Edward Yiu cannot get all the votes from the people who vote for the pro-democracy camps, including Democratic Party, which openly supported Edward Yiu for the By-Election. After the election results released,  Edward Yiu claimed that he did not have direct local election experience and he did not have local politicians advocating for him.


  1. 2.1 HK01

  2. The portion of texts in HK01’s article is small but they play an important role in telling detail information about the polling stations, including the name, code, address of the stations, and constituency code and name. With the texts provided, readers can get to know which polling station is close to them by looking at the constituency name or the address, and decide quickly on which station to go on the election day.
  3. Map.gif
  4. 2.2 SCMP

    For SCMP’s article, texts make up a large proportion. They provide a lot of information other than the graph. For example, it talks about the failure of the pan-democratic party in the by-election where Edward Yiu Chung-yim lost and the total number of the party’s votes decreased.
    Moreover, texts are used to explain the reason for having the by-election. Events are shown chronologically from September 2016 when localists who support and advocate Hong Kong’s independence were elected in July 2017 when six elected lawmakers were disqualified due to improper oath-taking. 


  1. Texts are also used to provide an explanation about the change of power of each political party, apart from the graph showing the number of seats.

    However, texts in this article are not that effective when it comes to explaining data. A bunch of text is mixed with numbers to explain information like the number of votes gotten by candidates of each camp and the differences. It is exhausting for readers to read through lots of numbers in between words. Moreover, there is already an interactive graph showing the exact same information.

  2. 2.3 Initium

    Texts also make up a large proportion in Initium’s article. They are used to analyze reasons behind  Edward Yiu Chung-yim’ lost in the by-election, including the ideological difference between Yiu and the votes, mainly elderly and grass-roots, in Kowloon West, the internal conflict of the pro-democracy camp and the desired performance of  Vincent Cheng Wing-shun from the pro-establishment party. The text analysis is in-depth and comprehensive.

  3. On the other hand, texts are used in the graph to provide extra information. For example, explanation of split voting veto is added beneath the table.

word 3.png

Explanation of the drop rate is also added in the form of formula under the graph. These text acts as a good explanation to provide readers the extra information about some technical terms related to the by-election.

word 2.png

What is more, texts inside the table are in colors, where blues is used when the pro-democracy camp has the veto power and yellow when the pro-establishment camp has it. The colored texts help readers process the differences immediately.

word 1.png


3.1 Polling Station

HK01 created three maps to show the locations of polling stations by Google fusion tables. By clicking the map pin, details of the station would be listed out. Another website, which is Google Map directory, can also be opened in another tab. Instead of publishing three similar posts, HK01 may consider to combine the maps and distinguish the regions by map pins in three different colours.


Sometimes, there is an error which said “www.google.com has a redirect loop” when we view these websites on the computer, but for mobile, it works perfectly fine. We fixed it by deleting all cookies and website data on our computers.


螢幕快照 2018-03-20 下午7.40.54.png

3.2 Timeline

To provide an overview of the by-election, SCMP created an interactive timeline of events starting from September 4, 2016, to the election day. Readers can either click on the arrow at the corner or scroll to get to another page.



In the page about oath-taking saga, by clicking the faces of the lawmaker, their names would pop up and the electoral region they belonged to will also be highlighted.



Another subsection about the by-election has a similar design, which the list of candidates in the specific region would appear if we click on the corresponding ballot boxes on the map. Although it has successfully shown the basic details of the candidates’ readers may scroll to the next page accidentally.



To discuss the change of veto power in the council after the disqualification of lawmakers, they created two filled charts of the legislature before and after the event. By clicking the button below, the reader can switch between the charts to reveal the change. Even if the six seats originally belonged to localists changed from yellow to grey, the difference is unclear due to such minimal amendment. The larger focus should have been the changing percentages of seats, which has shown a clearer redistribution through the interaction with readers.


3.3 Voting result

SCMP has a real-time vote counter with few interactive elements. By clicking the voter turnout rate of each constituency, the total numbers of votes will be shown.


When we hover over a candidate’s icon, details of that candidate would pop up and percentage of votes he/she received in that region would twinkle. The only flaw is that readers may not notice the twinkling bar if the candidates received a comparatively small amount of votes, such as Estella Chan Yuk-ngor and  Ng Dick-hay.




Data visualization in articles from HK01, SCMP and Initium help reinforce and further elaborate information about the Legislative Council By-election. HK01’s articles focus more on the interactive map while both SCMP and Initium put more emphasis on textual explanation.

For HK01’s articles, the interactive map is a very effective data visualization in showing the location of the polling stations. Even though texts make up a very small proportion, it still plays a vital role in providing detail information of the stations.

For SCMP’s article, an interactive timeline with graphics and pictures is added to explain the incidents causing the by-election and an interactive vote counter is included to show all the results of the election. Texts are also used to elaborate result of the election and failure of the pan-democracy party. Nonetheless, more data visualization can be used to replace numbers in between texts.

For Initium’s article, texts are very well written to explain and analyse Edward Yiu Chung-yim’s failure in the by-election. The three data visualization act as very effective and comprehensive supplements for the textual elaboration.

All articles from the three media have done a great job on reporting the Legislative Council By-election by combining attractive data visualization and comprehensive texts, where HK01 shows the location of the polling stations effectively, SCMP explains the election thoroughly and Initium analyses the result comprehensively.


C., W., & F. (2018, March 15). 民主派關鍵一敗:困棋中的姚松炎與建制黑馬鄭泳舜|端傳媒 Initium Media. Retrieved from https://theinitium.com/article/20180316-hongkong-legco-election-311/

Cheung, T., Lam, J., & Sum, L. (2018, March 12). Hong Kong democrats fail to win back Legco veto foothold in by-election. Retrieved from http://www.scmp.com/news/hong-kong/politics/article/2136762/pan-democrats-look-set-regain-power-veto-rivals-moves-hong

Lam. P. (2018, March 10) 【立法會補選】投票站位置你要知 一圖睇清新界東票站

HK01.Retrieved from https://www.hk01.com/港聞/166920/-立法會補選-投票站位置你要知-一圖睇清新界東票站

Lam. P. (2018, March 10) 【立法會補選】投票站位置你要知 一圖睇清九龍西票站

HK01.Retrieved from https://www.hk01.com/%E6%B8%AF%E8%81%9E/166919/-%E7%AB%8B%E6%B3%95%E6%9C%83%E8%A3%9C%E9%81%B8-%E6%8A%95%E7%A5%A8%E7%AB%99%E4%BD%8D%E7%BD%AE%E4%BD%A0%E8%A6%81%E7%9F%A5-%E4%B8%80%E5%9C%96%E7%9D%87%E6%B8%85%E4%B9%9D%E9%BE%8D%E8%A5%BF%E7%A5%A8%E7%AB%99

Lam. P. (2018, March 10) 【立法會補選】投票站位置你要知 一圖睇清香港島票站


Author/ Chow Hong Yung, Lee Yan Kiu, Chan Sui Ping ( JOUR2106 Data Visualisation (2018) – Group 7 )

Editor/ Jessie Pang

Data News of the Week (DNW) is a weekly issue of news summaries hand picked by our editors. It features a GLOCAL (global+local) perspective for the topic of concern. It tracks the latest developments from the industry and academics for methodology, tools, datasets and news agenda.