Assignment 2

Crime bar chart

Setup

To be completed by 16-6-2022(Thurs) 2359hrs

• This repo link will be of the format https://<username>.github.io/CSC3007-assignment2
• In the repo create a basic index.html file, and make it visible on GitHub repo pages (it's under the settings tab, under GitHub pages).
• You can put your CSS style tags, HTML and JS script code into one file, or organize them into files/directories.

Background

• We have gone through a basic lab in D3 and it is time to put it together in a simple assignment.

The Problem

• Let's say you are interested in this question: What type of serious crime was the most common in SG in 2020?
• Details can be found in this dataset here.
• You can either pull from the API or read off the CSV file / create your own JSON as the dataset is pretty small.

The Problem 2

• How would you present the problem hypothesis in a simple chart?
• You are allowed to add interaction or annotation in any way to help present your story.
• The lecture on marks, channels and applied perception can be useful when we discuss salience (next week).

Requirements

• This visualization cannot be a static png / jpg image.
• It must be a generated chart from some code (D3 or otherwise) and then published from a web repository.

Extra challenge

• Add some simple interactivity like mouseover tooltips.
• Make sure the chart is responsive to viewport.
• A CSS framework might make your life easier to layout stuff.

Extra, extra challenge

• Broaden the use case to look at years beyond 2020 - what larger trends can I see?
• Either extend current bar chart with animation tweening to show trend changes over the years or come up with a new visualization idiom for comparison.

Grading key

• Basic bar chart submission: 2 marks
• Basic interactivity: 3 marks
• Animation or additional chart / overview: 4 marks

Questions?

Chi-Loong | V/R