Data Viz

Homework 4 -- A short essay "criticise the visuals" due on April 5.


Select Readings

d3 visualization

An alternative, filterable gallery for d3.js.

Author: Chris Viau Github

Course Introduction

As data becomes increasingly important in news reporting, this course helps students learn the fundamental principles, tools and workflow to visualise data. Each class is composed of half lecture session and half lab session so that students can get adequate guided exercises. The course mainly focuses on data visualisation although it covers basic data analytics and data journalism workflow just to be self-contained. Among many visualisation techniques and tools, this course focuses on the web stack, because most content are distributed via (mobile) web-based technology at present. Students will learn the end-to-end production and deployment of a web-based story, foundations of HTML/CSS/Javascript and visualisation libraries like eCharts, D3, Leaflet, ... By finishing this course, students are expected to build one web-based data visualisation news story and distribute the project via their own websites.

Course Instructor

Mr. Pili Hu teaches data journalism and media technology in HKBU. Before joining HKBU, he served as the Chief Technology Officer of Initium Media, responsible for developing technologies to power the fast-growing digital media outlet. He founded Initium Lab whose data-driven news report on Hong Kong Legislative Council voting pattern won SOPA "Excellence in Information Graphics" award in 2016. He was co-founder and CEO of HyperLab which produced a cross social network search engine. He holds an MPhil in Information Engineering from CUHK. Before moving to Hong Kong, he worked for Baidu in Beijing as core algorithm R/D engineer, responsible for user behaviour and link analysis.

What's New

Homework 2 -- Online CV due on Mar 8.

  • Fresh start with HTML/ CSS; no template.
  • Use div to perform "block design".
  • Link to your first web story.
  • Responsive to mobile and desktop (the one-column trick).
  • Add some effects using CSS lib.
  • Submission path: "".

Homework 3 -- calculator of data journalism work due on Mar 22.

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

Homework 4 -- A short essay "criticise the visuals" due on April 5.

  • 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.

Lecture Slides

Week 1

  • Introduction

Week 2

  • State of Art
  • What is Data Journalism
  • Workflow of Data-driven Journalism
  • What is Data
  • How to find Data

Week 3

  • Frontend overview
  • Tips to learn Frontend
  • Further into HTML

Week 4

  • Web Foundation (optional)
  • Bind your own domain to gh-pages
  • VSCode
  • Paths
  • Layout in HTML/ CSS

Week 5

  • Get familiar working in VSCode
  • Sync smoothly with GitHub gh-pages using GitHub Desktop
  • Introduction to CSS
  • Some useful CSS libs

Week 6

  • Responsiveness
  • Useful CSS Libraries
  • CSS Grid
  • Design Resources
  • More compatibility considerations

Week 7

  • Learning programming languages
  • Javascript Basics
  • Integrated Exercise for Javascript
  • Useful Javascript Libraries
  • Common Questions
  • Interaction: DOM, Event

Week 8

  • Project briefing
  • Data type, data structure, object, function
  • DOM Object and Event
  • Operate UI: a calculator
  • Control flow
  • [introduction] Other JS libs
  • [introduction] Semantic UI

Week 9

  • Javascript data structure
  • JSON
  • Charting
  • HighCharts
  • Data conversion
  • Integrated exercise
  • Visualisation resources

Week 10

  • JHighCharts
  • Data conversion
  • Integrated exercise
  • Visualisation resources
  • Criticise the Visuals

Week 11

  • Highmaps
  • JSON, GeoJSON and TopoJSON
  • Load custom map in HighMap

Week 12

  • Map Cont'd
  • Network Visualisation
  • Text visualisation
  • Dashboard & Crossfilter
  • A reflection on interactives

Week 12 +

  • jQuery
  • Useful jQuery Libraries/ Plugins
  • Alternatives to jQuery

Learning Resources

Past Students Projects