Interface Lab
Login
Back to knowledge
Data Visualization

Chart Question Before Chart Type

Define the data relationship users need to judge before choosing chart type and frontend library; do not start from wanting a pretty chart.

chart-choicedata-relationshipdashboardanalysis

Design Principle

Good charts are not visual style collections. They are decisions that match data structure, user question, and visual encoding.

Large Theory

Chart choice does not start with a library, color, or animation. It starts with the question: do users need to compare magnitude, see change over time, inspect distribution, find correlation, understand composition, rank items, locate geographic difference, trace flow, or detect anomalies? Different questions need different encodings.

Small Points

  1. Quantitative comparison usually starts with bars, dot plots, lines, or slopes, not area and color.
  2. Time change often uses line, area, calendar, or small multiples depending on density and comparison objects.
  3. Distribution uses histogram, box plot, violin, density, or strip plot; avoid showing only averages.
  4. Correlation uses scatter, bubble, or connected scatter, while avoiding accidental causal claims.
  5. Composition can use stacked bar, 100% stacked bar, treemap, or small multiples; pie and donut charts fit only a few low-precision proportions.
  6. Geographic data does not automatically require a map. If the question is ranking or comparison, a table or bar chart is often clearer.

Design Judgment

A chart can enter the interface when it can explain what judgment users need to make, why this graphic is better than alternatives, and what it could mislead. If the only claim is that it looks premium, design judgment is missing.

Implementation Notes

Before delivery, write a chart brief: question, audience, data structure, candidate charts, selection rationale, rejected charts, encodings, interaction, accessibility alternative, library choice, and data last-updated time. Choose libraries by need: D3 for bespoke graphics, Observable Plot for exploration, Vega-Lite for auditable specs, ECharts for large interactive dashboards, and Chart.js for lightweight standard charts.

Counterexamples/Risks

Using a pie chart to compare twelve categories, mapping a non-geographic question, turning every metric into a line chart, comparing exact values in a stacked area chart, and filling a dashboard with tiny charts that lack takeaway titles.

Case Study

FT Visual Vocabulary aims to help designers and journalists select suitable visualization symbols and organizes chart types by relationships such as deviation, correlation, ranking, distribution, and change over time. From Data to Viz also uses data type and caveats to guide chart selection. The reusable lesson is that chart libraries should store selection logic before visual style.

Source Links

FT Visual Vocabulary: https://ft-interactive.github.io/visual-vocabulary/ Financial Times chart-doctor visual vocabulary: https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary From Data to Viz: https://www.data-to-viz.com/ Observable Plot: https://observablehq.com/plot/ Vega-Lite: https://vega.github.io/vega-lite/

Agent Directive

Before generating a chart, write a chart brief and candidate tradeoffs; do not choose chart type from aesthetics or library defaults alone.