FIT5147 Data Exploration and Visualisation

Monash University
FIT5147 Data Exploration and Visualisation Semester 2, 2024
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. Instructions&Brief
2. AssessmentResources 3. AssessmentCriteria
4. HowtoSubmit
5. LatePenalty
1. Instructions & Brief
In this assignment, you are required to demonstrate the ability to complete the source code of an interactive visualisation built using D3.
Relevant learning outcomes for FIT5147:
6. Implement interactive data visualisations using R and other tools
The final visualisation:
The expected final visualisation is about the topic of Melbourne’s Development Activity Monitor, similar to PE1 and PE2. The outcome is a web page containing two complementary visual elements. The first is a tree diagram showing groups of completed developments split by top 3 floor space uses: office, retail and education, branching into suburbs (inferred by the clue_small_area in this data). A second connected visual component shows a timeline displaying the trend of development every year for ten years from 2014-2023. These two visual elements are presented side-by-side and connect through interactive components. There is also a legend to describe the colour and text narration to help describe insights gained from the visualisation.
The template.
You will be given an incomplete file of source code for the final visualisation. Your task is to complete the code by following the provided instructions. We refer to this incomplete source code as the template. You are expected to not remove any aspect of this template.
 
 The template is a single HTML document. All references to external libraries, datasets, CSS, and the layout are already provided in the template. The webpage uses a side-bar layout. The left side-bar contains basic information about the visualisation, some data insights and information relating to the data source. The main canvas on the right is where the visualisation is placed. The HTML elements of tooltips are also provided in the template.
 To help you better understand the template structure, comprehensive comments are provided in the HTML elements as well as the javascript. Most of the javascript codes required to finish the visualisations are provided in the template, and are accompanied by descriptions. Most of the descriptions are represented as the #region and #endregion block of comments in the code.
There are two dataset files used in this project: 1. PE3_developments_hierarchy.json.
This data set is used to create the tree diagram structure and labels. 2. PE3_development_data.csv.
This dataset contains the following 5 columns: clue_small_area (name of the suburb), year_completed (year development completed), completed_developments (number of developments completed), floor_type (type of floor space: Office, Retail, Education), area (count of area in m2)
Detailed tasks:
You will only need to complete the javascript parts. These parts are indicated by a comment line: “ADD YOUR CODE HERE FOLLOWING THE INSTRUCTION” and a short indication of instruction and reference to Task #. There are 6 tasks that you need to complete. These tasks are based on the criteria described in Section 4: Assessment Criteria. The following is the list of these tasks, divided into two stages

 Stage 1: Complete the network diagram and timeline visualisations (Tasks 1-4)
The tree diagram should have three layers:
developments → (top three) floor space type → suburb name
The timeline shows total count of m2 of completed development per year (for each floor space type per suburb).
   #Task 1: Add nodes to the network diagram
● Take the node variable specified in the code and use it to create a symbol representing each node in the tree diagram.
● The symbol should be an appropriate design choice.
 #Task 2: Label the nodes
In this:
● Take the node variable specified above and use it to create a suitable label;
● The label should be placed in a suitable location, so that it is associated with the
node and that the label is readable and the tree diagram is visible (i.e. limited
overlap).
● Set the class attribute of the label to "label".
 #Task 3: Create the timeline bars
● The timeline bars are horizontal lines, or rectangles, with the same length and thickness. There should be 10 in a row representing the 10 years from 2014-2023. Create the 10 timeline bars.
Hint: to create and position the timeline bars, you can append lines (or rectangles) with a stroke width of about 10px. Use the y position of the respective suburb node, and the x position of respective year for y and x positions of each line respectively. The length of each line should span the distance between the vertical dashed lines that separate the years. You might need to make some adjustments by adding offsets for optimal alignment.
 #Task 4: Encode the total area in m2 (per suburb and year) using colour in the timeline bars
Only the colour of the bar will encode the total number of developed m2 completed per space type, per suburb per year. Do not hard code the total m2 count in your code.
● Choose a colour scheme and scale that is appropriate for the encoded variable, and enables you to differentiate the patterns in the timeline explained in the text description on the left side-bar.
● Add or modify the legend for the colour scale and any other visual variables you might add to match how you have encoded them.
Hint: do change the colour scheme from the default to a suitable scheme for this type of data. Try to find a scale range that is appropriate for the range of data.
   Stage 2: Adding interaction to connect the visualisations and ensure the data is communicated (Tasks 5-6)
The completed visualisation should have tooltips and highlighting on mouse hover over the timelines and nodes.
   #Task 5: Show the tooltip on mouse hover, when:
1) on the timeline bars:
● Show and hide the tooltip when the mouse pointer is on or leaving the bar;
● The tooltip should show relevant attributes associated with the bar being hovered,
including: Year, Suburb, Floor Space Type, and Total Area in m2.
 
    2) on the tree nodes:
● Show and hide the tooltip when the mouse pointer is on or leaving the node.
● For the leaf nodes: the tooltip should show the Suburb and Total Number of
developments
● For the non-leaf nodes: the tooltip should show the number of child nodes when
hovered over.
 #Task 6: Highlight the timeline bar and nodes when the mouse is hovering over the svg object
1) For the tree nodes:
● When the mouse pointer is hovering on a node, highlight the node. For instance, this could be using a different colour fill, outline, or both.
2) For the timeline bars:
● Highlight the timeline bar for the relevant year in the timeline on hover-over. For
instance, this highlight could be using a thicker outline. Note: this highlight should
not change the fill colour as the fill is related to the data we are examining. 3) For both:
● Finally, when the mouse pointer exits, the colour and thickness of the bars and nodes must always return back to the original / default style.
 Remember, you are only asked to complete the tasks above. We provided hints of the starting points for a task or a combination of the tasks with this comment: “ADD YOUR CODE HERE FOLLOWING THE INSTRUCTION”.
General Help Notes:
● The template uses D3 v7. This is important when referencing online resources which may use older versions of D3.
● You are allowed to make changes to the template, such as to add your own CSS rules, and adjust fonts and styling. However, any issues which arise from this (e.g., network graph or timeline no longer working, poor visual changes to the visualisation) 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 reference sources in your code comments to avoid breaching academic integrity.
● Generative Artificial Intelligence (Generative AI) software or systems cannot be used for any part of this assessment task, including (but not limited to) generating written or visual components of your submitted work.
Continued Design Improvements (not needed for your PE3 submission):
A further improvement to the visualisation could include: highlighting links and connecting the visualisation components to more explicitly connect the tree diagram and timeline. The designer could for instance highlight the connecting links upon node hover over and emphasise the timeline bars for that tree branch (suburb) by deemphasising the other data objects using figure ground theory.

 3. Assessment Resources
● The template is provided in the assessment page on Moodle. The data is embedded in the template, no separate data file is needed.
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 [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 are 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
Following Monash late penalty policy. Late submissions will receive 5% deduction per day late. After 7 days, the assignment will not be graded or receive feedback.