Originalmente criada como uma ferramenta pra ensinar programação a artistas visuais, a linguagem Processing<\/a> hoje tem aplicação em áreas bem diversas, entre elas a visualização de dados. Sua sintaxe simplificada é uma boa alternativa para iniciantes no mundo do código, e sua plataforma de desenvolvimento pode ser baixada gratuitamente<\/a> no site.<\/p>\n Nesse tutorial, vamos ver como carregar dados de um arquivo externo e criar um gráfico de população x área para as 10 cidades mais populosas do mundo.<\/p>\n Ao abrir o programa, você vai encontrar algo como um editor de texto. É lá que vamos digitar os comandos para fazer a visualização — não, não existe uma “barra de ferramentas” aqui, já que o objetivo original do Processing é ensinar fundamentos de programação.<\/p>\n Pra executar o script que vamos escrever, é só apertar o botão de play no topo esquerdo da janela. Uma nova janela vai se abrir, por enquanto vazia, já que não criamos nenhum comando ainda. Feche ela (ou pressione o botão stop) e salve seu arquivo — por default o nome dele é a data de criação, mas você pode escolher qualquer outro nome— antes de começarmos a programar.<\/p>\n Para começar a entender como funciona a sintaxe do Processing, digite o código abaixo e execute o programa:<\/p>\n Você vai ver uma janela como essa:<\/p>\n O que isso significa?<\/b><\/p>\n Esses comandos são chamados de funções<\/i>. Usamos duas delas: size<\/i> e ellipse.<\/i> A primeira define o tamanho (em pixels) do documento em que vamos trabalhar. A segunda desenha uma elipse. Ao lado de cada uma delas, dentro dos parênteses, temos os parâmetros<\/i>: informações de que o programa precisa pra saber como vai executar cada uma das funções. No nosso caso:<\/p>\n Ou seja, dá pra traduzir a segunda linha como “desenhe uma elipse a 400 pixels da margem esquerda e 100 pixels do topo, com 100 pixels de altura e 100 pixels de largura”. Experimente mudar esses números para entender melhor como eles funcionam.<\/p>\n Por fim, alguns detalhes aos quais temos que ficar atentos:<\/p>\n Se você estiver curioso para experimentar outras formas antes de seguir adiante, dê uma olhada nos comandos abaixo:<\/p>\n Você vai encontrar instruções para cada um deles na página de referência<\/a> do Processing.<\/p>\n Para enxergar a densidade demográfica de cada cidade aqui, vamos usar uma técnica bem direta: representar o número total de habitantes como pontos dentro da área da cidade. Esse recurso acaba tendo uma leitura menos precisa que um gráfico de barras, por exemplo — você não consegue dizer a área ou a população das cidades apenas olhando as figuras abaixo:<\/p>\n Nossa intenção, porém, é simplesmente apresentar uma comparação visual direta e intuitiva do tema: mais pontos, mais gente; quadrado maior, maior área. Ao escolher uma forma ou outra de visualização, pense sempre no balanço entre essas duas variáveis e analise como elas podem funcionar melhor de acordo com o objetivo do seu gráfico.<\/p>\n Vamos utilizar os dados de 2013 do Demographia World Urban Areas<\/a> para desenhar um gráfico com o ranking das 10 cidades mais populosas do mundo (tabela 1).<\/p>\n Um formato de dados bem simples e prático que pode ser lido no Processing é o tsv<\/a> (tab-separated values). Basicamente, é um formato de texto que funciona como uma tabela, com os valores separados por tabs<\/i> ao invés de células.<\/p>\n Transportar dados de um pdf para uma tabela nem sempre é uma tarefa fácil, uma vez que as quebras dificilmente seguem o formato de células de que precisamos.<\/p>\n Na imagem acima, só vamos precisar das colunas Urban Area<\/i>, Population Estimate<\/i> e Land Area km2<\/i>. Você pode baixar o arquivo já formatado aqui<\/a> ou tentar criar o seu:<\/p>\n Arraste o arquivo para a janela do Processing e você verá a mensagem One file added to the sketch<\/i>. Isso apenas criou uma cópia de cidades.tsv na pasta que o Processing criou para seu arquivo. Para você ler ele dentro do script, adicione o código abaixo e execute:<\/p>\n Ok, o que esse código está fazendo? Vamos entender linha a linha:<\/p>\n for(int i = 0; \/\/ …a partir de um contador que começa em zero,…<\/p>\n i < tabela.getRowCount(); \/\/ …termina no tamanho da tabela… \/\/ Seleciona a linha correspondente à contagem (i) \/\/ Quer dizer que, na sequência, a coordenada x vai ser: 0 , 120, 240, 360… até 1080. o valor que for lido na coluna “área” Na imagem resultante, não vemos os retângulos inteiros, porque os valores de área que temos para cada cidade são muito grandes:<\/p>\n Uma boa solução pra resolver isso é trocar o comando do retângulo para:<\/p>\n A função sqrt<\/i> calcula a raiz quadrada de um valor. Pra nós, é um jeito rápido e útil de diminuir os tamanhos:<\/p>\n Além disso, essa correção faz com que as áreas <\/i>dos retângulos, não sua altura<\/i> e largura<\/i>, sejam proporcionais aos valores que estamos representando. Isso é indispensável para evitarmos distorções sempre que usarmos uma figura como um círculo ou um retângulo. Se só tivéssemos divido o valor da área por 100, por exemplo, teríamos uma imagem desproporcional:<\/p>\n A imagem acima faz as cidades parecerem muito mais diferentes em área do que realmente são, uma distorção causada pela confusão entre dimensão linear<\/i> (altura e largura) e dimensão quadrada<\/i> (área).<\/p>\n Antes de partir para o segundo dado da nossa visualização, a população de cada cidade, vamos tentar simplificar algumas coisas para deixar nosso algoritmo mais inteligível:<\/p>\n Se você executar o código acima, vai ver que o resultado visual não se altera em nada. O que fizemos foi apenas escrever de uma forma diferente os mesmos comandos: ao invés de calcular tudo dentro da função rect()<\/i>, definimos 3 variáveis<\/i> com os valores e depois usamos elas no desenho do retângulo:<\/p>\nO ambiente Processing<\/a><\/h2>\n
![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing01-1024x787.jpeg\")
<\/div>\nComandos básicos<\/a><\/h2>\n
size(1200, 200);
ellipse(600, 100, 100, 100);<\/code><\/p>\n![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing02-1024x376.png\")
<\/div>\nsize(largura do documento, altura do documento);
ellipse(coordenada horizontal da elipse, coordenada vertical da elipse, largura da elipse, altura da elipse);<\/code><\/p>\n\n
line()
point()
rect()
triangle()<\/code><\/p>\nVisualizando: precisão vs síntese<\/a><\/h2>\n
![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing03.png\")
<\/p>\nFormatando os dados<\/a><\/h2>\n
![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing04-1024x277.png\")
<\/p>\n\n
Carregando os dados<\/a><\/h2>\n
size(1200, 200);
Table tabela = loadTable(\"cidades.tsv\", \"header\");
for(int i = 0;
i < tabela.getRowCount();
i = i + 1){
TableRow linha = tabela.getRow(i);
rect(120*i, 50,
linha.getInt(\"área\"), linha.getInt(\"área\"));
}<\/code><\/p>\nVisualizando a área<\/a><\/h2>\n
\/\/ Definindo o tamanho do documento
size(1200, 200);
\/\/ Carregando o arquivo dentro de uma tabela. \"header\" significa que a primeira linha do arquivo deve ser entendida como um cabeçalho.
Table tabela = loadTable(\"cidades.tsv\", \"header\");
\/\/ Criando uma ação que vai ser repetida várias vezes,...<\/code><\/p>\n
i = i + 1){ \/\/ …e cresce de um em um.
\/\/ Em resumo, é como se o programa começasse a contar “0, 1, 2, 3…” até “10”, que é o número de linhas da nossa tabela. Para cada vez que ele conta, executa a ação abaixo:<\/p>\n
TableRow linha = tabela.getRow(i);
\/\/ Desenha um retângulo na posição y 50 e x segundo a fórmula “120 vezes contagem”.<\/p>\n
\/\/ Como nossa contagem de 10 elementos começa em 0, ela vai até 9!
rect(120*i, 50,
Define como largura e altura de cada retângulo<\/p>\n
linha.getInt(“área”), linha.getInt(“área”));
}<\/p>\n![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing05-1024x261.png\")
<\/p>\nrect(120*i, 50,
sqrt(linha.getInt(\"área\")), sqrt(linha.getInt(\"área\")));<\/code><\/p>\n![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing06-1024x261.png\")
<\/p>\nrect(120*i, 50,
linha.getInt(\"área\")\/100, linha.getInt(\"área\")\/100);<\/code>![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing07-1024x261.png\")
<\/p>\nSimplicando o código<\/a><\/h2>\n
size(1200, 200);
Table tabela = loadTable(\"cidades.tsv\", \"header\");
for(int i = 0;
i < tabela.getRowCount();
i = i + 1){
TableRow linha = tabela.getRow(i);
int posX = 120*i;
int posY = 50;
float lado = sqrt(linha.getInt(\"área\"));
rect(posX, posY, lado, lado);
}<\/code><\/p>\nint \/\/ Especifica a criação de uma variável de valor inteiro
posX \/\/ Nome da variável, inventado, a fim de que eu lembre ao que ela se refere
= 120*i; \/\/ atribui o valor \"120 vezes i\" à minha variável<\/code><\/p>\n
![\"Processing\"](\"https:\/\/geojournalism.org\/wp-content\/uploads\/2013\/08\/processing08-1024x261.png\")
<\/p>\n
\r\n\t\t\t