As melhores ferramentas para reportagem multimídia Fri, 31 Oct 2014 18:40:17 +0000 pt-BR hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/pt/2013/08/portugues-as-cidades-mais-populosas-do-mundo/ Gabriel Gianordoli Tue, 27 Aug 2013 21:33:46 +0000 Design Visualization charts cities graphs https://geojournalism.oeco.org.br/?p=351 <p>Nesse tutorial, vamos ver como carregar dados de um arquivo externo e criar um gr&#225;fico de popula&#231;&#227;o x &#225;rea para as 10 cidades mais populosas do mundo. Introdu&#231;&#227;o Originalmente criada como uma ferramenta pra ensinar programa&#231;&#227;o a artistas visuais, a linguagem&#160;Processing&#160;hoje tem aplica&#231;&#227;o em &#225;reas bem diversas, entre elas a visualiza&#231;&#227;o de dados. Sua sintaxe [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2013/08/portugues-as-cidades-mais-populosas-do-mundo/">Visualizando dados com Processing</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p></p><p>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.<span id="more-351"></span></p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <p>Originalmente criada como uma ferramenta pra ensinar programação a artistas visuais, a linguagem <a href="https://processing.org/" target="_blank">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 <a href="https://processing.org/download/" target="_blank">baixada gratuitamente</a> no site.</p> <p>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> <h2 class="summary-item" id="o-ambiente-processing"><a href="#o-ambiente-processing">O ambiente Processing</a></h2> <p>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> <p>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> <div><img alt="Processing" class="aligncenter wp-image-352" decoding="async" fetchpriority="high" height="551" sizes="(max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing01-300x230.jpeg 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing01.jpeg 1326w" width="717"/></div> <h2 class="summary-item" id="comandos-basicos"><a href="#comandos-basicos">Comandos básicos</a></h2> <p>Para começar a entender como funciona a sintaxe do Processing, digite o código abaixo e execute o programa:</p> <p><code>size(1200, 200);<br/> ellipse(600, 100, 100, 100);</code></p> <p>Você vai ver uma janela como essa:</p> <div><img alt="Processing" class="aligncenter wp-image-353" decoding="async" height="226" sizes="(max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing02-300x110.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing02.png 1828w" width="614"/></div> <p><b>O que isso significa?</b></p> <p>Esses comandos são chamados de <i>funções</i>. Usamos duas delas: <i>size</i> e <i>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 <i>parâmetros</i>: informações de que o programa precisa pra saber como vai executar cada uma das funções. No nosso caso:</p> <p><code>size(largura do documento, altura do documento);<br/> ellipse(coordenada horizontal da elipse, coordenada vertical da elipse, largura da elipse, altura da elipse);</code></p> <p>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> <p>Por fim, alguns detalhes aos quais temos que ficar atentos:</p> <ul> <li>os parâmetros têm que ser sempre separados por vírgula (os espaços em branco não fazem diferença);</li> <li>sempre precisamos de um <b>;</b> ao fim de cada comando.</li> <li>não importa se você der espaço ou parágrafo entre esses símbolos, mas eles têm que estar lá!</li> </ul> <p>Se você estiver curioso para experimentar outras formas antes de seguir adiante, dê uma olhada nos comandos abaixo:</p> <p><code>line()<br/> point()<br/> rect()<br/> triangle()</code></p> <p>Você vai encontrar instruções para cada um deles na <a href="https://processing.org/reference/" target="_blank">página de referência</a> do Processing.</p> <h2 class="summary-item" id="visualizando-precisao-vs-sintese"><a href="#visualizando-precisao-vs-sintese">Visualizando: precisão vs síntese</a></h2> <p>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> <p style="text-align: center"><img alt="Processing" class="aligncenter wp-image-354" decoding="async" height="216" sizes="(max-width: 318px) 100vw, 318px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png 398w, https://geojournalism.org/wp-content/uploads/2013/08/processing03-300x203.png 300w" width="318"/></p> <p>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> <h2 class="summary-item" id="formatando-os-dados"><a href="#formatando-os-dados">Formatando os dados</a></h2> <p>Vamos utilizar os dados de 2013 do <a href="https://www.demographia.com/db-worldua.pdf" target="_blank">Demographia World Urban Areas</a> para desenhar um gráfico com o ranking das 10 cidades mais populosas do mundo (tabela 1).</p> <p>Um formato de dados bem simples e prático que pode ser lido no Processing é o <a href="https://en.wikipedia.org/wiki/Tab-separated_values" target="_blank">tsv</a> (tab-separated values). Basicamente, é um formato de texto que funciona como uma tabela, com os valores separados por <i>tabs</i> ao invés de células.</p> <p style="text-align: center"><img alt="Processing" class="aligncenter wp-image-355" decoding="async" height="194" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing04-300x81.png 300w" width="717"/></p> <p>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> <p>Na imagem acima, só vamos precisar das colunas <i>Urban Area</i>, <i>Population Estimate</i> e <i>Land Area km2</i>. Você pode baixar o arquivo já formatado <a href="https://#">aqui</a> ou tentar criar o seu:</p> <ul> <li>no Windows: use o <i>Bloco de Notas</i> e salve o arquivo como “cidades.tsv”</li> <li>no Mac: use o <i>Text Edit</i>. Pressione <i>command + shift + T</i> para transformar o arquivo em texto não formatado. E, quando salvar, selecione <i>Unicode (UTF-8)</i> na opção <i>encoding</i>.</li> </ul> <h2 class="summary-item" id="carregando-os-dados"><a href="#carregando-os-dados">Carregando os dados</a></h2> <p>Arraste o arquivo para a janela do Processing e você verá a mensagem <i>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> <p><code>size(1200, 200);<br/> Table tabela = loadTable("cidades.tsv", "header");<br/> for(int i = 0;<br/> i &lt; tabela.getRowCount();<br/> i = i + 1){<br/> TableRow linha = tabela.getRow(i);<br/> rect(120*i, 50,<br/> linha.getInt("área"), linha.getInt("área"));<br/> }</code></p> <h2 class="summary-item" id="visualizando-a-area"><a href="#visualizando-a-area">Visualizando a área</a></h2> <p>Ok, o que esse código está fazendo? Vamos entender linha a linha:</p> <p><code>// Definindo o tamanho do documento<br/> size(1200, 200);<br/> // Carregando o arquivo dentro de uma tabela. "header" significa que a primeira linha do arquivo deve ser entendida como um cabeçalho.<br/> Table tabela = loadTable("cidades.tsv", "header");<br/> // Criando uma ação que vai ser repetida várias vezes,...</code></p> <p>for(int i = 0;                    // …a partir de um contador que começa em zero,…</p> <p>i &lt; tabela.getRowCount();     // …termina no tamanho da tabela…<br/> i = i + 1){                   // …e cresce de um em um.<br/> // 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> <p>// Seleciona a linha correspondente à contagem (i)<br/> TableRow linha = tabela.getRow(i);<br/> // Desenha um retângulo na posição y 50 e x segundo a fórmula “120 vezes contagem”.</p> <p>// Quer dizer que, na sequência, a coordenada x vai ser: 0 , 120, 240, 360… até 1080.<br/> // Como nossa contagem de 10 elementos começa em 0, ela vai até 9!<br/> rect(120*i, 50,<br/> Define como largura e altura de cada retângulo</p> <p>o valor que for lido na coluna “área”<br/> linha.getInt(“área”), linha.getInt(“área”));<br/> }</p> <p>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> <p><img alt="Processing" class="aligncenter wp-image-356" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-1160x296.png 1160w" width="614"/></p> <p>Uma boa solução pra resolver isso é trocar o comando do retângulo para:</p> <p><code>rect(120*i, 50,<br/> sqrt(linha.getInt("área")), sqrt(linha.getInt("área")));</code></p> <p>A função <i>sqrt</i> calcula a raiz quadrada de um valor. Pra nós, é um jeito rápido e útil de diminuir os tamanhos:</p> <p><img alt="Processing" class="aligncenter wp-image-357" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-1160x296.png 1160w" width="614"/></p> <p>Além disso, essa correção faz com que as <i>áreas </i>dos retângulos, não sua <i>altura</i> e <i>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> <p><code>rect(120*i, 50,<br/> linha.getInt("área")/100, linha.getInt("área")/100);</code><img alt="Processing" class="aligncenter wp-image-358" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-1160x296.png 1160w" width="614"/></p> <p>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 <i>dimensão linear</i> (altura e largura) e <i>dimensão quadrada</i> (área).</p> <h2 class="summary-item" id="simplicando-o-codigo"><a href="#simplicando-o-codigo">Simplicando o código</a></h2> <p>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> <p><code>size(1200, 200);<br/> Table tabela = loadTable("cidades.tsv", "header");<br/> for(int i = 0;<br/> i &lt; tabela.getRowCount();<br/> i = i + 1){<br/> TableRow linha = tabela.getRow(i);<br/> int posX = 120*i;<br/> int posY = 50;<br/> float lado = sqrt(linha.getInt("área"));<br/> rect(posX, posY, lado, lado);<br/> }</code></p> <p>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 <i>rect()</i>, definimos 3 <i>variáveis</i> com os valores e depois usamos elas no desenho do retângulo:</p> <p><code>int      // Especifica a criação de uma variável de valor inteiro<br/> posX     // Nome da variável, inventado, a fim de que eu lembre ao que ela se refere<br/> = 120*i; // atribui o valor "120 vezes i" à minha variável</code></p> <p>No caso do lado do retângulo, <i>float</i> quer dizer que essa variável pode armazenar um número fracionário, já que não sabemos se o resultado da fórmula “raiz da área” vai ser um número inteiro.</p> <h2 class="summary-item" id="visualizando-a-populacao"><a href="#visualizando-a-populacao">Visualizando a população</a></h2> <p>Como falamos anteriormente, a ideia aqui vai ser representar o número total de habitantes de cada cidade como pontos dentro das áreas que já desenhamos. Abaixo da linha com o comando <i>rect()</i>, adicione o seguinte código:</p> <p><code>for(int j = 0;<br/> j &lt; linha.getInt("população");<br/> j = j + 1){<br/> point(posX,posY);<br/> }</code></p> <p>Fique atento pra escrever esse comando antes da última chave <i>}</i> que você já tinha no documento. Estando dentro dessa chave, o Processing vai entender que esse comando deve ser repetido a cada vez que ele estiver lendo uma linha da tabela — é o que queremos, já que vamos desenhar a população para cada cidade. A estrutura aqui é parecida com a anterior:</p> <p><code>// A partir de um contador "j"...<br/> for(int j = 0;                     //...que começa em zero...<br/> j &lt; linha.getInt("população");  //..vai até o número lido<br/> //   na coluna "população", de cada linha...<br/> j = j + 1){                    //...e cresce de um em um...</code></p> <p>//…desenhe um ponto.<br/> point(posX,posY);<br/> }</p> <p>Se você tentar executar esse código, é provável que seu computador demore bastante — se não travar. Isso porque o número de repetições que estamos usando é muito grande: 37.239.000 pontos só para a cidade de Tóquio! Para resolver isso, troque a segunda linha desse trecho para:</p> <p><code>j &lt; linha.getInt("população")/5000;</code></p> <p>Com isso, vamos desenhar 1 ponto para cada 5000 habitantes (não mais 1 para 1).</p> <p>Ainda falta corrigir um detalhe: se você estudar com atenção o comando <i>point()</i>, vai perceber que todos os pontos de cada cidade estão desenhados no mesmo local, uns sobre os outros: na coordenada x e y que corresponde ao canto superior esquerdo dos quadrados. Troque essa linha para:</p> <p><code>point( random(posX, posX + lado),<br/> random(posY, posY + lado));</code></p> <p>O comando <i>random()</i> resulta em um número aleatório, sorteado entre um valor mínimo e outro máximo. No nosso caso, o resultado é:</p> <p><code>point( número aleatório entre (a coordenada x do retângulo e a mesma coordenada + o lado,<br/> número aleatório entre (a coordenada y do retângulo e a mesma coordenada + o lado);</code></p> <p>Execute o programa e teremos nosso resultado final:</p> <p><img alt="Processing" class="aligncenter wp-image-359" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-1160x296.png 1160w" width="614"/></p> <p>No fim, as comparações ficam evidentes: Tóquio e Nova York são as cidades com maior área, mas densidade demográfica é bem menor que a de cidades como Manila e Karachi.</p> <p>Se você quiser salvar o arquivo gerado como uma imagem para usar em outro programa, simplesmente acrescente uma última linha:</p> <p><code>save("cidades.jpg");</code></p> <p>Para salvar em outro formato, como <i>tif</i> ou <i>png</i>, simplesmente altere a extensão do arquivo no código acima.</p> <h2 class="summary-item" id="conclusao"><a href="#conclusao">Conclusão</a></h2> <p>Programar pela primeira vez pode parecer uma tarefa pouco amigável. Porém, à medida que você vai entendendo a lógica por trás dos comandos, entender várias linguagens é apenas uma questão de aprender diferentes sintaxes, umas mais parecidas, outras menos. Algo como falar vários idiomas.</p> <p>Mesmo que o trabalho seja árduo no começo, você vai ver que as vantagens compensam: no caso do arquivo que usamos, por exemplo, basta alterar os dados do <i>.tsv</i> para gerar uma versão diferente da visualização, sem ter que fazer ajustes manuais na imagem. Além disso, programar deve ser entendido mais como uma linguagem que uma ferramenta: ao invés de recursos pré-definidos, você pode contruir o gráfico que quiser e julgar mais adequado pros seus dados. As possibilidades são infinitas.</p> <p>Dê uma olhada no arquivo desse exemplo e tente alterar aos poucos os parâmetros para personalizá-lo: cor de fundo, tamanho, espaço entre as áreas etc. A partir disso, explore a página de referência do Processing e tente refazer esse exemplo usando outro tipo de visualização, como barras ou linhas.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://si0.twimg.com/profile_images/1298845056/gabriel_2011.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> Sou um designer gráfico apaixonado por números. Atualmente, sou aluno do programa de Mestrado em Belas Artes – Design &amp; Technology no Parsons The New School for Design. Meu trabalho mais recente foi como designer sênior no time de Inovação em Tecnologia e Experiência do Usuário do Itaú, o maior banco privado do Brasil. Durante os últimos seis anos, tenho trabalhado com informação e design gráfico, principalmente para revistas, e conquistei alguns prêmios. Participei como palestrantes de alguns eventos, como o Campus Party, o World Information Architecture Day e o Pixel Show, a maior conferência no Brasil sobre arte e criatividade. Também organizei workshops sobre visualização de dados utilizando a linguagem de programação Processing. </div> <!-- .author-info --> </div> <!-- .author-inner --> </div> .author-shortcodes <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <p>The post <a href="https://geojournalism.org/pt/2013/08/portugues-as-cidades-mais-populosas-do-mundo/">Visualizando dados com Processing</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 351