lukeslp/dreamer-skills

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.