ChronoGraph

Interactive historical graph explorer powered by Wikidata.

Enter any year and ChronoGraph fetches real historical data — births, deaths, events, and organizations — then renders them as an animated radial graph against a living star-field background. Click any node to read its full Wikidata entry and jump to Wikipedia.

---

Tech stack

Layer	Technology
UI framework	React 19 + TypeScript
Graph / animation	D3.js v7
Styling	Tailwind CSS v3
Build tool	Vite
API / backend	Vercel Serverless Functions (Node.js)
Data source	Wikidata SPARQL endpoint
HTTP client	Axios
Routing (future)	React Router DOM

---

Features

• 🌌 Canvas-based animated star-field background (200 twinkling particles)
• 🔭 Radial D3 graph with category-coloured nodes and burst entry animation
• 🗓️ Supports any year including BCE (e.g. -44 for 44 BCE)
• 🔍 Per-category filter pills (Births, Deaths, Events, Organizations, Publications, Wars, Discoveries)
• 📖 Slide-in event detail panel with Wikipedia deep-link
• 📱 Responsive — bottom-sheet panel and compact layout on mobile
• ⚡ 24-hour CDN cache on the serverless function; no auth required

---

Run locally

# 1. Install dependencies
npm install

# 2. Start the Vite dev server
npm run dev

The app is served at http://localhost:5173.

Note — API in development: The serverless function at api/year.js runs on Vercel's edge infrastructure. For local development, install the Vercel CLI and run vercel dev instead of npm run dev if you want live SPARQL calls. npm run dev alone still works — the Vite proxy will 404 on /api/*, but you can mock responses or point the client at a deployed preview URL by setting VITE_API_BASE in a .env.local file.

---

No API keys required

ChronoGraph queries the public Wikidata SPARQL endpoint directly — no registration, tokens, or billing needed for the MVP.

---

Project structure

chronograph/
├── api/
│   └── year.js          # Vercel serverless function (SPARQL -> HistoricalEvent[])
├── src/
│   ├── api/
│   │   └── yearApi.ts   # Axios client wrapper
│   ├── components/
│   │   ├── SpaceBackground.tsx  # Canvas starfield
│   │   ├── Graph.tsx            # D3 radial graph
│   │   ├── SearchBar.tsx        # Landing/graph mode morphing search
│   │   ├── CategoryFilter.tsx   # Toggle pills
│   │   └── EventPanel.tsx       # Slide-in detail panel
│   ├── types/
│   │   └── index.ts     # HistoricalEvent, GraphNode, GraphLink, YearData
│   ├── App.tsx
│   └── main.tsx
├── vercel.json           # API rewrite rules
└── vite.config.ts

---

Deploy to Vercel

npm i -g vercel
vercel

Vercel auto-detects the api/ directory and deploys year.js as a serverless function. No additional configuration required.