Interactive horizontal timeline displaying historical events. Made to illustrate the exponential rate of human progress within a larger presentation.

See this page for an alternative, significantly more complete, take on a historical tech tree.

The code is organized as follows:

• index.html - HTML structure
• style.css - Styling and layout
• script.js - Timeline class and interactions
• scroll.js - Dynamic scroll speed scaling for adaptive navigation
• scrollbar.js - Custom scrollbar with chronological position mapping
• data.js - All timeline data and configuration

It features specialized navigation to smooth out the historical experience:

• Events positioned using deterministic formula based on chronological date and collision detection
• Dynamic speed scaling accelerates through empty millennia for consistent navigation
• Custom scrollbar position maps to historical dates (not pixels) with event indicators and click-to-jump navigation

Display: Open index.html in browser

Add content: Edit data.js arrays:

• Event types: name, fullName, color
• Events: type, date, title, description, optional hidden: true, optional link: "URL", optional undated: true
• Era titles: type: "title" for section headers

Configure: Edit data.js config object:

• fontFamily: CSS font family for timeline text
• baseFontSize: Base font size for timeline elements
• defaultTitle: Title displayed before scrolling begins
• targetScrollDistance, scrollFactor: Control scrolling speed adaptation
• eventSpacing: Minimal distance between text blocks
• fixedSizeScrollbar: When true, scrollbar thumb uses fixed 20px size instead of proportional sizing

• double-check all links
• eventSpacing (in data.js) should be a minimum space between event, the actual margin would be computed from the eventspacing minus the current minimum space between two events on the same side of the bar (computed based on their date difference). That way the visible margin is less a function of the spacing between the events picked.