Root Timeline: Company Show History

A layered visualization of the company productions: traveling shows (top, horizontal), rocking shows (middle, vertical), and root creations (bottom, vertical). Each layer represents a genre of show, with branches and nodes marking premieres, performances, and conclusions, all chronologically aligned from 2002 to today.

timeline period: 2002-04-02 (top) — 2026-04-15 (bottom)
total root shows: 17
total rocking shows: 15
total traveling shows: 17

Technical Specification of the Visualization

This plotter renders a stratified timeline as an SVG chart, with three layers: Traveling Shows (horizontal, top), Rocking Shows (vertical, middle), and Root Creations (vertical, bottom). Each layer follows a distinct topology and spatial encoding, fully parameterized and data-driven.

Section 0: SVG & Coordinate System

SVG is scalable and uses a 2D Cartesian coordinate system: (0,0) at the top-left, X increases to the right, Y increases downward. The canvas is vertically split into three bands, each with dynamic height based on the number of shows. The viewBox attribute ensures responsiveness and adaptation to any screen.

viewBox = 0 0 width height

SVG auto-adjusts to container

Stacking:
Top: Y=0–A
Middle: Y=A–B
Bottom: Y=B–end

Section 1: Time Axis & Linear Mapping

Time is mapped linearly to pixels. For Traveling Shows, the premiere date sets X; for Rocking and Root, it sets Y. Temporal relationships are visually preserved across all layers.

pixel = base + (date - min_date) × scale

Linear time-to-pixel transformation

Property: Global temporal alignment

Section 2: Branch & Node Topology

Traveling Shows: Only nodes (circles) on the horizontal line, alternating above/below to avoid overlap.
Rocking Shows: Alternating polyline branches (left/right) from the central axis, extending vertically from premiere to last performance, with nodes for each date.
Root Creations: Identical to Rocking, but with distinct color and spacing parameterization.

Branch: (center_x, y_premiere) → (branch_x, y_premiere) → (branch_x, y_last)

branch_x = center_x ± (spacing × multiplier)

Alternation: i mod 2 → side
x_offset(i) = (-1)ⁱ × (spacing × multiplier)

Section 3: Colors & Parameterization

Axis, branch, and node colors are set by configuration arrays for each genre. Distinct palettes ensure visual separation and chromatic identity. Parameterization allows themes, accessibility, and future adaptation.

color = config[genre][element]

Genre: Traveling/Rocking/Root; Element: axis/branch/node

Example: Axis: #3a2d1f, Branch: #4d3d2a, Node: #6b7b3e

Section 4: Responsiveness & Scalability

SVG width and height are calculated dynamically from the number of shows and configuration. The system adapts to any data size, maintaining legibility and proportion. viewBox enables high-resolution export and multi-device use.

SVG: dynamic width/height

Automatic adaptation

Property: Layout adapts to data and screen

Section 5: Computational Complexity

The algorithm runs in multiple phases: (1) SQL query to fetch shows, (2) Sorting by date, (3) Layout alternating sides and calculating positions, (4) SVG rendering of branches and nodes. Sorting and layout dominate total time. O(n log n) for sorting, O(n) for layout and rendering.

Sorting:

O(n log n)

Layout:

O(n)

SVG rendering:

O(n)

Total:

O(n log n)

Real example:
n=100, layout and rendering ≈ 100 iterations
Sorting: ~700 comparisons
Practical limit: ~10k shows per browser

Section 6: Integration: From Data to Visualization

Flow: DB → Query → Sorting → Layout → Colors → SVG. Each step is modular and parameterized. The system allows changing palettes, alternation logic, or layout without affecting other steps.

Data Flow:

DB → Query → Sorting → Layout → Colors → SVG

Example:
1. Input: event_id=42, type=Root
2. Query: fetch dates
3. Sorting: by premiere
4. Layout: left/right alternation
5. Colors: Root palette
6. SVG: final rendering
Result: polyline branch with nodes marking dates