Articles

Menu

→ Home

Portfolio

Services

Links

About

Information design

May 19, 2026

5 min read

Data Visualization Principles You Can Use Tomorrow

How to pick the right visual variable and chart type, cut what doesn't carry data, and make charts readable for everyone.

Most bad charts aren't a creativity problem. They're a criteria problem. We pick the chart that looks good instead of the one that communicates, and we fill empty space with text instead of building the visual that would make the text unnecessary.

The good news is that criteria can be learned. Here are the principles that do most of the work, in the order you'd use them: choose the visual variable, choose the chart, strip it down, and make sure everyone can read it.

Start with the visual variables

In 1967, the French cartographer Jacques Bertin published Sémiologie graphique, where he identified the "visual variables": the graphic properties the eye can use to read differences in data. Counting position as one, there are seven.

  • Position: Best for: Any type of data; the most accurate; Example: X and Y axes in a scatter plot
  • Size / length: Best for: Quantities (magnitude); Example: A longer bar means a bigger number
  • Color hue: Best for: Categories; Example: Blue for water, green for land
  • Color value (light to dark): Best for: Quantities or ordered data; Example: Darker means more concentration
  • Shape: Best for: Categories; Example: Circle vs. triangle vs. square
  • Orientation: Best for: Very limited; use with care; Example: A direction arrow on a wind map
  • Texture: Best for: Categories, when color isn't available; Example: Dot patterns in black and white print

Use the most accurate variable you can

Not all variables are read equally well. In a series of perception experiments published in 1984, statisticians William Cleveland and Robert McGill found that people judge values most accurately from position along a common scale, then length, and do noticeably worse with area and color intensity.

So for quantities, the ranking to remember is: position, then length, then area, then color. Reach as high on that list as your layout allows.

For categories, color hue is usually the fastest to tell apart, and shape holds up best when color fails (grayscale printing, color vision deficiency). Using both together is often the safest option. Texture is the fallback when you can't use color at all.

Two consequences:

  • If you use color to show magnitude ("how much"), use a sequential gradient from light to dark, not a set of unrelated colors.
  • If you use area to show differences between categories, expect readers to misjudge them.

Choose the chart by the relationship

Pick the chart type for the relationship between the data points you want to show, and let looks come second.

  • Comparison between categories: Use: Horizontal bars, dot plot, lollipop; Avoid: Pie, donut
  • Change over time: Use: Line; area if values accumulate; Avoid: Grouped bars for many periods
  • Part of a whole: Use: Waffle chart, treemap, unit chart; Avoid: Pie, donut
  • Distribution of values: Use: Strip plot, histogram, beeswarm; Avoid: Histograms with arbitrary bins
  • Relationship between two variables: Use: Scatter plot, bubble chart; Avoid: Line chart (unless x is time)
  • Flow or transfer: Use: Sankey, alluvial; Avoid: Process diagram made of text
  • Hierarchy or composition: Use: Treemap, sunburst (carefully); Avoid: Text-only org chart

Pies and donuts land in the "avoid" column twice. They can work with two or three slices, but people compare angles and areas poorly, so a simple bar chart usually does the same job better.

Before choosing, answer three questions:

  1. What relationship am I showing: comparison, distribution, proportion, trend or connection?
  2. How many categories or series do I have? Past five or six, legibility starts to suffer.
  3. Where will it be read: on a screen, in print, or projected in a room?

Those three answers rule out most of the wrong options before you start.

Strip it down: the data-ink ratio

Edward Tufte introduced the data-ink ratio in The Visual Display of Quantitative Information (1983): the ink that represents data divided by the total ink in the graphic. The point is to make every visual element earn its place by encoding something, not to be minimal for the sake of it.

Five common offenders:

1. Shadows. Does the shadow encode any data? No. Is the chart clear without it? Yes. Remove it. (The exception is a 3D map where height really is data.)

2. Decorative gradients. A gradient that only "looks nicer" adds noise. A gradient that shows intensity or direction can stay. Ask yourself: do the lightest and darkest points mean different things? If not, it's decoration.

3. Unnecessary borders and gridlines. White space separates better than a line. If you need a border to separate two elements, the real problem is probably the spacing.

4. Legends instead of direct labels. A legend makes the eye travel twice: chart, legend, back to the chart. A label placed right on the element removes the trip. Prefer direct labels whenever there's room.

5. Colors that encode nothing. Six bars in six different colors that all represent the same variable is color without a reason. One color, plus an accent for the data point that matters, is enough.

For every element, ask the one question that settles it:

If I remove this, do I lose information, or only decoration?

Make it readable for everyone

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. That's a large share of any audience, and designing for it tends to make charts clearer for everyone else too.

A short checklist:

  • Contrast. Meet WCAG AA levels: at least 4.5:1 for normal text and 3:1 for graphical elements people need to read the chart.
  • Don't rely on color alone. Add labels, patterns or shapes so the chart still works in grayscale.
  • Simulate. Run your palette through a color vision deficiency simulator before publishing.
  • Label your axes descriptively, with units.
  • Write alt text for charts published as images, stating the main finding, not just "bar chart".
  • Keep legends close to the data, or replace them with direct labels.
  • For interactive charts, make sure filters and tooltips work with a keyboard.

A word on tools

Nothing above depends on software. Whether you use a spreadsheet, a newsroom-style charting tool, an open-source chart generator or a full dashboard platform, choose by what the job needs: speed for a quick chart on a deadline, interactivity when readers need to explore the data themselves, and editable vector output when you're building an unusual form you'll finish by hand. Tools change every few years. The principles haven't changed much since 1983.

Try this: three sketches, one winner

Take one real dataset, such as enrollment by level over three years from any organization's annual report. On paper, not in software, sketch it three times using three different visual variables: position, length and color value, for example.

Show the three sketches to someone without saying a word, and ask which one they understood first. Keep that one. If you have to explain a chart for it to work, it doesn't work yet.

Further reading

  • Bertin, J. Semiology of Graphics (originally Sémiologie graphique, 1967).
  • Tufte, E. The Visual Display of Quantitative Information (Graphics Press, 1983).
  • Cleveland, W. S. and McGill, R. "Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods." Journal of the American Statistical Association 79, no. 387 (1984).
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.1 (2018).

Articles

Menu

→ Home

Portfolio

Services

Links

About

Information design

May 19, 2026

·

5 min read

Data Visualization Principles You Can Use Tomorrow

How to pick the right visual variable and chart type, cut what doesn't carry data, and make charts readable for everyone.

Most bad charts aren't a creativity problem. They're a criteria problem. We pick the chart that looks good instead of the one that communicates, and we fill empty space with text instead of building the visual that would make the text unnecessary.

The good news is that criteria can be learned. Here are the principles that do most of the work, in the order you'd use them: choose the visual variable, choose the chart, strip it down, and make sure everyone can read it.

Start with the visual variables

In 1967, the French cartographer Jacques Bertin published Sémiologie graphique, where he identified the "visual variables": the graphic properties the eye can use to read differences in data. Counting position as one, there are seven.

  • Position: Best for: Any type of data; the most accurate; Example: X and Y axes in a scatter plot
  • Size / length: Best for: Quantities (magnitude); Example: A longer bar means a bigger number
  • Color hue: Best for: Categories; Example: Blue for water, green for land
  • Color value (light to dark): Best for: Quantities or ordered data; Example: Darker means more concentration
  • Shape: Best for: Categories; Example: Circle vs. triangle vs. square
  • Orientation: Best for: Very limited; use with care; Example: A direction arrow on a wind map
  • Texture: Best for: Categories, when color isn't available; Example: Dot patterns in black and white print

Use the most accurate variable you can

Not all variables are read equally well. In a series of perception experiments published in 1984, statisticians William Cleveland and Robert McGill found that people judge values most accurately from position along a common scale, then length, and do noticeably worse with area and color intensity.

So for quantities, the ranking to remember is: position, then length, then area, then color. Reach as high on that list as your layout allows.

For categories, color hue is usually the fastest to tell apart, and shape holds up best when color fails (grayscale printing, color vision deficiency). Using both together is often the safest option. Texture is the fallback when you can't use color at all.

Two consequences:

  • If you use color to show magnitude ("how much"), use a sequential gradient from light to dark, not a set of unrelated colors.
  • If you use area to show differences between categories, expect readers to misjudge them.

Choose the chart by the relationship

Pick the chart type for the relationship between the data points you want to show, and let looks come second.

  • Comparison between categories: Use: Horizontal bars, dot plot, lollipop; Avoid: Pie, donut
  • Change over time: Use: Line; area if values accumulate; Avoid: Grouped bars for many periods
  • Part of a whole: Use: Waffle chart, treemap, unit chart; Avoid: Pie, donut
  • Distribution of values: Use: Strip plot, histogram, beeswarm; Avoid: Histograms with arbitrary bins
  • Relationship between two variables: Use: Scatter plot, bubble chart; Avoid: Line chart (unless x is time)
  • Flow or transfer: Use: Sankey, alluvial; Avoid: Process diagram made of text
  • Hierarchy or composition: Use: Treemap, sunburst (carefully); Avoid: Text-only org chart

Pies and donuts land in the "avoid" column twice. They can work with two or three slices, but people compare angles and areas poorly, so a simple bar chart usually does the same job better.

