generated from coulomb/repo-seed
tegwick
d5c1ca239d
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 <noreply@anthropic.com>
68 lines
2.4 KiB
XML
68 lines
2.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;">
|
|
<defs>
|
|
<!-- Clean, minimal month markers -->
|
|
<g id="month-template" style="display: none;">
|
|
<!-- Month separator line -->
|
|
<line x1="{{MONTH_X}}" y1="180" x2="{{MONTH_X}}" y2="200"
|
|
stroke="#d0d0d0" stroke-width="1"/>
|
|
<!-- Month label -->
|
|
<text x="{{MONTH_TEXT_X}}" y="220"
|
|
font-family="Arial, sans-serif" font-size="11"
|
|
fill="#666" text-anchor="start">{{MONTH_LABEL}}</text>
|
|
</g>
|
|
|
|
<!-- Central timeline bar -->
|
|
<g id="lane-template" style="display: none;">
|
|
<!-- Main timeline horizontal line -->
|
|
<line x1="{{LANE_X}}" y1="190" x2="{{LANE_WIDTH}}" y2="190"
|
|
stroke="#333" stroke-width="3" stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<!-- Item with anchor line -->
|
|
<g id="item-template" style="display: none;">
|
|
<!-- Vertical anchor line from timeline to item -->
|
|
<line x1="{{ITEM_X}}" y1="190" x2="{{ITEM_X}}" y2="{{ITEM_Y}}"
|
|
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
|
|
|
<!-- Circle marker at item position -->
|
|
<circle cx="{{ITEM_X}}" cy="{{ITEM_Y}}" r="4"
|
|
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
|
|
|
<!-- Item text -->
|
|
<text x="{{ITEM_X}}" y="{{ITEM_Y}}"
|
|
font-family="Arial, sans-serif" font-size="12"
|
|
fill="#333" text-anchor="middle" dy="-10">
|
|
<tspan font-weight="600" fill="#4a90e2">{{ITEM_ID}}</tspan>
|
|
<tspan dx="4">{{ITEM_TITLE}}</tspan>
|
|
</text>
|
|
</g>
|
|
</defs>
|
|
|
|
<!-- Clean white background -->
|
|
<rect width="100%" height="100%" fill="#ffffff"/>
|
|
|
|
<!-- Title -->
|
|
<text x="40" y="40" font-family="Arial, sans-serif" font-size="24"
|
|
font-weight="300" fill="#333">Timeline View</text>
|
|
<text x="40" y="65" font-family="Arial, sans-serif" font-size="13"
|
|
fill="#999">Clean timeline visualization without swimlanes</text>
|
|
|
|
<!-- Timeline label -->
|
|
<text x="40" y="190" font-family="Arial, sans-serif" font-size="12"
|
|
font-weight="600" fill="#666" text-anchor="end" dominant-baseline="middle">Timeline</text>
|
|
|
|
<!-- Month markers -->
|
|
<g class="months">
|
|
{{MONTHS}}
|
|
</g>
|
|
|
|
<!-- Timeline bar and items -->
|
|
<g class="timeline-content">
|
|
{{LANES}}
|
|
</g>
|
|
|
|
<!-- Subtle border -->
|
|
<rect x="2" y="2" width="calc(100% - 4)" height="calc(100% - 4)"
|
|
fill="none" stroke="#e0e0e0" stroke-width="1" rx="4"/>
|
|
</svg>
|