agentleFS
Sign inStart free
botirkhaltaevbotirkhaltaev/botir-skills/skills/data-visualization/SKILL.md

data-visualization

Skill4 starsChanged 3 months agoApache-2.0View on GitHub

Present data clearly and honestly. Covers chart selection (which chart for which question), dashboard design, data-to-ink ratio, preattentive processing, color for data, and common visualization mistakes. Use when building dashboards, reports, analytics features, or any data-heavy interface. Triggers on: "chart selection", "dashboard design", "data viz", "visualization", "graph design", "analytics UI", "data presentation".

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 40 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use one preattentive attribute per message

    line 74

“Common” is measured: kept by at least 6 in 10 of the 40 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Data Visualization

Present data so users reach correct conclusions faster. Bad visualization misleads; good visualization reveals.

Chart Selection Matrix

Match the chart to the question, not the other way around.

QuestionBest ChartAvoid
How does this change over time?Line chartPie chart, bar for continuous time
Which categories are highest/lowest?Sorted bar chartPie chart (hard to compare slices)
Do two variables move together?ScatterplotDual-axis line chart (implies false causation)
What's the composition of a total?Stacked bar, treemapPie chart with >5 slices
What's the exact value?Table with conditional formattingCharts requiring visual estimation
Where are exceptions?KPI card with conditional colorDense dashboards with no hierarchy
How is data distributed?Histogram, box plotBar chart for distributions
What's the relationship across 2 dimensions?HeatmapBubble charts (hard to compare area)

Chart Selection Rules

  • Line charts — continuous data over time. Max 3-4 lines. Use small multiples if more.
  • Bar charts — comparing magnitudes across categories. Always sort bars (unless time-based).
  • Pie charts — avoid. Humans can't compare angles. Use stacked bars instead.
  • Scatterplots — correlation and distribution. Add trendline when showing correlation.
  • Tables — precise lookup, not pattern detection. Add conditional formatting for scanning.

Dashboard Design

Layout Principles

  • Headline KPIs first — top-left corner gets the most attention
  • 6-8 charts max per view — more = cognitive overload
  • Group by topic — proximity signals relationship
  • Progressive disclosure — summary first, detail on demand
  • 5-second rule — viewer should understand status in 5 seconds

Dashboard Types

TypePurposeDensityAudience
ExecutiveStatus at a glanceLowLeadership
OperationalMonitor and respondHighOperations teams
AnalyticalExplore and investigateMediumAnalysts

Information Density by Audience

  • Executive — headline numbers, trends, exceptions only
  • Operational — real-time metrics, thresholds, alerts
  • Analytical — filters, drill-down, comparisons, raw data access

Preattentive Processing

The visual properties the brain processes before conscious attention (~150ms):

PropertyUse For
Color hueCategorization (this vs. that)
Color intensityQuantity (more vs. less)
PositionRank, sequence
LengthMagnitude
SizeImportance, quantity
ShapeCategory differentiation

Rules

  • Use one preattentive attribute per message
  • Red + green is problematic for colorblind users (8% males) — use blue/orange instead
  • Motion draws attention immediately — use only for alerts

Color for Data

Sequential (ordered data, low to high)

Single hue, varying lightness: light = low, dark = high

Diverging (ordered data with meaningful midpoint)

Two hues with neutral midpoint: blue = low, white/grey = middle, red = high

Categorical (unordered groups)

Distinct hues with equal lightness. Max 6-8 categories.

Color Rules

  • Never use rainbow scales — perceptually uneven, misleading
  • Color is not the only signal — add pattern, label, or position
  • Test with colorblind simulators — Deuteranopia, Protanopia
  • Consistent meaning — red always = bad/warning across the product

Data-to-Ink Ratio

Minimize non-data ink. Every pixel should convey information.

RemoveKeep
3D effectsClean 2D shapes
Gridlines (heavy)Light gridlines or none
Background patternsWhite/clean background
Decorative bordersMinimal axis lines
Legend (if direct-label possible)Direct data labels
Chart junk (ornaments)Clear data marks

Common Mistakes

MistakeFix
Truncated Y-axisAlways start at zero for bar charts
Dual-axis chartsUse two separate charts or a scatterplot
Inconsistent color meaningDocument color semantics
Missing labels/contextEvery chart needs a title, axis labels, units
OverplottingSample, bin, or use transparency
Cherry-picking time rangesShow representative windows

Reference Map

  • references/chart-selection.md — question→chart matrix, encoding strength, honesty checklist
  • references/color-scales-a11y.md — sequential/diverging/categorical scales and colorblind QA

Related Skills

  • For visual hierarchy → use ui-visual-design
  • For color theory → use ui-visual-design
  • For accessibility in data viz → use a11y-accessibility-design

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free