FIT3179 Data Visualisation DATA VISUALISATION 2 Semester 2, 2022, version 1.1 Version history: 1.0 (5 September 2022): Initial release 1.1 (12 September 2022): Added requirement regarding download size Submission Due date: Monday of week 12, 17 October, 23:55. Submit a report in PDF format through a Turnitin link on Moodle. The cover page of the report must contain a URL to a public GitHub repository with a web page containing the visualisation. Marking and Interview Hurdle This assignment is worth 25% of the final unit mark. A detailed marking rubric is included at the end of this document. A late penalty of 10% per day and a one-week cut off apply. Students are required to pass an interview hurdle during the studio in week 12. Students who fail the interview hurdle will get 0 marks for the Data Visualisation 2 assignment. Introduction Very similar to the Data Visualisation 1 assignment, you design and build an effective data visualisation for a specific domain. The major difference is that you will use the Vega-Lite visualisation library to create maps and diagrams. The aim of the assignment is to apply the data visualisation techniques examined during the entire semester and demonstrate their use in an innovative context. Requirements The following requirements apply specifically for this Data Visualisation 2 assignment: The selected domain is clearly different from the domain of your Data Visualisation 1 visualisation. You use the Vega-Lite library for creating maps and diagrams. You may use other libraries for creating diagrams that are not possible with Vega-Lite, however, you must get approval from your tutor before using other libraries. The final result consists of a publicly accessible web page that is hosted on your own GitHub account. The JSON description of each Vega-Lite diagram or map must be easily accessible in the same GitHub repository and must be in a human-readable format. You may use the Pure.css library or any other JavaScript/CSS/HTML library or authoring software to create your web page. 1 Your Vega-Lite visualisation must load reasonably fast. This implies that data files to download cannot be large. Aim at a total downloadable size of less than 1 megabyte. If this limit is too low for your visualisation (for example, if you include video files or large zoomable raster images), then a discussion with your tutor is required before submission. Your web page includes at least one geographic map. If including a map does not make sense for your domain, your tutor can give an exemption for this requirement. The following requirements from the Data Visualisation 1 assignment also apply for this assignment: Why? It should address a particular need within a specific domain of your choosing. It must be targeted to the domain, its needs, and its users. This does not mean the visualisation has to solve an existing problem, but it must be a visualisation that is useful or relevant to people with an interest in the chosen domain. What? It should use a data source relevant to the domain. Data can be of any kind. Who? Design your visualisation for the average Australian or Malaysian. The visualisation must turn data into something meaningful and provide insight that would otherwise be difficult to obtain without the visualisation. It must provide interactive exploration. It needs to show some innovation. It does not have to be wholly original but cannot be a replica of a visualisation that already exists. It could be an innovative visualisation idiom, or an innovative exploration of an interesting dataset. It must demonstrate the use of the Five Design Sheet methodology for sketching and planning the design of your visualisation. It must demonstrate the use of the Munzer What/Why/How framework discussed in lectures for correctly assessing the type of data, the goals of the visualisation and the design of the visualisation. It must apply design principles discussed throughout the unit, such as data-ink ratio, storytelling, layout, typography and visualisation idioms with appropriate use of marks and channels. Task Description and Schedule 1. By the end of Week 8: a. Choose a domain that you would like to explore. b. Find relevant datasets that are publicly available. c. Discuss your domain, design ideas, and datasets with your tutor. d. Design your visualisation using the 5 Design Sheet Methodology. 2. Visualisation: Weeks 9 to 11: a. The homework of Weeks 9 and 10 consist of creating a map and a diagram with Vega-Lite. You can include improved versions of the map and the diagram that you create for these homework assignments in this Data Visualisation 2 assignment. Important: Monash University policy does not allow submitting the same work for two assessments. Therefore, you need to clearly improve your homework map and diagram if you include them in this Data Visualisation 2 assignment. b. Create a web page and embed your Vega-Lite diagrams and maps. Use CSS to style typography and design the layout of your web page. Make your visualisation publicly viewable as a GitHub page. 3. Write a concise report with a maximum length of 1000 words (excluding the cover sheet and the bibliographic list) covering the following (note the following requirements are identical to those for Data Visualisation 1): 2 a) A title page including the number of words and a URL of your visualisation. b) A brief description of the domain, Why and Who. c) What: A brief description of the data (sources, authors, relevance, creation process, etc.). d) Why and How: Give a rationale for choosing the specific idioms and explain how they help the users to achieve their tasks. Include at least one screen capture of your entire visualisation, and a description of features that are special to your visualisation. e) Design: Briefly explain the rationale for your choices of o Layout: How did you structure the layout in columns and rows? o Colour: What are the reasons for selecting the specific colours of your visualisation, and how did you consistently apply the colours to charts, text, and figures? o Figure-ground: How did you vary graphical elements to create a visual hierarchy? o Typography: What are the reasons for selecting the specific typeface(s) and text layout? o Storytelling: How is the reader guided through the visualisation by using annotations and other means. f) Bibliography/list of references. g) Appendix with scans or photos of the 5 Design Sheet Methodology outcome. Expectations Note the following is a verbatim copy from the Data Visualisation 1 assignment, except for the first paragraph about maps. Maps: The visualisation includes at least one map that uses an appropriate map projection and shows data with an appropriate idiom. Format: The entire visualisation must be accessible through a single URL. The entire visualisation must be visible on a single web page that can be scrolled. There should be no buttons (or other web links) that swap the major section of the web page, but you can use buttons to show and hide individual page elements. Presentation not exploration: The goal of this assignment is to create a visualisation that communicates interesting information in an easily accessible and graphically engaging way using storytelling elements, layout principles, typography, and graphical design. The goal is not to create an expert tool for exploring and analysing a dataset. Quality not quantity: Your visualisation will likely contain between 3 and 10 charts or diagrams that you create. However, there are no minimum or maximum numbers of charts. Instead, we are looking for carefully designed and annotated charts that in combination with text and possibly icons and pictures guide the user through an interesting story. Avoid pixelated or non-informative graphical elements. Complement your visualisation with concise, informative and grammatically correct text. Interactivity: Integrate interactivity where it makes sense, but do not just add interactive elements for their own sake. Copyright: You are encouraged to use icons and other simple graphical elements where appropriate. When using such elements, it is your responsibility to ensure you have the right to use them. Consult with your tutor if in doubt. You need to indicate the source and URL (if available online) in your report of any external element that you use, such as datasets, photos 3 and sources of other information. There is no need to indicate the source and URL for simple icons (emojis, coats of arms, trademark icons, etc.). Authorship: Because your visualisation is publicly accessible, you should indicate your authorship and the license under which you make your work accessible. Plagiarism: We will follow up on any kind of academic misconduct. For this assignment, you cannot integrate non-trivial graphics (such as diagrams, charts, information graphics, etc.) created by others. Report content: The report must not include an introduction to the visualisation topic or extra information about the topic. The visualisation itself needs to tell the entire story. There is no need to include a table of contents or a conclusion in the report. References in report: Your report should include properly formatted references to the datasets, sources of information that you used to create your visualisation, possibly similar visualisation in the same domain, and photos, schemas, etc.) that you include in your visualisation. Your text needs to include in-text citations, and your report needs to contain a bibliographic list. The referencing style in this course is APA 6th [link], which is the recommended style for undergraduate students in the Faculty of Information Technology. Note that every in-text reference needs to be listed in the bibliographic list, and every entry in the bibliographic list needs to be referenced in the text. Figures in report: Figures need to be numbered and referenced in the text with the figure number. Every figure needs to have a caption. Marking Rubric The mark will be an automatic 0 if one of the following conditions is met: The student does not pass the interview assessment in Week 12. The domain of Visualisation 2 is not clearly different from the domain of Visualisation 1. The web page or any Vega-Lite elements are not accessible on a public GitHub repository. Note: Only maps and diagrams created with Vega-Lite will be marked (unless the tutor approved an exception). If the map of homework Week 9 and the diagram of Week 10 are included in this assignment, they will only be marked if they are substantially improved. If no map is included, the maximum mark for Visualisation Idioms and Complexity is 5% instead of 10% (unless the tutor approved an exception). If the report does not include a working URL to your visualisation the Visualisation a, b and c (see rubric) are marked with 0. A detailed marking rubric is on the next page. 4 5 Design Sheet 2%, 0 if created with digital tools. Visualisation (a) Idioms and complexity 10% Visualisation (b) Layout, colour, figure-ground 4% Visualisation (c) Typography, storytelling, annotations 5% All 5 stages completed, large variety of detailed sketches, creative and useful outcome. A substantial number of appropriate standard and creative custom-built idioms. Demonstrate a high-level of understanding of the use of visual marks and channels. Balanced and symmetric layout clearly structured in columns/rows with good use of white space. All elements aligned with sight lines. Very clear visual hierarchy by using consistent colour and figure-ground. Advanced typography, (non-standard typeface matching the visualisation topic, very good readability of main text, appropriate line height, size, weight, colour, line length, alignment, and spacing of text elements). Clear guidance of the reader through visualisation. Extensive use of high-quality annotations on diagrams and text outside of diagrams. Why, who, what, how, design are appropriately and succinctly described. Clear structure. Correct grammar. Writing is easy to follow and understand. Figures carefully designed, with numbered captions, and referenced in text. Correct and well-formatted references are included. All major stages completed, large variety of sketches, useful outcome. A substantial number of appropriate idioms. Demonstrate a good understanding of the use of visual marks and channels. Balanced and symmetric layout mostly structured in columns/rows with use of white space. Most elements aligned with sight lines. Visual hierarchy by using colour and figure-ground. Consistent typography (standard typeface and attention to typography). Guidance of reader through visualisation. Use of high-quality annotations on diagrams and text outside of diagrams. Why, who, what, how, design are described with some minor issues. Clear structure. Correct grammar. Writing is mostly easy to follow and understand. Figures carefully designed, with numbered captions, and referenced in text. References are included with some minor format issues. All major stages completed, some variety of sketches, some useful outcome. Standard idioms (e.g., bar chart, line graph). Visual marks and channels are applied correctly. Somewhat balanced and symmetric layout not consistently structured in columns/rows. Arbitrary use of white space. Some elements aligned with sight lines. Some visual hierarchy. Standard typography with minor issues, but still easy to read. Some guidance of reader through visualisation. Use of annotations on diagrams and text outside of diagrams. Why, who, what, how, design are described with some major issues. Mostly clear structure, some content is misaligned. Some grammar issues. Writing is not always easy to follow and understand. Figures without numbered captions or not referenced in text. References have major format issues. Not all stages completed, limited variety of sketches, limited outcome. A small number of standard idioms (e.g., bar chart, line graph). Slightly incorrect use of visual marks and channels resulting in difficult to read visualisation. Layout not balanced or not symmetric, no apparent layout structure. Some elements aligned with sight lines. Limited visual hierarchy. Typography with some issues that impact readability of text (e.g., overuse of highlighting, poor or inconsistent spacing of text, centred text blocks, etc.). Limited guidance of reader through visualisation. Limited number of annotations on diagrams and text outside of diagrams with some grammar or content issues. Why, who, what, how, design are partially described. Structure not clear, some content is misaligned. Grammar issues throughout. Writing is not easy to follow and understand. Figures without numbered captions or not referenced in text. Critical references are missing. Incomplete, small variety of sketches, outcome not applicable. Inappropriate idioms, small number of standard idioms, incomplete visualisation. Visual marks and channels not applied correctly (e.g., hue channel for ordered attribute). Layout not balanced and not symmetric, no apparent layout structure. Most elements randomly placed. No visual hierarchy by using colour and figure-ground. Inconsistency in fonts, sizes and weights. Typography resulting in poor readability (e.g., inappropriate typeface, poor font size, weight, line lengths, etc.) No guidance of reader through visualisation. Small number of annotations on diagrams and text outside of diagrams with grammar or content issues. Substantial aspects of Why, who, what, how, design are missing. Confusing structure. Major grammar issues throughout. Writing is difficult to follow and understand. Lack of figures. No references included. Report (a) Content 2% Report (b) Report structure, writing, figures, and references 2% HD (80100) D (7079) C (6069) P (5059) N (049) 5