Guia · como e por que foi feito
Este documento abre o capô do Atlas Sanguíneo: a decisão criativa de trocar a tabela por um mapa, a matemática do relevo, as técnicas de renderização em Canvas 2D e o caminho de deploy. No fim, o que qualquer pessoa pode reaproveitar.
Um resultado de exame quase sempre chega como uma tabela: linha após linha, um número, uma faixa e uma seta para cima ou para baixo. É eficiente e esquecível. O paciente enxerga a seta vermelha e nada mais; o profissional repete a mesma leitura dezenas de vezes por semana.
A aposta aqui é reenquadrar o mesmo dado como geografia. Se o corpo é um território, então cada painel de exame é uma província, cada biomarcador é um lugar, e a coisa mais importante — o quanto o valor se afasta da faixa de referência — vira a única coisa que os olhos já sabem ler num mapa: o relevo. Acima da faixa, uma montanha. Abaixo, uma bacia. No centro, planície. Ninguém precisa de legenda para sentir que uma montanha "sai do normal".
Apresentar um painel laboratorial como território geográfico navegável, com o relevo codificando o desvio da faixa, no lugar de uma grade de linhas com setas. Não é um scrollytelling nem um dashboard — é um atlas que se explora com travessia e zoom.
À beira do leito, o profissional mostra o "mapa" do exame e viaja de um território a outro, explicando cada marcador pelo relevo. Uma âncora de consulta — idade e sexo do paciente — recompõe as faixas de referência e, com elas, o próprio terreno.
O atlas é um arquipélago de seis ilhas. A escolha por ilhas separadas (e não um continente único) serve à metáfora de viagem: navega-se o mar entre painéis. Cada ilha carrega uma tinta provincial sutil, somada por cima da cor hipsométrica.
Cada marcador tem um valor (fictício) e uma faixa de referência [piso, teto]. Calculamos um
desvio padronizado — quão longe o valor está do centro da faixa, medido em meias-larguras da própria faixa:
meio = (piso + teto) / 2
metade = (teto − piso) / 2
z = (valor − meio) / metade // z ≈ 0 no centro; |z| = 1 nas bordasO z vira altitude. Dentro da faixa, colinas suaves; passando das bordas, o terreno sobe
(pico) ou afunda (bacia), de forma não linear para que os grandes desvios se destaquem de verdade:
relevo = sinal(z) · min(|z|, 3) · 0,12
se |z| > 1,05: relevo += sinal(z) · 0,075 // salto extra fora da faixaEsse valor é depositado como uma gaussiana na posição do marcador, sobre um planalto que ergue a ilha acima do nível do mar. Um marcador muito acima da faixa (a PCR, por exemplo) forma o pico mais alto do atlas; um marcador na porção baixa da faixa vira uma leve depressão.
Não há imagens. Tudo é gerado em Canvas 2D a partir de um campo de altura — uma grade de ~512×320 valores que soma: um piso oceânico, o planalto de cada ilha, as gaussianas dos marcadores e algumas oitavas de ruído procedural para dar textura à terra e ondulação ao mar.
Cada altitude recebe uma cor — do azul profundo do oceano ao verde das planícies, ao marrom das encostas e ao branco dos cumes — como num atlas físico.
A inclinação de cada célula é iluminada por uma luz a noroeste. É o sombreamento que faz picos e bacias parecerem tridimensionais.
O algoritmo marching squares extrai as isolinhas de altitude — as mesmas curvas dos mapas topográficos — e as desenha como vetores nítidos.
A isolinha do nível do mar vira a linha de costa; uma grade de meridianos e paralelos e uma bússola completam a gramática cartográfica.
A câmera é um simples mundo → tela com centro e escala. Arrastar move o centro; a roda do
mouse aproxima em torno do cursor; clicar num lugar dispara um voo suave (interpolação com
easing) até o marcador e abre sua ficha. O terreno e as curvas são pré-computados uma vez e apenas
transformados a cada quadro — por isso a navegação é fluida mesmo com milhares de segmentos.
Um atlas de exame que não muda com o paciente seria só um infográfico. Aqui, os controles de idade e sexo alteram faixas de referência reais na literatura — e o campo de altura é reconstruído na hora:
É a afordância que torna a peça usável na consulta: o profissional ancora o mapa no paciente à frente e o terreno responde. Os valores seguem ilustrativos; o que muda de verdade é a moldura de leitura.
Tab;
setas movem o mapa, +/− ajustam o zoom, Home volta à visão geral, Esc
fecha. Uma região aria-live anuncia a ficha aberta.prefers-reduced-motion, os voos viram cortes
instantâneos e o percurso guiado avança sob comando, sem animação automática.Nota técnica honesta: no motor de captura headless usado nesta máquina, um punhado de
overrides de largura no cartucho móvel só venceu a cascata com largura absoluta e !important
(valores em calc() com vw eram descartados). Registrado aqui porque é exatamente
o tipo de armadilha que outra pessoa repetiria.
Site estático puro — sem build, sem framework. Versionado em Git e publicado no Cloudflare Pages a partir
de uma cópia limpa (sem .git):
gh repo create pmf-labs/atlas-sanguineo --public --source . --push
wrangler pages deploy ./stage --project-name atlas-sanguineo --branch mainTrês parâmetros de URL ajudam a demonstrar e capturar estados específicos sem tocar em nada:
?open=<id> abre a ficha de um marcador, ?to=<regiao> enquadra uma
província, e ?nosync=1 renderiza o estado-alvo sem animação — pensado para screenshots
determinísticos em ambiente headless.