Before choosing, answer three questions:

  1. What relationship am I showing: comparison, distribution, proportion, trend or connection?
  2. How many categories or series do I have? Past five or six, legibility starts to suffer.
  3. Where will it be read: on a screen, in print, or projected in a room?

Those three answers rule out most of the wrong options before you start.

Strip it down: the data-ink ratio

Edward Tufte introduced the data-ink ratio in The Visual Display of Quantitative Information (1983): the ink that represents data divided by the total ink in the graphic. The point is to make every visual element earn its place by encoding something, not to be minimal for the sake of it.

Five common offenders:

1. Shadows. Does the shadow encode any data? No. Is the chart clear without it? Yes. Remove it. (The exception is a 3D map where height really is data.)

2. Decorative gradients. A gradient that only "looks nicer" adds noise. A gradient that shows intensity or direction can stay. Ask yourself: do the lightest and darkest points mean different things? If not, it's decoration.

3. Unnecessary borders and gridlines. White space separates better than a line. If you need a border to separate two elements, the real problem is probably the spacing.

4. Legends instead of direct labels. A legend makes the eye travel twice: chart, legend, back to the chart. A label placed right on the element removes the trip. Prefer direct labels whenever there's room.

5. Colors that encode nothing. Six bars in six different colors that all represent the same variable is color without a reason. One color, plus an accent for the data point that matters, is enough.

For every element, ask the one question that settles it:

If I remove this, do I lose information, or only decoration?

Make it readable for everyone

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. That's a large share of any audience, and designing for it tends to make charts clearer for everyone else too.

A short checklist:

  • Contrast. Meet WCAG AA levels: at least 4.5:1 for normal text and 3:1 for graphical elements people need to read the chart.
  • Don't rely on color alone. Add labels, patterns or shapes so the chart still works in grayscale.
  • Simulate. Run your palette through a color vision deficiency simulator before publishing.
  • Label your axes descriptively, with units.
  • Write alt text for charts published as images, stating the main finding, not just "bar chart".
  • Keep legends close to the data, or replace them with direct labels.
  • For interactive charts, make sure filters and tooltips work with a keyboard.

A word on tools

Nothing above depends on software. Whether you use a spreadsheet, a newsroom-style charting tool, an open-source chart generator or a full dashboard platform, choose by what the job needs: speed for a quick chart on a deadline, interactivity when readers need to explore the data themselves, and editable vector output when you're building an unusual form you'll finish by hand. Tools change every few years. The principles haven't changed much since 1983.

Try this: three sketches, one winner

Take one real dataset, such as enrollment by level over three years from any organization's annual report. On paper, not in software, sketch it three times using three different visual variables: position, length and color value, for example.

Show the three sketches to someone without saying a word, and ask which one they understood first. Keep that one. If you have to explain a chart for it to work, it doesn't work yet.

Further reading

  • Bertin, J. Semiology of Graphics (originally Sémiologie graphique, 1967).
  • Tufte, E. The Visual Display of Quantitative Information (Graphics Press, 1983).
  • Cleveland, W. S. and McGill, R. "Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods." Journal of the American Statistical Association 79, no. 387 (1984).
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.1 (2018).

Information design

May 19, 2026

·

5 min read

Data Visualization Principles You Can Use Tomorrow

How to pick the right visual variable and chart type, cut what doesn't carry data, and make charts readable for everyone.

Most bad charts aren't a creativity problem. They're a criteria problem. We pick the chart that looks good instead of the one that communicates, and we fill empty space with text instead of building the visual that would make the text unnecessary.

The good news is that criteria can be learned. Here are the principles that do most of the work, in the order you'd use them: choose the visual variable, choose the chart, strip it down, and make sure everyone can read it.

Start with the visual variables

In 1967, the French cartographer Jacques Bertin published Sémiologie graphique, where he identified the "visual variables": the graphic properties the eye can use to read differences in data. Counting position as one, there are seven.

  • Position: Best for: Any type of data; the most accurate; Example: X and Y axes in a scatter plot
  • Size / length: Best for: Quantities (magnitude); Example: A longer bar means a bigger number
  • Color hue: Best for: Categories; Example: Blue for water, green for land
  • Color value (light to dark): Best for: Quantities or ordered data; Example: Darker means more concentration
  • Shape: Best for: Categories; Example: Circle vs. triangle vs. square
  • Orientation: Best for: Very limited; use with care; Example: A direction arrow on a wind map
  • Texture: Best for: Categories, when color isn't available; Example: Dot patterns in black and white print

Use the most accurate variable you can

Not all variables are read equally well. In a series of perception experiments published in 1984, statisticians William Cleveland and Robert McGill found that people judge values most accurately from position along a common scale, then length, and do noticeably worse with area and color intensity.

