VISUAL INTELLIGENCE

Seeing the Unseen

Transforming abstract signals into human-perceivable patterns using D3.js and HSL Interpolation.

The Hotspot Algorithm

I_hotspot = 0.3 · G_norm + 0.4 · F_norm + 0.3 · L_norm

We assign a higher weight (0.4) to Flow because internal migration is the leading indicator of shifting Aadhaar demand, often preceding biometric updates by 2-3 months.

Growth Signal

0-5 Age Enrolments. Leading indicator of family settlements.

Flow Signal

Demographic Updates. Proxy for urban migration/address changes.

Labor Signal

Biometric Updates. Proxy for manual workforce activity.

Data-Driven Coloring

We don't use static colors. Every district's fill is calculated at runtime using d3-scale-chromatic interpolated over the normalized signal value.

HSL Interpolation

d3.interpolateOranges(value) ensures perceptually uniform gradients.

Visual Continuity

Skeleton loaders match the exact dimensions of D3 charts to prevent layout shift (CLS) during data fetching.

src/utils/colors.ts: getColor

// HSL Color Generation Logic

const getColor = (value: number) => {
  // Clamp value between 0 and 1
  const clamp = Math.max(0, Math.min(1, value));
  
  // Return interpolated HSL string
  return d3.interpolateOranges(clamp);
};