Como cinco vidas longas viraram uma corda trançada em canvas 2D — e por que a trama, e não um gráfico, é a forma certa de mostrar que longevidade é um tecido de hábitos, não sorte.
← voltar à tramaEstudos de longevidade como os das Blue Zones chegam quase sempre a uma lista: alimente-se de plantas, mova-se naturalmente, tenha propósito, pertença a uma comunidade. Listas são verdadeiras e esquecíveis. Elas não deixam ninguém sentir que essas vidas, tão distantes no mapa, seguem o mesmo padrão.
A pergunta de design foi: e se, em vez de comparar centenários numa grade de perfis ou num gráfico de barras, a gente tecesse as vidas deles? Cada vida um fio. Onde os hábitos coincidem, os fios se torcem juntos. Onde divergem, se abrem. A semelhança entre as vidas deixa de ser um número numa tabela e vira uma textura que se vê.
Longevidade não é uma linha do tempo que você lê. É uma trama que você reconhece.
A estrutura central é uma corda trançada de cinco fios, renderizada na horizontal. Ela não é decorativa: a trança é o gráfico. Três coisas a tornam nova como apresentação de dados:
Não é um scrollytelling (não há scroll), não é um dashboard (não há KPIs em cartões), não é um gráfico de barras (a comparação é topológica, não de altura). É uma tapeçaria navegável.
Cada fio é a projeção 2D de uma hélice em torno de uma espinha central. Se θᵢ é o ângulo inicial do fio i (distribuído em 2π/N) e Torção(x) é o ângulo acumulado ao longo do eixo:
// posição vertical do fio i em x yᵢ(x) = espinha(x) + amplitude(x) · sin(θᵢ + Torção(x)) // profundidade aparente (frente/trás) → decide o over/under zᵢ(x) = cos(θᵢ + Torção(x))
O truque está em fazer Torção e amplitude dependerem dos dados. Para cada idade calculamos a ressonância ρ — a média geométrica da intensidade de cada fator entre as cinco vidas (média geométrica, e não aritmética, porque só é "compartilhado" quando todas praticam):
// torção acelera onde a ressonância é alta → trança apertado dTorção/dx ∝ 0,34 + 4,6 · ρ^1,35 // amplitude cresce onde a ressonância é baixa → os fios se abrem amplitude(x) = Amin + (Amax − Amin) · (1 − ρ^1,1)
O resultado emerge sozinho: na juventude, quando os hábitos ainda variam, os fios correm largos e paralelos; rumo aos cem, quando propósito e comunidade convergem, a corda se aperta num cordão denso. A "moral" da história é uma consequência geométrica dos números, não um texto colado por cima.
Uma trança de verdade tem fios que passam por cima e por baixo uns dos outros. Para conseguir isso em canvas 2D sem WebGL:
z de cada um.z).Fios da frente ganham ainda mais largura, mais brilho e um realce especular no topo. A corda ganha volume sem uma única textura importada.
Cada pixel da tapeçaria é desenhado por código. Nenhuma imagem de terceiros entrou aqui.
As cinco vidas são composições ficcionais inspiradas nas cinco Blue Zones clássicas — não são pessoas reais:
Cada vida tem um perfil de intensidade (0–1) para seis fatores — alimentação vegetal, movimento natural, comunidade, propósito, descanso e fé — em três âncoras de idade (20, 60, 100), interpoladas suavemente. Os perfis foram desenhados à mão para contar uma verdade conhecida do campo: o movimento e a comunidade são altos a vida toda; o propósito cresce e é o que mais trança as vidas no fim. Os números são plausíveis, mas fictícios e sem valor clínico.
A peça foi pensada para caber numa consulta. O modo consulta pede a idade do paciente e a coloca na trama:
É a diferença entre dizer "tenha mais propósito" e mostrar, na tela, que o propósito é o cordão mais apertado de todas as vidas longas — e que o do paciente ainda está solto, mas dá tempo de pegar. Os dados seguem ilustrativos; a conversa é real.
Shift dá passo de década, Espaço percorre a vida, Home/End vão aos extremos. Todos os controles são <button> focáveis.prefers-reduced-motion (ou ?nomotion=1) congela a animação e entrega a trama pronta.HTML/CSS/JS estático, sem build. Versionado em git, publicado no Cloudflare Pages a partir de uma cópia limpa (sem .git). O código foi construído em três passadas reais — profundidade da trama, polimento de interação e mobile, e o desejo clínico com QA — cada uma comitada.
# rodar local python -m http.server 8833 # estados por URL ?decade=70 # abre numa geração ?consult=1&age=58 # modo consulta com paciente tecido ?nosync=1 # trama pronta, sem animar (para captura)
A técnica mais transferível é a corda trançada como visualização de correlação: qualquer conjunto de séries que "concordam" em alguns trechos e "divergem" em outros pode virar uma trança onde a torção é a concordância. Serve para adesão a tratamento entre pacientes, sincronia de biomarcadores, coortes que convergem. A receita do over/under (ordenar segmentos por profundidade + casing na cor do fundo) é um utilitário de canvas 2D pequeno e independente.
Projete N séries como hélices em torno de uma espinha (sin(θᵢ+Torção)), faça a taxa de torção proporcional à concordância entre elas, e renderize o over/under ordenando segmentos por z com casing na cor do fundo. A "história" emerge da geometria.