generated from coulomb/repo-seed
Add TimelineSvg
83
TimelineSvg.md
Normal file
83
TimelineSvg.md
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
# 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
|
||||||
Reference in New Issue
Block a user