Skip to content



Repository files navigation

JOUR2106 - Data Visualization

Schedule of spring 2019

  • Jan 19: W1, Course Introduction & Data Journalism
  • Jan 26: W2, DJ workflow and frontend 101
    • Appendix 1: Lab manual - first site via big-road
    • Appendix 2: Guideline: Data collection
  • Feb 2: W3, HTML
  • Feb 9: suspended for Chinese New Year
  • Feb 16: W4, HTML/ CSS
  • Feb 23: W5, CSS
  • Mar 2: W6, CSS & RWD
  • Mar 9: W7, Javascript
    • Project milestone #0: story ideation/ background/ survey
  • Mar 16: W8, Javascript Cont'd
    • Project milestone #1: data collection
    • Guest: Guy Freeman,
  • Mar 23: W9, Basic Charting Library
  • Mar 30: W10, Charting Cont'd
  • Apr 6: W11, Mapping
    • Project milestone #2: basic analysis and visualization
  • Apr 13: W12, Special Types Visualisation
    • Appendix 1: jQuery
  • Apr 20: Easter holidays
    • Project: polishing and refinement
  • Apr 27: W13, Final presentation

List of students of spring 2019

List of projects of spring 2019

  • What’s the future of children with ASD? Story about Autism Spectrum Disorder (ASD) children status quo in Hong Kong. By Chen Fang Yi, Cheung Yan Yi, Zhao Min Zhu, Angie Chan.

    [Story] | [Codes]

  • Drug Prices in 10 Mainland Chinese Cities To find out the drug prices for different cancer treatments in different cities with crossfliter. By Ray Liu, Holly Chik, DONG Xinyue, Gursimran Hans.

    [Story] | [Codes]

  • The Muffled Voice The plight of sexual violence victims in Hong Kong. By Chin Ho Nam Erica, Ge Xin Ran, NG Yee Sin, SUN Han Yue.

    [Story] | [Codes]

  • Elderly in Hong Kong Elderly aged 65 or above in Hong Kong hit 1.26 million high for 2018, up 4.25% year to year. This is why we should care. By Ding Yiming, LI Yun, Li Yuquan, Akane Nakasuji.

    [Story] | [Codes]

  • Gender equality in Hong Kong How is Hong Kong progressing on gender equality? By Li Sin Yung, Liu Pei Lin, Nguyen Thi Minh Anh.

    [Story] | [Codes]


Homework4 -- Visual Critical Thinking

A short essay "criticise the visuals".

  • Find one problematic/ flawed visualisation online.
  • Discuss how it should look like.
  • Based on the same set of data, give your own version/ sample visualisation.
  • Use one of the charting libraries learned in this chapter. Page needs to be responsive (minimum mobile friendly)

Reference for content: sample1 , sample2 , sample3 (note those are content reference; tech requirement is higher)

Submit path:

Homework3 -- Javascript Powered Calculator

Make a meaningful calculator type of data journalism work.

Reference examples:

  • Gaokao Enrolment
  • Hukou Scoring Calculator
  • Life Expectancy
  • Rent or Buy (NYT)
  • Chinese converter
  • Travel Expense
  • Student Loan ( sample )
  • HK budget calculator (code4hk; SCMP)
  • [Your idea]

Tech requirements:

  • Responsive layout
  • Give some texts to introduce the background, i.e. make the page self-contained.

Submit path:

Homework2 -- Personal Homepage & Portfolio

Build and online CV for yourself.

Tech requirements:

  • Fresh start with HTML/ CSS; no template
  • Use div to perform "block design"
  • Link to your first web story (HW1)
  • Responsive to mobile and desktop (the one-column trick)
    • [Bonus] CSS-Grid for responsive layout
  • Add some effects using CSS lib

Submit path: (note: this is the root path under your personalised GitHub Pages domain name)

Homework1 -- Your first static website

  • Finish publishing your story on the web using big-road template.
  • Basic requirement:
    • Paragraph
    • Heading
    • Bullet point
    • Image
    • URL
  • Link to course website in the footer
  • [Bonus] add interactive (and responsive) chart
  • [Bonus] add video

Homework0 -- Hello open source world

  • Register a GitHub account, play around and get familiar with the environment.
  • Create a repository called jour2106
  • Create a file called in that repositery
  • Introduce yourself in the, e.g. your major, interest, topics, members looking for, skillset, expectation from the course

(not graded but will help you attract the team members)

Submit path: jour2106/


Grade distribution:

  • Homeworks:
    • HW1: 10%
    • HW2: 10%
    • HW3: 10%
    • HW4: 10% (termed as "case study" in syllabus)
  • Term project presentation: 20% (due April 27)
  • Term project: 40% (due May 4)

T&L Review

Future wishlist

Those items were not covered due to average pacing but good to incorporate in the future:

  • D3 - data driven visualisation -- operate DOM object in a batch
  • G2 - grammar of graphics -- learn how to abstract a complex problem
  • Google Analytics - User behaviour tracking & analysis

Open source learning

CILO2 and part of CILO1 are shifted to online platforms like GitHub, Slack, and DNN Newsletter. We encourage the students to adapt to this open source/ objective-driven learning model. This initiative is sponsored by HKBU/CHTL/TDG-1.

Service learning components

The theme of this semester is "reporting and visualising for the underprivileged". The "mentorship" resource in CILO4 is addressed partly by this component (some students found their own collaborating parties). This initiative is sponsored by HKBU/CISL mini-grant.


data-viz course/ slides/ projects






No releases published


No packages published


  • JavaScript 91.1%
  • HTML 4.4%
  • CSS 3.9%
  • Jupyter Notebook 0.6%
  • Ruby 0.0%
  • Makefile 0.0%