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 goodunderstanding of what is required for your assessment.

1. Instructions & Brief
2. Assessment Resources
3. Assessment Criteria
4. How to Submit
5. Late Penalty
6. Instructions & Brief

In this assignment, you are required to demonstrate the ability to complete thesource 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 DevelopmentActivity Monitor, similar to PE1 and PE2. The outcome is a web page containing twocomplementary visual elements. The first is a tree diagram showing groups ofcompleted 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 secondconnected visual component shows a timeline displaying the trend of developmentevery year for ten years from 2014-2023. These two visual elements are presentedside-by-side and connect through interactive components. There is also a legend todescribe the colour and text narration to help describe insights gained from thevisualisation.

The template.

You will be given an incomplete file of source code for the final visualisation. Yourtask 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 toexternal libraries,datasets, CSS, and the layout are already provided in the template. The webpageuses a side-bar layout. The left side-bar contains basic information about thevisualisation, some data insights and information relating to the data source. Themain canvas on the right is where the visualisation is placed. The HTML elements oftooltips are also provided in the template.代 寫FIT5147 Data Exploration and Visualisation To help you better understand the template structure, comprehensive comments areprovided in the HTML elements as well as the javascript. Most of the javascriptcodes 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 thesuburb), 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 acomment line: “ADD YOUR CODE HERE FOLLOWING THE INSTRUCTION” and a shortdication of instruction and reference to Task #. There are 6 tasks that you need toomplete. These tasks are based on the criteria described in Section 4: AssessmentCriteria. The following is the list of these tasks, divided into two stagesStage 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 floorspace 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 symbolrepresenting 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 thenode and that the label is readable and the tree diagram is visible (i.e. limitedoverlap).

• 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 andthickness. 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 astroke 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 ofeach 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 perspace 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 textdescription on the left side-bar.

• Add or modify the legend for the colour scale and any other visual variables youmight add to match how you have encoded them.Hint: do change the colour scheme from the default to a suitable scheme for this type ofdata. 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 theimelines and nodes.

#Task 5: Show the tooltip on mouse hover, when:

1. 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 ofdevelopments

• For the non-leaf nodes: the tooltip should show the number of child nodes whenhovered over.

#Task 6: Highlight the timeline bar and nodes when the mouse is hovering over the

svg object

1. 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. 2) For the timeline bars:

• Highlight the timeline bar for the relevant year in the timeline on hover-over. Forinstance, this highlight could be using a thicker outline. Note: this highlight shouldnot change the fill colour as the fill is related to the data we are examining.

3. 3) For both:

• Finally, when the mouse pointer exits, the colour and thickness of the bars andnodes must always return back to the original / default style.

Remember, you are only asked to complete the tasks above. We provided hints ofthe starting points for a task or a combination of the tasks with this comment: “ADDYOUR 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 ownCSS rules, and adjust fonts and styling. However, any issues which arise fromthis (e.g., network graph or timeline no longer working, poor visual changes tothe visualisation) may result in marks being deducted, even if not part of thegiven task.

• The datasets are stored on an online repository and are referenced via URL inthe 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 markingprocess. Be sure to acknowledge any reference sources in your codecomments to avoid breaching academic integrity.

• Generative Artificial Intelligence (Generative AI) software or systems cannotbe 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 andconnecting the visualisation components to more explicitly connect the tree diagramand timeline. The designer could for instance highlight the connecting links uponnode hover over and emphasise the timeline bars for that tree branch (suburb) bydeemphasising the other data objects using figure ground theory.3. Assessment Resources

• The template is provided in the assessment page on Moodle. The data isembedded in the template, no separate data file is needed.

4. Assessment CriteriaThe 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 iyour submission uses modified and/or local copies of the datasets. Remember thatyou are allowed to improve on the template with improved aesthetics (e.g., CSS) andmore advanced interactions and/or layouts if you wish, but this is not required for fullmarks.

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 intoindividual files. Data files should not be included as these are accessed via theURLs provided in the template.Submit a zip file containing all files required to run your work. Name the zip file in thisformat: [STUDENT ID]_[FIRST NAME]_[LAST NAME].zip

6. Late penalty

Following Monash late penalty policy. Late submissions will receive 5% deductionper day late. After 7 days, the assignment will not be graded or receive feedback.