TimelineSvg

TimelineSvg is a lightweight, browser-based system for automatically generating timeline diagrams in SVG format. It visualizes project data, roadmaps, or other time-based information directly from CSV files — with no server, no installation, and fully offline operation.

How TimelineSvg Works

1) Project file controls configuration and assets

A project.json defines:

which CSV file to load
how fields are mapped (title, date, lane/group, ID, etc.)
which stylesheet to apply
which SVG template with macros to use
how many months the timeline should span

This makes each project fully customizable and portable.

2) CSV data is parsed into timeline items

TimelineSvg reads the CSV and extracts:

title
date
lane/group (e.g., team, category, workstream)
ID (used for internal/external view modes)

Invalid or incomplete rows are ignored automatically.

3) The timeline layout is computed automatically

Based on the dataset, TimelineSvg determines:

the earliest month to display
the number of months to render
horizontal position relative to the date
vertical position based on lane/group

This produces a clean, multi-lane time axis.

4) Rendering through SVG templates with macros

Templates define the visual appearance using placeholders:

{{MONTHS}} → month grid + labels
{{LANES}} → lane backgrounds, labels, and timeline items

TimelineSvg replaces these macros with generated SVG fragments, allowing full freedom in visual design — including branding, custom layouts, or graphical elements.

5) Interactive in the browser with SVG export

Through a simple HTML interface, users can:

load a project
replace CSV, CSS, or template files
switch between internal/external views
download the rendered timeline as a standalone SVG

The exported view always hides internal IDs.

What makes TimelineSvg unique

Entirely offline in any modern browser
No backend or build system required
Fully customizable visuals via CSS + SVG templates
Local data privacy (all data stays on the device)
Flexible data input with user-defined mappings
Ideal for roadmaps, portfolios, release plans, organizational timelines, and multi-lane schedules

xxx