data-artist

Files (1)

• SKILL.md

SKILL.md (first lines)

# Data Artist

You are creating a work of data art. This skill brings together mathematical elegance, emotional resonance, narrative design, and technical excellence to transform raw data into something beautiful that tells a story and moves the viewer.

## The "Data is Beautiful" Philosophy

### Core Principles

1. **Life is Beautiful** - Data visualization should reveal the wonder in information
2. **Mathematical Elegance** - Perceptually accurate encodings, thoughtful scales
3. **Emotional Resonance** - Create moments of awe, reflection, insight
4. **Swiss Minimalism** - Clean geometry, purposeful color, no chartjunk
5. **Narrative Journey** - Guide the viewer through a story

### What Makes Data Beautiful

- **Clarity** - The data speaks clearly without distortion
- **Proportion** - Visual weight matches data importance
- **Rhythm** - Patterns emerge naturally from the encoding
- **Surprise** - Reveals insights not obvious in raw numbers
- **Humanity** - Connects data to human experience

## Visualization Domains

### 1. Mathematical Foundations (@geepers_datavis_math)

**Scale Selection:**
- Linear for comparison
- Log for orders of magnitude
- Sqrt for area perception
- Time scales for temporal data

**Visual Encoding:**
- Position (most accurate)
- Length/height (good)
- Angle/slope (moderate)
- Area (requires sqrt scaling)
- Color intensity (least precise)

**Perceptual Accuracy:**
- Ensure encodings don't mislead
- Account for human perception biases
- Use perceptually uniform color scales

### 2. Color Design (@geepers_datavis_color)

**Palette Types:**
- Sequential: Low → High (single hue)
- Diverging: Negative ↔ Neutral ↔ Positive
- Categorical: Distinct groups (max 7-9)

**Color Principles:**
- Perceptual uniformity (Lab/HCL color space)
- Colorblind accessibility (avoid red-green only)
- Emotional resonance (warm/cool, muted/vibrant)
- Cultural considerations

**Signature Palettes:**
```css
/* Elegant Sequential */
--seq-1: #F7FBFF;
--seq-2: #DEEBF7;
--seq-3: #9ECAE1;
--seq-4: #4292C6;
--seq-5: #084594;

/* Thoughtful Diverging */
--div-neg: #B2182B;
--div-neutral: #F7F7F7;
--div-pos: #2166AC;

/* Accessible Categorical */
--cat-1: #1B9E77;
--cat-2: #D95F02;
--cat-3: #7570B3;
--cat-4: #E7298A;
--cat-5: #66A61E;
```

### 3. Narrative Design (@geepers_datavis_story)

**Story Arc:**
1. **Hook** - What draws the viewer in?
2. **Context** - Why does this matter?
3. **Journey** - Guide through the data
4. **Insight** - The "aha" moment
5. **Reflection** - What does it mean?

**Emotional Calibration:**
- What emotion should viewers feel?
- How do we honor the subject matter?
- Where are moments of wonder/pause/reflection?

**Metaphor Selection:**
- Timelines → Rivers, journeys
- Networks → Galaxies, ecosystems
- Proportions → Physical objects, scale comparisons
- Change → Growth, transformation

### 4. Technical Implementation (@geepers_datavis_viz)

**Tools:**
- D3.js for custom visualizations
- Chart.js for standard charts
- SVG for crisp, scalable graphics
- Canvas for high-performance rendering

**Interaction Patterns:**
- Hover for details
- Click for drill-down
- Drag for exploration
- Scroll for revelation

**Responsive Design:**
- Mobile-first
- Touch-friendly interactions
- Graceful degradation

### 5. Data Integrity (@geepers_datavis_data)

From foryourhealth111-pixel/Vibe-Skills, Apache-2.0.

More from foryourhealth111-pixel/Vibe-Skills