datavis

1# Data Visualization Skill
2 
3Create beautiful, mathematically elegant, emotionally resonant data visualizations.
4 
5## Philosophy: "Life is Beautiful"
6 
7Every visualization should:
81. **Reveal truth** through data
92. **Evoke wonder** through design
103. **Respect the viewer** through accessibility
114. **Honor complexity** through elegant simplification
12 
13## Core Capabilities
14 
15### 1. Visual Encoding
16 
17**Scale Selection**:
18| Scale | Use When | Example |
19|-------|----------|---------|
20| Linear | Evenly distributed data | Temperature |
21| Log | Multiple orders of magnitude | Population (100 to 1B) |
22| Sqrt | Encoding area (circles) | Bubble chart radius |
23| Time | Temporal data | Dates |
24 
25**Perceptual Honesty** - Area scales with square of radius, so use sqrt:
26```javascript
27// WRONG: Linear radius exaggerates large values
28const badScale = d3.scaleLinear().domain([0, max]).range([0, maxRadius]);
29 
30// RIGHT: Sqrt maintains perceptual accuracy
31const goodScale = d3.scaleSqrt().domain([0, max]).range([0, maxRadius]);
32```
33 
34### 2. Color Design
35 
36**Palette Types**:
37- **Categorical** - Distinct hues for nominal data (max 8)
38- **Sequential** - Single hue gradient for ordered data
39- **Diverging** - Two hues meeting at meaningful midpoint
40 
41**Colorblind-Safe Palette** (8 colors):
42```javascript
43const colorblindSafe = [
44  '#332288', '#117733', '#44AA99', '#88CCEE',
45  '#DDCC77', '#CC6677', '#AA4499', '#882255'
46];
47```
48 
49**Always use redundant encoding** - don't rely on color alone:
50```javascript
51…