Global Nature Watch Horizon
Installation and Usage
The steps below will walk you through setting up your own instance of the project.
Install Project Dependencies
To set up the development environment for this website, you'll need to install the following on your system:
- Node (see version in .nvmrc) (To manage multiple node versions we recommend nvm)
- pnpm
Initialize .env.local File
The project uses environment variables, which are set by default in the .env file. To customize these variables (e.g., to use a custom database), create a .env.local file at the root of the repository (cp .env.example .env.local) and modify as needed.
Required Environment Variables:
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN: Your Mapbox access token for map tiles
Variables are read by Vite at build time (see Env Variables and Modes). They keep the NEXT_PUBLIC_ prefix on purpose: vite.config.ts sets envPrefix: "NEXT_PUBLIC_", so only variables with that prefix reach the browser bundle.
Note: The .env.local file is configured to be ignored by Git to prevent accidental exposure of sensitive information.
Start local development server
If you use nvm, activate the desired Node version:
nvm install
Install Node modules:
pnpm install
Start development server:
pnpm dev
✨ You can now access the app at http://localhost:3000
Chart Debug Page
A hidden page at /chart-debug renders every chart and table widget type with representative dummy data. Use it to visually QA chart rendering, test new features, and catch regressions.
How to enable
Add the following to your .env.local:
NEXT_PUBLIC_ENABLE_DEBUG_TOOLS=true
Restart the dev server, then visit:
http://localhost:3000/chart-debug
Note: When the env var is missing or set to anything other than true, the route isn't registered at all (the page isn't even in the bundle), so /chart-debug shows the 404 page.
What's included
The debug page contains 17 fixtures covering:
- All chart types — bar, stacked bar, grouped bar, line, area, pie, scatter
- Tables — standard, large (50 rows for pagination testing), wide (8+ columns for scroll indicator testing)
- Edge cases — long category labels, empty data, multi-series with colorblind-safe dash patterns
- Domain color mappings — land cover, deforestation drivers, and generic fallback palette
- Provenance drawer — every fixture includes fake generation data (code, output, sources)
Use the filter buttons at the top to narrow by chart category (Bars, Line/Area, Pie, Scatter, Table, Edge cases).
What you can test
- Tooltips and axis labels
- Column sorting and pagination on tables
- Export dropdown (CSV download, PNG save)
- Chart ↔ table view toggle
- Expand/fullscreen dialog
- "View how this was generated" provenance drawer
- Horizontal scroll fade indicators on wide tables
- Empty state rendering
- Colorblind-safe palette and stroke dash patterns on multi-series charts
License
TBD
