UX Patterns Guide
UI + UX Data Display And Exploration established

Data visualization

Provide an honest data visualization with appropriate chart type, explicit encodings, axes, units, scale, legend, annotation, tooltip or selected-point detail, filter and freshness context, accessible chart interaction, and a synchronized data alternative.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.
  • The decision depends on pattern recognition across multiple values rather than one exact record.
  • A chart can disclose enough context for users to judge scale, scope, source, and limitations.
  • The product can provide an accessible data alternative and synchronized exact-value inspection.

Avoid when

  • The data question is a single number, a record list, a geographic location, or an event audit trail.
  • The user must edit, reconcile, export, or audit many exact records.
  • The visual would hide missing, stale, sampled, normalized, or permission-limited data.
  • The chart type would be decorative or misleading for the data relationship.
  • The implementation cannot provide axes, legends, labels, source context, and accessible exact values.

Problem it prevents

Users need to understand patterns, magnitude, trend, distribution, composition, relationship, anomaly, or uncertainty in data, but raw tables and summaries make those patterns slow or impossible to see.

Pattern anatomy

What a strong implementation has to make clear

User need

The task involves quantitative, categorical, temporal, ordinal, or relational data where visual pattern recognition is useful.

Pattern promise

Provide an honest data visualization with appropriate chart type, explicit encodings, axes, units, scale, legend, annotation, tooltip or selected-point detail, filter and freshness context, accessible chart interaction, and a synchronized data alternative.

Required state

Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.

Recovery path

Axes or units are missing and magnitude is ambiguous.

Access contract

Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A revenue trend chart shows month on the x-axis, revenue in USD on the y-axis, a target line, color-coded channels with legend labels, selected month tooltip, annotation for a campaign, and a data table toggle.
  • A defect distribution chart uses a histogram with bin labels, count units, median marker, visible filter scope, sample size, and a note explaining excluded test environments.
  • An analyst switches from revenue to conversion rate, the y-axis unit changes, target and annotation stay aligned, and the selected month tooltip and table row update from the same data.
  • A manager highlights Enterprise channel, sees its contribution, toggles normalized view, and receives a clear disclosure that values are shown as percent of monthly total.
Weak implementation

Vague, hidden, hard to recover from

  • A glossy chart card shows unlabeled bars with no axis, unit, baseline, data range, source, or explanation of what the colors mean.
  • A pie chart compares monthly time-series revenue and hides exact values until mouse hover, so users cannot read the trend or inspect values with keyboard.
  • A dashboard truncates the y-axis to exaggerate a small change without indicating the baseline, leading a team to overreact.
  • A chart filter removes the low-performing segment but the legend and annotation still describe the full dataset.
UI guidance
  • Render a chart with a specific analytic question, title, dataset scope, mark type, axis labels, units, tick labels, scale baseline, legend, annotations, source or freshness note, selected mark, tooltip or detail, and data table alternative.
  • Map data fields to visual encodings intentionally: position, length, color, size, shape, opacity, grouping, faceting, and order must each have a clear data meaning and a text or pattern backup when color or shape carries state.
UX guidance
  • Use Data visualization when visual encoding helps users detect trends, comparisons, rankings, distributions, relationships, outliers, part-to-whole composition, or uncertainty faster than reading rows.
  • Keep analysis honest: chart type, scale, baseline, aggregation, filters, missing data, sampling, normalization, annotations, and interaction state must stay visible enough that users can judge what the visual does and does not prove.
Implementation contract

What the implementation must handle

States

  • Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.
  • Selected mark, focused mark, tooltip open, tooltip dismissed, annotation visible, legend item highlighted, and table row synchronized states.
  • Filtered, grouped, faceted, sorted, normalized, compared-to-target, and highlighted-series states.
  • Loading, empty data, no matching data, missing values, partial data, stale data, sampled data, and permission-limited data states.

Interaction

  • Each visible mark is derived from the current dataset, filter scope, aggregation, and scale; visual marks and table values must agree.
  • Axes, ticks, labels, legends, and annotations explain the mapping between data fields and visual encodings.
  • Tooltip and selected-point detail expose exact value, unit, series, category, time, aggregation, source scope, and missing-data status when relevant.
  • Legend filtering, metric switching, normalization, brushing, zooming, and sorting update the marks, axes, annotations, summary, and table alternative together.

