Gridshift is an interactive view of how national electricity systems changed from 2005 through 2024. Every view follows the same point in time: the global generation mix, country map, transition field, and selected national grids.
- A synchronized time model shared across multiple visualizations
- Direct country selection with trails and side-by-side grid comparisons
- Three views of the transition: clean electricity, wind and solar growth, and power-sector emissions
- Compact static data delivery with no runtime API, database, or exposed credentials
- Accessible playback controls with reduced-motion support, keyboard controls, and visible missing data
Gridshift is intentionally exploratory rather than predictive. It makes changes in national electricity systems legible without assigning causes or forecasting what happens next.
Requires Node.js 20+ and pnpm 11.19.0.
pnpm install
pnpm devOpen http://localhost:4000. Before handing off a change, run:
pnpm test
pnpm lint
pnpm buildThe production build is a static export in out/.
The deployed application is browser-only. An offline Python build converts Ember's annual release and normalized country geometry into compact, validated files that the static Next.js application loads directly.
Ember annual CSV + country geometry
↓ offline Python build
Validated annual JSON partitions
↓ static hosting
Next.js + React + MapLibre browser app
Annual country records are stored as compact vectors whose fields are defined in the manifest. The browser loads all twenty annual partitions once, then interpolates between adjacent years so the map, charts, and country comparisons move together.
Place Ember's yearly_full_release_long_format.csv in data/raw/ember/ and normalized World Bank geometry in data/raw/world-bank/geometry.geojson, then run:
pnpm data:buildThe build writes:
- Annual 2005–2024 country partitions
- Exact global source series
- Country metadata and normalized geometry
- A manifest that records fields, coverage years, source, and license
- An ignored validation report at
data/processed/build-report.json
Raw source files and build reports are ignored. The validated browser assets under public/data/gridshift/ are intentionally tracked so the production site can build without downloading upstream datasets.
- Clean electricity includes Ember's clean-generation grouping.
- Wind and solar share is their combined share of electricity generation.
- Carbon intensity is reported in grams of CO2 per kilowatt-hour.
- The growth view compares power-sector emissions with the 2005 baseline; it does not explain why emissions changed.
- Missing observations remain missing rather than being treated as zero.
- Country boundaries are included for geographic navigation and do not imply a position on legal or political status.
- Gridshift presents annual national aggregates, not plant-level activity or bilateral electricity flows.
src/app/ Next.js entry point and visual system
src/components/ Map, transition field, timeline, and grid views
src/lib/ Electricity calculations and tests
src/types/ Shared data contracts
scripts/build_data.py Offline data normalization and validation
public/data/gridshift/ Deployable generated data
docs/gridshift-preview.jpg Repository preview image
.github/workflows/ Test, build, and Cloudflare deployment
- Electricity data: Ember Yearly Electricity Data, licensed under CC BY 4.0
- Boundary geometry: World Bank Official Boundaries
- Basemap: OpenFreeMap using OpenMapTiles and OpenStreetMap data
See THIRD_PARTY_NOTICES.md for the repository's attribution and licensing boundaries.
Pushes to main install dependencies, run tests and lint, create the static production build, and deploy out/ to the Cloudflare Pages project gridshift when its deployment credentials are available.
This repository is published as portfolio source, not as an open-source project. Original code and visual design are copyright Lucas Speciale and are provided under the terms in LICENSE. Third-party data and dependencies retain their respective licenses.