make plot controllable programmatically

Author: OliverDudgeon

README.md

@@ -8,6 +8,8 @@ A React + Vite + TypeScript app demonstrating an Observable Plot scatter plot wi
 - 🖱️ Interactive brush selection – drag to select data points
 - 🎨 Live visual feedback – selected points highlighted, non-selected dimmed
 - 📈 Real-time counter showing number of selected points
+- 🎮 **Controlled selection** – programmatically set selection from props
+- 🔄 Bidirectional data flow – selection updates flow both ways
 
 ## Tech Stack
 
@@ -27,10 +29,25 @@ Open your browser and navigate to the local dev server (typically `http://localh
 
 ## Usage
 
+### Interactive Selection
+
 - **Drag** within the chart area to create a rectangular selection
 - **Selected points** remain fully visible; non-selected points are dimmed
 - The **"Selected: N"** counter updates in real-time
 - **Click outside** the selection or brush over empty area to clear
+- **Press Escape** to clear the selection
+
+### Controlled Selection (New!)
+
+The ScatterPlot component now supports controlled selection, allowing you to programmatically set the selection from your code. See [CONTROLLED_SELECTION.md](./CONTROLLED_SELECTION.md) for detailed documentation.
+
+```tsx
+<ScatterPlot
+  data={myData}
+  selection={selection} // Control selection via prop
+  onSelectionChange={(points, sel) => setSelection(sel)}
+/>
+```
 
 ## Implementation Notes
 
@@ -40,7 +57,17 @@ The brush is appended inside the **same parent group** as the circle elements, e
 
 ## Project Structure
 
-- `src/components/PlotScatterBrush.tsx` – Main chart component with brush logic
+- `src/components/ScatterPlot/` – Modular scatter plot component library
+  - `ScatterPlot.tsx` – Main component with controlled selection support
+  - `brush.ts` – Brush creation and programmatic control utilities
+  - `plot.ts` – Observable Plot configuration and helpers
+  - `types.ts` – TypeScript type definitions
+  - `examples.tsx` – Usage examples including controlled selection demo
+  - `legends.ts` – Legend creation utilities
+  - `utils.ts` – Helper functions
+- `src/components/PlotScatterBrush.tsx` – Original demo component
 - `src/App.tsx` – Page layout
 - `src/main.tsx` – React entry point
-- `src/styles.css` – Styles including `.hidden` class for dimming
+- `src/styles.css` – Application styles
+- `CONTROLLED_SELECTION.md` – Documentation for controlled selection feature
+- `IMPLEMENTATION_SUMMARY.md` – Summary of recent implementation changes

src/App.tsx

@@ -1,6 +1,39 @@
-import { PlotScatterBrush } from "./components/PlotScatterBrush";
+import { useMemo, useState } from "react";
+import {
+  ScatterPlot,
+  BrushSelection,
+  Point,
+  generateRandomData,
+} from "./components/ScatterPlot";
 
 export default function App() {
+  const data = useMemo(() => generateRandomData(800), []);
+  const [selection, setSelection] = useState<BrushSelection | null>(null);
+  const [selectedPoints, setSelectedPoints] = useState<Point[]>([]);
+
+  const handleSelectionChange = (
+    points: Point[],
+    newSelection: BrushSelection | null
+  ) => {
+    setSelectedPoints(points);
+    setSelection(newSelection);
+  };
+
+  // Programmatic selection using data coordinates
+  const selectCenterRegion = () => {
+    // Select center region (data coordinates around mean ~50)
+    setSelection({ x0: 40, y0: 40, x1: 60, y1: 60 });
+  };
+
+  const selectLowRegion = () => {
+    // Select lower-left region
+    setSelection({ x0: 20, y0: 20, x1: 45, y1: 45 });
+  };
+
+  const clearSelection = () => {
+    setSelection(null);
+  };
+
   return (
     <div className="app">
       <h1>Observable Plot: 4D Scatter with Brush</h1>
@@ -12,9 +45,52 @@ export default function App() {
       <p>
         <em>Drag to select points. Non-selected points become translucent.</em>
       </p>
+
+      <div style={{ marginBottom: 16 }}>
+        <strong>Programmatic Selection:</strong>
+        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+          <button onClick={selectCenterRegion}>
+            Select Center (x:40-60, y:40-60)
+          </button>
+          <button onClick={selectLowRegion}>
+            Select Low Region (x:20-45, y:20-45)
+          </button>
+          <button onClick={clearSelection}>Clear Selection</button>
+        </div>
+      </div>
+
       <div className="chart-container">
-        <PlotScatterBrush />
+        <ScatterPlot
+          data={data}
+          selection={selection}
+          onSelectionChange={handleSelectionChange}
+          enableBrush={true}
+        />
       </div>
+
+      {selectedPoints.length > 0 && (
+        <div
+          style={{
+            marginTop: 16,
+            padding: 16,
+            background: "#f0f7ff",
+            borderRadius: 8,
+            border: "1px solid #4a90e2",
+          }}
+        >
+          <h3 style={{ marginTop: 0 }}>Selection Info</h3>
+          <p>
+            <strong>Selected Points:</strong> {selectedPoints.length}
+          </p>
+          {selection && (
+            <p>
+              <strong>Data Coordinates:</strong> ({selection.x0.toFixed(2)},{" "}
+              {selection.y0.toFixed(2)}) to ({selection.x1.toFixed(2)},{" "}
+              {selection.y1.toFixed(2)})
+            </p>
+          )}
+        </div>
+      )}
     </div>
   );
 }