Multi-Scale Temperature Analysis Dashboard

1. Time Scale + Sequential Color Scale
Using scaleTime() for temporal data mapping and scaleSequential() for temperature color encoding
2. Band Scale + Linear Scale + Threshold Color Scale
Using scaleBand() for categorical positioning, scaleLinear() for height, and scaleThreshold() for discrete color ranges
3. Point Scale + Log Scale
Using scalePoint() for precise categorical positioning and scaleLog() for exponential temperature variance display

Scale Mappings Explained

Time Scale (scaleTime)

Maps JavaScript Date objects to pixel positions. Domain: [earliest date, latest date] → Range: [0, chartWidth]. Automatically handles date arithmetic and tick formatting.

Sequential Color Scale

Maps continuous temperature values to smooth color gradients. Domain: [minTemp, maxTemp] → Range: color interpolation. Perfect for showing intensity variations.

Band Scale (scaleBand)

Maps categorical city names to positions with automatic padding. Divides available space evenly with configurable inner/outer padding for bar charts.

Linear Scale (scaleLinear)

Standard numeric mapping. Domain: [0, maxTemp] → Range: [chartHeight, 0]. Inverted for SVG coordinate system where y=0 is at top.

Threshold Scale

Maps continuous input to discrete output using breakpoints. Temperature thresholds: [10°, 20°, 30°] create 4 color categories for "cold", "cool", "warm", "hot".

Log Scale (scaleLog)

Maps wide-range data using logarithmic transformation. Domain: [1, maxVariance] → Range: [0, height]. Compresses large values, expands small ones for better visibility.