A OLIVEIRA MILENAR > Teatro e Marionetas de Mandrágora
49 espetáculos | 281 colaboradores
#238 #210 #166 #138 #139 #128 #101 #86 #58 #59 #3 #9 #2 #14 #1 #85 #211 #269 #239 #156 #126 #299 #6 #34 #15 #140 #289 #337 #326 #66 #10 #91
  • período da cronologia: 2002-04-02 (topo) — 2026-04-15 (fundo)
  • total de criações raiz: 17
  • total de espetáculos de embalar: 15
  • total de teatro caminheiro: 17
  • total de colaboradores: 281

Especificação Técnica da Visualização Oliveira

O OliveTreePlotter desenha uma cronologia SVG estratificada com três camadas de género: Teatro Caminheiro (horizontal, topo, só nós), Espetáculos de Embalar (vertical, meio, ramos laterais), e Criações Raiz (vertical, fundo, ramos paralelos). Cada camada usa uma codificação espacial distinta e é totalmente orientada a dados. Os colaboradores (membros da companhia) são mostrados como linhas verticais na floresta raiz, coloridas por área.

Secção 0: SVG & Sistema de Coordenadas

O SVG é escalável e usa um sistema de coordenadas cartesianas 2D: (0,0) no canto superior esquerdo, X aumenta para a direita, Y aumenta para baixo. O canvas é dividido verticalmente em três faixas, cada uma com altura dinâmica baseada no número de espetáculos e no ano final selecionado. O atributo viewBox garante responsividade e adaptação a qualquer ecrã.

viewBox = 0 0 largura altura
SVG ajusta-se automaticamente ao contentor
Empilhamento:
Topo: Y=0–A
Meio: Y=A–B
Fundo: Y=B–fim

Secção 1: Eixo Temporal & Mapeamento Linear

O tempo é mapeado linearmente para pixels. Para Teatro Caminheiro, a data de estreia define X (posição horizontal, só nós); para Espetáculos de Embalar e Criações Raiz, define Y (posição vertical, ramos e nós). Todos os géneros são alinhados temporalmente e filtrados pelo ano final selecionado.

pixel = base + (data - data_min) × escala
Transformação linear de tempo para pixel
Propriedade: Alinhamento temporal global

Secção 2: Topologia das Camadas

Teatro Caminheiro: Apenas nós (círculos) na linha horizontal, um por espetáculo.
Espetáculos de Embalar: Ramos laterais alternados (esquerda/direita) a partir do eixo vertical central, com nós em cada data.
Criações Raiz: Ramos verticais paralelos ("floresta"), cada um do início global até à última apresentação, com coloração em dois tons para pré-estreia e período ativo.
Colaboradores: Cada colaborador é representado por uma linha vertical na floresta raiz, colorida por área. O número de colaboradores e áreas é mostrado acima.
Nota: Colaboradores não são referenciados por ano ou posição na cronologia.

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)
Coloração Raiz:
ystart até yp: #3a2d1f (escuro)
yp até ylast: #5e4d3b (médio)

Secção 3: Cores & Parametrização

As cores dos eixos, ramos e nós são definidas por arrays de configuração para cada género. Paletas distintas garantem separação visual e identidade cromática. A parametrização permite temas, acessibilidade e adaptação futura.

cor = config[género][elemento]
Género: Caminheiro / Embalar / Raiz; Elemento: eixo / ramo / nó
Exemplo: Eixo: #3a2d1f, Ramo: #5e4d3b, Nó: #6b7b3e

Secção 4: Responsividade & Escalabilidade

A largura e altura do SVG são calculadas dinamicamente conforme o número de espetáculos, colaboradores e configuração. O sistema adapta-se a qualquer quantidade de dados e ano final selecionado, mantendo legibilidade e proporção. O viewBox permite exportação em alta resolução e uso em múltiplos dispositivos.

SVG: largura/altura dinâmicas
Adaptação automática
Propriedade: Layout adapta-se aos dados, ano e ecrã

Secção 5: Complexidade Computacional

O algoritmo executa em múltiplas fases: (1) Consulta SQL para obter espetáculos e colaboradores, (2) Ordenação por data, (3) Layout alternando lados e calculando posições, (4) Renderização SVG de ramos, nós e linhas de colaboradores. Ordenação e layout dominam o tempo total. O(n log n) para ordenação, O(n) para layout e renderização.

Ordenação:
O(n log n)
Layout:
O(n)
Renderização SVG:
O(n)
Total:
O(n log n)
Exemplo real:
n=100, layout e renderização ≈ 100 iterações
Ordenação: ~700 comparações
Limite prático: ~10k espetáculos por navegador

Secção 6: Integração: Do Dado à Visualização

Fluxo: BD → Consulta → Ordenação → Layout → Cores → SVG. Cada etapa é modular e parametrizável. O sistema permite alterar paletas, lógica de alternância ou layout sem afetar as restantes etapas.

Fluxo de Dados:
BD → Consulta → Ordenação → Layout → Cores → SVG
Exemplo:
1. Entrada: event_id=42, tipo=Raiz
2. Consulta: obtém datas
3. Ordenação: por estreia
4. Layout: alternância esquerda/direita
5. Cores: paleta Raiz
6. SVG: renderização final
Resultado: ramo polilinha com nós marcando datas
^