How our gallery pieces are built

The gallery has eight example infographics in four sections. None of them are templates or stock art. Each was drawn for this site from a small public dataset, and each page explains the design choices. Here is how they're made.

Small datasets on purpose

Every piece uses a handful of numbers: ten years of inflation, five years of life expectancy, one percentage of the world online. Small datasets keep the focus on design decisions, which is the point of the gallery. They are also easy to check. You can compare every value with the source in a few minutes.

We pick sources that publish their methods: U.S. statistics agencies, the CDC, Pew Research Center, the International Telecommunication Union, and standards bodies such as the W3C and ISO for the reference sheets.

Message first

Each piece starts the way our planning guide says it should: with one sentence. For the time use piece it was "Americans spend more of the day asleep than on anything else, and leisure comes second, ahead of work." The headline, the chart choice and the single highlight color all follow from that sentence.

Drawn from the data

The pieces are SVG graphics generated by a script from a table of numbers. The same table produces the chart, the alt text and the data table under it, so they can't disagree. When a source revises a figure, we change one number and rebuild.

Building them as SVG instead of exporting images has practical benefits. Text stays sharp at any zoom. The graphics follow your device's light or dark setting. And because each one has a title and a description inside the file, screen readers announce what the chart shows.

What every page includes

• The infographic, with its source line printed on it.
• Notes on the message and on each design decision.
• The data as an HTML table.
• A link to the original source.
• Links to the guides that explain the techniques used.

If you spot a number that doesn't match its source, please let us know.