What information visualization is and why it matters
Information visualization is the use of visual representations — charts, graphs, maps, diagrams — to help people understand data. The goal is not to make data pretty. The goal is to make data thinkable. A well-designed visualization reveals patterns that would remain invisible in a table of numbers, enables comparisons that would take hours to compute mentally, and communicates findings with a speed and clarity that words alone cannot match.
Statistical graphics emerged surprisingly recently in human history. Despite millennia of mathematical sophistication, it wasn’t until the late 18th century that William Playfair invented the bar chart, line chart, and pie chart. The skills required — visual, empirical-statistical, and mathematical — rarely converge in one person or tradition. That convergence is still rare today, which is why so many data graphics are mediocre or misleading.
The field’s theoretical foundation was established by Edward Tufte in The Visual Display of Quantitative Information (1983), which articulated principles for graphical excellence that remain the standard. This topic page uses Tufte’s framework as its theoretical backbone, supplemented by Cleveland and McGill’s perceptual research and modern practices for interactive, screen-based data graphics.
Why this matters for your projects
Every digital product eventually needs to show data — a dashboard, an analytics page, a report, a chart in a marketing site. The difference between a graphic that clarifies and one that confuses often comes down to a handful of principles that take minutes to learn but are violated constantly. Understanding these principles means your data graphics will be honest, efficient, and immediately comprehensible.
Graphical excellence
Graphical excellence is the well-designed presentation of interesting data — a matter of substance, of statistics, and of design. It consists of complex ideas communicated with clarity, precision, and efficiency. It gives the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.
Excellence in data graphics is not about aesthetics in the decorative sense. It is about enabling the viewer’s eye to make comparisons, see patterns, and detect causes. The best graphics are instruments for reasoning about quantitative information — and they are almost always the simplest.
Five qualities of excellent data graphics
1. Show the data. This sounds obvious but is routinely violated. Many graphics bury the data under decoration, three-dimensional effects, or unnecessary visual complexity. The data should be the most prominent element.
2. Induce the viewer to think about substance. The viewer’s attention should be drawn to the data and what it means — not to the methodology, the design of the graphic, or the technology used to produce it.
3. Avoid distorting what the data have to say. The visual representation must be proportional to the numerical quantities. When it isn’t, you have a lie (see Graphical Integrity below).
4. Present many numbers in a small space. Great graphics are data-dense. They pack a lot of information into a compact area, allowing the eye to make comparisons rapidly.
5. Make large data sets coherent. The special power of graphics over tables is in handling large data sets. A table of 20 numbers is often clearer than a chart of 20 numbers. But a chart of 2,000 numbers can reveal structure that a table of 2,000 numbers never could.
Graphical integrity
Graphics can lie. They lie when the visual representation of data is inconsistent with the numerical representation. Sometimes the lies are intentional (propaganda, marketing). More often, they result from ignorance of basic principles or from prioritizing visual impact over accuracy.
The Lie Factor Key Concept
Use when: Reviewing any data graphic for accuracy before publication.
The Lie Factor measures graphical integrity by comparing the visual effect to the numerical change:
Lie Factor = (size of effect shown in graphic) ÷ (size of effect in data)
A Lie Factor of 1.0 means the graphic is accurate. Above 1.05 or below 0.95, and the graphic is distorting the data. Many published graphics have Lie Factors of 2, 5, or even higher — meaning they visually exaggerate the change by 2x, 5x, or more.
Common causes of high Lie Factors: using areas or volumes to represent one-dimensional quantities (a circle twice the diameter represents 4x the area), truncating the y-axis to exaggerate small changes, and using three-dimensional perspective that distorts proportions.
Six principles of graphical integrity
1. Visual representations must be directly proportional to quantities. If sales doubled, the visual element representing sales should be exactly twice as large — not three times or four times, as happens with 3D bar charts and bubble charts that scale by area instead of length.
2. Use clear, detailed labeling. Labels should defeat graphical distortion and ambiguity. Write explanations of the data on the graphic itself. Label important events in the data.
3. Show data variation, not design variation. Changes in the graphic should reflect changes in the data, never changes in the graphic design. If a chart uses different visual styles for different bars, the viewer may read the style change as a data difference.
4. Standardize units. In time-series displays, use consistent time intervals. If mixing currencies, deflate for inflation. If showing rates, use the same denominator.
5. Don’t quote data out of context. A graphic showing one year of crime statistics rising can be alarming; the same data in a 20-year context may show a long decline with a small uptick. Context is essential to integrity.
6. The number of information-carrying dimensions should not exceed the number of dimensions in the data. One-dimensional data (a single variable over time) should be represented with a one-dimensional element (the position along a line), not a two- or three-dimensional object (areas, volumes) that introduces perceptual distortion.
Watch for these common integrity violations
Truncated y-axis: Starting the y-axis at a value other than zero makes small changes look dramatic. A 2% increase can look like a 50% increase. Sometimes truncation is legitimate (when showing small but meaningful variations in tightly controlled data), but it should always be clearly labeled.
Dual y-axes: Two different scales on left and right axes let the designer imply correlation between unrelated data by adjusting scales to make lines cross. If you need two scales, use two separate charts.
Area and volume distortion: When representing quantities with circles, the eye reads area, not radius. Doubling the radius quadruples the area. This is the single most common source of graphical distortion.
The data-ink ratio
The data-ink ratio is perhaps the most practical principle in all of data visualization. It states that a large share of the ink (or pixels) on a graphic should present new information. Ink that does not tell the viewer something new can almost always be erased.
Data-ink ratio = (data-ink) ÷ (total ink used in the graphic)
Every bit of ink on a graphic requires a reason. That reason should nearly always be: this ink presents information that would be lost without it. The principle generates two erasing rules that apply to nearly every graphic:
Erasing principle 1: Erase non-data-ink, within reason
Grid lines, heavy tick marks, borders around the chart area, background fills, decorative boxes around legends — these are non-data-ink. In most cases, they can be reduced (make grid lines lighter, thinner, or fewer) or removed entirely. The data itself, if positioned clearly, can serve as its own grid.
Erasing principle 2: Erase redundant data-ink, within reason
If the same number is communicated by six visual elements — the height of a bar, the position of its top edge, a label above it, a grid line behind it, a tick mark on the axis, and shading within — then five of those six are redundant. Any five could be erased and the information would survive. In practice, keep the one or two that communicate most clearly and erase the rest.
Applying data-ink in modern UI
Tufte wrote about ink on paper, but the principle translates directly to pixels on screen. Every visual element in your chart — background color, border, shadow, grid line, axis label — should earn its place by communicating data. When reviewing a visualization, ask of every element: “If I removed this, would the viewer lose information?” If the answer is no, remove it.
Chartjunk: what to erase
Chartjunk is the visual debris that clutters up a graphic without conveying information. It comes in three forms, each worth recognizing because each is still common in modern tools and templates.
1. Moiré vibration
When closely spaced lines or patterns overlap, they create a shimmering, vibrating optical effect that is visually aggressive and communicates nothing. This happens with hatched fills in bar charts, tightly spaced grid lines, and patterned backgrounds. The solution is simple: use flat color fills or no fill at all, and reduce grid lines to the minimum needed for reference.
2. The grid
The grid should usually be muted or eliminated entirely. Heavy, dark grid lines compete with the data for the viewer’s attention. If the grid is necessary for precise readings, make it light gray and thin — present enough to reference but not enough to distract. Often the data can serve as its own grid: labeled data points or direct annotation make grid lines redundant.
3. The duck
Named after the Long Island building shaped like a duck, a “duck” in data graphics is a chart where the graphic design overwhelms the data. Infographics shaped like objects, charts inside illustrations, data labels integrated into artistic compositions — these prioritize visual novelty over data communication. The chart might be memorable, but the data is not.
Modern chartjunk
Tufte’s examples were from print. Modern chartjunk includes: 3D effects on bar charts, gradient fills, drop shadows on chart elements, decorative icons inside charts, animated transitions that slow down comprehension, and “skeuomorphic” chart styles that make flat data look like physical objects. Dashboard tools like Excel, Google Sheets, and even Figma chart plugins default to many of these. Your first step after generating a chart should be stripping away the defaults.
Data density and small multiples
Data graphics should often be based on large data matrices and have high data density. The argument is counterintuitive: more information, not less, often makes a graphic clearer. When a graphic displays many data points, the eye can detect patterns, outliers, and relationships that a sparse chart would hide. The cost of adding data to a well-designed graphic is low; the cost of withholding it is high.
Data density is defined as the number of data entries divided by the area of the graphic. Most published graphics have surprisingly low density — a handful of numbers spread across a large area. The best newspapers and academic journals publish data-dense graphics that pack significant information into compact displays. This density is not clutter; it is substance.
The principle of small multiples
Small multiples are the single most effective technique for displaying multivariate data. A small multiple is a series of graphics, all showing the same combination of variables, each showing a different slice of the data — by time period, by category, by geographic region. The design of each graphic is identical; only the data changes.
Small multiples work because the human eye is extraordinarily good at scanning a series of similar images for differences. Once the viewer understands the format of one panel, they can read all the panels at a glance. Comparisons become immediate and visual rather than requiring memory or mental computation.
Small Multiples Core Technique
Use when: Comparing the same metric across categories, time periods, or conditions. Showing how a pattern varies across segments.
Design all panels identically: same axes, same scale, same visual encoding. Vary only the data. Use consistent color so the eye reads differences in shape and position, not in color. Arrange panels in a logical order (chronological, alphabetical, by magnitude). Label concisely — the panel title should be the only text that changes.
Example: Instead of one cluttered line chart showing sales for 12 product categories, create a 4×3 grid of small line charts, each showing one category. The viewer instantly sees which categories are growing, which are flat, and which are seasonal — comparisons that would be impossible in a single overlapping spaghetti chart.
When to maximize density vs. when to simplify
High density is appropriate when the audience is analytical — data analysts, researchers, financial professionals — and when the graphic will be studied, not glanced at. For presentations, marketing materials, or audiences unfamiliar with the data, a simpler graphic with fewer data points and more annotation is often more effective. Match density to context and audience.
Visual encoding principles
Visual encoding is how you map data values to visual properties. Choosing the right encoding channel is as important as choosing the right chart type — and the research on which channels humans read most accurately is well established.
The Cleveland-McGill hierarchy
In 1984, William Cleveland and Robert McGill published a landmark study ranking visual encoding channels by perceptual accuracy — how precisely humans can extract quantitative values from each channel. The ranking, from most accurate to least:
1. Position along a common scale (most accurate) — Dot plots, scatter plots, bar charts along a shared axis. This is why bar charts and line charts are so effective: the eye compares positions along a shared baseline with high precision.
2. Position along non-aligned scales — Small multiples where each panel has its own axis. Still accurate, but slightly harder because the eye must track across separate frames.
3. Length — Bar charts. Effective for comparison, but less precise than position because the eye must judge the extent of each bar, not just its endpoint.
4. Angle and slope — Pie charts (angle), line charts (slope). Angles are harder to compare than positions or lengths, which is why pie charts are generally inferior to bar charts for the same data.
5. Area — Bubble charts, treemaps. Humans are poor at comparing areas accurately. A circle with twice the area looks less than twice as big. Area should encode secondary information, never the primary comparison.
6. Volume and curvature — 3D charts. Almost never appropriate. The third dimension adds perceptual distortion without adding data dimensions.
7. Color saturation, color hue, density (least accurate) — Heat maps, choropleth maps. Color is effective for categories and for showing broad patterns, but poor for precise quantitative comparisons.
Pre-attentive processing
Some visual properties are processed before conscious attention — your eye detects them instantly without scanning. Color hue, orientation, size, and shape are all pre-attentive. This means a single red dot in a field of blue dots pops out immediately. Use pre-attentive properties to highlight outliers, anomalies, or the most important data points in a dense graphic. But use only one pre-attentive channel at a time: if everything is highlighted, nothing is.
Choosing the right chart type
Chart selection is not a matter of taste. It follows from what relationship in the data you want the viewer to see. Different chart types encode different relationships — comparison, trend, proportion, distribution, correlation — and using the wrong type hides the pattern you’re trying to reveal.
Chart Selection Framework Decision Tool
Use when: Starting any data visualization. Ask “what relationship am I showing?” first, then select the chart.
Comparison across categories → Bar chart
Use horizontal bars when labels are long. Sort by value (not alphabetically) unless there’s a natural order. Never use 3D bars. For comparing two sets of categories, use grouped or side-by-side bars, not stacked.
Trend over time → Line chart
Time always goes on the x-axis, running left to right. Use a continuous line for continuous data (temperature, stock price) and points without connecting lines for discrete events. Multiple lines are fine up to about 5; beyond that, use small multiples.
Part-to-whole proportion → Stacked bar or treemap
Pie charts work for showing one dominant category vs. everything else (the “one big slice” story). For precise comparison of parts, use a stacked horizontal bar chart. For hierarchical part-to-whole with many categories, use a treemap. Never use a pie chart with more than 5 slices.
Distribution → Histogram, box plot, or density plot
Histograms show the shape of a distribution (normal, skewed, bimodal). Box plots compare distributions across categories. Density plots (smoothed histograms) work when comparing 2–3 overlapping distributions. Never use a bar chart for distribution data — it hides the shape.
Relationship between variables → Scatter plot
The only chart type designed to show correlation. Each point represents one observation plotted on two axes. Add a trend line if the relationship is meaningful. Use color or shape to encode a third variable (category). For very large data sets, use opacity or density plots to handle overplotting.
Geographic data → Map
Use choropleth maps (filled regions) for rates and ratios, not absolute counts. Use dot maps or proportional symbol maps for absolute counts. Never use a map when the geographic dimension doesn’t matter — a bar chart sorted by value is almost always clearer.
When a table is better than a chart
For small data sets (under 20 numbers), a well-formatted table often communicates more precisely than a chart. Tables allow exact values, easy row-by-row comparison, and clear labeling. Charts excel at revealing patterns across many data points. If someone would need to look up the exact number, use a table or annotate the chart with direct labels.
Color in data visualization
Color is the most misused encoding channel in data visualization. It is powerful for categorization and for showing broad patterns, but poor for precise quantitative comparison. The key is knowing when color carries data and when it’s decorative — and designing for both sighted and colorblind users.
Palette Selection Decision Tool
Use when: Choosing colors for any data visualization.
Sequential palette (single hue, light to dark): Use for ordered data — low to high, less to more. Example: population density on a map. Use a single hue with variation in lightness, not multiple hues.
Diverging palette (two hues meeting at a neutral center): Use when data has a meaningful midpoint — profit/loss, above/below average, positive/negative change. Both ends should be equally saturated.
Categorical palette (distinct hues): Use for unordered categories — product lines, departments, countries. Maximum 7–8 distinct colors; beyond that, the eye can’t reliably distinguish them. Use a colorblind-safe palette.
Designing for colorblindness
Roughly 8% of men and 0.5% of women have some form of color vision deficiency. The most common type confuses red and green, making the most popular color combination in data visualization — red for bad, green for good — unreadable for a significant portion of your audience.
Solutions: Never rely on color alone. Use redundant encoding: add shapes (circles vs. squares), patterns (solid vs. dashed lines), or direct labels alongside color. Use blue-orange as your primary pair instead of red-green. Test your graphics with a colorblind simulation tool (most design tools include one).
Annotation and labeling
Annotation transforms a chart from a picture of data into a story about data. The best data graphics include words, numbers, and imagery — labels are not separate from the graphic, they are part of it. Tufte’s principle of multifunctioning graphical elements applies here: labels should serve as data references, not just identifiers.
Direct labeling vs. legends
Whenever possible, label data elements directly rather than using a legend. A legend forces the viewer to look away from the data, hold a color-label mapping in memory, and look back — a tax on working memory that direct labels eliminate entirely. Place labels next to or on the data they describe.
Contextual annotations
Annotate the why, not just the what. If revenue dropped in Q3, a label saying “$2.1M” tells the viewer the number. An annotation saying “Factory shutdown, Aug 12–Sep 3” tells them the story. The best data graphics from publications like the Financial Times and New York Times annotate key events, turning a passive chart into an active explanation.
Multifunctioning elements
Look for opportunities where a single element can serve multiple purposes. A data label that’s positioned at the exact height of its value serves as both a label and a grid reference — eliminating the need for a grid line. A directly labeled bar makes the y-axis tick marks redundant. Each time one element absorbs the function of another, you can erase the other.
Responsive data graphics
Data visualizations designed for a 1440px desktop monitor often fail on a 375px phone screen. The challenge isn’t just scaling — it’s that different screen sizes demand different levels of detail and sometimes different chart types entirely.
Progressive disclosure for data
Desktop: Show the full visualization with all data points, detailed annotations, and interactive hover states. This is where data density can be maximized.
Tablet: Simplify annotations. Reduce the number of data labels. Ensure touch targets on interactive elements are at least 44px. Consider switching from hover interactions to tap.
Mobile: Show the headline number and trend. Consider replacing complex charts with simplified versions or sparklines. A 12-category bar chart might become a top-5 list with a “see all” link. Horizontal bar charts often work better on mobile than vertical ones because they don’t require scrolling.
When to change chart type at breakpoints
Some chart types simply don’t work on small screens. A scatter plot with 500 points is unreadable at 375px. Consider switching to a summary statistic (correlation coefficient) with a simplified view. A multi-line chart with 8 lines becomes spaghetti — switch to small multiples stacked vertically, or let the user select which lines to display.
Redesign exercises: applying the erasing principles
The most practical skill in information visualization is redesign — taking a mediocre graphic and systematically improving it by applying the data-ink ratio and erasing principles. Here are three exercises you can practice on any chart you encounter.
The Erasure Test Core Method
Use when: Reviewing any chart or visualization before publishing.
Start with the default chart
Generate the chart using your tool’s defaults (Excel, Google Sheets, Chart.js, whatever). Don’t customize anything yet. This is your “before” state.
Remove the chart border and background
Most tools add a box around the chart area and a slightly different background color. Remove both. The chart should sit on the page background, not inside a container.
Lighten or remove grid lines
Make grid lines light gray (#E0E0E0 or lighter) and thin (0.5px). If the chart has both horizontal and vertical grid lines, keep only the horizontal ones (or remove both and rely on direct labels).
Remove redundant encoding
If bars have value labels on top, you don’t need y-axis tick marks. If lines are directly labeled, you don’t need a legend. If data points are labeled, you may not need grid lines. Remove every element that duplicates information carried by another element.
Add annotation where it helps
Now add back — selectively. Annotate the most important data point. Add a contextual note explaining an outlier. Label the trend line. Every addition should answer a question the viewer would have.
The Bar Chart Minimization Exercise
Practice exercise: Take any bar chart and reduce it to its minimum effective form.
Start with a standard bar chart with axis labels, tick marks, grid lines, a legend, colored fills, and a border. Progressively remove elements until one more removal would cause information loss. The result is the minimum effective graphic — every remaining pixel earns its place.
A common endpoint: horizontal bars sorted by value, directly labeled with values, no y-axis, no grid lines, a single muted color, and a title. This minimal form communicates more clearly than the cluttered original because the viewer’s attention goes entirely to the data.
Templates and checklists
- Chart type matches the data relationship (comparison, trend, proportion, distribution, correlation)
- Visual representation is proportional to quantities (Lie Factor ≈ 1.0)
- Y-axis starts at zero (or truncation is clearly labeled and justified)
- Non-data-ink has been minimized (grid lines, borders, backgrounds, decorative elements)
- Redundant encoding has been removed (no value labels + tick marks + grid lines for the same data)
- Color palette is colorblind-safe and uses redundant encoding (shape, pattern, or label)
- Data is directly labeled where possible (no legend required)
- Key data points are annotated with context (the “why,” not just the “what”)
- Small data sets (under 20 values): consider whether a table would be clearer
- Large data sets: data density is high and the graphic reveals structure a table could not
- Text is legible at the display size (minimum 11px for labels, 14px for annotations)
- Responsive behavior considered (how does this look on mobile?)
Great data graphics: what makes them work
Classic example
Charles Joseph Minard’s map of Napoleon’s Russian campaign (1869)
Often called the best statistical graphic ever drawn. This single image encodes six variables: the size of the army, its location on a two-dimensional surface, the direction of movement, the temperature on specific dates during the retreat, and time. The diminishing width of the line as the army shrinks from 422,000 to 10,000 soldiers is devastating in its clarity. It tells a story that pages of text could not: the army was destroyed not by battle but by cold, distance, and attrition.
Why it works: Extreme data density. Every mark carries information. The visual encoding is intuitive (width = army size). The two-directional flow (advance and retreat) uses a single visual metaphor. And the temperature line along the bottom provides causal context for the shrinking army width above it.
Modern example
Financial Times and New York Times COVID-19 trackers (2020–2022)
The data journalism teams at FT and NYT produced some of the most effective information visualization of the decade. John Burn-Murdoch’s FT charts used small multiples (each country’s curve on its own panel), consistent scales, direct labeling, and progressive annotation as new data arrived. The NYT team used scrollytelling to build complexity gradually, layering data as the reader moved through the story.
Why it worked: Direct labeling eliminated legends. Consistent scales across small multiples enabled instant country-to-country comparison. Annotation provided context (lockdown dates, policy changes). And the graphics were updated daily, demonstrating that data-dense visualization doesn’t require static print — it can be living, evolving documents.
Modern example
The Pudding’s visual essays
The Pudding (pudding.cool) publishes data-driven visual essays that demonstrate how modern web technology can create interactive data graphics that Tufte could only dream of on paper. Their pieces use scrollytelling, interactive exploration, and animated transitions — but always in service of the data, not as decoration. The data comes first; the interaction amplifies understanding.
Why it works: The interaction is the data. You don’t just look at the data — you explore it, filter it, and discover your own patterns. This extends Tufte’s principles into a medium he didn’t anticipate: the graphic as instrument, not just as display.
Common failures and how to fix them
Pie chart with 8+ slices
Pie charts work for showing one dominant proportion (“mobile is 72% of traffic”). With many slices of similar size, the eye cannot compare angles accurately. Replace with a horizontal bar chart sorted by value.
3D bar chart
The third dimension adds zero data dimensions and introduces perspective distortion that makes bars in the back look shorter than equivalent bars in front. Replace with a flat bar chart. Always.
Rainbow color palette on a sequential scale
Rainbow palettes impose categorical perception on continuous data. The human eye sees yellow as “louder” than surrounding colors, creating false boundaries in the data. Replace with a single-hue sequential palette (light to dark).
Spaghetti chart (too many lines)
More than 5 lines on a single chart becomes unreadable. The viewer can’t track any individual line through the tangle. Replace with small multiples (one line per panel) or an interactive chart where the user selects which lines to display.
Truncated y-axis presented without disclosure
Starting the y-axis at 95 instead of 0 makes a 2% change look like a 40% change. If you truncate for legitimate reasons (showing small but meaningful variation in tightly controlled data), clearly label the axis and break the axis line visually.
Common pitfalls
Choosing charts by aesthetics rather than data relationship
A donut chart is not “more modern” than a bar chart — it’s less accurate for the same data. Chart selection should be driven by the data relationship you need to communicate, not by visual preference or what the tool defaults to.
Decorating instead of informing
Adding illustrations, icons, 3D effects, or elaborate backgrounds to data graphics reduces the data-ink ratio and shifts attention from the data to the decoration. When you catch yourself making a chart “look nicer,” ask: does this change help the viewer understand the data?
Using color without redundant encoding
8% of men are colorblind. If your chart relies on red vs. green to distinguish “good” from “bad,” a significant portion of your audience can’t read it. Always add a second encoding channel: shape, pattern, icon, or label.
Showing data without context
A single number is not information — it’s a fact. Information requires context: compared to what? Compared to when? The same revenue figure can be excellent or catastrophic depending on whether it’s compared to last year, to the forecast, or to the industry average. Always provide a comparison baseline.
When to use this
Decision guidance
Use this topic when: You’re designing any chart, graph, or data display — in a dashboard, a report, a presentation, a marketing page, or an article. Also when reviewing someone else’s data graphics for accuracy and clarity.
Pair with Dashboard Design when: You’re composing multiple data graphics into a single screen. This topic teaches you how to design a great individual chart; Dashboard Design teaches you how to arrange many charts into a coherent decision-support interface.
Pair with Data-Driven Design when: You’re deciding what to measure and display. Data-Driven Design helps you choose the right metrics; this topic helps you display those metrics effectively.
Connected topics in your library
Appendix
Extended material for when you want to go deeper. Covers Tufte’s complete principles, the perceptual ranking research, and further reading.