1 of 26

More Building Blocks

Introduce some useful libraries

Pili Hu

e@hupili.net

3 of 26

Homework 5 - Feedback & Discussions

Key points:

Technical requirements mostly satisfied

External data is a common problem

Content is the major problem

No content at all
Story is not coherent
Graphics do not help story-telling

Case studies:

https://jamiexixi.github.io/homework5/

https://roytangrb.github.io/homework5/

https://juliannawqy.github.io/homework5/

4 of 26

Homework Evaluation Criterion

https://docs.google.com/presentation/d/1fmWa24BVrMAfXCr9N2AdK4nQ9X7IwUrsTlPUx-mOSkE/edit?usp=sharing

5 of 26

Projects - Group Progress Report

Things done last week
Things to do next week
Major obstacles

6 of 26

Project

Theme: A story with web-based interactive visualisation
Deliverable:

Website
Report
Presentation (April 29)

Size of a group: 3 students
Topic:

Self proposed
Mentor proposed

More about projects and mentors

7 of 26

Project Evaluation Criterion

Content:

Descent the story and solid analysis

Presentation:

Well rounded interactive visualisation

Project:

Good time/ progress management
Make good use of resources: open data, mentors, teaching team

8 of 26

Recap

Current:

Technical:

Publish your website
Basics -- HTML/CSS/JS
Interaction -- jQuery
Charting -- eCharts

Principles:

Visualisation confusions
Statistics confusions

Next: how to take project to live, step by step

9 of 26

Useful Libraries

10 of 26

TimelineJS

http://timeline.knightlab.com/

11 of 26

StoryMapJS

https://storymap.knightlab.com/

12 of 26

Juxtapose JS

https://juxtapose.knightlab.com/

13 of 26

KnightLab tools

Codes:

https://github.com/hkbu-jour2106/hkbu-jour2106.github.io/tree/master/week10-sample

Sample:

http://datavis.studio/week10-sample/

14 of 26

SigmaJS

http://sigmajs.org/

15 of 26

Slick JS

http://kenwheeler.github.io/slick/

16 of 26

Reveal.js

http://lab.hakim.se/reveal-js/#/

Many existing themes:

https://github.com/hakimel/reveal.js/tree/master/css/theme

17 of 26

Exercises

This is open exercise. Pick any library mentioned above and give it a try.

18 of 26

Workflow & Project Management

19 of 26

Workflow

Ideation
Data collection
Data analysis

Exploratory analysis
Hypothesis testing

Story telling
Data visualisation

Turn story into visuals
As part of/ one way of analysis

Publication

20 of 26

Project timetable

Plan ahead
Regularly review & revise
Tailor the timetable when necessary

You can not do everything you initially intended

Item	Deadline	PIC	Dependency
Clean data	20170325	A
Get GeoJSON of HK	20170405	B
Visualise on a map	20170410	C	Get GeoJSON of HK
Draft the story	20170405	A
Assemble webpage	20170415	C	Visualise on a map Draft the story

21 of 26

Gantt Chart

Visualise the timeline
Visualise the dependency
Spot bottlenecks

22 of 26

Communication Channels with mentor

Email -- conventional channel
Phone -- only in urgent use
Slack -- ask the student helper to invite the mentor also likes Slack

23 of 26

Contact your mentor

Appreciate his/ her time
Try to well structure your messages
Current status

Questions to ask
Resources needed

Understand the principle

Mentor can provide consultancy, either more or less, depending on how you interact
Delivering the project is still your own responsibility

24 of 26

Class-wide milestones

By Week 10 (Mar 25) - Group formation
By Week 11 (April 1) - Select Topic; Find data set
By Week 12 (April 8) - Conduct initial analysis
Final presentation (April 29)

25 of 26

Guest Talk & Meet the mentor

26 of 26

John Siu (蕭輝浩) - HK01

John Siu is currently working at HK01 on some data projects and he has a lot of knowledge and ideas that is willing to share with us.

To see John’s work on HK01, please checkout: https://www.hk01.com/search/%E8%95%AD%E8%BC%9D%E6%B5%A9