In-Class Activity

• MultiView
• Data Reduce
• Focus + Context

Instructions

Step 1: Review Existing Code

Review the provided scatter_plot function in the scatterplot.problem.js file to familiarize yourself with its structure and current functionality. Pay close attention to how data is bound to the graphical elements and how the axes are drawn. Refer to the provided screenshot as well. The Scatterplot function is well explained in the provided GitHub repos for week 12 as well.

Step 2: Missing Code

Notice that the brushing functionality, which should allow users to select multiple scatter plot points, is missing (check the marks in the scatterplot.problem.js code).

• 3 Missing code in HTML File (45 points)
• Missing code 4 in JS File (15 points each)
• Missing code 5 in JS File (25 points each)

Step 3: Implement Brushing Functionality

Your task is change the code, such the provided behaviour in the screenshot below is achieved.

Step 4: Update the List Display

Ensure that the adjacent HTML list updates to show the details of the selected points when the brush selection is made. This will involve manipulating the DOM based on the data of the selected points.

Grading Criteria

• Brush function, selects the data-points in both scatter plots (see screenshot)
• The selected cars are added to the list below with the ir details (see screenshot)
• By clicking on the svg the brush selection should be deselected.
• Complete the Missing Parts (85 points)
• GitHub Pages view of the visualization (15 points)

Final Visualization

Submission

The submission should include:

• Working code in zip format (all required files should be inluded such that the code can run offline as well.)
• The GitHub pages URL
• Screenshot of the code