datavis

foryourhealth111-pixel/Vibe-SkillsData VisualizationAudit passedSnapshot 689e7f31506a

Summary

Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG. Use when (1) building interactive data visualizations, (2) designing color palettes for charts, (3) choosing scales and visual encodings, (4) creating data pipelines from Census/SEC/Wikipedia APIs, (5) crafting narrative-driven data stories, (6) making perceptually accurate charts, or (7) implementing force-directed networks, timelines, or geographic maps.

SKILL.md

Data Visualization Skill

Create beautiful, mathematically elegant, emotionally resonant data visualizations.

Philosophy: "Life is Beautiful"

Every visualization should:

Reveal truth through data
Evoke wonder through design
Respect the viewer through accessibility
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:

// 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)

const colorblindSafe = [
  '#332288', '#117733', '#44AA99', '#88CCEE',
  '#DDCC77', '#CC6677', '#AA4499', '#882255'
];

node.attr('fill', d => colorScale(d.category))
    .attr('d', d => symbolScale(d.category)); // Shape too!

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));

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

node.append('circle')
  .attr('class', 'hit-area')
  .attr('r', Math.max(actualRadius, 22))
  .attr('fill', 'transparent');

Level 1: Overview → Level 2: Exploration → Level 3: Detail → Level 4: Context

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

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

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

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

datavis

Summary

SKILL.md

Data Visualization Skill

Philosophy: "Life is Beautiful"

Core Capabilities

1. Visual Encoding

2. Color Design

3. D3.js Patterns

4. Narrative Structure

5. Data Pipeline

Scripts

Generate Color Palette

Analyze Data Distribution

Scaffold D3 Project

Anti-Patterns to Avoid

Quality Checklist

Related skills