Visualizing Data

What it does

When your agent uses it

• Creating visualizations
• Choosing chart types
• Displaying data graphically
• Designing data interfaces

Example prompts

• “Use the visualizing-data skill to build dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics”
• “/visualizing-data”

Requirements

• Python 3
• Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

1. 1Assess Data
2. 2Determine Purpose
3. 3Select Chart Type
4. 4Implement
5. 5Apply Accessibility
6. 6Optimize Performance

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/, which the agent can run.

  Shell commands in SKILL.md call:

  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Visualizing Data loads about 2.4k tokens when it runs, and up to ~23k if it reads all its reference files. Until then it costs about 153 tokens; SKILL.md has 709 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~153

When it runs · the whole SKILL.md, loaded when a task matches

~2.4k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~23k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 709 words, ~2,397 tokens.

name

visualizing-data

description

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.

What type? [categorical | continuous | temporal | spatial | hierarchical]
How many dimensions? [1D | 2D | multivariate]
How many points? [<100 | 100-1K | 1K-10K | >10K]

What story to tell? [comparison | trend | distribution | relationship | composition | flow | hierarchy | geographic]

<figure role="img" aria-label="Sales increased 15% from Q3 to Q4">
  <svg>...</svg>
</figure>

#648FFF (Blue), #785EF0 (Purple), #DC267F (Magenta),
#FE6100 (Orange), #FFB000 (Yellow)

npm install recharts

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

npm install d3

npm install react-plotly.js plotly.js

--chart-color-primary
--chart-color-1 through --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg

<Line stroke="var(--chart-color-primary)" />

START: What is your data?

Categorical (categories/groups)
  ├─ Compare values → Bar Chart
  ├─ Show composition → Treemap or Pie Chart (<6 slices)
  └─ Show flow → Sankey Diagram

Continuous (numbers)
  ├─ Single variable → Histogram, Violin Plot
  └─ Two variables → Scatter Plot

Temporal (time series)
  ├─ Single metric → Line Chart
  ├─ Multiple metrics → Small Multiples
  └─ Daily patterns → Calendar Heatmap

Hierarchical (nested)
  ├─ Proportions → Treemap
  └─ Show depth → Sunburst, Dendrogram

Geographic (locations)
  ├─ Regional aggregates → Choropleth Map
  └─ Point locations → Symbol Map

cd examples/javascript && npm install && npm start

# Validate accessibility
scripts/validate_accessibility.py <chart-html>

# Test colorblind
# Use browser DevTools color vision deficiency emulator

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 50 other files (scripts, references, assets) in skills/visualizing-data of ancoleman/ai-design-components.

• SKILL.md
• assets/color-palettes/categorical-extended.json
• assets/color-palettes/colorblind-safe.json
• assets/color-palettes/diverging-scales.json
• assets/color-palettes/sequential-scales.json
• assets/example-datasets/hierarchical-data.json
• assets/example-datasets/sales-data.csv
• assets/example-datasets/time-series.json
• examples/javascript/accessible-chart.tsx
• examples/javascript/area-chart.tsx
• examples/javascript/bar-chart.tsx
• examples/javascript/line-chart.tsx
• examples/javascript/pie-chart.tsx
• examples/javascript/scatter-plot.tsx
• examples/skill-library-viz/.gitignore
• … and 36 more

Open the folder on GitHubat commit 76551b7