FIT5147 Data Exploration and Visualisation
Semester 1, 2025
Programming Exercise 3: D3 (5%)
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. Assessment Resources
3. Assessment Criteria
4. How to Submit
5. Late Penalty
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 a small subset of AusStage data (like in PE1 and PE2). This subset focuses on the contributor Kelly Abbey and their events and collaborators. The final visualisation is a web page containing a network diagram that shows an “event contribution network diagram”, which contains event personnel and their contribution to different events. The network diagram shows both events and contributors as network nodes, and the links between them. A legend explains the visual variables used for each node. A distinction is made between those nodes representing contributors and those for events, whether a contributor is male or female is also identifiable. An interactive checkbox in the legend allows the user to change the network diagram. When the checkbox is unchecked, the event nodes are removed and a new diagram appears - the “collaboration network diagram” . This shows which contributors have collaborated with each other and how often. To the left of both network diagrams is a text box that describes the visual narrative and provides information about the data source (this is filled in for you).
The template:
For this task you are provided 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 (note that this screenshot is zoomed out to see the full network):
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. code required to finish the visualisations is provided in the template, and is accompanied by descriptions. Most of the descriptions are represented as the #TASK and #END TASK block of comments in the code.
About the data:
There are two dataset files used in this project containing attributes from the AusStage dataset that we have been using in the programming exercises throughout the unit. In this assignment, the data are in .json format and hosted on GitHub for you (you can see the data if you visit the url).
The AusStage subset focuses on the collaborator involved in the most events, Kelley Abbey. We have already cleaned and transformed the data into the format you need.
In wrangling the data we have removed duplicates, removed events not in Victoria and, if a collaborator has played various roles in different events, we have simplified this information to a single combined string property under “Role”, e.g., a collaborator may have been an Actor but also a Director.
The two files contain the following attributes and example values.
1) event_contribution_network.json to create the “event contribution network
diagram” . In this network, there are two types of nodes (indicated by the “type” property): ”event” and “contributor”:
“nodes” contain the following properties, with an example:
"id": "event_158557",
"type": "event",
"name": "Jesus Christ Superstar",
"first_date": "2017-07-29",
"last_date": "2017-08-13",
"venue_id": "21",
"venue_name": "The State Theatre",
"suburb": "Melbourne"
“edges” :
"source": "event_28513",
"target": "contributor_564388"
2) collaboration_network.json to create the “collaboration network diagram” . In this network, there are only “contributor” node types:
“nodes” :
"id": "contributor_1840",
"type": "contributor",
"name": "Eamon D'Arcy",
"nationality": "Australian",
"sex": "Male",
"role": "Set Designer",
"number_of_collaborators": 43
“edges” :
"source": "contributor_3060",
"target": "contributor_4070",
"weight": 1
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 1-7. There are 7 tasks that you need to complete. These tasks are based and graded on the criteria described in Section 4: Assessment Criteria. The following is the list of these tasks:
|
#Task 1: Add all nodes to the network diagram
● Take the node variable specified in the code and use it to create a symbol representing each contributor and event in the network diagram;
● The symbol and visual variable used should be an appropriate design choice:
○ Choose a visual variable to distinguish between event and contributor nodes;
○ Use a different visual variable to differentiate between male and female contributors.
|
|
#Task 2: Make the node symbols proportional to the data
● Map the size of the contributor nodes to the “number_of_collaborators” (i.e., the node’s degree).
● This should be visible in both network diagrams.
|
|
#Task 3: Make the collaboration network diagram links proportional to the data
● Map the thickness of the links on the collaboration network using the “weight” property.
|
|
#Task 4: Label all nodes
● Take the node variable and use it to create a suitable label;
● The label should be either the full name of the contributor, or the name of the event;
● The label should be placed in a suitable location above the node so that it is associated with the node it belongs to;
● Set the class attribute of the label to "label";
● Use a suitable design choice to differentiate between events and contributor labels, such as the use of bold for events.
|
|
#Task 5: Modify the legend
● Modify the legend to show the visual variables for nodes you have chosen in Task 1.
(Note: for a complete visualisation we would also recommend you provide a legend to show both the proportional size of the node symbols and the link width, but this is not a requirement for this programming exercise.)
|
|
#Task 6: Show the tooltip on mouse hover, when:
● Show and hide the tooltip when the mouse pointer is on or leaving a node;
● The tooltip should show relevant attributes associated with the node being hovered including:
○ for event nodes: "id", "name", "first_date", "last_date", "venue_id”, "venue_name”, "suburb";
○ for contributor nodes: id", "name", "nationality", "sex", "role", "number_of_collaborators”.
● Ensure each attribute and relevant information is on a new line.
|
|
#Task 7: Highlighting nodes and links:
● When the mouse pointer is on a node, highlight both the node and neighbouring links;
● Choose an appropriate highlighting option, which may include changing the
|
|
node/link color, size, or the opacity of other network elements;
● Remove the highlighting / return the network diagram to the original state, when the mouse pointer leaves the node.
|
Remember, you are only asked to complete the tasks above. We have provided hints for the location of a task within the template after “ADD YOUR CODE HERE FOLLOWING THE INSTRUCTION”.
General Help Notes:
● The template has been tested in Chrome, Firefox and Safari. The checkbox that should be in the legend appears in the wrong location in Safari, but still functions. Try a different browser, such as Chrome / Firefox / Edge if this occurs. If you have issues with the template in other browsers, contact the team with a screenshot on Ed.
● The template uses D3 v7. This is important when referencing online resources which may use older or newer versions of D3.
● You are allowed to make some 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 no longer working, layout changes, 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. The data is stored in the collaborationNetwork and eventContributionNetwork variables. You do not need to reference these variables directly as they are encoded in the graph variable which selects the correct network depending on the checkbox. You must NOT change the data 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 or the programming code you use.
Further Visualisation Improvement Ideas:
Note: these are NOT required nor will they gain extra marks for your PE3
submission. Whilst none of these are a requirement of this assessment task, further improvements to the visualisation might include:
● adding the minimum and maximum values for the proportional symbols and lines to the legend;
● removing the non-highlighted node labels upon interaction;
● adding further highlighting and exploration options;
● setting the zoom to default to fitting in the opening window aspect ratio;
● increasing the subset of the data to show many more collaborations across Australia and over time, perhaps being able to filter the network on the fly.
3. Assessment Resources
● The template is provided in the assessment page on Moodle. The code to access 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 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 the template with improved aesthetics (e.g., CSS) and adding more advanced interactions and/or layouts if you wish, but this is not required.
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) should be in one .html file. Data files should not be included as these are accessed via the URLs provided in the template.
Submit a zip file (not alternative compression formats) containing the one .html file required to run your work. This must be a zip file as Moodle does not allow you to submit html files. Name the zip file in this format: [STUDENT ID]_[FIRST
NAME]_[LAST NAME].zip
6. Late penalty
Following the 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.