cs448b-visualization

Data visualization design based on Stanford CS448B. Use for: (1) choosing chart types, (2) selecting visual encodings, (3) critiquing visualizations, (4) building D3.js visualizations, (5) designing interactions/animations, (6) choosing colors, (7) visualizing networks, (8) visualizing text. Covers Bertin, Mackinlay, Cleveland & McGill.

148 stars

Best use case

cs448b-visualization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Data visualization design based on Stanford CS448B. Use for: (1) choosing chart types, (2) selecting visual encodings, (3) critiquing visualizations, (4) building D3.js visualizations, (5) designing interactions/animations, (6) choosing colors, (7) visualizing networks, (8) visualizing text. Covers Bertin, Mackinlay, Cleveland & McGill.

Teams using cs448b-visualization should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/visualization-skill/SKILL.md --create-dirs "https://raw.githubusercontent.com/sundial-org/skills/main/skills/visualization-skill/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/visualization-skill/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How cs448b-visualization Compares

Feature / Agentcs448b-visualizationStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Data visualization design based on Stanford CS448B. Use for: (1) choosing chart types, (2) selecting visual encodings, (3) critiquing visualizations, (4) building D3.js visualizations, (5) designing interactions/animations, (6) choosing colors, (7) visualizing networks, (8) visualizing text. Covers Bertin, Mackinlay, Cleveland & McGill.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# CS448B Visualization

## When to Use Each Reference

| Reference | Use When |
|-----------|----------|
| [encoding-perception.md](references/encoding-perception.md) | Choosing how to map data to visual properties, or evaluating if encodings are effective |
| [chart-design.md](references/chart-design.md) | Deciding which chart type fits the data, or configuring axes/scales |
| [d3-patterns.md](references/d3-patterns.md) | Writing D3.js code for bindings, scales, axes, transitions |
| [interaction-animation.md](references/interaction-animation.md) | Adding brushing, filtering, tooltips, or animated transitions |
| [color.md](references/color.md) | Selecting color palettes or ensuring accessibility |
| [networks-text.md](references/networks-text.md) | Visualizing graphs, hierarchies, or text/document data |

## Critique Checklist

When reviewing any visualization:

1. **Expressiveness** - Does it show all the data? Only the data? No misleading elements?
2. **Effectiveness** - Is the most important data on the most accurate encoding (position > length > area > color)?
3. **Zero baseline** - Do bar charts start at zero?
4. **Accessibility** - Works for colorblind viewers (~8% of males)?
5. **Data-ink ratio** - Can any non-data elements be removed?
6. **Aspect ratio** - Are line charts banked so slopes are ~45°?

## Encoding Decision Order

When mapping data fields to visual channels:

1. Most important quantitative → Position (x or y)
2. Second quantitative → Position (other axis) or Length
3. Categories (≤7) → Color hue
4. Categories (>7) → Position or small multiples
5. Magnitude/importance → Size (but expect ~30% underestimation)

## Chart Selection Logic

- **One variable, distribution** → Histogram
- **One variable, categories** → Bar chart
- **Two variables, both quantitative** → Scatterplot
- **Two variables, time + quantitative** → Line chart
- **Two variables, both categorical** → Heatmap
- **Hierarchy** → Treemap or node-link tree
- **Network (sparse)** → Force-directed layout
- **Network (dense)** → Matrix diagram

## Animation Decision

- **Presentation context** → Use animation (faster, engaging)
- **Analysis context** → Use small multiples (more accurate)
- **State transitions** → Animate to maintain object constancy
- **Duration**: 200-300ms quick feedback, 500-700ms standard, 1000ms+ complex

Related Skills

training-data-curation

148
from sundial-org/skills

Guidelines for creating high-quality datasets for LLM post-training (SFT/DPO/RLHF). Use when preparing data for fine-tuning, evaluating data quality, or designing data collection strategies.

tinker

148
from sundial-org/skills

Fine-tune LLMs using the Tinker API. Covers supervised fine-tuning, reinforcement learning, LoRA training, vision-language models, and both high-level Cookbook patterns and low-level API usage.

tinker-training-cost

148
from sundial-org/skills

Calculate training costs for Tinker fine-tuning jobs. Use when estimating costs for Tinker LLM training, counting tokens in datasets, or comparing Tinker model training prices. Tokenizes datasets using the correct model tokenizer and provides accurate cost estimates.

skill

148
from sundial-org/skills

Find, install, create, improve, and publish AI agent skills through the Sundial ecosystem. Use when the user wants to find or search for skills, install a skill, create a new skill, improve or evaluate an existing skill, or publish a skill to Sundial Hub. Trigger phrases include "find a skill", "install skill", "create a skill", "make a skill", "improve this skill", "evaluate skill", "publish skill", "push skill", "search for skills".

skill-to-card

148
from sundial-org/skills

End-to-end workflow that creates a skill from a description and attached files, publishes it to Sundial as a private skill, generates a trading card (front + back with QR code), and sends it to a printer. Use when the user wants to create a skill and get a printed trading card, or says "skill to card", "create and print a skill card", "make me a skill with a card".

project-referee

148
from sundial-org/skills

Critiques ML conference papers with reviewer-style feedback. Use when users want to anticipate reviewer concerns, identify weaknesses, check claim-evidence gaps, or find missing citations.

neuro-symbolic-reasoning

148
from sundial-org/skills

Neuro-symbolic AI combining LLMs with symbolic solvers. Use when exploring neuro-symbolic approaches (ideation, no code) or implementing solver integrations (code).

icml-reviewer

148
from sundial-org/skills

Paper reviewer that evaluates machine learning research projects following official ICML reviewer guidelines. Provides comprehensive reviews with actionable feedback across all key dimensions: claims/evidence, relation to prior work, originality, significance, clarity, and reproducibility. Also provides formative feedback on incomplete drafts, proposals, and research code repositories. MANDATORY TRIGGERS: review paper, ICML review, paper review, evaluate paper, research paper feedback, ML paper review, conference review, academic review, paper critique, NeurIPS review, ICLR review, project proposal, research proposal, paper draft, early feedback, incomplete paper, work in progress, WIP review, review repo, review codebase, research project review

cs-research-methodology

148
from sundial-org/skills

Conduct a literature review and develop a CS research proposal. Use when asked to review a research area, find gaps in existing work, and propose a novel research contribution. The output is a research proposal identifying an assumption to challenge (the "bit flip") and how to validate it.

commit-splitter

148
from sundial-org/skills

Split large sets of uncommitted changes into logical, well-organized commits. Use when the user has many uncommitted changes and wants structured commits, or proactively suggest when detecting a large diff that would benefit from splitting.

codex

148
from sundial-org/skills

Run OpenAI's Codex CLI agent in non-interactive mode using `codex exec`. Use when delegating coding tasks to Codex, running Codex in scripts/automation, or when needing a second agent to work on a task in parallel.

ai-co-scientist

148
from sundial-org/skills

Transform Claude Code into an AI Scientist that orchestrates research workflows using tree-based hypothesis exploration. Triggers on "research project", "scientific experiment", "run experiments", "AI scientist", "tree search experimentation", "systematic study".