Responsive data template
A map-led data story.
Pair a concise narrative with an interactive map, then use smaller grid regions for interpretation and documentation.
04sample sites
03content regions
01HTML file
Illustrative regional observations
Click a point to inspect its sample attributes
Primary
Secondary
Supporting content
Give each grid region one job
Short supporting blocks can explain what the map shows without competing with it.
Lead with the question
Use the opening panel for the purpose, scale, and essential measures. Readers should understand why the map matters before they interact.
Return to the mapFollow with a takeaway
Reserve a neighboring card for one finding, limitation, or prompt. Additional detail can live later in the reading sequence.
See template notesTemplate notes
A reusable composition
This example intentionally keeps its content generic. Replace the sample observations, headings, and short explanations while preserving the layout relationships. At smaller widths, every region stacks into a natural reading order and the map receives a stable viewport-relative height.