CLARIFICATIONQUESTIONS

Please ask any question related to this assignment in the class or in the Moodle forum. To be fair to everyone, it
is best to ask assignment question openly rather than in email. Do not share your code with anyone. Do not post
your code online. Do not ask for help in any public discussion forum (e.g., Stackoverflow or developer forums).
You can search over the internet and read books. Let me know if you find any error in the assignment question
as soon as possible. DO NOT SHARE OR DESCRIBE YOUR OUTPUT TO ANY OTHER STUDENT. DO
NOT ASK DIRECT QUESTIONS FOR VERIFYING YOUR VISUALISATION: ’DOES MY OUTPUT LOOK
CORRECT?’ However, you can always ask questions about the methods, definitions or approaches to solve a
question. Any case of plagiarism will be reported to the Department of Computer Science.

ASSIGNMENT 3

Q1. BARCHART - 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 hospi- talisations.
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.

SUBMISSIONINSTRUCTION

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. CARTOGRAPHY- D3.JS(25 MARKS)

This question is related to our class topic - geospatial visualization. Your task is to create a propor-
tional 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.
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 linkhttps://dashboard.saskatchewan. ca/health-wellness?subzone=subSaskatoon.
3. Create a proportional symbol map from the data by drawing RED circles on the generated coordi- nates. The radii of the circles must be proportional to the daily average of new cases.

SUBMISSIONINSTRUCTION

Submit the solution as Q2.html and a screenshot of the plot generated.

Q3. INTERACTIVEVISUALIZATION(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.

SUBMISSIONINSTRUCTION

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