So for quantities, the ranking to remember is: position, then length, then area, then color. Reach as high on that list as your layout allows.

For categories, color hue is usually the fastest to tell apart, and shape holds up best when color fails (grayscale printing, color vision deficiency). Using both together is often the safest option. Texture is the fallback when you can't use color at all.

Two consequences:

  • If you use color to show magnitude ("how much"), use a sequential gradient from light to dark, not a set of unrelated colors.
  • If you use area to show differences between categories, expect readers to misjudge them.

Choose the chart by the relationship

Pick the chart type for the relationship between the data points you want to show, and let looks come second.

  • Comparison between categories: Use: Horizontal bars, dot plot, lollipop; Avoid: Pie, donut
  • Change over time: Use: Line; area if values accumulate; Avoid: Grouped bars for many periods
  • Part of a whole: Use: Waffle chart, treemap, unit chart; Avoid: Pie, donut
  • Distribution of values: Use: Strip plot, histogram, beeswarm; Avoid: Histograms with arbitrary bins
  • Relationship between two variables: Use: Scatter plot, bubble chart; Avoid: Line chart (unless x is time)
  • Flow or transfer: Use: Sankey, alluvial; Avoid: Process diagram made of text
  • Hierarchy or composition: Use: Treemap, sunburst (carefully); Avoid: Text-only org chart

Pies and donuts land in the "avoid" column twice. They can work with two or three slices, but people compare angles and areas poorly, so a simple bar chart usually does the same job better.

Before choosing, answer three questions:

  1. What relationship am I showing: comparison, distribution, proportion, trend or connection?
  2. How many categories or series do I have? Past five or six, legibility starts to suffer.
  3. Where will it be read: on a screen, in print, or projected in a room?

Those three answers rule out most of the wrong options before you start.

Strip it down: the data-ink ratio

Edward Tufte introduced the data-ink ratio in The Visual Display of Quantitative Information (1983): the ink that represents data divided by the total ink in the graphic. The point is to make every visual element earn its place by encoding something, not to be minimal for the sake of it.

Five common offenders:

1. Shadows. Does the shadow encode any data? No. Is the chart clear without it? Yes. Remove it. (The exception is a 3D map where height really is data.)

2. Decorative gradients. A gradient that only "looks nicer" adds noise. A gradient that shows intensity or direction can stay. Ask yourself: do the lightest and darkest points mean different things? If not, it's decoration.

3. Unnecessary borders and gridlines. White space separates better than a line. If you need a border to separate two elements, the real problem is probably the spacing.

4. Legends instead of direct labels. A legend makes the eye travel twice: chart, legend, back to the chart. A label placed right on the element removes the trip. Prefer direct labels whenever there's room.

5. Colors that encode nothing. Six bars in six different colors that all represent the same variable is color without a reason. One color, plus an accent for the data point that matters, is enough.

For every element, ask the one question that settles it:

If I remove this, do I lose information, or only decoration?

Make it readable for everyone

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. That's a large share of any audience, and designing for it tends to make charts clearer for everyone else too.

A short checklist:

  • Contrast. Meet WCAG AA levels: at least 4.5:1 for normal text and 3:1 for graphical elements people need to read the chart.
  • Don't rely on color alone. Add labels, patterns or shapes so the chart still works in grayscale.
  • Simulate. Run your palette through a color vision deficiency simulator before publishing.
  • Label your axes descriptively, with units.
  • Write alt text for charts published as images, stating the main finding, not just "bar chart".
  • Keep legends close to the data, or replace them with direct labels.
  • For interactive charts, make sure filters and tooltips work with a keyboard.

A word on tools

Nothing above depends on software. Whether you use a spreadsheet, a newsroom-style charting tool, an open-source chart generator or a full dashboard platform, choose by what the job needs: speed for a quick chart on a deadline, interactivity when readers need to explore the data themselves, and editable vector output when you're building an unusual form you'll finish by hand. Tools change every few years. The principles haven't changed much since 1983.

Try this: three sketches, one winner

Take one real dataset, such as enrollment by level over three years from any organization's annual report. On paper, not in software, sketch it three times using three different visual variables: position, length and color value, for example.

Show the three sketches to someone without saying a word, and ask which one they understood first. Keep that one. If you have to explain a chart for it to work, it doesn't work yet.

Further reading

  • Bertin, J. Semiology of Graphics (originally Sémiologie graphique, 1967).
  • Tufte, E. The Visual Display of Quantitative Information (Graphics Press, 1983).
  • Cleveland, W. S. and McGill, R. "Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods." Journal of the American Statistical Association 79, no. 387 (1984).
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.1 (2018).