# Data Visualization
> Use this skill when the user asks to create charts, graphs, dashboards, data visualizations, or interactive data displays. Triggers for 'create a chart', 'visualize this data', 'make a dashboard', 'plot this', 'bar chart', 'line graph', 'pie chart', 'heatmap', 'scatter plot', 'data dashboard', or 'show me a graph of'. Covers chart type selection, data transformation for visualization, color schemes, accessibility in charts, responsive layouts, and interactive features. Produces standalone HTML artifacts using lightweight charting libraries.
- Skill: `ziadnagar/data-visualization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ziadnagar/data-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ziadnagar/data-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: ZiadNagar (https://skillmd.com/u/ziadnagar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ziadnagar/data-visualization
---
# Data Visualization
You are creating data visualizations. Choose the right chart type for the data, make it readable, accessible, and visually polished. Default to standalone HTML files that work without a build step.
## Chart Type Selection
| Data Relationship | Chart Type | When to Use |
| ----------------- | ---------- | ----------- |
| Comparison | Bar chart | Compare values across categories |
| Trend over time | Line chart | Show change over continuous time |
| Part of whole | Donut chart | Show proportions (max 6-7 segments) |
| Distribution | Histogram | Show frequency distribution |
| Correlation | Scatter plot | Show relationship between 2 variables |
| Ranking | Horizontal bar | Rank items from top to bottom |
| Geographic | Choropleth map | Data by region/country |
| Flow/process | Sankey diagram | Show flows between categories |
| Matrix comparison | Heatmap | Show intensity across two dimensions |
| Hierarchical | Treemap | Show nested proportions |
### Decision Rules
- **< 5 data points** → Use a table, not a chart
- **Comparing categories** → Bar chart (vertical for < 8, horizontal for more)
- **Time series** → Line chart (area chart if showing cumulative)
- **Proportions** → Donut chart (never pie — donuts are easier to read)
- **Two variables** → Scatter plot (add size for a third dimension)
- **Multiple metrics over time** → Small multiples, not one cluttered chart
## Technology Stack
### Default: Chart.js (via CDN)
Use Chart.js for standard charts. It's lightweight, well-documented, and renders to canvas.
```html
[Chart Title]
[Chart Title]
[Data source or description]
```
### Advanced: D3.js (for Custom Visualizations)
Use D3.js when Chart.js doesn't support the chart type (sankey, treemap, force graph) or when full customization is needed.
```html
```
## Color Palettes
### Default Palette (Accessible)
```javascript
const colors = {
primary: ['#2563eb', '#7c3aed', '#059669', '#d97706', '#dc2626', '#0891b2'],
neutral: ['#1a1a1a', '#525252', '#a3a3a3', '#d4d4d4', '#f5f5f5'],
positive: '#059669', // green — growth, success
negative: '#dc2626', // red — decline, error
highlight: '#2563eb', // blue — emphasis
};
```
### Rules
- Max **6 colors** in a single chart — more becomes unreadable
- Use **opacity variants** of one color for related data (e.g., `rgba(37,99,235,0.2)`)
- Sequential data → single-hue gradient (light to dark)
- Diverging data → two-hue gradient (red ← neutral → blue)
- Never use red/green as the only differentiator — color-blind users can't distinguish them
- Always include labels or patterns as a secondary differentiator
### Color-Blind Safe Alternatives
```javascript
const colorBlindSafe = ['#0072B2', '#E69F00', '#009E73', '#CC79A7', '#56B4E9', '#D55E00'];
```
## Typography & Formatting
| Element | Format |
| ------- | ------ |
| Numbers > 999 | Use locale formatting: `1,234` or `1.234` |
| Large numbers | Abbreviate: `1.2M`, `340K` |
| Currency | Include symbol: `$1,234.56` |
| Percentages | One decimal: `42.1%` |
| Dates on axes | Short format: `Jan`, `Feb` or `Q1 '25` |
| Axis labels | Sentence case, include units: `Revenue ($M)` |
```javascript
// Number formatting helper
function formatNumber(n) {
if (Math.abs(n) >= 1e9) return (n / 1e9).toFixed(1) + 'B';
if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1) + 'M';
if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + 'K';
return n.toLocaleString();
}
```
## Dashboard Layout
For multi-chart dashboards, use CSS grid:
```html
```
### KPI Cards
```html
$1.2M
Total Revenue
↑ 12.3% vs last month
```
## Accessibility
- Every chart must have a text alternative (title + description or `aria-label`)
- Canvas-based charts need a `` description after them for screen readers
- Use patterns/textures in addition to color when possible
- Ensure contrast ratio of 3:1 minimum for data elements against background
- Include data tables as a toggle for screen reader users
```html
View data table
| Quarter | Revenue |
|---|
| Q1 | $1.2M |
| Q2 | $1.5M |
| Q3 | $1.3M |
| Q4 | $1.8M |
```
## Rules
- Every chart must have a **title** and **subtitle** explaining what it shows
- Always start Y-axis at 0 for bar charts (never truncate to exaggerate differences)
- Line charts may use a non-zero baseline when the range is narrow
- Remove chart junk: no 3D effects, no unnecessary gridlines, no decorative elements
- Data labels: show on bars when < 8 items, use tooltips when more
- Responsive: charts must resize with the container
- Animation: subtle entrance only (`animation: { duration: 600 }`) — never looping
- Always provide the raw data alongside the chart (in a `` toggle or as comments)
- When processing user data, validate and clean it before plotting
## Integration with Other Skills
- **`web-artifacts-builder`** — For embedding charts in interactive HTML artifacts
- **`xlsx`** — Read data from spreadsheets for visualization
- **`pdf`** — Generate PDF reports containing charts
- **`frontend-design`** — Integrate charts into application UIs