Dough's and Don'ts: The Game

Inspiration

California has the 4th largest economy in the world, yet 7.3 million residents live in poverty, 187,000 people are unhoused, and the state emits nearly 20x its fair share of CO2 per capita. The data exists, buried in reports and spreadsheets, but it never reaches people in a way that sticks. Doughnut Economics, a framework by Kate Raworth, reimagines the economy as a balance between two rings: a social foundation (the basics every person deserves: housing, health, food, education) and an ecological ceiling (the planetary boundaries we must not overshoot: climate, biodiversity, freshwater). The sweet spot between them, the green "doughnut," is the safe and just space for humanity. California desperately needs this lens. Not in a PDF. Not in a policy brief. In something citizens can actually feel. We wanted to build an experience where you don't just read that "99.9% of Californians live in counties above safe violent crime levels," you walk through it, pull a policy lever, and watch the doughnut heal. What It Does Doughs and Don'ts: The Game is a pixel-art interactive game meets data visualization, an interactive game where players explore California's 21 doughnut sectors and make real policy decisions. The Doughnut: The main menu presents a full interactive doughnut diagram with all 21 sectors: 12 social foundations (housing, health, education, food, equity, income and work, peace and justice, political voice, social cohesion, connectivity, energy, water and sanitation) and 9 ecological ceilings (climate change, biodiversity, air pollution, freshwater use, land use, chemical pollution, nitrogen and phosphorus loading, ocean acidification, ozone depletion). Every sector has a severity level, from SAFE (green) to CRITICAL (red). Click any wedge and a detailed panel reveals the real data: indicators, targets, shortfall/overshoot percentages, key facts, relevant legislation, and justice spotlights on who's most affected. The Game: Pick a persona (Explorer, Policymaker, Farmer, or Citizen) and drop into side-scrolling levels themed around specific sectors. Each persona unlocks different sectors: a Farmer can enter Freshwater Use, Food, and Land Use Change; a Policymaker unlocks Climate Change, Income and Work, and Peace and Justice. This isn't arbitrary. Perspective matters. The sectors you can influence depend on who you are in the system. Healing the Doughnut: Inside each level, players encounter evidence boards that surface real California statistics, and lever gates, which are decision points where you choose between policy options. Pull a lever, and the sector's severity actually decreases. Return to the main menu and watch the doughnut's red wedges shrink, replaced by green, a visual record of the healing you've done. Progress persists across sessions. How We Built It We kept the tech stack intentionally simple (React, TypeScript, Vite, and Canvas 2D) because our focus was on the art, flow, and feel of the experience. The doughnut visualization is drawn pixel-by-pixel on a canvas. The platformer runs on a custom game loop with its own gravity, collision, and camera systems. Sector data is sourced from real California datasets, normalized and structured into JSON files that feed both the visualization and the in-game evidence boards. D3.js handles data manipulation behind the scenes, but every visual, from the doughnut rings to the pixel-art characters to the particle effects, is hand-crafted. Challenges We Faced Mapping 21 real-world sectors into playable, meaningful game levels was the hardest design challenge. Each sector needed its own narrative, evidence, and policy levers, and the data had to be accurate, not gamified into meaninglessness. Balancing educational depth with gameplay flow required constant iteration. The persona-gating system also pushed us to think carefully: which roles should unlock which sectors, and why? We wanted the constraints to feel intentional, not frustrating, teaching players that systemic change requires different actors engaging different problems. On the technical side, building a full pixel-art platformer with physics, particle effects, a warp system, and a data-dense interactive doughnut, all on Canvas 2D without a game engine, meant debugging at the pixel level. Hit detection on wedge-shaped canvas regions, lerp-smoothed cameras, and persistence across 21 sector states all had their sharp edges. What We Learned Data visualization doesn't have to be passive. When you let people inhabit the data, walk through a level themed around California's housing crisis, pull a lever that represents a real policy, and watch the doughnut heal, the numbers stop being abstract. 65% housing cost burden becomes a world you've been in. We also learned that doughnut economics is a powerful storytelling framework. The dual-ring structure naturally creates tension (shortfall vs. overshoot) and a clear goal (find the green). It's the rare economic model that's also good game design.