Visualização Bipartida: Colaboradores & Áreas

Visualização técnica que mapeia colaboradores às respetivas áreas através de um diagrama bipartido. Interativo, escalável e orientado a dados.

A mostrar 10 de 281 colaboradores

ÁreasColaboradores

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

Este plotter renderiza um diagrama bipartido como um gráfico SVG (Scalable Vector Graphics). Cada colaborador é conectado visualmente à sua área temática através de curvas suaves que fluem da esquerda para a direita. O sistema utiliza um espaço de coordenadas cartesianas onde X representa a posição horizontal (0 à esquerda, aumentando para a direita) e Y representa a altura vertical (0 no topo, aumentando para baixo).

Secção 0: SVG e Sistema de Coordenadas

SVG (Scalable Vector Graphics) é um formato que define gráficos usando primitivas geométricas (linhas, curvas, polígonos) em vez de pixels. É escalável — funciona em qualquer tamanho sem perder qualidade. O SVG usa um sistema de coordenadas cartesianas 2D: cada ponto é definido por um par (X, Y). A origem (0, 0) fica no canto superior esquerdo, X aumenta para a direita, e Y aumenta para baixo. Neste plotter, o SVG tem uma largura responsiva e altura calculada dinamicamente.

Exemplo de atributos do elemento SVG raiz

Parâmetros:
largura/altura = dimensões na página
viewBox = "x y largura altura" do espaço de desenho
Ao esticar/redimensionar, o conteúdo escala automaticamente
Coordenada (0,0): canto superior-esquerdo

Secção 1: Particionamento e Cardinalidade

A visualização começa agrupando todos os colaboradores nas suas áreas temáticas. Cada área forma uma partição — um grupo isolado que não se sobrepõe a outros. O tamanho de cada partição é a sua cardinalidade, simplesmente a contagem de quantos colaboradores pertencem àquela área.

A = {A₁, A₂, ..., A_m}

m = número total de áreas distintas

Exemplo:
Se há 3 áreas com 5, 8 e 3 colaboradores,
as cardinalidades são: |A₁| = 5, |A₂| = 8, |A₃| = 3

Secção 2: Cálculo de Dimensões Verticais

O SVG precisa saber a sua altura total. Isto é calculado usando a coluna direita (colaboradores) como referência. Cada item de texto ocupa uma altura fixa, e entre cada um há um pequeno espaço. A altura total do SVG torna-se a base para todo o sistema de coordenadas Y.

H_SVG = (n × h) + ((n − 1) × Δ)

n = colaboradores, h = altura texto (px), Δ = gap entre itens (px)

Exemplo concreto:
10 colaboradores, h=20px, Δ=8px
H_SVG = (10 × 20) + (9 × 8) = 272px
O SVG terá 272px de altura total

Secção 3: Alinhamento Vertical

A coluna esquerda (áreas) não começa no Y=0. Em vez disso, ela é centralizada verticalmente dentro do espaço total do SVG. Se a coluna direita for mais alta que a esquerda, há um espaço em branco no topo e na base da coluna esquerda — isto cria um efeito visual equilibrado e simétrico.

Y_start = (H_total − H_áreas) ÷ 2

Y inicial da coluna esquerda no sistema de coordenadas

Exemplo visual:
Altura total: 272px | Altura áreas: 150px
Espaço extra: 272 − 150 = 122px
Distribuído: 122 ÷ 2 = 61px acima, 61px abaixo

Secção 4: Curvas de Bézier Cúbica

Cada linha que conecta um colaborador à sua área é uma curva suave, não uma linha reta. Uma curva de Bézier cúbica é definida por 4 pontos: dois pontos finais (P₀ e P₃) e dois pontos de controle (P₁ e P₂) que determinam a curvatura. O parâmetro t varia de 0 a 1, traçando a curva suavemente do início ao fim. Pense nos pontos de controle como "magnetos" que puxam a curva. Os coeficientes binomiais (1, 3, 3, 1) vêm de (1−t+t)³, garantindo continuidade C¹.

B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃

t ∈ [0,1]: interpolação polinomial cúbica

Geometria dos Pontos de Controle:
P₀ = (0, y_área)
P₁ = (largura × 2/3, y_área) — afasta horizontalmente mantendo Y
P₂ = (largura × 1/3, y_colaborador) — aproxima do destino
P₃ = (largura, y_colaborador)
Efeito: Razão 2/3 e 1/3 cria curvatura fluida que não oscila

