The pandemic defines the first half of the year 2020. It has greatly affected everyone's life and will continue to be present in the foreseeable future. This project is to visualise COVID-19 cases across London over the past six months, so as to make the trends of the disease clear and easy to understand.

The simple web application has two modes: date mode and area mode. By default, one enters into the date mode in which case data are grouped by date shown as cones of varied sizes. The horizontal slider is to control the date being displayed; and the two circular sliders the threshold of case number, in order to filter out the areas with severe outbreak of virus. The search box can help locate specific area. While browsing through the general data, one can click on the geometry and switch to the area mode represented by the selected geometry. Case data of the specific area over the past six months are shown in a circle with the number by the side. In this way, one may grasp a better idea of the area's overall situation. Then, the black ball above the area name leads the visitor back to the date mode.

In terms of visual representation, I use cone shapes to signify the harshness of the pandemic. Each geometry in the date mode consists of two cones. The translucent one represents total case number up to the particular date, while the solid one at the core represents the new case number on that day. The tags of area name sticks to the geometry at all times, when hovering over, the case info will be displayed in big bold black text.

Technical details

This #JavaScript project is realised with React and Three.js, with support of an offline dataset.

The interactive dataVisualising project starts here :)

Date mode 日期模式
Area mode 地區模式
Search function 搜索功能
Filter function 過濾功能


COVID-19定義了2020年上半年。它極大地影響了每個人的生活,並且在可預見的將來還將持續。該專案可視化COVID-19在整個倫敦過去六個月的病例,使疾病的趨勢清晰和易於理解。 簡單的 Web 應用程式有兩種模式:日期模式和地區模式。預設情況下進入日期模式,數據按日期分組,顯示為大小不同的幾何體。水平滑塊用於控制顯示的日期,兩個環形滑塊的病例數閾值過濾出病毒嚴重爆發的區域。搜尋框可以幫助查找特定區域。流覽常規數據時,可以單擊幾何體並切換到所選幾何體表示的地區模式。過去六個月中特定區域的案例數據以環形顯示。這樣人們可以更好地瞭解該地區的總體情況。區域名稱上方的黑球將訪問者引導回日期模式。 在視覺表現方面,我使用尖銳的三角體來隱喻大流行病的嚴酷性。日期模式下的每個幾何體由兩個三角體組成,半透明體表示截至特定日期的總數,而核心的實體表示當天的新病例數。區域名稱的標記一直伴隨幾何體,懸停時案例信息將顯示為大粗體黑色文本。


此JavaScript項目使用離線數據庫,並通過 React 和Three.js實現。

互動從此處開始 :)

COVID in Ldn

Related posts :