From d5c1ca239dfe994fda4fc7d78172bd1ce7f4f243 Mon Sep 17 00:00:00 2001 From: tegwick Date: Fri, 28 Nov 2025 03:39:17 +0100 Subject: [PATCH] feat: add clean timeline example without swimlanes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Created example-1 directory with minimalist timeline template that uses vertical anchor lines to connect items to a central horizontal timeline bar. This demonstrates an alternative visualization style without the swimlane-based layout. Features: - Clean template-v2.svg with vertical dashed anchor lines - Central horizontal timeline bar at y=190 - Items positioned above/below timeline with circle markers - Minimal styling with clean typography - 12-month timeline configuration - Sample data with milestones, development, and research items - Uses standard ITEM_ID and ITEM_TITLE placeholders Files: - template-v2.svg: Clean SVG template with anchor line design - project.json: Configuration for 12-month timeline - sample.csv: Sample timeline data with 14 items - style.css: Minimal CSS styling - output.svg: Generated timeline (for reference) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- example-1/output.svg | 379 ++++++++++++++++++++++++++++++++++++++ example-1/project.json | 16 ++ example-1/sample.csv | 15 ++ example-1/style.css | 73 ++++++++ example-1/template-v2.svg | 67 +++++++ 5 files changed, 550 insertions(+) create mode 100644 example-1/output.svg create mode 100644 example-1/project.json create mode 100644 example-1/sample.csv create mode 100644 example-1/style.css create mode 100644 example-1/template-v2.svg diff --git a/example-1/output.svg b/example-1/output.svg new file mode 100644 index 0000000..d7b84ed --- /dev/null +++ b/example-1/output.svg @@ -0,0 +1,379 @@ + + + + + + + + + + + + + + + + + Timeline View + Clean timeline visualization without swimlanes + + + Timeline + + + + + + + + Jan. 25 + + + + + Feb. 25 + + + + + März 25 + + + + + Apr. 25 + + + + + Mai 25 + + + + + Juni 25 + + + + + Juli 25 + + + + + Aug. 25 + + + + + Sept. 25 + + + + + Okt. 25 + + + + + Nov. 25 + + + + + Dez. 25 + + + + + Jan. 26 + + + + + + + + + + + + + + + + + + D1 + Research Phase + + + + + + + + + + + D2 + Prototype Development + + + + + + + + + + + D3 + Core Features + + + + + + + + + + + D4 + Integration Testing + + + + + + + + + + + D5 + Performance Optimization + + + + + + + + + + + + + + M1 + Project Kickoff + + + + + + + + + + + M2 + Requirements Complete + + + + + + + + + + + M3 + Design Review + + + + + + + + + + + M4 + Beta Release + + + + + + + + + + + M5 + Launch + + + + + + + + + + + + + + R1 + User Feedback Round 1 + + + + + + + + + + + R2 + Market Analysis + + + + + + + + + + + R3 + User Feedback Round 2 + + + + + + + + + + + R4 + Final User Testing + + + + + + + diff --git a/example-1/project.json b/example-1/project.json new file mode 100644 index 0000000..e157088 --- /dev/null +++ b/example-1/project.json @@ -0,0 +1,16 @@ +{ + "name": "Clean Timeline Example", + "description": "Minimalist timeline visualization without swimlanes, using vertical anchor lines to connect items to a central timeline bar", + "dataSource": "sample.csv", + "stylesheet": "style.css", + "svgTemplate": "template-v2.svg", + "settings": { + "timelineMonths": 12 + }, + "fieldMapping": { + "id": "ID", + "title": "Title", + "lane": "Category", + "due": ["Due Date"] + } +} diff --git a/example-1/sample.csv b/example-1/sample.csv new file mode 100644 index 0000000..c1f30a4 --- /dev/null +++ b/example-1/sample.csv @@ -0,0 +1,15 @@ +ID,Title,Category,Due Date +M1,Project Kickoff,Milestones,2025-01-15 +M2,Requirements Complete,Milestones,2025-02-28 +M3,Design Review,Milestones,2025-04-15 +M4,Beta Release,Milestones,2025-06-30 +M5,Launch,Milestones,2025-09-01 +D1,Research Phase,Development,2025-01-20 +D2,Prototype Development,Development,2025-03-10 +D3,Core Features,Development,2025-05-15 +D4,Integration Testing,Development,2025-07-20 +D5,Performance Optimization,Development,2025-08-25 +R1,User Feedback Round 1,Research,2025-02-15 +R2,Market Analysis,Research,2025-04-01 +R3,User Feedback Round 2,Research,2025-06-15 +R4,Final User Testing,Research,2025-08-15 diff --git a/example-1/style.css b/example-1/style.css new file mode 100644 index 0000000..112cf53 --- /dev/null +++ b/example-1/style.css @@ -0,0 +1,73 @@ +/* Clean Timeline Example - Minimal Styling */ + +body { + font-family: 'Arial', 'Helvetica', sans-serif; + margin: 0; + padding: 20px; + background-color: #f5f5f5; + color: #333; +} + +#svgContainer { + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + margin: 20px auto; + max-width: 100%; + overflow-x: auto; +} + +/* SVG styling enhancements */ +svg { + display: block; + max-width: 100%; + height: auto; +} + +/* Timeline elements */ +.months text { + font-family: 'Arial', sans-serif; + font-size: 11px; + fill: #666; +} + +.timeline-content line { + stroke: #333; +} + +.timeline-content circle { + cursor: pointer; + transition: r 0.2s ease; +} + +.timeline-content circle:hover { + r: 6; +} + +.timeline-content text { + font-family: 'Arial', sans-serif; + font-size: 12px; + fill: #333; +} + +.item-id { + font-weight: 600; + fill: #4a90e2; +} + +.item-title { + fill: #333; +} + +/* Responsive container */ +@media (max-width: 768px) { + body { + padding: 10px; + } + + #svgContainer { + padding: 10px; + margin: 10px auto; + } +} diff --git a/example-1/template-v2.svg b/example-1/template-v2.svg new file mode 100644 index 0000000..3174451 --- /dev/null +++ b/example-1/template-v2.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + Timeline View + Clean timeline visualization without swimlanes + + + Timeline + + + + {{MONTHS}} + + + + + {{LANES}} + + + + +