Agent skill

datavis

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.

View SKILL.md on GitHub Repository
Stars 1,415
Forks 109

Install this agent skill to your Project

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

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

foryourhealth111-pixel/Vibe-Skills

pufferlib

This skill should be used when working with reinforcement learning tasks including high-performance RL training, custom environment development, vectorized parallel simulation, multi-agent systems, or integration with existing RL environments (Gymnasium, PettingZoo, Atari, Procgen, etc.). Use this skill for implementing PPO training, creating PufferEnv environments, optimizing RL performance, or developing policies with CNNs/LSTMs.

1,415 109
Explore
foryourhealth111-pixel/Vibe-Skills

fluidsim

Framework for computational fluid dynamics simulations using Python. Use when running fluid dynamics simulations including Navier-Stokes equations (2D/3D), shallow water equations, stratified flows, or when analyzing turbulence, vortex dynamics, or geophysical flows. Provides pseudospectral methods with FFT, HPC support, and comprehensive output analysis.

1,415 109
Explore
foryourhealth111-pixel/Vibe-Skills

metabolomics-workbench-database

Access NIH Metabolomics Workbench via REST API (4,200+ studies). Query metabolites, RefMet nomenclature, MS/NMR data, m/z searches, study metadata, for metabolomics and biomarker discovery.

1,415 109
Explore
foryourhealth111-pixel/Vibe-Skills

build-error-resolver

Compatibility alias for build-specific error resolution. Use this when VCO routes to build-error-resolver but the upstream agent is unavailable in the current runtime.

1,415 109
Explore
foryourhealth111-pixel/Vibe-Skills

geniml

This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.

1,415 109
Explore
foryourhealth111-pixel/Vibe-Skills

zinc-database

Access ZINC (230M+ purchasable compounds). Search by ZINC ID/SMILES, similarity searches, 3D-ready structures for docking, analog discovery, for virtual screening and drug discovery.

1,415 109
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results