Secção 5: Distribuição Cromática

Cada área temática recebe uma cor única usando ondas senoidais. As três ondas (R, G, B) são defasadas por 120° (2π/3), criando uma rotação suave no espectro RGB. À medida que h aumenta de 0 a 1, você varre um arco-íris completo (vermelho → verde → azul → vermelho). A defasagem de 2π/3 radiano (120°) distribui as três componentes uniformemente no círculo cromático, evitando cores desaturadas consecutivas e maximizando contraste perceptual entre áreas adjacentes.

R = ⌊127·sin(2πh) + 128⌋

G = ⌊127·sin(2πh + 2π/3) + 128⌋

B = ⌊127·sin(2πh + 4π/3) + 128⌋

Exemplo prático:
h = i ÷ m (0 = área 1, 1 = última área)
Para 5 áreas: h = {0, 0.2, 0.4, 0.6, 0.8}
h=0: sin(0)=0 → RGB=(128,64,64) vermelho avermelhado
h=0.2: fases deslocadas → cores distintas
h=0.4: verde domina
Propriedade: Cada h gera cor única; vizinhos têm máximo contraste

Secção 6: Ordenação Lexicográfica

Todos os colaboradores são ordenados alfabeticamente por nome. Esta ordenação é determinística — sempre produz o mesmo resultado. Cada colaborador recebe um índice (0, 1, 2, ...), e este índice é usado para calcular a sua posição Y no SVG. Um colaborador no índice 5 aparecerá sempre na mesma posição vertical.

Y_{item_j} = j × (h + Δ)

Y na coluna direita para o j-ésimo colaborador ordenado

Exemplo prático:
h = 20px (altura do texto)
Δ = 8px (espaçamento)
Colaborador no índice 5:
Y = 5 × (20 + 8) = 140px
(medido a partir de Y=0 no topo)

Secção 7: Complexidade Computacional

O algoritmo executa em três fases: (1) Ordenação de n colaboradores, (2) Layout calculando m grupos e as suas posições Y, (3) Renderização gerando n curvas Bézier. A ordenação domina o tempo total. Isto significa que duplicar o número de pessoas piora o desempenho logaritmicamente. Usar quicksort ou mergesort com comparador lexicográfico é essencial; radix-sort sobre strings é impraticável sem pré-processamento. Alternativa O(n) existe (contagem ordenada se nomes forem numéricos) mas sacrifica legibilidade.

Ordenação lexicográfica:

O(n log n)

Cálculo de layout (grupos):

O(n + m)

Renderização SVG:

O(n)

Total (dominado):

O(n log n)

Exemplo real:
n=1000, m=10:
Ordenação: ~10.000 comparações
Layout: 1.000 + 10 iterações
Renderização: 1.000 caminhos SVG
Limite prático: ~100k colaboradores em navegador (tempo ≈ 1-2s, SVG DOM pesa)

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

Como tudo se conecta: Os dados começam desorganizados (colaborador → área). A Secção 1 agrupa-os por área. A Secção 6 define a posição Y de cada colaborador (direita). A Secção 3 centra as áreas (esquerda) no mesmo espaço. A Secção 5 atribui uma cor única a cada área. A Secção 4 conecta visualmente: sai da posição Y da área, chega na posição Y do colaborador, com a cor da área. A Secção 0 encapsula tudo num sistema de coordenadas escalável. Projeto arquitetural: Cada secção é independente e reutilizável — pode-se mudar como as cores são geradas, ou como as curvas são traçadas, sem afetar o particionamento ou a ordenação.

Fluxo de Dados:

BD → Partição → Ordenação → Layout → Cores → Curvas → SVG

Exemplo de rastreamento (1 colaborador):
1. Entrada: cv_name="Alice", cv_area_pt="Design"
2. Partição: "Design" é índice 1 de 5 áreas
3. Ordenação: "Alice" está no índice 7 de 100 colaboradores
4. Layout: Alice em Y=140px (direita), Design em Y=80px (esquerda)
5. Cor: Design (índice 1) = h=0.2 → RGB cor vibrante
6. Curva: Bézier de (0, 80) a (800, 140) com cor Design
7. SVG: Caminho renderizado em viewBox, escalável 100%
Resultado visual: Linha colorida conectando Design a Alice