Datavis

# Data Visualization Skill

Create beautiful, mathematically elegant, emotionally resonant data visualizations.

## Philosophy: "Life is Beautiful"

Every visualization should:
1. **Reveal truth** through data
2. **Evoke wonder** through design
3. **Respect the viewer** through accessibility
4. **Honor complexity** through elegant simplification

## Core Capabilities

### 1. Visual Encoding

**Scale Selection**:
| Scale | Use When | Example |
|-------|----------|---------|
| Linear | Evenly distributed data | Temperature |
| Log | Multiple orders of magnitude | Population (100 to 1B) |
| Sqrt | Encoding area (circles) | Bubble chart radius |
| Time | Temporal data | Dates |

**Perceptual Honesty** - Area scales with square of radius, so use sqrt:
```javascript
// WRONG: Linear radius exaggerates large values
const badScale = d3.scaleLinear().domain([0, max]).range([0, maxRadius]);

// RIGHT: Sqrt maintains perceptual accuracy
const goodScale = d3.scaleSqrt().domain([0, max]).range([0, maxRadius]);
```

### 2. Color Design

**Palette Types**:
- **Categorical** - Distinct hues for nominal data (max 8)
- **Sequential** - Single hue gradient for ordered data
- **Diverging** - Two hues meeting at meaningful midpoint

**Colorblind-Safe Palette** (8 colors):
```javascript
const colorblindSafe = [
  '#332288', '#117733', '#44AA99', '#88CCEE',
  '#DDCC77', '#CC6677', '#AA4499', '#882255'
];
```

**Always use redundant encoding** - don't rely on color alone:
```javascript
node.attr('fill', d => colorScale(d.category))
    .attr('d', d => symbolScale(d.category)); // Shape too!
```

### 3. D3.js Patterns

**Force Simulation**:
```javascript
const simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(-300))
  .force('link', d3.forceLink(links).id(d => d.id))
  .force('center', d3.forceCenter(width/2, height/2))
  .force('collision', d3.forceCollide().radius(d => d.r + 2));
```

**Responsive SVG**:
```javascript
const svg = d3.select('#chart')
  .append('svg')
  .attr('viewBox', `0 0 ${width} ${height}`)
  .attr('preserveAspectRatio', 'xMidYMid meet');
```

**Touch-Friendly** (44x44px minimum):
```javascript
node.append('circle')
  .attr('class', 'hit-area')
  .attr('r', Math.max(actualRadius, 22))
  .attr('fill', 'transparent');
```

### 4. Narrative Structure

**Three Acts**:
1. **Invitation** - What draws viewer in? Why should they care?
2. **Discovery** - What patterns emerge? What surprises?
3. **Reflection** - What should they feel/understand/do?

**Progressive Disclosure**:
```
Level 1: Overview → Level 2: Exploration → Level 3: Detail → Level 4: Context
```

### 5. Data Pipeline

**Structure**:
```
scripts/
├── 01_fetch_raw.py    # API calls with caching
├── 02_clean_data.py   # Transformation
├── 03_validate.py     # Quality checks
└── 04_export.py       # Final format
```

**Source Documentation** (every dataset needs):
- URL, access date, update frequency
- License and confidence level
- Field descriptions and limitations

## Scripts

### Generate Color Palette
```bash
scripts/color-palette.py --type sequential --hue blue --steps 9
scripts/color-palette.py --type categorical --count 6 --colorblind-safe
scripts/color-palette.py --type diverging --low red --high blue
```

### Analyze Data Distribution
```bash
scripts/analyze-distribution.py data.csv --column value
# Outputs: min, max, skew ratio, recommended scale
```

### Scaffold D3 Project
```bash
scripts/d3-scaffold.py my-viz --type force-network
scripts/d3-scaffold.py my-viz --type timeline
scripts/d3-scaffold.py my-viz --type choropleth
```

## Anti-Patterns to Avoid

- 3D charts (distorts perception)
- Pie charts with >6 categories
- Dual y-axes
- Rainbow color scales (perceptually uneven)
- Truncated y-axes without disclosure
- Animation without purpose

## Quality Checklist

- [ ] Scale choice justified for data distribution
- [ ] Color palette is colorblind-safe
- [ ] Minimum 44x44px touch targets
- [ ] Clear entry point for viewer
- [ ] Sources documented
- [ ] Responsive on mobile