| name | crit-data-visualization |
| description | Use when evaluating chart types, data display patterns, dashboard layouts, and how data is visually communicated to users. |
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:
.design-crit/state.json -- current facet state, round number, all prior locked decisions.design-crit/brief.md -- project brief (data types, audience expertise, platform)../../reference/crit-loop.md -- shared crit loop mechanics../../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
| Relationship | Chart Types | When to Use |
|---|
| Comparison | Bar (vertical/horizontal), grouped bar, dot plot | Comparing discrete categories or items |
| Trend over time | Line, area, sparkline | Showing change across a continuous time axis |
| Part of whole | Stacked bar, donut, treemap, waffle | Showing proportions that sum to 100% |
| Distribution | Histogram, box plot, violin, density | Understanding spread and shape of a dataset |
| Correlation | Scatter, bubble, heatmap | Showing relationship between two or more variables |
| Ranking | Horizontal bar, lollipop, slope | Ordering items by a single metric |
| Geospatial | Choropleth, dot map, hex bin | Data tied to geographic locations |
| Flow/process | Sankey, funnel, waterfall | Showing movement between stages or categories |
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)
| Channel | Best For | Precision |
|---|
| Position (x/y axis) | Quantitative values, comparisons | Highest -- humans judge position most accurately |
| Length (bar height) | Quantitative comparison | High -- easy to compare adjacent lengths |
| Angle/slope (line chart) | Trend direction | Medium -- good for direction, weak for exact values |
| Area (bubble size) | Relative magnitude | Medium-low -- area perception is inaccurate; overestimates small differences |
| Color saturation | Sequential magnitude (heatmaps) | Low -- useful for pattern, not precise values |
| Color hue | Categorical distinction | Categorical only -- not for quantitative data |
| Shape (scatter markers) | Categorical grouping | Categorical only -- limited to 5-7 distinguishable shapes |
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
| Pattern | Structure | Best For |
|---|
| KPI + Detail | Row of summary cards at top, detailed charts below | Executive dashboards, monitoring |
| Magazine | Mixed-size chart tiles in an asymmetric grid | Analytics platforms, reporting |
| Narrative | Vertical scroll with charts interspersed with text | Data stories, onboarding reports |
| Comparison grid | Uniform chart tiles in a symmetric grid | Multi-metric monitoring, A/B results |
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
| Type | Purpose | Example |
|---|
| Direct labels | Value on or near the data point | "42%" on a bar segment |
| Axis labels | Define what each axis represents | "Revenue ($M)" on Y-axis |
| Reference lines | Show targets, thresholds, averages | Dashed line at "Target: 80%" |
| Callouts | Highlight notable data points or anomalies | Arrow pointing to a spike: "Launch day" |
| Legends | Map visual encoding to categories | Color swatch + label for each series |
| Tooltips | Detail on hover/tap for interactive charts | Exact value, date, and category on hover |
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
| Pattern | Behavior | Use When |
|---|
| Hover/tooltip | Show detail on mouse hover or long-press | Default for all interactive charts |
| Click-to-filter | Clicking a chart element filters other charts | Dashboard cross-filtering |
| Brush selection | Drag to select a range on an axis | Time series exploration |
| Zoom/pan | Zoom into dense data, pan across time | Large datasets, maps |
| Drill-down | Click a summary to see underlying detail | Hierarchical data (region > city > store) |
| Toggle series | Click legend items to show/hide data series | Multi-series comparisons |
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
| Element | Guidance |
|---|
| Header row | Sticky on scroll. Bold or medium weight from locked type scale. Sortable columns show sort indicator. |
| Data cells | Align numbers right. Align text left. Use monospace or tabular figures for numbers. |
| Row density | Follow locked spacing scale. Compact tables: 32-36px row height. Comfortable: 40-48px. |
| Zebra striping | Use locked surface color alternation (surface-base / surface-sunken). Subtle: 2-4% opacity shift. |
| Pagination vs scroll | Paginate for datasets > 50 rows. Virtualized scroll for real-time data. |
| Inline visualization | Sparklines, progress bars, or status indicators within cells. Keep them minimal -- the table IS the data. |
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:
- A representative dashboard or data view using the locked layout as the canvas
- At least 3 chart types appropriate to the data described in the brief
- Sample data rendered with realistic values (use plausible mock data, not lorem ipsum)
- Annotation and labeling applied per the option's strategy
- Locked colors applied: brand for accents, status colors for thresholds, text colors for labels
- 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.
9. Evaluation Criteria
Score every option against these questions in your critique. Be specific -- cite which
charts, which encodings, which annotations.
Right Chart for the Data
- Does each chart type match the data relationship it displays (comparison, trend, distribution)?
- Are there any anti-pattern charts (pie with 10 slices, 3D, dual Y-axis)?
- Could any chart be replaced with a simpler type that communicates the same insight?
Data-Ink Efficiency
- What is the data-ink ratio? Is every visual element encoding data or aiding comprehension?
- Are there decorative elements that could be removed without losing information?
- Are gridlines, borders, and backgrounds minimal and muted?
Annotation Clarity
- Can the user understand each chart's key message without interacting?
- Are reference lines, targets, and thresholds clearly marked?
- Is number formatting consistent across all charts?
Dashboard Story
- Does the dashboard have a clear hierarchy (hero -> supporting -> detail)?
- Can the user answer "how are we doing?" within 3 seconds of viewing?
- Is the reading order (left-to-right, top-to-bottom) aligned with information priority?
Accessibility
- Do all color encodings have a text or pattern alternative?
- Do chart labels meet WCAG AA contrast requirements?
- Are interactive elements (tooltips, filters) accessible via keyboard and touch?
- Is there a data table alternative for screen reader users?
10. Compare View Specifics
When generating compare.html for this facet, follow all rules from crit-loop.md with
these additions:
- Enable the dark mode toggle if the locked color system has dark mode. Charts must
be legible in both themes.
- Each option card's iframe must show the full dashboard or data view, not isolated charts.
The user needs to see composition and hierarchy in context.
- Below each iframe, include a "Chart Inventory" expandable section listing every chart in
the option with its type, data relationship, and encoding channels.
- The comparative take ("My Take") must address: which option tells the clearest data story,
which has the best chart-type selections, and which balances density with clarity.
State your recommendation.
11. Locking and Token Extraction
When the user locks a data visualization option:
- Update
state.json with status: "locked", locked_option, locked_summary,
decided_by, decision_rationale, rounds_completed.
- The
locked_summary must capture: chart types used, dashboard composition pattern,
annotation strategy, and interaction model.
- The locked option file becomes the data visualization reference for downstream facets
(accessibility will audit chart accessibility, color contrast on data encodings).
- Visualization patterns from the locked file inform implementation specifications at the
direction stage.
12. Common Patterns and Trade-offs
Use these to inform option generation and critique. Apply them to the specific project.
| Pattern | When It Works | Watch Out For |
|---|
| KPI cards + detail charts | Executive dashboards, quick status checks | Cards can become vanity metrics without context |
| Direct labeling over legends | Small chart count, simple series | Cluttered when many data points overlap |
| Cross-filtering dashboard | Multi-metric exploration, analyst tools | Complex to implement; unclear filter state confuses users |
| Sparklines in tables | Dense data with many entities | Too small for precise reading; supplement with detail view |
| Narrative scrolling | Stakeholder reports, data stories | Poor for repeat-visit monitoring; users want the number, not the story |
| Dark background charts | Media, finance terminals, developer tools | Harder to achieve contrast on axis labels; printing issues |
13. Constraints
- Never use 3D effects on charts. Always render in 2D.
- Never use pie charts for more than 5 categories. Switch to horizontal bar.
- Never rely on color alone to distinguish data categories. Pair with labels, patterns, or shapes.
- All axis labels and annotations must use the locked type scale. No ad-hoc font sizes.
- All chart colors must come from the locked color palette. Define a sequential scale
from the brand primary for quantitative encoding if not already in the palette.
- Mock data must be realistic and plausible for the product domain. No random numbers.
- Every interactive chart must have a static fallback (direct labels) for non-interactive
contexts (screenshots, print, accessibility).
- Data tables must follow the locked density/spacing scale for row height and cell padding.
