CS5044 Practical 2 Solution

This practical is to be completed in groups of two students. The goal of this practical is to collaboratively design and implement a web-based visualisation of a data set of your choice using D3.js. Your visualisation should reflect on what you have learned about designing expressive and effective visualisations, also considering interactivity (see, for example, Shneiderman’s visualisation mantra [1]).
WEIGHTING AND MARK DESCRIPTORS
This practical is weighted at 50% of the coursework component (and therefore at 30% of the overall grade). The general mark descriptors apply and can be reviewed here: https://info.cs.st-andrews.ac.uk/student-handbook/learning-teaching/feedback.html
RULES
You are expected to work on the practical together in groups of two, following the Good Academic Practice policy: https://www.st-andrews.ac.uk/students/rules/academicpractice/
PRACTICAL DESCRIPTION
In this practical you will collaboratively develop a concept for a web-based visualisation and implement it using D3.js – https://d3js.org/. The requirements for this practical are described below.
WEB-BASED VISUALIZATION [collaborative]
You should come up with a design and implementation of a web-based visualisation based on a data set of your choice (the requirements on the data are specified below). Your visualisation design should be driven by particular questions your visualisation should allow to answer and related visual analysis tasks you would like to support (see Munzner, Chpt. 3 [2]). It is up to you to specify these questions and tasks. Your visualisation should answer at least one open-ended question, that you will specify in your report.
Your visualisation design should combine clarity and a creative approach to making the important aspects of the data visible and explorable. Your visualisation will be assessed based on:
 How well it suits your specified question(s) and task(s).
 Your choice of visual encoding, using visual variables in an effective and expressive way (see Munzner, Chpt. 5 [2]).
It is completely fine to base your visualisation design on existing visualisation techniques that you know, but make sure to name and reference these in your report.
Your visualisation concept should be the result of an ideation process in form of paper and/or digital sketches. Your sketches should demonstrate that you have thought of multiple alternative visualisation ideas. Your final visualisation should be presented in a way that clearly describes the visual mapping of data, interactive features and implementation considerations.
IMPLEMENTATION
You should implement your visualisation using D3.js. The use of additional JavaScript libraries in combination with D3.js is allowed (e.g., jQuery.js, Leaflet.js, Crossfilter.js, etc...). However, it is NOT ok to use JavaScript libraries that are built on top of D3.js (e.g., DC.js). If you are unsure if the libraries you would like to use are ok, please get in touch with the lecturers.
The visualisation should be presented on the web using your CS web server: [your cs user name].host.cs.st andrews.ac.uk/‐
Make sure to include an appropriate title and a brief introductory paragraph on the webpage that introduces the visualisation and its aims. Also make sure to include appropriate labels and legends. Your visualisation should be usable by someone who has not read the report.
MMS.
REPORT [collaborative]
Your report should include key information about the underlying data and how to read and interact with the visualisation. The report should not exceed 1000 words in total. Make sure to provide images and/or screenshots of your visualisation to illustrate your argument. The following sections should be included.
DATA & QUESTIONS
Briefly describe the data set your visualisation is based on, including key attributes and attribute types, number of data points, etc. Describe the question(s) and visual analysis tasks that you would like to support with your visualisation. Provide links to the original data sources (if applicable).
DESCRIPTION OF VISUALISATION
Briefly describe the design of your visualisation and how to read it: which visual variables have been used to encode the data attributes? A clear description of how to read and interact with your visualisation is essential. Describe and illustrate all interactive features: How do interactive elements of your visualisation work and what effects do they have? Reference existing visualisation techniques related to your visualisation design. You should consider this section as a manual of “how to” read and interact with the visualisation.
IMPLEMENTATION
Briefly comment on how you have implemented your visualisation, including links and references to any outside sources that you have used to implement your visualisation. This could be provided in list form. Details about the implementation could also be merged with your description of the visualisation concept; you do not necessarily have to provide a separate section.
INSIGHTS FROM THE VISUALISATION & CRITICAL DISCUSSION
Briefly describe the insights people can gather from your visualisation. Make sure to not only answer and illustrate the questions that can be answered but also briefly describe the exploration steps necessary to arrive at these insights. Also discuss the limitations of the visualisation (both regarding its design and implementation) and how these could be overcome.
Make sure to provide the link to your web-based visualisation in your report.
EVIDENCE OF IDEATION PROCESS [collaborative]
In addition to the project webpage and your report, you will submit evidence of your ideation process in form of a pdf file. Include the different visual representations and designs you came up with before settling on a particular concept. This part of the report could consist mostly of sketches with brief comments, but it should be clear how your process led to the final visualisation concept.
PERSONAL STATEMENT [individual]
Each group member should submit a personal statement, describing their role in this project, a brief reflection on the visualisation process and the final resulting, and what they have learnt as part of this practical. The personal statement should not exceed 250 words.
POSSIBLE EXTENSIONS
– A video of the visualisation which clearly and concisely describes and demonstrates its design, interactive features, as well as insights that the visualisation provides. The video should not exceed 3 minutes!
– Advanced interactive features such as coordinated views [3], brushing and linking, etc… – ...
NOTES ON DATA & POTENTIAL DATA SOURCES
Your data should include at least 100 data points and four different attributes (e.g., “Country” and “latitude” and “longitude” would count as a single attribute focusing on “location”). If in doubt talk to the lecturer about the data you would like to work with.
DATA IS PLURAL
A weekly newsletter of useful/curious datasets. The letter archive: https://www.data-is-plural.com/
Spreadsheet with all archived posts:
https://docs.google.com/spreadsheets/d/1wZhPLMCHKJvwOkP4juclhjFgqIY8fQFMemwKL2c64vk/ edit#gid=0
OECD.org
Data sources by the Organization for Economic Co-operation and Development (OECD) https://data.oecd.org/
UNESCO Institute for Statistics http://uis.unesco.org/en/home
DATA.GOV.UK
Data published by government departments and agencies, public bodies and local authorities. https://data.gov.uk/
EU Open Data Portal http://data.europa.eu/euodp/en/data/
NHS Health and Social Care Information Centre http://content.digital.nhs.uk/home
FiveThirtyEight
Opinion poll analysis, politics, economics, and sports blogging. http://fivethirtyeight.com/
Kaggle Data Sets https://www.kaggle.com/datasets
DELIVERABLES
• All the source files for your visualisation and underlying webpage, including libraries, html, css... Provide a readme file with instructions on how to run your visualisation.
• Your report as a .pdf – make sure your report includes a link to your visualisation webpage!
• Your personal statement as a .pdf.
• Your sketches as a .pdf (with brief comments, if necessary) that document your ideation processes.
ASSESSMENT
Your marks for this practical will be determined by the quality of your web-based visualization, project webpage, your report (which should include justifications of your design and critical reflections on your visualization outcomes), and your personal reflection on the project.
An adequate practical will include a basic web-based visualisation providing an overview of the selected data plus detail views to provide basic insights into the given question. The report will provide a good overview of the project including a reflection on the strengths and limitations of the visualisation.
A good practical will include a well-designed interactive web-based visualisation that provides a good overview of the data set from several perspective, including details-on-demand. Both visual encoding and interaction techniques will be well thought-through. The visualisation will be embedded in a webpage that provides additional information to help interpret and interact with the visualisation. A good practical will include a well-written and structured report that includes a clear description and justification of design decisions visible in the visualisation and a critical discussion of the strengths and weaknesses of the visualisation.
An excellent practical will feature all of the above, with an excellent visualisation concept, design and implementation, including well-designed advanced interactive features, and/or one or multiple extensions (e.g., additional views, video, etc…).
RESOURCES
1 Ben Shneiderman. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualisation. In Proceedings of the IEEE Symposium on Visual Languages, 1996 http://www.interactiondesign.us/courses/2011_AD690/PDFs/Shneiderman_1996.pdf
2 Tamara Munzner. Visualisation Analysis and Design, Chapter 3: Why? Task Abstraction, 2015
3 Tamara Munzner. Visualisation Analysis and Design, Chapter 5: Marks and Channels, 2015
4 M. Dörk, S. Carpendale and C. Williamson. VisGets: Coordinated Visualisations for Web-based Information Exploration and Discovery. In IEEE TVCG, 2008
http://innovis.cpsc.ucalgary.ca/innovis/uploads/Publications/Publications/doerk-visgets.pdf