CS5044: Information Visualisation
CS5044: Practical 3 (group work)
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 25% 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
Important Deadlines (all due 21:00 of the day):
March 13, 2019 April 2, 2019 April 23, 2019
RULES
Groups (consisting of two students) are formed, and the lecturer is informed via email about the grouping (student numbers & names).
The data set and early sketches should be submitted to MMS (weighted at 5% of the overall grade).
The final visualisation and the report should be submitted to MMS (weighted at 20% of the overall grade).
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/
Lateness penalties follow the default School policy (Scheme B, 1 mark per 8 hour period or part thereof). You can review the policy on lateness penalties here: https://www.st-andrews.ac.uk/media/teaching-and-learning/policies/penalties.pdf
The University views plagiarism very seriously. Ensure that any images you choose to use as material in your report are correctly attributed to their proper sources. Ensure that all text that you include in your report that is not your own is correctly cited as a quotation and carries an accompanying reference to the original source. If you make use of source code that is not your own, acknowledge its source in the footnotes and/or references of your report.
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.
CS5044: Information Visualisation
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]).
− How you support basic interactivity and tasks as specified by Shneiderman [1]. Note that not all these low-level tasks have to be supported – this depends on your data set and questions. However, your visualisation should at least provide an “overview” and some “details on demand” – whatever this may mean for your particular data and visualisation.
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 lecturer.
Key of this practical is that you program the visualisation yourself – the use of Tableau or Excel is ok for sketching, but not for the final visualisation. You may use and modify code that you find online or in books. However, make sure to explicitly acknowledge and reference all sources that you have used to implement your visualisation, both on the project webpage and in form of code comments.
Implementing a web-based visualisation from scratch is not a trivial task. Key of this practical is to come up with a design that is suitable to your question and data, yet easy enough to be implemented in the provided time. It may be a good idea to come up with a simple design first and then iteratively refine this design, adding more complex features if there is time (see Process section further below).
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 your practical report!
Note that after the deadline, no modifications to the visualisation or the underlying webpage are allowed! All files related to the visualisation and underlying webpage have to be submitted to 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.
CS5044: Information Visualisation
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.
CS5044: Information Visualisation
Based on the data you should come up with a question that your visualisation should enable to explore. The question could be quite focused or more open-ended. Make sure to also consider who is going to interact with the visualisation and what type of goals the user may want to achieve.
Potential data sources are provided below, but feel free to find other sources. Follow your interest!
When you find data that you would like to use, make sure you have the rights to use it! Look for copyright constraints, etc…
DATA IS PLURAL
A weekly newsletter of useful/curious datasets.
The letter archive: https://tinyletter.com/data-is-plural
Spreadsheet with all archived posts:
https://docs.google.com/spreadsheets/d/1wZhPLMCHKJvwOkP4juclhjFgqIY8fQFMemwKL2c64vk/edi t#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.
Kaggle Data Sets
https://www.kaggle.com/datasets
DELIVERABLES
The deliverables of this practical and their deadlines are listed below.
March 13, 2019 April 2, 2019
Student names and matriculation number working together on this project to be emailed to the lecturer (uh3@st-andrews.ac.uk).
The data set that this practical will be focusing on and early visualisation sketches should be submitted to MMS. This should include a PDF with
the data source,
a brief description of the data,
an example data table including 10 data rows, and
CS5044: Information Visualisation
April 22, 2019
at least 3 rough sketches indicating that you have started to think about design ideas.
The final visualisation and the report should be submitted to MMS. This submission should include:
− A .zip file with 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