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.

A "Rede de Escândalos" é um apanhado dos principais episódios de corrupção do Brasil, desde 1987

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

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.

rede-escandalo-veja-tela-principal

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

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.

bancada-empreitada-info

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.”