Accessibility

  • Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text.
  • Provide a synchronized data table or textual summary that gives equivalent values and trends without requiring visual mark inspection.
  • Make chart controls, legend filters, point selection, metric switchers, tooltips, annotations, and export actions keyboard operable.
  • Do not rely only on color; pair color with labels, patterns, symbols, direct labels, or table values.

Review

  • What data question does this visualization answer better than a table, map, activity log, or summary metric?
  • Can users identify the chart type, dataset scope, axes, units, scale, baseline, aggregation, filters, and source?
  • Do color, size, position, shape, and order each map to a clear data field?
  • Can users inspect exact values with keyboard and screen-reader paths, not only hover?
Interactive lab

Inspect the states before you copy the pattern

Read an honest chart

Switch metrics, select a month, highlight a series, normalize values, reveal the data table, toggle an annotation, export with context, and compare wrong-chart, missing-axes, truncated-scale, color-only, tooltip-only, stale-data, and decorative-chart failures.

Data visualization
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.

Keyboard / Access

Tab reaches chart controls, metric selector, legend items, selected-point control, data table toggle, export, and source information.

Avoid Generating

Using decorative charts that do not answer a data question.
Evidence trail

Source-backed claims behind this guidance

Vega-Lite: Encoding

Vega-Lite - checked

Vega-Lite documents mapping data fields to visual encoding channels.

Vega-Lite: Axis

Vega-Lite - checked

Vega-Lite documents axes as communicating how position represents data range.

Vega-Lite: Legend

Vega-Lite - checked

Vega-Lite documents legends for encoded channels such as color, opacity, size, and shape.

Vega-Lite: Tooltip

Vega-Lite - checked

Vega-Lite documents tooltips from encoded fields or underlying data points.

D3: d3-axis

Observable - checked

D3 documents axes as human-readable reference marks for scales.

Full agent/debug reference

Problem Context

  • The task involves quantitative, categorical, temporal, ordinal, or relational data where visual pattern recognition is useful.
  • Users may need to compare categories, spot trends, inspect anomalies, understand distributions, see relationships, or communicate evidence.
  • Visualizations can mislead when axes, units, baselines, aggregation, sampling, filters, color meaning, and missing data are hidden.
  • Interactive charts may include tooltips, selection, legend filtering, brushing, zooming, drilldown, annotations, and data table exports.
  • Charts need alternatives for keyboard users, screen-reader users, low-vision users, and users who need exact values.

Selection Rules

  • Choose Data visualization when the user's primary task is seeing a pattern, relationship, trend, distribution, ranking, magnitude, or anomaly.
  • Use table when exact values, row comparison, export, auditing, or editing records is primary.
  • Use map view when geography, distance, route, or spatial density is the primary organizing axis.
  • Use activity log when the question is what happened, when, by whom, and to what object.
  • Use summary box or card-like metric when a single number is the main fact and visual pattern across data is secondary.
  • Use dashboard layout when multiple coordinated visuals and controls need a page-level monitoring arrangement.
  • Use chart drilldown when the user must move from aggregate marks to lower-level data while preserving analytic context.
  • Match chart type to question: time trend, category comparison, relationship, distribution, composition, ranking, flow, or uncertainty.
  • Disclose scale choices, aggregation, filters, data freshness, missing data, and uncertainty near the chart.
  • Avoid Data visualization when the visual encoding is decorative, when data volume is too small to reveal a pattern, or when exact record work is the real task.

Required States

  • Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.
  • Selected mark, focused mark, tooltip open, tooltip dismissed, annotation visible, legend item highlighted, and table row synchronized states.
  • Filtered, grouped, faceted, sorted, normalized, compared-to-target, and highlighted-series states.
  • Loading, empty data, no matching data, missing values, partial data, stale data, sampled data, and permission-limited data states.
  • Axis baseline visible, non-zero baseline disclosed, log scale disclosed, truncated scale disclosed, and percentage or index normalization disclosed states.
  • Small-screen state where axes, labels, legend, selected point, and data alternative remain reachable.
  • Keyboard navigation through chart controls, selected marks, legend filters, annotations, and table alternative.
  • Export image, export data, copy insight, and share-link states when the chart is used for reporting.

