Monash University FIT5147 Data Exploration and Visualisation Semester 1, 2022 

Programming Exercise 3: D3 (5%)

 Programming Exercise 3: D3 Please carefully review all the requirements below to ensure you have a good understanding of what is required for your assessment. 1. DueDate 2. Instructions&Brief 3. AssessmentResources 4. AssessmentCriteria 5. HowtoSubmit 6. LatePenalty 1. Due Date Monday, 16 May 2022, 11:55 PM 2. Instructions & Brief In this assignment you are required to create an interactive visualisation using D3. Relevant learning outcomes for FIT5147: 6. Implement interactive data visualisations using R and other tools Details of the task: The task is to use D3 to create a network visualisation using the provided datasets and HTML template. The network visualisation should show the locations in Royal Park used in the butterfly survey and the routes taken between the locations. You are to create this using the two provided datasets: 1. PE3_butterflysurvey_locations.json:Containsthecoordinatesofthelocations where researchers looked for butterflies and how many they saw during the survey. 2. PE3_butterflysurvey_routes.json:Containsthecoordinatesofthestartand end points of the routes taken by researchers to go between the above locations. The provided template contains an SVG canvas and sidebar element. There is also code which draws a simple map of the boundaries of Royal Park (in green) on this canvas, as well as Melbourne Zoo (in grey) which is located inside the park. You are not expected to make changes to this map. For your reference, the map uses the following dataset: 1. royalpark_boundaries.json:AGeoJSONfilethatcontainsshapedataofthe boundaries of Royal Park and the Melbourne Zoo. Using the provided HTML template, the assignment task is to do the following: 1) Add a network visualisation on top of the provided map 1. EachnoderepresentsalocationfromthePE3_butterflysurvey_locations.json dataset: 1. Positionvaluesforthenodesaregivenunderthecoordproperty. 2. Nodesshouldvisuallyencodethenumberofbutterfliesthatwere observed at that location during the survey (the butterflyCount property). 3. Inadditiontothis,thenodesforlocationswherezerobutterflieswere observed should be visually different from those where butterflies were seen. It should be immediately obvious to the viewer which nodes have no butterflies and which nodes do. This must be a different visual element to that used to indicate how many butterflies were seen at other locations. You cannot use the same visual variable for each. 2. EachedgerepresentsaroutefromthePE3_butterflysurvey_routes.json dataset 1. Positionvaluesforthestartandendpointsofedgesaregivenunder the routeCoords property. 2. Edgesshouldvisuallyencodethenumberoftimestheroutewasused. This information is given by the routeUses property. 3. Appropriatestylingshouldbeusedforboththenodesandedges.This includes the choice of visual variable used to differentiate between the different types of nodes (i.e., 0 versus 1 or more butterflies). 4. Allnodesandedgesshouldbespatiallyalignedwiththeunderlyingmap (already given by the template). All nodes and edges should be on or within the Royal Park boundary, but outside of the Melbourne Zoo boundary. 5. Allnodesshouldappearinfrontoftheedges. 6. Forthepurposesofthisassignment,nolegendisrequired. 2) Add interactivity to the network visualisation 1. Createasimpletooltipthatistriggeredwhenthemouseishoveredovera node or edge 1. Whenhoveredoveranode: 1. Thetooltip’stextshouldshowthelocation’sname(the locationName property). 2. Thetooltip'stextshouldalsoindicatewhichRoyalParkregion the node is within (the regionId property). 3. Thetooltip’stextshouldalsoindicatehowmanytimesthat researchers looked for butterflies at the location (the visits property). 4. Thetooltip’stextshouldalsoindicatewhetheranybutterflies were sighted at the location and how many (the butterflyCount property). 2. Whenhoveredoveranedge: 1. Thetooltip’stextshouldshowtheroute’sname(therouteDetail property). 2. Thetooltip’stextshouldalsoshowhowmanytimestheroute was used during the survey (the routeUses property). 3. Thetooltipshouldbepositionedclosetothemousecursor,butnotbe overlapping directly on top of it. 4. Thetooltipshoulddisappearwhenthemouseismovedawayfromthe node or edge. 5. Thebuildingblocksforthistooltip(i.e.,divelementandCSSrules) have already been provided in the template. 2. Implementhoverhighlightingwhenthemouseishoveredoveranodeoredge 1. Appropriatestylingshouldbeusedforthehighlightingofnodesand edges. 2. Thenodeoredgeshouldrevertbackitsoriginalstatewhenthemouse exits it. 3. Bothnodesandedgesneedtohavethisinteractivity. Notes: • The template uses D3 v4. This is important when referencing online resources which may use newer versions of D3. • You are allowed to make changes to the template, such as to add your own CSS rules, adjust fonts and styling, or even to update D3. However, any issues which arise from this (e.g., map no longer working, poor visual changes to the map) may result in marks being deducted, even if not part of the given task. • The datasets are stored on an online repository and are referenced via URL in the template (suffixed with “...DataPath”). You must NOT change these paths, nor should you download and use a local copy in your submission. • Your code will be run through similarity detection software during the marking process. Be sure to acknowledge any sources in your code comments to avoid breaching academic integrity. Acknowledgements: The data set for this assignment is based on an Our City's Little Gems study which observed butterfly biodiversity and flower-butterfly interactions in the City of Melbourne between January - March 2017 (https://data.melbourne.vic.gov.au/Environment/Butterflybiodiversity- survey-2017/kmtd-nvqr). In the original study, the researcher recorded what butterflies they saw, if any, when they walked through various areas of Melbourne, including Royal Park. The PE3 data is the result of filtering, aggregating and adjusting these records to make them more suitable for this assignment. Some of this code is adapted from the work of Merry Hoang, a previous FIT5147 student, for her Master’s Minor Thesis research project. 3. Assessment Resources • HTML Template (to download the file, right click then Save Link As). The datasets are stored online and the paths are provided in the template. The following is a screenshot of the template. The map on the right is the SVG canvas where your network visualisation will be overlaid on top of. The information on the left provides a description of the data visualisation. You can amend or add to this text if you wish. Note: if the template doesn’t show the SVG canvas next to the textbox, try zooming out in your browser. 4. Assessment Criteria The following outlines the criteria which you will be assessed against. • Ability to create simple static visualisations using D3 [3%] o Demonstrated ability to create basic SVG elements using D3 (nodes and links) [1%] o Demonstrated ability to link data to visual properties [1%] o Demonstrated ability to choose appropriate visual variables to encode data [1%] • Ability to create interactive visualisations using D3 [2%] o Demonstrated ability to create an interactive visualisation in D3: tooltip [1%] o Demonstrated ability to create an interactive visualisation in D3: highlight on mouse over [1%] Please note that marks will be deducted if the provided template is not used, or if your submission uses modified and/or local copies of the datasets. Remember that you are allowed to improve on the template with improved aesthetics (e.g., CSS) and more advanced interactions and/or layouts if you wish, but this is not required for full marks. 5. How to Submit The code for the final interactive visualisation should be submitted through Moodle. Ensure that all necessary files for the visualisation are included. The code’s components (i.e., HTML, CSS, JS) can either be in the same file or separated into individual files. Data files should not be included as these should be accessed via the URLs provided in the template. Submit a zip file containing all files required to run your work. Name the zip file in this format: [STUDENT ID]_[FIRST NAME]_[LAST NAME].zip. 6. Late penalty See the late penalty guidelines in the Assessments section on Moodle.