Approach · 2000s–present; information-design roots much earlier · International information design
Data-driven visual design
Let evidence shape the visual form.
What is Data-driven visual design?
Data-driven visual design uses observations or measurements to determine a composition’s structure. It may produce a conventional chart, an expressive visual essay, or a changing identity. The defining feature is a meaningful mapping between data and visual attributes, not the presence of a network diagram. This approach has deep roots in information design; the contemporary period brought interactive publishing, larger datasets, and more accessible tools. Its strongest work makes the source, uncertainty, and limits of the information visible alongside the pattern.
The story
Digital tools expanded what could be collected and visualized, but hand drawing remains equally valid. Dear Data shows how personal observation and carefully invented notation can produce a rich visual language without a dashboard or automated pipeline.
How do you recognise Data-driven visual design?
- Visual attributes mapped to explicit variables
- Legends that explain the encoding
- Repeated marks forming meaningful patterns
- Visible provenance, scope, and uncertainty
Colour, type, layout and material
- #F4EEDF
- #2457A6
- #D65A52
- #E7B848
Typography. Use readable numerals and clear units. Keep labels close to their marks, and distinguish annotation from data without making the legend feel secondary or optional.
Composition. Establish the comparison first, then choose the encoding. Reserve space for a legend, source, and uncertainty note. Use direct annotation to guide the first reading.
Materials. Datasets, field notes, hand-drawn marks, SVG, canvas, or printed diagrams. The material can be expressive, but the mapping must remain consistent and explainable.
Why does Data-driven visual design work?
Position, length, and contrast help readers compare information when used consistently. Dense patterns can encourage discovery but also invite false inferences. A visual impression of precision should never exceed the precision of the underlying observations.
The principle. The data should influence the form in a way a reader can understand. A beautiful chart earns its complexity by revealing a relationship that prose or a simpler graphic would hide. Editing and annotation are as creative as choosing the visual encoding.
Where it was used
Dear Data, Giorgia Lupi and Stefanie Posavec, 2014–2015. The designers exchanged weekly hand-drawn postcards visualizing observations from their lives, with legends that reveal the meaning of each mark.
- Editorial data stories
- Research communication
- Personal or organizational observation journals
What to avoid
- Decorative charts with invented values
- Unlabelled axes and missing sources
- Confusing correlation with explanation
Try it: a short exercise
Record one small behaviour for seven days. Draw each observation using a consistent notation, then ask someone else to decode it with only your legend. Revise the encoding where they misunderstand and annotate one surprising limitation in the data.
How do you prompt for Data-driven visual design?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create a data-driven [FORMAT] about [SUBJECT] for [AUDIENCE] using the supplied dataset only. State the variables, source, date range, and missing values. Choose a visual encoding that supports the intended comparison. Use a restrained palette, a clear legend, direct annotations, and visible uncertainty. If no data is supplied, request it or label every demonstration value as fictional. Do not fabricate evidence for aesthetic effect. Create an original composition, not a replica of a named artwork or brand. Explain three decisions that connect the result to this brief. Use supplied wording accurately; leave space for manually typeset text if text rendering is unreliable.
For an interface
Implement an accessible data story for [SUBJECT] and [AUDIENCE]. Use supplied data, document transformations, and provide a readable table alongside the chart. Include keyboard-accessible filters, explicit units, source links, and clear empty or missing-data states. Make tooltips supplementary rather than the only way to access values. Use animation only to explain a change, with an immediate static alternative. Use semantic HTML, responsive layouts, visible keyboard focus, labelled controls, and accessible contrast. Include loading, empty, error, and success states where relevant. Respect reduced-motion preferences. Use realistic supplied content, not generic placeholder marketing. Explain how the visual choices support the user’s task. Deliverable: [FORMAT].
Lineage
Draws on: Swiss / International Typographic Style, The New Typography, Generative design.