Build a visual data story
Look at the page before the code
A visual story is a sequence of decisions.
As we inspect two or three examples, track the reader’s path: headline → evidence → explanation → limits.
Every strong story has an editorial spine
The finding, stated plainly.
One sentence that adds meaning.
Who made it, and when.
A chart or image that earns its space.
What to look for, plus the source.
How the numbers were made comparable.
Start with the skeleton
HTML = content.
CSS = design.
The browser reads the structure first, then applies the visual rules.
Keep the story folder boring.
the content and order
the look and layout
your visual asset
your source, if needed
index.html · the editorial layer
Give the reader a clear entry point.
Renters spend more of their income on housing.
The gap is widest in the largest cities.
By Your Name · 2026
Build a rhythm
Claim. Evidence. Explanation.
Paragraph: Start with what changed or who was affected.
Caption: tell readers what to notice. Source: name the dataset. Chart: your name.
After the visual: explain the takeaway in words; do not make the reader decode the chart alone.
Use rules to create hierarchy.
Large serif headline. Quiet sans-serif labels.
Let sections breathe. Resist filling every gap.
Use red once to direct attention.
A polished page still explains its limits.
Methodology note
Say where the data came from, what period it covers, how you cleaned it, and what it cannot show.
Alt text
Describe the chart’s takeaway, not just “image of chart.”
Use semantic HTML, sufficient contrast, visible focus states and captions that make sense without the image.
Does the page answer one question clearly?
Can someone find the main point in five seconds?
Does the layout still work on a narrow screen?
Do the source and analysis links open?
The best visual story is not the busiest one. It is the one a reader can trust.
Build one clear visual
data story webpage.
- Choose one defensible finding.
- Write a headline, dek and byline.
- Add one chart or image with alt text and caption.
- Include a methodology note and source link.
- Publish or save a shareable preview.