Cronologia Raiz: Historial dos Espetáculos da Companhia
Uma visualização em camadas das produções da companhia: teatro caminheiro (topo, horizontal), espetáculos de embalar (meio, vertical) e criações raiz (fundo, vertical). Cada camada representa um género de espetáculo, com ramos e nós marcando estreias, apresentações e conclusões, todos alinhados cronologicamente de 2002 até hoje.
- 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
Especificação Técnica da Visualização
Este plotter renderiza uma cronologia estratificada como gráfico SVG, com três camadas: Teatro Caminheiro (horizontal, topo), Espetáculos de Embalar (vertical, meio) e Criações Raiz (vertical, fundo). Cada camada segue uma topologia e codificação espacial distinta, parametrizada e orientada a dados.
Secção 0: SVG & Sistema de Coordenadas
O SVG é escalável e utiliza 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. O atributo viewBox garante responsividade e adaptação a qualquer ecrã.
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 o Teatro Caminheiro, a data de estreia define o X; para os espetáculos de Embalar e Raiz, define o Y. As relações temporais são preservadas visualmente em todas as camadas.
Secção 2: Topologia de Ramos & Nós
Teatro Caminheiro: Apenas nós (círculos) sobre a linha horizontal, alternando entre cima/baixo para evitar sobreposições.
Espetáculos de Embalar: Ramos polilinha alternados (esquerda/direita) a partir do eixo central, estendendo-se verticalmente da estreia até à última apresentação, com nós em cada data.
Criações Raiz: Idêntico aos espetáculos de Embalar, mas com parametrização distinta de cor e espaçamento.
x_offset(i) = (-1)i × (espaçamento × multiplicador)
Secção 3: Cores & Parametrização
As cores do eixo, ramos e nós são definidas por arrays de configuração para cada género. Paletas distintas garantem a separação visual e identidade cromática. A parametrização permite temas, acessibilidade e adaptação futura.
Secção 4: Responsividade & Escalabilidade
A largura e altura do SVG são calculadas dinamicamente a partir do número de espetáculos e da configuração. O sistema adapta-se a qualquer volume de dados, mantendo a legibilidade e proporção. O viewBox permite a exportação em alta resolução e o uso em múltiplos dispositivos.
Secção 5: Complexidade Computacional
O algoritmo executa em múltiplas fases: (1) Consulta SQL para obter os espetáculos, (2) Ordenação por data, (3) Layout alternando lados e calculando posições, (4) Renderização SVG de ramos e nós. A ordenação e o layout dominam o tempo total. O(n log n) para ordenação, O(n) para layout e renderização.
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: Dos Dados à Visualização
Fluxo: BD → Consulta → Ordenação → Layout → Cores → SVG. Cada etapa é modular e parametrizada. O sistema permite alterar paletas, lógica de alternância ou layout sem afetar as restantes etapas.
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 a marcar as datas