Core evidence
Sea level, rainfall, disaster loss, affected persons, and crop yield form the core evidence chain.
Evidence and method
How the pressure chain is built
The method separates official climate and disaster evidence from supporting cost-of-living and real-life context. It treats the story as a pressure-chain interpretation, not a single-variable causation model.
Supporting context
CPI/inflation frames household pressure only. It is not treated as proof of direct causation.
Country comparison
Rankings use available reported totals and should not be read as a complete vulnerability measure.
Interpretation guardrail
The story shows connected pressure, not a single-variable attribution model.
Website build method
How the interactive website was built
I built the interactive website using HTML, CSS and JavaScript, with Chart.js, D3.js and Anime.js for the charts and animations. The final entry runs in the browser as a lightweight static website without a server-side application or database.
HTML5
Semantic HTML structures the story sections, navigation, country controls, evidence cards, charts, accessibility labels, and source documentation.
CSS
Custom CSS provides the dark visual theme, responsive layouts for desktop, tablet and mobile, map-marker positioning, transitions, and presentation styling.
JavaScript
Vanilla JavaScript handles navigation, country selection, data binding, interactive story states, scrolling behaviour, tooltips, animations, and responsive interactions.
Chart.js, D3.js and Anime.js
Chart.js is used for the interactive evidence charts, D3.js supports data-driven visualisation work, and Anime.js supports animation and motion across the storytelling experience.
Processed data files
The official source records were cleaned and standardised into browser-ready CSV, JSON, and JavaScript data files so the visualisations can load locally as part of the static site.
Animation and interaction
Browser APIs including requestAnimationFrame and IntersectionObserver are used for smooth chart reveals, scrolling effects, section activation, and the animated crop-yield comparison.
Pacific map
The country-evidence map uses a bundled static Pacific raster image. Country markers are HTML buttons positioned with percentage coordinates, with CSS and JavaScript providing selection and story interaction.
Static deployment
The finished entry is packaged as static HTML, CSS, JavaScript, images, and data assets, allowing it to be deployed directly to a static web host such as Cloudflare Pages.
Evidence principles
How to read this story
The visualisation combines official indicators with supporting context while keeping the limits of the evidence visible.
Official indicators
Sea level, rainfall, crop yield, direct disaster loss, and people directly affected form the core evidence base.
Supporting cost context
CPI and inflation provide household-cost context and are not presented as proof of direct climate-to-price causation.
Available records
Country comparisons use the records available in each dataset. Missing values do not mean that a country has no exposure.
Connected pressure
The story describes a plausible pressure chain across systems, not a single-variable attribution model.
AI usage statement
AI-supported implementation and refinement.
AI assistance was used for coding support, wording refinement, layout iteration, troubleshooting, and the creation of illustrative scene images. The illustrations are not presented as documentary photographs. Dataset selection, analysis, story framing, interpretation limits, design decisions, and validation remained human-directed.