In this assignment, you will create a visualization with linked views and interactive brushing.
You will use the same Calvin College grades dataset you have been using before, and your visualization will consist of two side-by-side scatterplots. The first scatterplot will have SATM and SATV axes, and the second scatterplot will show ACT and GPA axes. In addition, the visualization will support interaction via linked views: points selected in one view will be highlighted in the other view. Finally, as users click on points in either scatterplot, you will show the actual values of that particular student in a separate, third view.
Specifically, your visualization will be graded based on the following features:
One scatterplot with SATM and SATV axes (20/100)
A second scatterplot with ACT and GPA axes (20/100)
When users click on a point in either scatterplot, the actual numerical values of the fields for that particular student are displayed in a separate table (20/100)
When users drag the mouse on either scatterplot, a rectangular brush is drawn on that scatterplot, indicating the region of interest. All the points inside that region are considered selected, and should be highlighted on the other scatterplot. (30/100)
When users click on a point in either scatterplot, the corresponding point on the other scatterplot is highlighted (10/100)
You can reuse code from any of your previous assignments; you should also look at the following resources:
Bostock, Focus + Context via Brushing
Bostock, Scatterplot Matrix Brushing
Bostock, Brushable Network
Documentation for d3’s SVG Controls, including brushes