This project is a small multiview data visualization built with React and D3. It visualizes housing data using two coordinated views:
- A main scatterplot (large view on the left).
- A pairplot matrix (small multiples) showing pairwise relationships for selected features.
-
Feature selection (pairplot): use the chips in the top controls bar to choose which features appear in the pairplot matrix. At least two features must be selected.
-
Color encoding: to change the color encoding for all views, click the diagonal label (or diagonal cell) inside the pairplot matrix. That feature will become the current color feature and points will be updated accordingly.
-
Select main scatterplot axes: to set the main scatterplot's X and Y attributes from the pairplot, select a cell in the pairplot matrix while holding Shift (or Ctrl). The cell's column is treated as X and the row as Y for the main scatterplot.
-
Brushing & selection: drag (brush) inside either the main scatterplot or any pairplot cell to select a subset of data points. Selections are synchronized across views. The app keeps a set of selected IDs and uses it to highlight points in both views.
- Install dependencies:
npm install- Start the dev server:
npm start- Open the app in your browser (typically
http://localhost:3000).