When freedom becomes a thing of the past: Hong Kong's Article 23

In this project, I write about Hong Kong's latest legislation on national security, Article 23, and how it affects city's freedom and future status as the Asian financial hub.

Making the timeline

The legialtion of Article 23 took more than 20 years to finish, and the process showcased the shift of local political landscape. While there are tons of news coverage and public records available for readers to learn what has happened, I cleaned and made a timeline for readers who may not be familiar with the local politics.

Analysing the legal content

Before Article 23, there was already another legislation - National Security Law - enacted in Hong Kong. However, Article 23 covered wider range of criminal offences and applied harsher punishment. I extracted the 5 most important chapters from the bill to study the difference between the new and old law.

Visualization

Scrollytelling

I used Scrollama.js to create a scrollytelling for my timeline and legal content explanation. In addition to the original template, I applied the fade in/out effect to make the transition more natural.

Doodles

I understand it's a heavy topic. But I still want to add some aesthetic elements into my project. I used my iPad and Tayasui Sketches to create few doodles for the page.

Chart

I used d3.js to create a bar chart, and made it interactive with scrollytelling to highlight the years I want to talk about.

Future Work

There were many things I could have done better for this project, and hope to work on in time to come:

1. Making the scrollytelling smoother. Currently when readers scroll, the page would some how blinks.
2. Optimising the display and interactivity on mobile devices.
3. I would like to present the stories to a wider range of local readers, so I'll finish the Chinese version of the story and page.

當自由成為過去：23條立法詳解

在這個項目中，我討論了關於香港最新的國家安全立法-基本法第23條-及其對港人自由和香港作為亞洲金融中心的未來地位的影響。

製作時間線

23條的立法過程耗時20多年。這一過程也顯示本地政治格局的轉變。雖然有大量的新聞報導和公開記錄供讀者了解所發生的事情，但我整理並製作了一個時間線，供不熟悉本地政治的讀者閱讀。

分析法律內容

在23條之前，香港已經實施了另一項立法——國家安全法。然而，23條「加辣」覆蓋了更廣泛的犯罪行為範圍並適用了更嚴厲的處罰。我提取了法案中5個最重要的章節來研究新舊法律之間的差異。

可視化

滾動敘事

我使用Scrollama.js為我的時間線和法律內容解釋創建了滾動敘事。除了原始模板，我還應用了淡入/淡出效果，使過渡更自然。

塗鴉

23條是一個沉重的話題。但我仍然想在我的項目中添加一些美學元素。我使用我的iPad和Tayasui Sketches創建了一些頁面的塗鴉。

圖表

我使用d3.js創建了一個柱狀圖，並通過滾動敘事使其互動，以突出我想要強調的年份。

未來工作

這個項目有很多地方我本可以做得更好，希望未來有時間可以繼續改進：

1. 使滾動敘事更加流暢。目前當讀者滾動時，頁面會有些閃爍。
2. 優化在移動設備上的顯示和互動性。
3. 我想將故事介紹給更廣泛的本地讀者，因此我將完成故事和頁面的中文版本。