Interaction Contract

  • Each visible mark is derived from the current dataset, filter scope, aggregation, and scale; visual marks and table values must agree.
  • Axes, ticks, labels, legends, and annotations explain the mapping between data fields and visual encodings.
  • Tooltip and selected-point detail expose exact value, unit, series, category, time, aggregation, source scope, and missing-data status when relevant.
  • Legend filtering, metric switching, normalization, brushing, zooming, and sorting update the marks, axes, annotations, summary, and table alternative together.
  • Color is never the only way to communicate category, state, threshold, or anomaly.
  • Non-zero baselines, log scales, normalized percentages, samples, excluded outliers, and stale data are disclosed before users interpret magnitude.
  • Keyboard and assistive-technology users can move through data points or use a synchronized table/summary to get equivalent information.
  • Chart exports preserve title, scope, source, filters, timestamp, axes, legends, and disclosure notes.

Implementation Checklist

  • Define dataset schema: fields, types, units, category labels, time grain, aggregation, missing values, sample size, source, update timestamp, and permission scope.
  • Define visual encoding: chart type, x field, y field, color field, size field, grouping, sort order, scale type, baseline, legend, annotations, and responsive behavior.
  • Implement selected-point detail, tooltip, keyboard-accessible data table, legend highlighting, metric switch, normalization disclosure, filter scope, and export metadata.
  • Model empty, no-match, loading, stale, partial, missing-value, inaccessible-color, truncated-scale, and narrow-viewport states.
  • Test with long labels, negative values, zero values, outliers, missing months, dense points, small screens, high contrast mode, keyboard navigation, and screen-reader summaries.
  • Keep chart, textual summary, tooltip, annotations, and data table generated from the same filtered dataset.
  • Include chart source, last updated time, aggregation, filters, unit, and caveats close enough to the visual that they are not lost when shared.
  • Use a proven charting or visualization library for production chart scales, axes, legends, responsive layout, and interaction semantics.

Common Generated-UI Mistakes

  • Using decorative charts that do not answer a data question.
  • Choosing a chart type that mismatches the data relationship.
  • Hiding axes, units, baseline, scale type, or aggregation.
  • Using color alone for category, status, threshold, or anomaly.
  • Truncating an axis or using a log scale without disclosure.
  • Providing exact values only in pointer hover tooltips.
  • Letting legend, filters, annotations, and table values drift out of sync.
  • Showing stale, sampled, missing, or normalized data without caveats.

Critique Questions

  • What data question does this visualization answer better than a table, map, activity log, or summary metric?
  • Can users identify the chart type, dataset scope, axes, units, scale, baseline, aggregation, filters, and source?
  • Do color, size, position, shape, and order each map to a clear data field?
  • Can users inspect exact values with keyboard and screen-reader paths, not only hover?
  • What happens with outliers, missing data, stale data, no data, long labels, small screens, and high contrast mode?
  • Would table, map view, activity log, summary box, dashboard layout, or chart drilldown better fit the task?
Accessibility
  • Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text.
  • Provide a synchronized data table or textual summary that gives equivalent values and trends without requiring visual mark inspection.
  • Make chart controls, legend filters, point selection, metric switchers, tooltips, annotations, and export actions keyboard operable.
  • Do not rely only on color; pair color with labels, patterns, symbols, direct labels, or table values.
  • Ensure meaningful chart marks, focus indicators, threshold lines, and selected states meet non-text contrast expectations.
  • Announce selected point, filter changes, normalization changes, stale data, missing data, and no-data states in text or status regions.
  • Keep tooltips dismissible and reachable, and avoid hover-only exact values.
Keyboard Behavior
  • Tab reaches chart controls, metric selector, legend items, selected-point control, data table toggle, export, and source information.
  • Enter or Space toggles legend items, opens selected-point detail, switches metrics, toggles normalization, and opens the data table.
  • Arrow-key mark navigation may be implemented inside the chart, but a table alternative must still expose equivalent data.
  • Escape closes tooltips, annotation popovers, chart menus, and export dialogs and returns focus to the invoking mark or control.
  • After filtering, sorting, metric switching, or normalization, focus remains near the control or moves to an announced chart summary.
  • Keyboard users can identify the selected mark, active series, visible range, and exact value without pointer hover.
Variants
  • Line chart
  • Bar chart
  • Stacked bar chart
  • Area chart
  • Scatterplot
  • Bubble chart
  • Histogram
  • Box plot
  • Heatmap
  • Waterfall chart
  • Funnel chart
  • Small multiples
  • Annotated chart
  • Accessible chart with data table

Verification

Last verified: