2. Instructions & Brief
In this assignment, you are required to create an interactive visualisation using D3. The visualisation will present network data and provide tooltips when the user hovers above the visual elements. It is an individual assignment and worth 5% of your total mark for FIT5147.
Relevant learning outcomes for FIT5147:
6. Implement interactive data visualisations using python, R and other tools
Details of the task:
The data you are to use can be found in Moodle. It is trading data between different locations. You do not need to worry about map projections, we have already converted the locations into screen positions (in pixels). The data is fictional.
It contains:
• Screen position in pixels of different locations.
• Trade amounts between different locations. This network is un-directed, you do not need to draw arrows.
Your job is to
• Read in the data using D3.
• Draw the locations as circles, and make the radius of circles proportional to the total trading amount.
• Draw the trading as lines between the locations, and make the thickness of lines proportional to the amount.
• Interactions:
• Hovering on a circle, highlight the circle and all lines connected to it (by making other circles and lines transparent).
• Hovering on a circle, show a tooltip with its information about the total amount of trading and the number of connected locations.
• Circles should be rendered on top of lines.
Your code should be generic and work with other data files of the same structure and format.
The data is available at the bottom of the page.
4. Assessment Criteria
The following outlines the criteria which you will be assessed against.
4.1 Grading Rubric
Ability to create simple static visualisations using D3 [2%]
Demonstrated ability to create basic SVG elements using D3: Circles and lines [1%]
Demonstrated ability to link data to visual properties: Proportional radius and thickness [1%]
Ability to create interactive visualisations using D3 [2%]
Demonstrated ability to create an interactive visualisation in D3: Highlight [1%]
Demonstrated ability to create an interactive visualisation in D3: Tooltip [1%]
Quality of webpage and visualisation design [1%]
4.2 Word Count & Penalties
N/A