De tempos em tempos o blog da Escola de Dados publica matérias sobre projetos que se baseiam em dados. Essa semana o blog conversou com designer/programador Thomaz Rezende. Atualmente freelancer, Thomaz fez parte da equipe de infografia digital de Veja.com durante três anos. Foi lá que ele criou a ferramenta de visualização da Rede de Escândalos, um banco de dados que reúne informações sobre escândalos políticos que ocorreram no Brasil desde 1986.

Um apanhado dos principais episódios de corrupção do Brasil, desde 1987

Dois jornalistas e um assistente do site de Veja fizeram o levantamento de todo o conteúdo que hoje existe na Rede de Escândalos. Um programador e um webdesigner desenvolveram uma espécie de linha do tempo à maneira do Facebook para organizar as entradas na ordem em que elas aconteceram. É possível, por exemplo, buscar pelo “Escândalo das privatizações“, em 1997 — que fala sobre a polêmica venda da Companhia Vale do Rio Doce e do sistema Telebrás por cifras altíssimas –, ou o “Escândalo dos Sanguessugas“, de 2006, que conta sobre um esquema de corrupção envolvendo 87 deputados e três senadores de dez partidos. Todos os episódios mostram descrição, fotos, personagens e material de apoio para ampliar a leitura.

A interface pega emprestado conceitos da linha do tempo do Facebook

Apesar da organização, as informações ainda eram vistas de forma linear. Segundo o próprio Thomaz, o objetivo dele foi dar forma ao caos. “[Eu precisava] criar uma maneira lógica de organizar um universo com mais de 300 personagens e mais de 60 escândalos conectados entre si”, disse. A ideia era permitir o leitor agrupar os acontecimentos com critérios interativos e acessar detalhes de um item isoladamente.

Trabalhando nas horas vagas ao longo de oito meses, Thomaz lançou mão da geometria para dar a ordem que precisava. Agrupar os personagens em círculos concentricos exigiu uma série de cálculos. Quantos personagens ocupariam cada grupo? Quantos círculos seriam necessários para acomodá-los e distribuí-los de forma harmônica? Essas foram algumas das perguntas que ele tentou responder.

Tela principal do infográfico da “Rede de Escdândalos”

O infográfico foi inteiramente desenvolvido em Flash junto com uma biblioteca chamada tweenMAX, para automatizar as animações. O restante foi feito na “unha”, segundo Thomaz, para ter maior controle sobre o desempenho final do sistema. “Sabendo que eu poderia ter situações com mais de 400 objetos na tela, procurei resolvê-los da maneira mais econômica possível, evitando uso de efeitos desnecessários”.

A visualização permite exibir as relações entre personagens e episódios

O designer aproveitou parte do que aprendeu desenvolvendo o infográfico da Rede de Escândalos para fazer outro projeto, dessa vez para o Repórter Brasil. “Embora seja muito mais simples visualmente, utilizei o mesmo raciocínio”, disse. “Temos uma visão inicial com todos os itens, uma filtragem de conexões no clique e ferramentas de ordenação de grupos”. A única diferença é que o designer abandonou o Flash. “Esse novo infográfico é inteiramente em html-css-javascript”, que, ao contrário do Flash, são tecnologias compatíveis com múltiplas plataformas, como tablets e smartphones.

O infográfico “Bancada empreiteras” reaproveita conceitos usados na “Rede de Escdândalos”

De acordo com Thomaz, a ferramenta poderia ser ampliada com a criação de recursos de compartilhamento do conteúdo, que permitam qualquer usuário inserir o painel em seu website pessoal. “Futuramente, seria possível também desenvolver um aplicativo para tablets com o painel interativo e todo o conteúdo da rede.”