Interactive D3.js visualizations using JSON sidecar data

[petteriTeikari]

Context

The apps/visualization/ directory contains a React + D3.js + TypeScript scaffold (Vite dev server, Tailwind, jspdf for PDF export). Currently it's a placeholder — no figures are generated through it yet. All production figures use Python (matplotlib) and R (ggplot2).

However, the architecture is already in place to power interactive versions of every figure via the JSON sidecar pattern.

Why the npm code exists

Every matplotlib/ggplot2 figure produces a JSON sidecar alongside the PNG:

figures/generated/
├── fig_R7_calibration.png          ← Static figure (Python)
├── fig_R7_calibration.json         ← All numeric data (committed)
└── data/
    └── fig_R7_calibration_TEST.json  ← Subject-level (PRIVATE, gitignored)

The JSON contains everything needed to recreate the figure: curve points, STRATOS metrics (AUROC, calibration slope, Brier, Net Benefit), combo identifiers, source DB hash, and summary statistics. See:

• docs/repo-figures/figure-plans/fig-repo-98-json-sidecar-pattern.md
• docs/repo-figures/figure-plans/fig-repro-22-json-sidecars-figure-reproducibility.md

The D3.js app would consume these same JSON files to render interactive browser-based versions.

What interactive visualizations could add

Static (current)	Interactive (future)
Fixed 4-combo calibration plot	Slider to select any of 88 combos
Single DCA curve set	Threshold range slider, hover for Net Benefit values
ROC curves at fixed operating points	Drag threshold marker, see sensitivity/specificity update
Probability distribution histogram	Brush to select probability range, see patient counts
CD diagrams (static PNG)	Click method to highlight, tooltip with rank/p-value

Specific interaction ideas

1. Combo explorer: Dropdown/slider to switch between all 88 outlier x imputation combos, with STRATOS metrics updating in a side panel
2. Threshold sensitivity: Drag a vertical line on the DCA plot to see how Net Benefit changes at different clinical thresholds (5%-40%)
3. Calibration deep-dive: Hover over calibration curve bins to see observed vs predicted proportions with CI
4. Side-by-side comparison: Select 2 combos to compare all STRATOS metrics simultaneously

Technical approach

The scaffold already has:

• d3 for scales, line generators, and data joins
• react + zustand for state management
• zod for JSON schema validation
• jspdf + svg2pdf.js for static export from interactive views
• CSS foundations with Paul Tol colorblind-safe palette

To add a figure:

1. Load the JSON sidecar via fetch/import
2. Validate with Zod schema
3. Use D3 scales + React SVG rendering (no direct DOM manipulation)
4. Apply styles from src/styles/foundations.css

Priority

Low — all publication figures are generated via Python/R. This is a nice-to-have for post-publication exploration, conference demos, or a supplementary web companion.

Dependabot note

The npm dependencies (jspdf, dompurify, esbuild) have open Dependabot alerts. Since this is dev-only and never deployed, these are dismissed as tolerable risk. When this work begins, start with npm audit fix and npm update to bring deps current.