Coursework 1: Data Visualisation & Analytics

F20/21DV - Data Visualisation and Analytics

The coursework will enable you to demonstrate a variety of skills, such as, problem solving, communication skills and
time-management. The coursework is structured to encourage a mix of guided and active learning, innovative
development, critical thinking and knowledge-based expertise of the subject. The coursework requires you to
discuss/explain and justify your implementation details (also extra check to verify that you understand
concepts/reasons/limitations).

This coursework is designed to focus on developing dynamic and interactive visualizations based on a given dataset.
You should work on this coursework in your own time, not just the scheduled weekly lab sessions.

Resources:

• F20/21DV course materials (https://canvas.hw.ac.uk/courses/20766/modules)

• D3 Homepage/Documentation (https://d3js.org/)
• D3 in Depth (https://www.d3indepth.com/)
• D3 Gallery (https://d3-graph-gallery.com/)

Assessment Overview
The assessed coursework consists of understanding, designing, developing, implementing and testing visualisation
scenarios. The requirements for the coursework is to:

1. Conceptualise, develop, and test a prototype of your visualisations

2. Plan, implement and debug prototype of your visualisations
3. Incorporate these tested visualisations into designs and demonstrate/discuss/present them
4. Write a report to explain your visualisations and to include your critical reflection of your visualisation and
analysis techniques
5. Submit a video to present your visualisations and your code

More details regarding the requirements are covered in the following sections:

1. Task
2. Dataset
3. Requirements

This coursework will be marked using the Marking Rubric.

1
Submission Details
The deadline for submitting the report is on Thursday 16th March 2023 at 1530 (Edinburgh) and 2359 (Dubai). You
should submit an electronic version of your report and your code via Canvas. Your video should be saved in your
OneDrive or your private repository (e.g. Youtube). Share the link to the video with your respective course tutors
B.Kenwright (Edinburgh) or R.Soobhany (Dubai), and put the link to your video in your report on the first page. It is
the responsibility of the student to ensure that access to the video is granted to the course tutors.

After the deadline has passed, your preliminary mark and feedback will be released on Canvas after 15 working days.

This coursework accounts for 30% of your overall grade for the course.

Late submissions will be subject to the normal penalties as defined below.

Important notes:

• If you fail to submit either your report, code or video then you get 0 marks
• Any video submission longer than 2 minutes will be awarded 0 marks
• You have to use d3.js version 7+ for the implementation of your visualization (if you use an different version or an
alternative visualization library you will be awarded 0 marks)
• You have to ensure that your code will run on the latest version of either Chrome or Firefox browser
• Any test data or resources used for the project, should be included when you submit the final report/code

If you have any questions or queries about the assessment, please do not hesitate to contact [email protected]
(Edinburgh) or [email protected] (Dubai).

Late Submissions
Late submissions will be subject to the normal penalties as defined in the late coursework policy.

The University recognises that, on occasion, students may be unable to submit coursework on the submission date or
be unable to present their work on the submission date. In these cases, the University’s Submission of Coursework
Policy outlines are:

• No individual extensions are permitted under any circumstances.

• Standard 30% deduction from the mark awarded (maximum of five working days).
• In the case where a student submits coursework up to five working days late, and the student has valid
mitigating circumstances, the mitigating circumstances policy will apply, and appropriate mitigation will be
applied.
• Any coursework submitted after five working days of the set submission date shall be automatically awarded
a no grade with no formative feedback provided.

Please contact your Personal Tutor or Counsellor if you are unable to meet the deadlines or need information for
Mitigating Circumstances or Temporal Suspensions of Studies.

2
1. Task
You must narrate the timeline of the COVID-19 pandemic around the world, and the effect the vaccines had on the
scale of the outbreak.

Importantly, you should try to illustrate these aspects:

1. How did the COVID-19 pandemic grow over countries and continents throughout the world from its start?
2. Choosing some specific countries, how successfully did they manage the outbreak?
3. Choosing some specific countries, is there a relationship between the relative “wealth” (e.g. GDP) of a
population and the spread of the pandemic?
4. What effect did vaccinations have on the spread of cases/deaths? Did booster jabs also have an impact on the
spread/transmissibility of the virus?
5. How might the geographical position of a country change how the pandemic impacted them?

2. Dataset
The dataset that you will be using is the public COVID-19 dataset by ‘Our World in Data’. The csv file can be downloaded
from the GitHub repository:

https://github.com/owid/covid-19-data/tree/master/public/data

The COVID-19 Vaccinations dataset link:

https://github.com/owid/covid-19-data/tree/master/public/data/vaccinations

The datasets will also be made available on the F21DV Canvas page. All exercises in this coursework should be
attempted using the datasets provided.

3. Requirements
For this coursework, you are provided with the datasets (above) and you have to implement an interactive web-based
application in D3. Your application should aim to meet all the requirements listed.

We have tried to make each requirement as concise and clear as possible. If you are unsure about any requirement,
please ask as soon as possible.

3
Core Requirements
Required to follow ALL core requirements, deviating will result in your coursework being disqualified and you will
receive 0 marks.

C1. Create a web-based application written in d3.js using version 7+. No PHP or server-side code should be used.
JavaScript compiled from other languages (e.g. TypeScript) is not allowed
C2. Transitions and/or animations must be used to indicate what data are new, changing, or exiting
C3. Your user interface must be intuitive to use
C4. You must demonstrate consideration of accessibility when designing your user interface
C5. Source code must be comprehensively documented
C6. You must explain your design and implementation choices in your report
C7. You must demonstrate your application with a submitted video

Application Requirements
Your application must use the provided datasets and meet the following requirements.

A1. Your application should only require a single HTML page called index.html, that is within the root of the project.
You are free to create as many additional CSS and JS files as you feel are necessary to support your application.
A2. All visualisations should be loaded on the single HTML page.
A3. Use at least three different visualisation types.
A4. When the data of a single visualisation is updated, all axes of that visualisation should also update/rescale
accordingly.
A5. For any two visualisations, mousing over a datapoint in one visualisation highlights multiple associated
datapoints in another visualisation.
A6. There must be a bidirectional interaction between at least 3 of your visualisations — where interaction with one
demonstrates a change in both of the others. This must be consistent such that interacting with any of the three
visualisations in the similar manner will cause the others to react in the same way.
A7. Inclusion of a faceted selection interaction between two visualisations — where a mouseover or a click in one
visualisation results in the data of a different visualisation being filtered.
A8. Use of a map visualisation which must interact with at least one visualisation.
A9. Use of scalar data over a map to indicate the distribution of scale over a geographical area — for example, use
of circles of different sizes to indicate scales.
A10. Use of cross-visualisation brushing where dragging a rectangle of several datapoints in one visualisation
highlights multiple associated datapoints in another visualisation
A11. Use of an appropriate clustering analysis technique. Note that a scatter plot alone is not a viable form of
clustering analysis.

4
Submission Requirements
R1. Your video should be no longer than 2 minutes.
R2. Your video must be available to the instructors — you can upload to YouTube as an unlisted video or upload to
OneDrive.
R3. Your video should demonstrate that you have implemented the various application requirements of the
application.
R4. The front page of your report should state your name, Heriot-Watt ID (e.g. HXXXXXXXX), the title of this
coursework and a link to your video.
R5. Your report should include a section on how your application has illustrated the questions from the task (Section
1). Feel free to include as many subsections and images as necessary to concisely demonstrate how you have
addressed the various questions above.
R6. Your report should include a section which explicitly shows how your application has met each of the
application requirements. Feel free to include as many subsections and screenshots as you wish to ensure you
concisely explain how your application has met the requirements.
R7. When demonstrating how you met the application requirements, you should also include screenshots from your
code to demonstrate quality and modularity.
R8. Your final report and your code should be put into a ZIP file and submitted on Canvas. Your ZIP file should contain
a single PDF in the root of it called “report.pdf”. There should be no other PDF files. All code should be structured
within the ZIP file, within a subdirectory called “code”.

5
Marking Rubric
Sections Marks Poor Basic Proficient Excellent
Exercises/Visualisation 18 0-4 5-9 10-14 15-18
Prototype(s) Fails to meet the requirements. Some knowledge (has gaps). No gaps and understands core No gaps while demonstrating a detailed and
In this section your ability to Incomplete and/or unfocused. Minimal development of concepts (unelaborated idea comprehensive understanding (depth and
complete/develop/extend Little or no understanding of exercises, and/or unrelated development, could use more complexity of work supported by rich, engaging
exercises/prototype will be assessed. concepts, code or tools. details. Trivial visuals with little details and depth with information and/or pertinent visuals/comments; evidence,
originality. to supported relevant visuals). Basic analysis, reflection and insights). Exceeds
interactions. standards, well thought out design, engaging,
animated and interactive.

Communication, Analysis, 10 0-2 3-5 6-8 9-10

Presentation Visualisation Little effort has been made to Some effort has been made, but Original and innovative, targets A high standard appropriate for this level. The
Marks will be awarded for show creative thinking, lacking is mostly trivial with significant audiences and addresses key points, theme/visualization/story has been expertly
demonstrating creative thinking, appropriate analysis techniques gaps. Lacks depth and does not however, areas for improvement (or crafted and is consistent/easy to use and follow,
feedback and concept used. Show or critical knowledge of the demonstrate or show a solid lacking details/clarity in places). utilizes appropriately complex analytical
understanding of the material and the design patterns. understanding of all the key techniques. The visualization and submission
appropriateness and effectiveness of concepts. includes all of the core requirements and
associated visualisation and analysis
information. In addition, unique and informative
techniques. Critically reflect of the
visualisation and analysis visualization that demonstrates an in depth
techniques/design patterns.. awareness and critical thinking.

Management and 2 0-0.4 0.5-0.9 1-1.4 1.5-2

documentation Documentation, report, video Basic and shows some Provides good documentation, A high standard. Clear and contains all the
A couple of marks will be awarded for and/or poorly explained, understanding, inconsistences structured and comprehensive information (documentation/data/presentation is
management, documentation and inconsistent, unclear or missing. and gaps in places. (relevant information and mostly maintainable, industry standard, tested, scalable).
organisation of the tasks/code complete).

30

6
FAQ
So, do you want a dashboard?
Data visualisation is about considering how best to illustrate the patterns from data for a non-technical audience that
has not spent the time reviewing the raw data in depth. Therefore, you are technically summarising and telling a story.

Looking at some of the best visualisations out there (pudding.cool) notice how it is not just graphs where the user
must try to navigate it and figure out the notes. Instead, they use a mixture of text, image, and visualisations to
illustrate patterns within the data. You should aim to do the same — do not just use D3 visualisations alone.

How you present the information — be it with a dashboard-style interface, or a scrolling webpage is up to you to
choose. The only criteria here is that you must justify why.

What about code quality? How much does that matter?

Note that the suggestions below are optional, they are not requirements, with the intention of assisting with your
code implementation.

A large part of working for industry hingers on writing code that is easily readable and extensible. We recommend
using two tools: EditorConfig and Prettier. Combine it with your chosen IDE to ensure that all code is formatted
automatically.

We have provided a template GitHub repository that you can use which includes configuration for Prettier and
EditorConfig. If you use Visual Studio Code for your IDE, using this template repository for your project will recommend
useful extensions.

You can find this template here: https://github.com/amitkparekh/F20DV-CW-Template

For step-by-step instructions on using GitHub repository templates, see:

https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template

Another part is using a linter. An industry-standard tool is ESLint. We recommend using the popular AirBnB config
(available here). While this is not a requirement, this is an automated way to easily format, structure, and help find
and debug common JS errors.

We are not going to help debug your chosen IDE (recommendation is to use VSCode). We are just providing config for
those students that want to use these tools and get started fast.

What does “comprehensive documentation” mean?

You do not need to comment every single line of code. You should comment sections of code where the logic is not
immediately apparent on reading.

Each function/method/class/callable should have a docstring which explains what it does in one-line, with
additional/optional information regarding any constraints or assumptions made within it.

7
We recommend using JSDoc comments (https://www.typescriptlang.org/docs/handbook/jsdoc-supported-
types.html)(https://jsdoc.app/) as they are an industry-standard and many IDE plugins are available to easily work
with them. Many IDEs support JSDoc comments out of the box with more; for example, you can find information on
Visual Studio Code here: https://code.visualstudio.com/docs/languages/javascript#_jsdoc-support

What does “intuitive” mean?

We recommend following standard UX laws which can best help users use and navigate applications. You can find a
comprehensive overview of them here (https://lawsofux.com). You can refer to them in your report, however you
must reference your sources for each.

How should I demonstrate that I considered accessibility?

Accessibility is important for applications and not ensuring your application meets various standards is not good
practice. There are many articles around regarding what to do and how to consider it. To help, two important aspects
are colour and font size.

The choice of colour palette must meet the standard of AA from WCAG 2.1
(https://www.w3.org/TR/WCAG21/#contrast-minimum). You can use this website to help
(https://colorable.jxnblk.com/) (https://m2.material.io/design/color/text-legibility.html#text-backgrounds)

Font size for notable text should be not be too small and should be readable. You can refer to this website for some
advice (https://accessibility.digital.gov/visual-design/typography/) (https://developer.apple.com/design/human-
interface-guidelines/foundations/typography)

How do you recommend that I approach/manage this project?

Start with a sketch or a diagram of your application, and ensure that your plan will allow you to meet the various
requirements. We highly recommend doing this before you begin programming. You can use lab time to ask for help
regarding your proposed design plan. You can use Figma or pen-and-paper to create an outline of your application.

Use Git version control to keep a working history of changes you make to your work. Additionally, we recommend that
you use Conventional Commits (https://www.conventionalcommits.org/en/v1.0.0/) for your commit messages to
ensure they are consistent and that the changes made are clear.

Can I demonstrate more than one “Application Requirements” in one visualisation?

Yes, you can meet more than “Application Requirements” within one visualisation (e.g. chart). For example, you can
demonstrate A8 and A9 on the same map.

End of Coursework 1