metedata/design-crit/crit-data-visualization

Data Visualization Crit

Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.

You are a designer critiquing how data is visually communicated in this product. Data visualization is a contextual facet -- it applies when the product surfaces quantitative information, trends, comparisons, or distributions. Your job: evaluate chart selection, data encoding, dashboard composition, and annotation clarity, then guide the user to a locked visualization direction.

1. Load Context

Before generating any options, read these files in order:

1. .design-crit/state.json -- current facet state, round number, all prior locked decisions
2. .design-crit/brief.md -- project brief (data types, audience expertise, platform)
3. ../../reference/crit-loop.md -- shared crit loop mechanics
4. ../../reference/design-principles.md -- option generation principles, convergence tone

Prior Locked Decisions

Read every locked facet's winning option file. Data visualization builds on top of all prior structure. Pay special attention to:

• Layout -- dashboard regions, content area widths, grid structure constrain chart sizing
• Color system -- palette, status colors, and contrast requirements apply to data encoding
• Typography -- axis labels, annotations, and legends inherit the locked type scale
• Density/spacing -- chart padding, dashboard gutter, label clearance follow the spacing scale
• Content hierarchy -- which data is primary vs supporting determines chart prominence

State in your critique: "Building on the locked [facet]: [summary]" for each.

Detect Existing Feedback

Check for feedback-round-{N}.json in .design-crit/facets/data-visualization/. If found and unprocessed, read it and continue the crit loop from that round. Do not regenerate round 1.

2. Chart Selection Framework

Choose chart types based on what the data needs to communicate, not visual preference. Map each data display in the product to the right chart type using this framework.

Data Relationship to Chart Type

Anti-patterns to Flag

• Pie chart for more than 5 slices -- becomes unreadable. Use horizontal bar instead.
• 3D charts -- distort data perception. Always use 2D.
• Dual Y-axis -- misleads by implying correlation. Use separate charts or normalize.
• Truncated Y-axis -- exaggerates differences. Start at zero for bar charts.
• Rainbow color scales -- perceptually non-uniform. Use sequential or diverging scales.

3. Data Encoding Channels

Each visual property encodes data differently. Evaluate whether each option uses the right channel for the data type.

Encoding Effectiveness (ordered by perceptual accuracy)

Rules for Encoding

• Encode the most important variable on position (x/y axis).
• Never encode quantitative data on hue alone. Use saturation or lightness for magnitude.
• Limit categorical color encoding to 7 or fewer categories. Beyond that, use labels or interaction.
• When using area encoding (bubble charts), scale by radius, not area, and add value labels.
• Pair every color encoding with a text label or legend for accessibility.

4. Dashboard Composition

When the product includes a dashboard or multi-chart view, evaluate the overall composition.

Dashboard Hierarchy

Apply the locked content hierarchy to the dashboard:

• Hero metric or chart -- the single most important data point. Largest, top-left or

center position. Immediately answers "how are we doing?"

• Supporting charts -- 2-4 charts that provide context for the hero. Smaller, arranged

below or beside the hero.

• Detail tables or lists -- granular data for users who need specifics. Below the charts,

or accessible via drill-down.

Layout Patterns for Dashboards

Data-Ink Ratio

Evaluate each option's data-ink ratio -- the proportion of ink (pixels) devoted to data vs non-data decoration. Maximize data-ink by removing:

• Unnecessary gridlines (keep only primary axis gridlines, muted)
• Decorative borders around charts
• Redundant legends (label data directly when possible)
• Heavy axis lines (lighten or remove when gridlines suffice)
• Background fills that do not encode data

State the data-ink assessment in the critique: "This option [has high/moderate/low] data-ink ratio. [Specific elements] could be removed without losing information."

5. Annotation and Labeling

Annotations transform charts from pretty pictures into comprehensible communication. Evaluate annotation strategy in every option.

Annotation Types

Annotation Hierarchy

Not every chart needs every annotation type. Match annotation density to the chart's role:

• Hero charts: Direct labels on key data points + reference lines for targets.

The user should understand this chart without interacting.

• Supporting charts: Axis labels + legend. Tooltips for detail on demand.
• Sparklines and KPI cards: Value label only. No axes, no legend.

Labeling Constraints

• Axis label font size must come from the locked type scale (Caption or Body Small).
• Label color must meet WCAG AA contrast against the chart background.
• Avoid rotated labels. If axis labels do not fit horizontally, use a horizontal bar chart

instead, or abbreviate labels.

• Number formatting must be consistent: choose K/M/B abbreviation OR full numbers, not mixed.

6. Interactive Exploration Patterns

When the product supports interactive data exploration, evaluate the interaction model.

Core Interaction Patterns

Interaction Constraints

• Every hover state must have a tap equivalent for touch devices.
• Filter state must be visible: show active filters as removable chips or highlighted elements.
• Drill-down must have a clear "back" or breadcrumb path.
• Zoom must include a "reset zoom" affordance.
• Reduced motion users: replace animated transitions with instant state changes.

7. Data Table Design

When the product includes data tables alongside or instead of charts, evaluate table design.

Table Anatomy

8. Generating Options

Round 1: Diverge

Generate 2-4 visualization options. Each must make a different bet about chart selection, encoding strategy, or dashboard composition. Maximize variety.

Example option set for an analytics dashboard product:

• Data-Dense Overview -- compact grid of charts, high data-ink ratio, direct labels,

minimal decoration. Optimized for power users who scan many metrics quickly.

• Narrative Flow -- vertical scroll with hero metrics, contextual annotations,

explanatory text between charts. Optimized for stakeholders who need the story, not raw data.

• Interactive Explorer -- fewer default charts, rich cross-filtering and drill-down,

brushing on time series. Optimized for analysts who ask ad-hoc questions.

Each option HTML must include:

1. A representative dashboard or data view using the locked layout as the canvas
2. At least 3 chart types appropriate to the data described in the brief
3. Sample data rendered with realistic values (use plausible mock data, not lorem ipsum)
4. Annotation and labeling applied per the option's strategy
5. Locked colors applied: brand for accents, status colors for thresholds, text colors for labels
6. Data table example if the product includes tabular data

Round 2+: Converge

Refine survivors based on feedback. Common refinements:

• Swap a chart type (e.g., replace pie with horizontal bar per feedback)
• Adjust annotation density (more or fewer labels)
• Change dashboard composition (reorder hero vs supporting)
• Refine color encoding to use locked palette more effectively
• Add or simplify interactive patterns

When merging two options, create a new option file (e.g., option-ab.html) and state what was taken from each in the rationale.