Datavis
Comprehensive data visualization toolkit for creating beautiful, mathematically elegant...
Install
npx skills add foryourhealth111-pixel/Vibe-Skills --skill datavis -g -a claude-code -y- Repository
- foryourhealth111-pixel/Vibe-Skills3.8k
- Category
- Design
- Updated
- 5d ago
- License
- Apache-2.0
- Context cost
- Lightabout 1,011 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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)
- Sequential - Single hue gradient for ordered data
- Diverging - Two hues meeting at meaningful midpoint
Colorblind-Safe Palette (8 colors):
const colorblindSafe = [
'#332288', '#117733', '#44AA99', '#88CCEE',
'#DDCC77', '#CC6677', '#AA4499', '#882255'
];
Always use redundant encoding - don't rely on color alone:
node.attr('fill', d => colorScale(d.category))
.attr('d', d => symbolScale(d.category)); // Shape too!
3. D3.js Patterns
Force Simulation:
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));
