Anomaly Visualization System with PCA, Clustering, and Interactive D3 Scatter Plot

[believetimothy]

Summary

Implements an AI-powered anomaly visualization system that makes anomalies clearly visible, provides helpful context, and enables intuitive exploration.

Closes #609

Changes

New Libraries (src/lib/)

• dimensionalityReduction.js — PCA (Principal Component Analysis) implementation using power iteration. Standardizes data, computes covariance matrix, extracts top-k eigenvectors, and projects high-dimensional transaction features to 2D for scatter-plot rendering.
• anomalyClustering.js — k-means++ clustering with automatic elbow-method k-selection (autoKmeans). Groups anomalies into distinct regions for easier pattern identification.

New Component (src/components/dashboard/)

• AnomalyVisualization.jsx — Full interactive anomaly exploration interface featuring:
  • D3.js Scatter Plot — Projects transactions onto PC1/PC2 with color coding by anomaly score
  • Cluster Overlays — Optional convex hull regions showing automatically detected clusters
  • Anomaly Threshold Slider — Filter points to focus on high-confidence anomalies
  • Color Mode Toggle — Switch between anomaly-score coloring and cluster coloring
  • Point Size Control — Adjustable radius scale
  • Zoom/Pan/Reset — Interactive plot controls
  • Hover Tooltip — Real-time anomaly score and cluster info on mouseover
  • Click Details Panel — Full transaction info, anomaly score breakdown, feature contribution bars
  • Summary Stats Cards — Total points, anomaly count, clusters, explained variance
  • Fallback Data — Auto-generated sample data when real transactions are unavailable

Integration

• Registered new route anomalyViz in DashboardLayout.tsx (lazy-loaded)
• Added Anomaly Viz nav item in Sidebar.tsx under TOOLS section
• Added preload support in usePreload.ts

Tests

• 8 tests for dimensionalityReduction.js, 8 tests for anomalyClustering.js — all passing

Acceptance Criteria

• Anomalies are clearly visible (color-coded scatter plot with adjustable threshold)
• Context is helpful (hover tooltip + click details panel with feature contribution analysis)
• Exploration is intuitive (zoom, pan, color mode toggle, cluster overlay, threshold slider)
• Visualization performance is good (D3 SVG with lazy computation, memoized data processing)

[vercel]

@believetimothy is attempting to deploy a commit to the nanle-code's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@believetimothy Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits