Datavis Agent Skill

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.

14k tokens

context cost

the whole folder, loaded on every use

files

ships runnable scripts

copies elsewhere

how many repositories repackaged it

2583

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/foryourhealth111-pixel/Vibe-Skills --skill datavis

What comes with it

50 002 bytes besides the instruction

scripts/analyze-distribution.py

scripts/color-palette.py

scripts/d3-scaffold.py

The instruction itself

14 sections, as written by the author

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

Responsive SVG:

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

Touch-Friendly (44x44px minimum):

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

4. Narrative Structure

Three Acts:

Invitation - What draws viewer in? Why should they care?
Discovery - What patterns emerge? What surprises?
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

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

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

Scaffold D3 Project

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

Other skills for the same job

different authors, same section of the catalogue

Seaborn

by christophacham

×3

Statistical visualization with pandas integration. Use for quick exploration of distributions, relationships, and categorical comparisons with attractive defaults. Best for box plots, violin plots, pair plots, heatmaps. Built on matplotlib. For interactive plots use plotly; for publication styling use scientific-visualization.

Populates investment banking pitch deck templates with data from source files. Use when: user provides a PowerPoint template to fill in, user has source data (Excel/CSV) to populate into slides, user mentions populating or filling a pitch deck template, or user needs to transfer data into existing slide layouts. Not for creating presentations from scratch.

Scientific Visualization

by zLanqing

×1

Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.

Presentation Design Enhancer

by nicepkg

×1

Transform text-heavy slides into visual storytelling. Suggest layout improvements, icon usage, and data visualization.

355 tokens

Edge Signal Aggregator

by BaggaT236

×1

Aggregate and rank signals from multiple edge-finding skills (edge-candidate-agent, theme-detector, sector-analyst, institutional-flow-tracker) into a prioritized conviction dashboard with weighted scoring, deduplication, and contradiction detection.

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

4k tokens

How to use it

Copy the folder

Take foryourhealth111-pixel/datavis from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.