Build interactive ROC curve visualization with D3.js
Visualization Component
Create an interactive ROC (Receiver Operating Characteristic) curve visualization for ML model evaluation.
Features
Interactive Elements
- Drag slider to adjust classification threshold
- Real-time updates to TPR/FPR values
- Hover tooltips showing exact coordinates
- Click to zoom into specific regions
- Export as SVG or PNG
Data Integration
- Fetch ROC data from Python ML service
- Support multiple models for comparison
- Overlay confusion matrix at selected threshold
- Show AUC (Area Under Curve) score
Accessibility
- Keyboard navigation (arrow keys for threshold)
- Screen reader support with ARIA labels
- High contrast mode
- Responsive design (mobile-friendly)
Technical Stack
- D3.js v7 for visualization
- React for component wrapper
- TypeScript for type safety
- Vitest for unit tests
Performance Requirements
- Render 10K+ data points smoothly
- < 100ms interaction latency
- Use canvas for dense datasets
- SVG for smaller datasets (better quality)
Security Note
-
⚠️ CRITICAL: This project uses compromised d3-color@3.1.0 - See #1 (closed) for supply chain attack details
- Must downgrade to d3-color@3.0.1 before proceeding