datavis_skill

This skill helps you build interactive, accessible and accurate data visualizations across D3.js, Plotly, and Python libraries to reveal truth in data.

Python

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill lukeslp/dreamer-skills --skill datavis

SKILL.md5.2 KB

Overview

This skill creates interactive, accessible, and mathematically sound data visualizations for web and Python workflows. It supports D3.js, Chart.js, plotly, matplotlib, and seaborn, and includes scaffolds, palette generators, distribution analysis, and pipeline guidance. The emphasis is on perceptual accuracy, accessibility, and narrative-driven design.

How this skill works

The skill inspects data distributions, recommends appropriate scales and encodings, and generates ready-to-use code for D3 and common Python plotting libraries. It can scaffold common D3 templates, produce colorblind-safe palettes, analyze columns to recommend scales, and output chart files or JSON for downstream rendering. Quality checks and accessibility rules are applied throughout.

When to use it

Building a D3.js visualization and needing a scaffold or patterns (force, choropleth, treemap, etc.).
Choosing scales, encodings, or sizes for charts with uneven or multi-order data.
Designing color palettes that are perceptually accurate and colorblind-safe.
Creating interactive plots with plotly or static figures with matplotlib/seaborn.
Auditing a visualization for accessibility, mobile responsiveness, and data quality.

Best practices

Choose scale by distribution: linear, log, sqrt for area encodings, symlog for zero-crossing ranges, time for dates.
Use d3.scaleSqrt() or sqrt sizing so area encodes magnitude correctly for circles and bubbles.
Never rely on color alone; apply redundant encodings like shape, pattern, or labels.
Keep touch targets >= 44x44px and build responsive SVG with viewBox and preserveAspectRatio.
Document data source, access date, license, field descriptions, and known limitations.

Example use cases

Scaffold a force-directed network demo in D3 with responsive SVG and touch-friendly hit areas.
Run distribution analysis on a population column to decide between linear, log, or symlog scales.
Generate a sequential or colorblind-safe categorical palette for a dashboard with up to eight groups.
Produce a plotly interactive scatter with log axis and size encoding using sqrt scaling.
Build a three-act narrative visualization: invitation, discovery, and reflection with progressive disclosure.

FAQ

Encode area, not radius: use a square-root scale so circle radius ~ sqrt(value) to preserve perceptual accuracy.

What palette should I use for accessibility?

Use the provided 8-color colorblind-safe palette and always add redundant encodings like labels or patterns.