skills/sundial-org/skills/cs448b-visualization

cs448b-visualization

SKILL.md

CS448B Visualization

When to Use Each Reference

Reference Use When
encoding-perception.md Choosing how to map data to visual properties, or evaluating if encodings are effective
chart-design.md Deciding which chart type fits the data, or configuring axes/scales
d3-patterns.md Writing D3.js code for bindings, scales, axes, transitions
interaction-animation.md Adding brushing, filtering, tooltips, or animated transitions
color.md Selecting color palettes or ensuring accessibility
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
Weekly Installs
7
GitHub Stars
145
First Seen
Jan 31, 2026
Installed on
opencode7
gemini-cli7
github-copilot7
codex7
kimi-cli7
antigravity6