Data Visualization

Skill: Data Visualization

Choose the right chart for the story, not just the data shape. Every chart should make an argument.

Metadata

Overview

Data visualization is not chart generation -- it is visual argumentation. The chart type, color palette, annotation, and title are all rhetorical choices that either strengthen or weaken the story.

Core Principles

Module 1: Story-Intent Chart Selection

The primary axis for chart selection is what story the user wants to tell. Data shape is a secondary constraint.

Step 1 -- Identify Story Intent

Step 2 -- Narrow by Data Shape

Step 3 -- Audience & Context Filter

Story-Intent Detection Heuristics

When the user doesn't state intent explicitly, infer from language:

Module 2: Narrative Chart Pairing

A single chart tells one point. Paired charts reinforce the insight from a second angle.

The Inverted Pyramid Pattern

From population.html reference -- arrange visuals in absorption order:

Module 3: Color Theory

Mandatory: Colorblind-Safe Palette

All chart output MUST use a colorblind-safe palette. The canonical palette for all Alex charting skills is Tableau 10, verified against deuteranopia, protanopia, and tritanopia:

#4e79a7  Blue-Steel   (primary)
#f28e2b  Orange
#e15759  Coral
#76b7b2  Teal
#59a14f  Sage
#edc948  Gold
#b07aa1  Mauve
#ff9da7  Rose
#9c755f  Brown
#bab0ac  Warm Gray

Color Rules (Non-Negotiable)

WCAG Contrast Requirements

Module 4: Decluttering (Tufte's Data-Ink Ratio)

Every element must earn its place. Remove anything that doesn't carry data.

Before/After Anti-Patterns

Module 5: Annotation Hierarchy

Module 6: Small Multiples

Use faceted views when a single chart would be overloaded.

Implementation

Grid: 2x3 or 3x4 panels
Each panel: Same axes, same scale (critical!)
Difference: One variable changes per panel (category, time period, cohort)

Module 7: Accessibility

Module 8: Tool Targets

Chart.js Configuration Defaults

// Standard Chart.js defaults for all data-viz skills
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
Chart.defaults.font.size = 13;
Chart.defaults.plugins.legend.display = false; // prefer direct labels
Chart.defaults.scales.x.grid.display = false; // declutter
Chart.defaults.scales.y.grid.color = "rgba(255,255,255,0.06)"; // subtle
Chart.defaults.plugins.tooltip.backgroundColor = "rgba(0,0,0,0.85)";

Module 9: Advanced Canvas Charts

10 chart types rendered with raw Canvas 2D API -- no extra dependencies beyond the browser.

Canvas Rendering Pattern

// Standard pattern for all advanced charts
const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);
// ... render logic

Reference Implementations

Anti-Patterns