Pictogram Chart

Description

A pictogram chart uses repeated icons or symbols arranged in rows or grids to represent quantities. Each icon corresponds to a fixed unit (e.g., one icon equals 10 people), and the total count of icons communicates the value for each category. The technique was pioneered by Otto Neurath and Gerd Arntz in the 1930s under the ISOTYPE (International System of Typographic Picture Education) system, and it remains one of the most accessible chart forms for general audiences.

Pictograms leverage the concreteness of icons to make data immediately relatable. A chart about car sales using car icons, or a chart about population using person icons, creates a visceral connection between the data and its real-world subject. This makes pictograms especially effective in journalism, public health communication, infographics, and educational materials where the audience may not be chart-literate.

The trade-off is precision: because values are discretized into whole icons (or partially filled icons for remainders), exact values are harder to read than in a bar chart. Pictograms work best when approximate comparison is sufficient and emotional engagement or memorability is a priority.

When to Use

• Communicating quantities to a broad, non-technical audience
• Making data emotionally engaging or memorable through concrete icons
• Showing simple comparisons across a small number of categories (2-6)
• Infographics, dashboards, and reports where visual appeal matters

When NOT to Use

• When precise value comparison is essential — use a bar chart
• When there are many categories or large value ranges — the icon count becomes unwieldy
• When the data has decimal precision that matters — pictograms discretize values
• For time series or trend data — use a line graph

Anatomy

• Icons (symbols): Repeated glyphs, each representing a fixed quantity. All icons are the same size.
• Rows or columns: Icons arranged per category, either horizontally or in a grid.
• Legend / unit label: A note explaining what each icon represents (e.g., “each icon = 100 people”).
• Category labels: Text identifying each row or group of icons.
• Partial icon: An icon filled proportionally to represent a remainder (e.g., half-filled for half a unit).

Variations

• Grid pictogram: Icons arranged in a fixed grid (e.g., 10x10) with a subset highlighted to show a proportion, commonly used for risk communication.
• Stacked pictogram: Multiple icon types or colors within each row to show composition.
• Waffle chart: A close relative where a square grid is filled with colored cells to show part-to-whole relationships.
• Proportional pictogram: Icon size varies instead of count, though this sacrifices the ISOTYPE principle of uniform icons.

Code Reference

// Observable Plot - pictogram as a grid of dots
// Each dot represents ~5 units
Plot.plot({
  marks: [
    Plot.cell(
      data.flatMap(d =>
        Array.from({ length: Math.round(d.value / 5) }, (_, i) => ({
          category: d.category,
          col: i
        }))
      ),
      { y: "category", x: "col", fill: "steelblue", inset: 2, rx: 6, tip: true }
    )
  ],
  x: { axis: null },
  y: { label: null }
})