ASSIGNMENT 3 BAR CHAR T - D3.JS

ASSIGNMENT 3
Q1. BAR CHAR T - D3.JS (50 MARKS)
You are given a data file that contains COVID-19 case information (cases.csv). Your task is to create
a grouped bar chart as follows:
1. Compute daily average for three attributes: New cases, Inpatient Hospitalisations and ICU hospitalisations.
2. Create bar chart, grouped by months, for the daily averages.
3. Here is a sample visualization that you should follow to stylize your chart. Note that since COVID
cases are rising, we may expect an increasing trend, as shown in orange bar.
SUBMISSION INSTRUCTION
Submit the solution as Q1.html and a screenshot of the plot generated. You must try to have bar
spacing and colors visually similar to the one provided. We understand it may not be a 100% match
but the groups should be understandable, axis labels should be well placed, and colors should
match approximately.
Submission Deadline: See Moodle 1
Q2. CAR TOGRAPHY - D3.JS (25 MARKS)
This question is related to our class topic - geospatial visualization. Your task is to create a proportional symbol map (see lecture slides for definition), as follows.
1. Generate a map of Saskatoon from this link: http://geojson.io/#map=2/20.0/0.0
2. Generate coordinates (latitude and longitude) for different regions. You can find the regions in the
(cases.csv) and see where those regions are located from this link https://dashboard.saskatchewan.
ca/health-wellness?subzone=subSaskatoon.
3. Create a proportional symbol map from the data by drawing RED circles on the generated coordinates. The radii of the circles must be proportional to the daily average of new cases.
SUBMISSION INSTRUCTION
Submit the solution as Q2.html and a screenshot of the plot generated.
Q3. INTERACTIVE VISUALIZATION (25 MARKS)
Create a copy of the html solution that you wrote for Q2. Add mouse click event on the html code so
that if the user clicks on a circle, then that circle changes its color to BLUE. If the user clicks on the
same circle again, then the circle must change its color back to RED.
SUBMISSION INSTRUCTION
Submit the solution as Q3.html and a screenshot of the plot generated for the mouseclick on the
circle representing Saskatoon.
Submission Deadline: See Moodle 2