Worldlines · 世界线

A bilingual (English / 中文) atlas of world history in the style of Mondrian. It lets you compare regions and countries side by side: chapter by chapter, across 15,000 years at once, or one year at a time.

Live site: https://worldlines.geekplux.com/ (中文)

• Atlas. Eight chapters, from the first settlements to today. Each lane is a region or a country you choose, so events on the same vertical line happened at about the same time. Country lanes also carry a strip showing which state held the place. You can filter by theme ("trace a thread"), zoom, and drag sideways.
• Long view. 26 places × 15,000 years, one block per state, dynasty, empire or colonial power. The countries you compare open into labelled rows, and the rest stay as thin strips. The states ruling in the frozen year are drawn in full colour.
• Year slice. Pick any year with the scrubber, a date mark or the ‹ › steps. Each place shows who ruled it, how far into that state's life the year falls, a to-scale strip of the states before and after, and nearby events. A side column lists what happened elsewhere at the same time.
• Event panel. Shows why an event mattered, "meanwhile, elsewhere…", who ruled each compared place that year, and the Wikipedia lead image (Commons files only).
• Search (/) covers events, countries and states. Alt+←/→ changes chapter, and Esc closes panels.
• Shareable links. English is the default; ?lang=zh opens the Chinese view (the browser's language is not used, and a visitor's own choice is remembered). The hash records the chapter, the open event, the year and the comparison set, e.g. /?lang=zh#c=oceans&e=tokugawa&y=1603&cmp=china,japan,britain.
• No build step. Plain HTML, CSS and JavaScript, with the content in four data files. A sibling of Art-isms and Dialectica.

Sister atlases

Three bilingual atlases on one Mondrian grid, built the same way: static files with no build step, content in { en, zh } data files, Cloudflare Workers, Google Analytics behind a consent bar. Each site's footer opens with a strip that links to the other two.

	Atlas	What it maps
	Art-isms · 艺术流派志 · code	40 art styles across 45,000 years, how each grew from the last, and three real works for each
	Worldlines · 世界线 · code	26 countries and 8 regions across 15,000 years, chapter by chapter or one year at a time
	Dialectica · 思辨谱 · code	72 schools and 204 thinkers across 8 traditions: who taught, read and argued with whom

Made by GeekPlux. I built these atlases out of my own curiosity, mainly to learn from them myself.

Run it locally

python3 -m http.server 8000 --directory public
# then visit http://localhost:8000

npx wrangler dev also works. Event images load from Wikipedia, so they need a connection; without one, each panel shows a Mondrian plate instead.

Project structure

public/                 everything that is deployed, and nothing else
  index.html            page skeleton, static copy, SEO tags, analytics setup
  assets/styles.css     all styles (paper, ink and De Stijl)
  assets/app.js         rendering, comparison, year slice, i18n, routing, consent bar
  data/core.js          chapters, regions, places, themes, polity kinds, learning notes
  data/polities.js      who held each place, from first states to today
  data/events.js        every hinge point on the atlas (tier 1)
  data/events-more.js   finer-grained events (tiers 2 and 3), loaded after the first render
  _headers              cache and security headers for Cloudflare
  robots.txt, sitemap.xml, og.png, favicon.svg, apple-touch-icon.png, favicon-48.png
scripts/check-data.mjs  validates the data, the asset stamps and the counts quoted in the page
scripts/stamp-assets.mjs  writes ?v=<content hash> into index.html
wrangler.jsonc          Cloudflare Workers Static Assets config

Content model

Every piece of text is a { "en": "…", "zh": "…" } pair. Years are integers, and negative years are BCE.

An event (public/data/events.js):

{
  "id": "tokugawa", "chapter": "oceans", "year": 1603,      // year must fall inside the chapter
  "end": 1868,                                               // optional, for processes
  "date": { "en": "1603", "zh": "1603年" },
  "region": "east-asia", "place": "japan", "also": [],       // place may be null
  "theme": "state",                                          // state belief technology trade conflict society environment
  "title": { … }, "summary": { … }, "why": { … },
  "tags": "japan edo shogun 江户 幕府",
  "wiki": "Tokugawa shogunate"                               // English Wikipedia title, used for the image and "read more"
}

Finer-grained events live in public/data/events-more.js (window.WORLDLINES.moreEvents), in the same shape plus:

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