assets/templates/editorial-infographic-examples.md

# Editorial Infographic Example Patterns

Use these as starting patterns, not finished layouts. Adapt scale, density, typography, annotation, and mobile behavior to the actual dataset.

## Before/After Transformation

Before:
- Topic title: "Appointments by Setting"
- Five unrelated hues.
- Detached legend repeats category labels.
- No explanation of why one value matters.

After:
- Insight title: "Community clinics grew fastest after the policy change"
- Neutral bars for context, one accent bar for the claim.
- Direct labels at bar ends.
- One callout connects the outlier to the policy timing.
- Source and caveat below the figure.

## Annotated Trend

- Use one emphasized line for the main series.
- Show comparison context in neutral ink.
- Label line ends directly.
- Annotate the turning point, threshold, or exception.
- Keep hover for detail, not for the main story.

## Infographic Panel Sequence

Panel 1: What changed?
- One dominant metric or chart.

Panel 2: Where did it change most?
- Sorted bars, map, or small multiples.

Panel 3: Why might it have changed?
- Annotated event, policy, mechanism, or caveat.

Panel 4: What should the reader remember?
- Compact recap with source note and uncertainty.

## Art-Directed Interactive Story

Lead:
- Full-width visual scene or substrate, not a grid of chart cards.
- Insight title over or adjacent to the evidence.
- One visible data layer and one annotation that names the claim.

Scroll or step sequence:
- Scene 1 establishes the subject and scale.
- Scene 2 reveals the key comparison or mechanism.
- Scene 3 adds context, exception, or uncertainty.
- Scene 4 resolves to the final claim and source note.

Motion:
- Use one named purpose per transition: reveal, move, accumulate, compare, transform, zoom, rotate, or highlight.
- Keep first and final frames meaningful as still images.
- Provide a reduced-motion version with key frames or numbered steps.

## Generated Object Marks

- Use transparent-background objects when physical pieces make units tangible.
- Keep labels, values, source notes, and annotations outside the generated image so they remain editable.
- Use consistent angle, lighting, and scale across generated assets.
- Add a direct label and value near each object; do not rely on hover for the main comparison.

## Illustrated Substrate

- Draw or generate the room, device, vehicle, map, machine, or object first.
- Attach data callouts to the parts that carry meaning.
- Use one accent color for additions, risk, flow, or focus.
- Keep the substrate quiet enough that labels remain legible.

## 3D or Camera-Led Surface

- Use only when depth or a multiaxis surface is intrinsic to the evidence.
- Define camera states as annotations: overview, ridge, valley, recovery, comparison.
- Avoid 3D for ordinary categorical comparison.
- Keep a static orthographic or small-multiple fallback for accessibility and export.

## Small Multiples

- Repeat the same scale.
- Keep panel titles short and insight-bearing.
- Use one highlight if a panel is the lead example.
- Avoid a legend if panel labels or direct labels can carry identity.
- Stack panels vertically on mobile.

## Mobile-Friendly Layout

Desktop:
- Title, subtitle, chart, callouts placed near evidence.

Mobile:
- Title and subtitle stay above the chart.
- Chart simplifies to fewer ticks and direct end labels.
- Dense callouts become numbered notes below the chart.
- Source and caveat remain visible.

## Accessibility Pattern

- Alternative text summarizes the chart type, main takeaway, trend/ranking, and caveat.
- Color is backed by label, position, stroke style, pattern, or text.
- Data table or download is linked when feasible.
- Annotations are included in the accessible summary.