DDA2003 Assignment 2 Solution

1 Description

Figure 1: The visual result of assignment 2.
This assignment aims to help students get familiar with basic elements in D3. Moreover, students will use D3 to build visual and interactive data interface.

(a) Hover on point (b) Hover on legend
Figure 2: Interaction on the point (a) and legend (b).
In this assignment, you are asked to produce the following visualization results.
• Given a set of points, visualize them using a scatter plot, as shown in Figure 1.
• When users use a mouse to hover a point, the corresponding information will be displayed near the point, as shown in Figure 2 (a). • When users use a mouse to hover a specific time interval in the legend, only the points in that interval will be displayed, as shown in Figure 2 (b). Students can determine the basic time interval size (e.g., one month).
2 Requirement
• Get data attributes.
• Create scales.
• Visualize data using a scatter plot.
• Build interaction for hovering point.
• Build interaction for hovering legend.
Online Resources The following online resources will be helpful in finishing this assignment.
• SVG in D3
• Scale in D3
• Scatter plot in D3
• Marginal distribution in D3
• Tooltips in D3
• Mouse events in D3
• Delaunay in D3
Note that:
• You are required to use fuzzy position to implement for hovering on the point. If fixed position is used, you will only receive half of the points. • The color in the legend can be determined by the students themselves.
You are not required to use the provided template to complete this assignment. For example, you can use TypeScript as the programming language. Other programming languages, such as Python or R, are not allowed. However, you need to meet all the requirements mentioned above. In submission, ensure you offer detailed instructions so the grader knows how to produce your results successfully.
3 Evaluation
In total, there are 100 points in this assignment. A detailed evaluation is provided here.
1. Get data attributes. (5 pts)
2. Create scales. (10 pts)
3. Visualize data using a scatter plot. (15 pts)
4. Related information is displayed when the mouse hovers to the point.(25 pts)
5. Filter and visualize points when the mouse hovers to the color legend.(40 pts)
6. Submission (5pts). Please compress your code and a readme file (optional) into a zip file and submit the zip file to Black Board. The readme file can include descriptions that help the grader run the interface successfully.
4 Bonus (50pts)
There are an additional 50 points for the bonus. The requirements are as follows:
• Display the marginal distributions for maximum and minimum temperatures, respectively, as shown in Figure 3 (a). (Each marginal distribution is for 10 pts)
• When hovering on a point, show the corresponding location on the marginal distributions, sketched in Figure 3 (b). (10pts)

(a) (b) (c)
Figure 3: (a) Scatter plot with the marginal distributions; (b) hover on point; (c) hover on legend
• Display the marginal distributions of the selected points when the mouse hovers on the legend, as shown in Figure 3 (c). (20 pts)
Note that you will receive a bonus for each part only if you fully meet the requirement. Partly completing each part will receive 0 points.