A OLIVEIRA MILENAR > Teatro e Marionetas de Mandrágora
We are currently translating this platform into English. Please note that some features and translations are not yet finalized or fully operational. We would greatly appreciate your feedback, including suggestions for new features or bug reports, at admin@marionetasmandragora.pt.
49 shows | 281 collaborators
#238 #210 #166 #138 #139 #128 #101 #86 #58 #59 #3 #9 #2 #14 #1 #34 #126 #326 #140 #299 #337 #66 #289 #91 #269 #15 #211 #6 #156 #85 #239 #10
  • timeline period: 2002-04-02 (top) — 2026-04-15 (bottom)
  • total root creations: 17
  • total rocking shows: 15
  • total traveling theatre: 17
  • total collaborators: 281

Technical Specification of the Olive Tree Visualization

The OliveTreePlotter renders a stratified SVG timeline with three genre layers: Traveling Theatre (horizontal, top, nodes only), Rocking Shows (vertical, middle, lateral branches), and Root Creations (vertical, bottom, parallel branches). Each layer uses a distinct spatial encoding and is fully data-driven. Collaborators (company members) are shown as vertical lines in the root forest, colored by area.

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 and the selected end year. 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 Theatre, the premiere date sets X (horizontal position, nodes only); for Rocking Shows and Root Creations, it sets Y (vertical position, branches and nodes). All genres are temporally aligned and filtered by the selected end year.

pixel = base + (date - min_date) × scale
Linear time-to-pixel transformation
Property: Global temporal alignment

Section 2: Layer Topology

Traveling Theatre: Only nodes (circles) on the horizontal line, one per show.
Rocking Shows: Alternating lateral branches (left/right) from the central vertical axis, with nodes for each date.
Root Creations: Parallel vertical branches ("forest"), each from the global start to the last performance, with two-tone coloring for pre-premiere and active period.
Collaborators: Each collaborator is represented by a vertical line in the root forest, colored by area. The number of collaborators and areas is shown above.
Note: Collaborators are not referenced by year or position in the timeline.

Rocking: (center_x, yp) → (branch_x, yp) → (branch_x, ylast)
Root: (branch_x, ystart) → (branch_x, yp) → (branch_x, ylast)
branch_x = start_x + (index × spacing)
Root Coloring:
ystart to yp: #3a2d1f (dark)
yp to ylast: #5e4d3b (medium)

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: #5e4d3b, Node: #6b7b3e

Section 4: Responsiveness & Scalability

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

SVG: dynamic width/height
Automatic adaptation
Property: Layout adapts to data, year, and screen

Section 5: Computational Complexity

The algorithm runs in multiple phases: (1) SQL query to fetch shows and collaborators, (2) Sorting by date, (3) Layout alternating sides and calculating positions, (4) SVG rendering of branches, nodes, and collaborator lines. 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
^