Dot Matrix Chart

Description

A dot matrix chart represents a total population as a grid of uniformly sized dots, where each dot stands for one unit (or a fixed number of units). Dots are colored or shaped to indicate which group or category they belong to, making the chart effective for showing part-to-whole relationships. A classic example is a 10x10 grid of 100 dots showing what percentage of a population falls into different segments.

The power of the dot matrix lies in its concreteness: each dot is a countable, discrete entity, which makes proportions feel tangible rather than abstract. Research in risk communication has shown that icon arrays (a close relative) help people understand probabilities more accurately than pie charts or plain percentages, because they preserve the sense of individual units within a whole.

Dot matrices can be arranged in a strict rectangular grid or in a more free-form layout. The strict grid is easier to count and compare, while free-form arrangements can be used for artistic or narrative effect. Color is the primary encoding channel, so the chart works best with a small number of groups (2-5) to avoid visual clutter.

Dot Matrix Chart — 100 dots showing device usage proportions

When to Use

Showing what proportion of a whole belongs to each category (e.g., 42 out of 100 users)
Communicating risk or probability in a concrete, countable way
Comparing two or more part-to-whole breakdowns side by side
Infographics and presentations aimed at general audiences

When NOT to Use

When there are many groups (>5) — colors become hard to distinguish
When exact percentages to decimal precision are required — use a table or annotated bar chart
For time series data — use a line graph or area graph
When the total count is very large (>500 dots) — dots become too small to distinguish

Anatomy

Dots: Uniformly sized circles arranged in a grid. Each dot represents one unit.
Grid layout: A rectangular arrangement (e.g., 10x10 for 100 units, 10x5 for 50 units).
Color encoding: Each dot is colored by its category membership.
Legend: Maps colors to category names and optionally shows counts or percentages.
Grid lines or gaps: Optional spacing between rows or sections to aid counting.

Variations

Waffle chart: Replaces circular dots with square cells in a grid, giving a cleaner, tile-like appearance.
Icon array: Uses meaningful icons (people, houses, etc.) instead of abstract dots.
Animated dot matrix: Dots transition between arrangements to show how the composition changes over time or scenarios.
Grouped dot matrix: Separate grids for different groups placed side by side for comparison.

Code Reference

// Observable Plot - 10x10 dot matrix
Plot.plot({
  marks: [
    Plot.dot(
      Array.from({ length: 100 }, (_, i) => ({
        x: i % 10,
        y: Math.floor(i / 10),
        group: i < 40 ? "A" : i < 75 ? "B" : "C"
      })),
      { x: "x", y: "y", fill: "group", r: 8, tip: true }
    )
  ],
  x: { axis: null },
  y: { axis: null },
  color: { legend: true }
})