As melhores ferramentas para reportagem multimídia Mon, 22 Aug 2016 14:48:32 +0000 pt-BR hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/pt/2014/06/tips-for-using-color-in-maps/ Mapbox Wed, 25 Jun 2014 19:31:02 +0000 Design Maps cartography color Easy map design https://geojournalism.oeco.org.br/?p=1031 <p>Mapeamento e Teoria da cor &#201; importante perceber o quanto sua escolha de cor em um mapa pode afetar a hist&#243;ria que voc&#234; est&#225; tentando contar com seus dados. Para introduzir brevemente algumas teorias sobre como usar cores em mapas, aqui est&#227;o tr&#234;s desenhos principais de esquemas para mapeamento de dados. Esquemas Sequenciais Esquemas sequenciais [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2014/06/tips-for-using-color-in-maps/">Dicas para o Uso de Cores em Mapas</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p></p> <h1 class="summary-item" id="mapeamento-e-teoria-da-cor" title="Link to this section"><a href="#mapeamento-e-teoria-da-cor">Mapeamento e Teoria da cor</a></h1> <p>É importante perceber o quanto sua escolha de cor em um mapa pode afetar a história que você está tentando contar com seus dados. Para introduzir brevemente algumas teorias sobre como usar cores em mapas, aqui estão três desenhos principais de esquemas para mapeamento de dados.</p> <p id="sequential_schemes" title="Link to this section"><strong>Esquemas Sequenciais</strong></p> <p>Esquemas sequenciais ordenam dados de alto a baixo, acentuando o mais alto com uma sombra escura e o menor com um tom claro (ou vice-versa). Esquemas sequenciais são bons se você está mapeando dados quantitativos e não quer dirigir o foco a um determinado intervalo dentro de seus dados.<br/> <img alt="sequential" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/sequential.png"/></p> <p id="diverging_schemes" title="Link to this section"><strong>Esquemas Divergentes</strong></p> <p>Esquemas divergentes são os melhores em destacar uma faixa intermediária entre dados quantitativos. Escolha duas cores contrastantes e saturadas para os extremos dos dados, e os intervalos médios ficam como uma mistura mais clara dos dois. Isto é particularmente ótimo para acentuar a média de seus dados e para expor locais que divergem significativamente da norma.<br/> <img alt="diverging" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/diverging.png"/></p> <p id="qualitative_schemes" title="Link to this section"><strong>Esquemas Qualitativos</strong></p> <p>Se você estiver trabalhando com dados qualitativos, tais como etnia ou religião, você quer escolher uma série de cores ‘não relacionadas’. O truque é escolher um bom tema de cor para que seu mapa seja bonito. Você também pode acentuar aspectos específicos de seus dados com sua escolha da cor. Por exemplo, uma forte cor escura entre um grupo de cores mais claras vai ‘pular’ fora do mapa, destacando essa faceta particular de seus dados entre todos os outros.<br/> <img alt="qualitative" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/qualitative.png"/></p> <h2 class="summary-item" id="fontes-para-escolha-de-cores" title="Link to this section"><a href="#fontes-para-escolha-de-cores">Fontes para Escolha de Cores</a></h2> <p>Felizmente uma série de sites estão disponíveis para explorar temas de cores. Abaixo estão os links para alguns deles com um breve resumo de suas principais características para ajudar você a navegar com mais facilidade os mares da estética de contar histórias. A seção termina com duas revisões de ferramentas compráveis ​​que você pode usar a partir de seu desktop.</p> <h3 class="summary-item" id="0_255" title="Link to this section"><a href="#0_255">0_255</a></h3> <p>0_255 é um ótimo site para escolher entre diferentes tons de uma cor, e por isso é ideal para sistemas sequenciais. Ele te da trinta opções para uma determinada cor e permite copiar instantaneamente o código hexadecimal da cor. Há uma grande grade de cores para seleccionar a partir de uma cor inicial, e, em seguida, 0_255 visualiza uma gama de tonalidades com base naquela cor. Se a grade não tem a cor que você quiser, você pode escolher sua própria cor colando o código hexadecimal.<br/> <img alt="0_255" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/0_255_0.jpg"/></p> <h3 class="summary-item" id="color-scheme-designer" title="Link to this section"><a href="#color-scheme-designer">Color Scheme Designer</a></h3> <p>Color Scheme Designer permite que você selecione uma cor de uma roda de cores e apresenta várias opções para gerar automaticamente as cores complementares a sua escolha inicial. Especificamente, você pode escolher entre:</p> <ul> <li>Complementos</li> <li>Tríades</li> <li>Tétrades</li> <li>Analógico</li> <li>Analógico Acentuado</li> </ul> <p>Uma vez escolhido a sua cor e o esquema, você terá uma tabela de cores que lhe dá diversas variações de suas cores e os códigos hexadecimais correspondentes.</p> <p><img alt="colorscheme" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colorschemedesigner_1.jpg"/></p> <h3 class="summary-item" id="colour-lovers" title="Link to this section"><a href="#colour-lovers">Colour Lovers</a></h3> <p>Colour Lovers é ótimo se você estiver procurando por um tema do design para mapear dados qualitativos. Os usuários ativos contribuem com paletas para o site, e essas paletas são pesquisáveis​​, navegáveis, e prontas para serem usadas em seu projeto. Usuários de Colour Lovers também compartilham padrões se você precisar de alguma inspiração espacial também.<br/> <img alt="colourlovers" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colourlovers_0.jpg"/></p> <h3 class="summary-item" id="kuler" title="Link to this section"><a href="#kuler">Kuler</a></h3> <p>Kuler é um serviço semelhante ao Colour Lovers, oferecido pela Adobe. A comunidade de designers apresentam seus próprios temas, que estão disponíveis com os valores RGB e códigos hexadecimais. O design do site é um pouco menos intuitiva do que Colour Lovers, mas ainda assim vale a pena conferir.<br/> <img alt="kuler" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/kuler_1.jpg"/></p> <p>Há muitas boas idéias que são compartilhadas pela comunidade ativa de usuários que contribuem ao Kuler. Kuler também fornece links para paginas como fóruns, páginas de ajuda, e também vários artigos sobre a importância da cor e teoria da cor.</p> <h3 class="summary-item" id="colorbrewer" title="Link to this section"><a href="#colorbrewer">Colorbrewer</a></h3> <p>Colorbrewer é ótimo para contrastar os três tipos de modelos de cores mencionadas na primeira parte deste artigo. Ele permite que você teste diferentes temas de cores baseado em sua preferencia entre equemas seqüenciais, divergentes, ou qualitativos e permite variar o número de classes de cores que você quer na sua palete (até 12). Ele também fornece alguns artigos úteis de ‘Leitura’ sobre essas teorias e outras idéias cartográficas de design.<br/> <img alt="colorbrewer" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colorbrewer.jpg"/></p> <h3 class="summary-item" id="pochade" title="Link to this section"><a href="#pochade">Pochade</a></h3> <p>Pochade é um programa de seleção de cores que permite determinar o valor RGB e código hexadecimal de qualquer cor que você vê na tela. Ele também fornece algumas maneiras diferentes de manipular a sua cor, como alterar os valores HSB, RGB, ou CMYK. Este programa está disponível para download por US $ 9,99.<br/> <img alt="pochade" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/pochade_0.jpg"/></p> <h3 class="summary-item" id="colorschemer-studio" title="Link to this section"><a href="#colorschemer-studio">ColorSchemer Studio</a></h3> <p>ColorSchemer Studio fornece três características principais: (1) um gerador de classe de cor (até 254 – muitos mais do que Color Brewer) com base em duas cores de sua escolha, (2) a ‘PhotoSchemer’, que permite que você faça o upload de uma foto e determine até dez cores diferentes em sua foto escolhida e (3) a integração com Colour Lovers, incluindo um navegador de cor e a capacidade de carregar as cores para a primeira ferramenta para manipular por conta própria. ColorSchemer é uma ferramenta poderosa para o seu desktop, disponível para o preço um pouco maior de US $ 49,99.</p> <p> </p> <p>Originalmente publicado no Mapbox: <a href="https://www.mapbox.com/tilemill/docs/guides/tips-for-color/" target="_blank">https://www.mapbox.<wbr/>com/tilemill/docs/guides/tips-<wbr/>for-color/</a></p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <p>The post <a href="https://geojournalism.org/pt/2014/06/tips-for-using-color-in-maps/">Dicas para o Uso de Cores em Mapas</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 1031 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 https://geojournalism.org/pt/2013/08/portugues-principios-basicos-para-criar-uma-animacao/ Mariana Santos Fri, 16 Aug 2013 21:02:22 +0000 Design Visualization animation https://geojournalism.oeco.org.br/?p=328 <p>Neste tutorial n&#243;s vamos aprender a criar uma anima&#231;&#227;o, que deve ser uma hist&#243;ria resumida, que servir&#225; como um teaser para convidar o usu&#225;rio a conhecer a hist&#243;ria que queremos contar.&#160; Introdu&#231;&#227;o Conceitos de Anima&#231;&#227;o A parte mais importante de uma anima&#231;&#227;o &#233; exactamente a historia. Assim &#233; muito importante que o script seja pensado [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2013/08/portugues-principios-basicos-para-criar-uma-animacao/">Principios básicos para criar uma animação</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p></p><p>Neste tutorial nós vamos aprender a criar uma animação, que deve ser uma história resumida, que servirá como um teaser para convidar o usuário a conhecer a história que queremos contar. <span id="more-328"></span></p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <p><strong>Conceitos de Animação</strong></p> <p>A parte mais importante de uma animação é exactamente a historia. Assim é muito importante que o script seja pensado para servir os propósitos de uma animação, não podendo ser escrito da mesmo forma que se escreve uma narrativa para uma <em>long form reading</em>.</p> <p>A história deve poder ser lida em voz alta em menos de 2 minutos, pois analíticos confirmam que passando 1:30” os utilizadores deixam de assistir ao filme e procuram novos estímulos em outras páginas. Isto é super importante não só para economizar tempo de produção, bem como para não estar a subir coisas que não vão ser consumidas. Há que entender que animação, filmes, documentários, curtas-metragens são produtos diferentes e que servem objectivos diferentes.</p> <p>Neste tutorial nós vamos aprender a criar uma animação, que deve ser uma história resumida, que servirá como um teaser para convidar o usuário a conhecer a história que queremos contar. Depois desta introdução ao tema, o leitor poderá ler artigos escritos que acompanhem a peça a fim de aprofundar os conhecimentos. A animação é uma forma muito eficaz de apresentar um tema, e de fácil partilha, quando e interessante, vai gerar interesse e poder ser partilhado facilmente nas redes sociais e assim gerar mais utilizadores para o nosso sítio.</p> <p><strong>História</strong></p> <p>Nem todas as histórias são adequadas para fazer animação. Assim aqui está um corte da história original: <a href="https://news.mongabay.com/2013/0805-costa-rica-deforestation-intensification.html">https://news.mongabay.com/2013/0805-costa-rica-deforestation-intensification.html</a></p> <p><strong>Script</strong></p> <blockquote> <p><i>Proibição de desmatamento de trabalho na Costa Rica</i></p> <p><i>A proibição na Costa Rica de desmatamento de florestas “maduras” parece ser eficaz no sentido de incentivar a expansão agrícola em terras não florestais, constata um estudo publicado na revista Environmental Research Letters de uma pesquisa liderada por Matthew Fagan, da Universidade de Columbia baseada na análise de dados de satélite calibrados com visitas a locais de campo nas planícies do norte da Costa Rica.</i></p> <p><i>O estudo constatou que, desde que a Costa Rica implementou a proibição de conversão de florestas maduras, em 1996, a taxa anual de perda de florestas do velho-crescimento caiu 40%, apesar de um boom agrícola na região. Os resultados sugerem que a Costa Rica ao intensificar a produção agrícola est</i>á<i> ao mesmo tempo poupando florestas.</i></p> <p><i>“Observamos que, após a proibição, a perda de floresta madura diminuiu de 2,2% para 1,2% ao ano, e a proporção de abacaxi e outras terras agrícolas, derivadas da floresta madura, orientadas para a exportação diminuiu de 16,4% para 1,9%,” escrevem os pesquisadores. “A expansão da pós-proibição de abacaxi e outras culturas em grande parte substituindo pastagem, plantações de árvores exóticas e nativas e florestas secundárias.”</i></p> <p><i>“Concluímos que os esforços de proteção florestal no norte da Costa Rica têm provavelmente retardado a perda de floresta madura e conseguiram re-direcionar a expansão da área agrícola para áreas fora da floresta madura”. “Nossos resultados sugerem que a proibição de desmatamento pode proteger florestas maduras melhor do que rebrotamentos de florestas mais antigos e pode restringir a compensação para culturas em grande escala de forma mais eficaz de limpeza de pastagens”.</i></p> <p><i>Desvantagens para a intensificação</i></p> <p><i>No entanto, os pesquisadores sugerem que a intensificação pode não ser uma panaceia ecológica. Eles observam que a agricultura intensiva tem se expandido em florestas não protegidas importantes, incluindo as zonas húmidas e florestas secundárias. Além disso, as monoculturas industriais oferecem menos conectividade no habitat de paisagens menos intensivamente gerenciados – um pasto de gado típico inclui cobertura de árvores espalhados que é utilizada por muitas espécies, ao passo que uma fazenda de abacaxi é geralmente desprovidas de árvores e funciona como um deserto biológico. Finalmente, o uso de produtos químicos agrícolas constitui um risco para os animais e habitates aquáticos.</i></p> <p><i>“A produção de abacaxi e banana na Costa Rica depende extremamente altas aplicações de fertilizantes e agrotóxicos”, escrevem os autores. “Na Costa Rica esses agro-químicos têm degradado a qualidade da água e interrompeu os ecossistemas a jusante, e as florestas de altitude contaminados com pesticidas.”</i></p> <p><i>No entanto, a partir de uma perspectiva política de uso do solo, os pesquisadores concluem que a abordagem de Costa Rica pode servir de lição para outras áreas onde as florestas estão sendo convertidas rapidamente para a agricultura.</i></p> <p><i>“As políticas de proteção florestal global podem ser uma ferramenta potencial para promover a poupança da terra em regiões submetidas a desmatamento para agricultura intensiva”.</i></p> </blockquote> <h2 class="summary-item" id="audio"><a href="#audio">Audio</a></h2> <p>A Narração é uma parte muito importante da animação pois permite ao utilizador seguir a história não só visualmente como através da narração, permitindo-lhe uma absorção da informação por muitos mais canais de recepção.</p> <p>Gravar um audio é uma tarefa que deve ser tida em consideração com seriedade, pois uma má narração poder matar a nossa animação, fazendo com que se transforme numa monotonia. Fazer a locução da voz off e como ser actor, temos de por emoção na historia, e com uma atitude teatral dar ênfase a narrativa nas partes que devemos dar, por exemplo levantando a voz, falando mais rápido ou mais devagar nas alturas em que é adequado para manter o interesse na história.</p> <p>Ha varias formas de gravar audio, por exemplo um estúdio de gravação. Como este tutorial se dedica a pessoas que queiram fazer tudo do inicio ao fim, e para não estarmos dependentes de estúdios de gravação, há software acessível e até gratuito que permite uma grande qualidade de gravação.</p> <p>O meu preferido e <a href="https://itunes.apple.com/pt/app/pcmrecorder/id481055155?mt=8">PCM Recorder</a> que pode ser baixado gratuitamente.</p> <p>Ele baseia-se em fazer a gravação usando o gravador do seu telefone, e depois tem de subir o seu ficheiro de audio a soundcloud, podendo assim fazer varias tentativas e ter todas as versões de audio online. Para compartir com colegas também e muito eficaz.</p> <p><strong>Como funciona</strong></p> <p style="text-align: center;"><img alt="Como criar uma animação" class="aligncenter" decoding="async" height="307" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.23-1024x731.png" width="430"/></p> <p>Iniciar a preparação para a captura de som clicando no botão vermelho com um circulo dentro. Nesse momento o telefone está preparado para captar som. Para gravar clicar no botão de play verde e começar a falar. Quando termina, clique no botão com o quadrado.</p> <p>O ficheiro fica gravado, para aceder ao ficheiro de som seleccionar Files e aí vai ver tudo o que já gravou.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.38.png"><img alt="Screen Shot 2013-08-09 at 11.46.38" class="aligncenter" decoding="async" height="312" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.38-1024x743.png" width="430"/></a></p> <p>Os ficheiros ficaram nomeados com a data em foram gravados com a adição de _001, _002 etc cronologicamente. Para subir um ficheiro a Soundcloud, primeiro tem de ter uma conta activa, pode criar uma em <a href="https://soundcloud.com/connect?client_id=b45b1aa10f1ac2941910a7f0d10f8e28&amp;response_type=token&amp;scope=non-expiring%20fast-connect%20purchase%20upload&amp;display=next&amp;redirect_uri=https://soundcloud.com/soundcloud-callback.html&amp;highlight=signup">Soundcloud SignIn</a>.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-12.07.42.png"><img alt="Screen Shot 2013-08-09 at 12.07.42" class="aligncenter" decoding="async" height="391" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-12.07.42-1024x652.png" width="614"/></a></p> <p>Depois faz Log In clicando no botão em cima dos ficheiros, selecciona o ficheiro de audio que quer subir, e clica em Upload. Espera uns minutos e já esta. Depois na sua página de SoundCloud pode baixar para o seu computador o som que quer. Este processo é especialmente útil quando está a gravar entrevistas ou audio na rua e pretende enviar para alguém, usando este método é rápido, eficaz e seguro.</p> <p>Atenção que a gravação da sua história deve ser feita num local silencioso. Deve ter em atenção e contar a historia com teatralismo, de uma forma seria, mas interessante. As narrações monotónicas tornam-se aborrecidas e ajudam a que os utilizadores se desinteressem, ponha “feeling” na sua narração.</p> <p><strong>Exemplo:</strong></p> <p><a href="https://soundcloud.com/marysaints/130809_0011-wav">https://soundcloud.com/marysaints/130809_0011-wav</a></p> <p>Usar uma musica de fundo pode ser muito eficaz também. Atenção a não utilizar uma musica com voz ou muito alta pois isso vai dificultar a comunicação.</p> <p>Existem bancos de musicas grátis, outros que se pagam.</p> <p><strong>Grátis:</strong></p> <p><a href="https://www.jamendo.com/en/">https://www.jamendo.com/en/</a></p> <p><a href="https://freeplaymusic.com/">https://freeplaymusic.com/</a></p> <p><strong>A pagar:</strong></p> <p><a href="https://audiojungle.net/">https://audiojungle.net/</a></p> <h2 class="summary-item" id="representacao-visual"><a href="#representacao-visual">Representação Visual</a></h2> <p>Para ilustrar a sua historia pode usar fotografias, desenhos, ilustrações, recortes, todos os elementos visuais que pretender.</p> <p>Normalmente as representações iconografias são muito eficazes quando se trabalha com dados e se quer contar uma história com um estilo mais racional e uma estética minimalista.</p> <p>Eu recomendo <a href="https://thenounproject.com/">“The Noun Project” </a>que e um site com ícones para quase tudo, são grátis e a única coisa que se tem de fazer e no final do projecto definir que uma das fontes na realização deste trabalho foi the noun project.</p> <p>Aqui pode-se escrever na search que tipo de ícones precisamos e depois baixá-los e usá-los na nossa história.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.01.png"><img alt="Screen Shot 2013-08-09 at 13.08.01" class="aligncenter" decoding="async" height="356" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.01-1024x594.png" width="614"/></a></p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.43.png"><img alt="Screen Shot 2013-08-09 at 13.08.43" class="aligncenter" decoding="async" height="325" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.43-1024x542.png" width="614"/></a></p> <p>Para fazer ilustrações de raiz o melhor programa é o Adobe Illustrator pois os gráficos são exportados como vectores, o que permite que os aumentemos quanto queremos sem perderem qualidade.</p> <p>Se temos muitos dados para visualizar e queremos fazer gráficos de barras, ou tartes de dados, ou qualquer outro tipo de gráficos, o melhor e mesmo faze-los em Adobe Illustrator.</p> <p><strong>Storyboard</strong></p> <p>Para visualizar a história temos que antes de mais nada fazer o storyboard. Ou seja, ir parágrafo por parágrafo e desenhar como queremos representar cada parte da história. Este processo deve ser feito à mão, pois a mão é o caminho mais rápido entre o cérebro e a nossa forma de expressão.</p> <p>Não se preocupe se “achar” que não tem jeito para desenhar, pois aqui isso não tem problema nenhum, o que interessa é que represente como quer que a história seja visualizada. Depois a ilustração final será feita através de fotografias, vectores ou ícones.</p> <p><strong>Adobe Illustrator </strong></p> <p>Este software é excelente para criar imagens vectoriais. Pode também editar alguns ícones (que baixou do The Noun Project) e combinar diferente ícones para ter um significado seu.</p> <p><strong>Iniciar um projecto em Ai </strong></p> <p>Pode começar com o formato que desejar, pois este ficheiro será exportado em <em>.ai</em> (ficheiro Adobe Illustrator), ou seja terá todas as propriedades de um ficheiro de Illustrator.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.40.03.png"><img alt="Screen Shot 2013-08-09 at 13.40.03" class="aligncenter" decoding="async" height="304" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.40.03-1024x507.png" width="614"/></a></p> <p>O que quer dizer que caso decida mudar um certo elemento poderá faze-lo, que depois dentro de After Effects será feito o update.</p> <p>Para fazer formas, basta seleccionar a forma que quer, pode fazer quadrados, círculos, estrelas etc, estes estão guardados por trás de quadrado para isso clique e mantenha clicado o quadrado que lhe vão aparecer todas as opções.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.41.20.png"><img alt="Screen Shot 2013-08-09 at 14.41.20" class="aligncenter" decoding="async" height="374" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.41.20-1024x624.png" width="614"/></a></p> <p><strong>Importar ícones para Ai (Adobe Illustrator)</strong></p> <p>&gt; File &gt; Place e escolhe o ícone que quer importar.</p> <p>Se tiver baixado algum ícone do the noun project, eles veem em svg (Scalable Vector Graphics), dentro de illustrator pode depois salva-lo para o formato que quiser, por exemplo .ai.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.54.03.png"><img alt="Screen Shot 2013-08-09 at 14.54.03" class="aligncenter" decoding="async" height="461" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.54.03-1024x769.png" width="614"/></a></p> <p><strong>Editar</strong></p> <p>Para editar ícones dentro de Ai, utilize a seta branca que se chama: Direct Selection Tool (clicando “A” esta opção e automaticamente seleccionada).</p> <p>Assim pode seleccionar o pequeno pontos que fazem o ícone e modificá-lo como quer.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.59.12.png"><img alt="Screen Shot 2013-08-09 at 14.59.12" class="aligncenter" decoding="async" height="259" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.59.12.png" width="225"/></a></p> <p>Para salvar a sua imagem &gt;File &gt; Save e guarda com o nome pretendido.</p> <h2 class="summary-item" id="mais-informacoes"><a href="#mais-informacoes">Mais Informações</a></h2> <p><strong>Informações e cursos de Adobe Illustrator</strong></p> <p><a href="https://www.smashingapps.com/2011/02/08/50-fresh-and-useful-adobe-illustrator-tutorials.html">https://www.smashingapps.com/2011/02/08/50-fresh-and-useful-adobe-illustrator-tutorials.html</a></p> <p><a href="https://layersmagazine.com/category/tutorials/illustrator">https://layersmagazine.com/category/tutorials/illustrator</a></p> <p><a href="https://mashable.com/2010/08/19/adobe-illustrator-tutorials/">https://mashable.com/2010/08/19/adobe-illustrator-tutorials/</a></p> <p><strong>Adobe After Effects</strong></p> <p>Este software é um espectáculo! Tem muito poder, não e difícil de se aprender, qualquer pessoa o pode controlar, basta para isso dedicação e tempo.</p> <p>Pode baixar um trial aqui:</p> <p><a href="https://creative.adobe.com/products/aftereffects">https://creative.adobe.com/products/aftereffects</a></p> <p>Há muitos tutoriais:</p> <p><a href="https://www.videocopilot.net/basic/">https://www.videocopilot.net/basic/</a></p> <p><a href="https://helpx.adobe.com/after-effects/after-effects-cs5-cs55-tutorials.html">https://helpx.adobe.com/after-effects/after-effects-cs5-cs55-tutorials.html</a></p> <p><a href="https://greyscalegorilla.com/blog/tutorials/software/after-effects/">https://greyscalegorilla.com/blog/tutorials/software/after-effects/</a></p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://b.vimeocdn.com/ps/828/82817_300.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <strong>Mariana Santos</strong>, fellow do Knight International Journalism, é uma contadora visual de histórias que realizou trabalho inovador no time interativo no<a href="https://www.guardiannews.com/"> The Guardian</a>, em Londres. Editora de animação qualificada, ela foi pioneira no uso de gráficos animados para transformar as reportagens de dados em algo mais atraente. Ministrou um curso sobre jornalismo interativo no<a href="https://knightcenter.utexas.edu/"> Knight Center for Journalism in the Americas</a> e workshops na Argentina, Dinamarca e Reino Unido. Começou sua carreia como editora de animação e de pós-produção na <a href="https://www.universal-music.de/home/alle-genres">Universal Music Berlin</a>. Mariana formou-se em design da comunicação e desenho industrial pela Faculdade de Belas Artes da Universidade de Lisboa. Finalizou o mestrado em mídia digital pela<a href="https://www.hyperisland.com/"> Hyper Island</a>, uma companhia de educação em Estocolmo. </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-principios-basicos-para-criar-uma-animacao/">Principios básicos para criar uma animação</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 328 https://geojournalism.org/pt/2013/08/map-styles/ Gustavo Faleiros Fri, 09 Aug 2013 15:25:53 +0000 Design Maps Visualization map design maps https://dev.cardume.art.br/toolkit/?p=179 <p>Introduc&#227;o A maioria das bases de dados dispon&#237;veis apresenta algum elemento de localiza&#231;&#227;o. De acordo com funcion&#225;rios que trabalham com o portal de dados abertos do governo dos Estados Unidos, cerca de 90% de seus dados cont&#234;m informa&#231;&#227;o geogr&#225;fica, variando de nomes de ruas a coordenadas precisas. Neste tutorial, vamos mostrar os diferentes tipos de [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2013/08/map-styles/">Escolha o tipo certo de mapa para a sua reportagem</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introducão</a></h2> <p>A maioria das bases de dados disponíveis apresenta algum elemento de localização. De acordo com funcionários que trabalham com o portal de dados abertos do governo dos Estados Unidos, cerca de 90% de seus dados contêm informação geográfica, variando de nomes de ruas a coordenadas precisas. Neste tutorial, vamos mostrar os diferentes tipos de mapa que você pode usar para transmitir informação e permitir que os usuários interajam e explorem os dados ambientais que você reuniu para sustentar a sua reportagem.</p> <h2 class="summary-item" id="pontos-de-interesse"><a href="#pontos-de-interesse">Pontos de Interesse</a></h2> <p dir="ltr">Pontos de interesse (do inglês Points of Interest) são o símbolo mais simples usados para produzir mapas. Você pode simplesmente pontuar o seu mapa com uma localidade específica que gostaria de destacar ou pode incluir vários pontos, ícones ou diversas localidades para representar os seus dados.</p> <p dir="ltr">No exemplo abaixo, feito no <a href="https://geojournalism.org/tools/fusion-tables/" title="Fusion Tables">Google Fusion Tables</a>, espécies de borboletas foram mapeadas na Costa Rica.</p> <p><iframe frameborder="no" height="350" loading="lazy" scrolling="no" src="https://www.google.com/fusiontables/embedviz?q=select+col12+from+1yooILLPC5cFA9y2TEedmBkHA8aO-JbpbcXsBeq4&amp;viz=MAP&amp;h=false&amp;lat=10.901887452028856&amp;lng=-85.40865571411138&amp;t=1&amp;z=10&amp;l=col12&amp;y=2&amp;tmplt=2" width="820"></iframe></p> <h2 class="summary-item" id="mapas-de-poligonos"><a href="#mapas-de-poligonos">Mapas de Polígonos</a></h2> <p dir="ltr">Esses mapas são úteis quando áreas, fronteiras, formatos ou limites precisam ser mostrados. Um exemplo clássico é o mapa de fronteiras mundiais ou um mapa que representa diferentes domínios naturais em uma área protegida.</p> <div class="wp-caption aligncenter" style="width: 692px"><img alt="" decoding="async" height="477" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Last_glacial_vegetation_map.png" width="682"/><p class="wp-caption-text">Mapa da Vegetação Mundial com dados do Centro Nacional de Dados Geofísicos. Imagem cedida pelo Wikimedia Commons.</p></div> <h2 class="summary-item" id="mapas-de-calor"><a href="#mapas-de-calor">Mapas de Calor</a></h2> <p dir="ltr">Quando uma concentração de acontecimentos ou pontos de interesse acontecem no mesmo lugar, é possível agrupar áreas usando um valor médio sobre uma região. Também conhecidos como mapas de isolinhas, e usados geralmente para visualização de dados climáticos, mapas de “calor” podem ser utilizados para verificar concentrações intensas particularmente evidentes nos seus dados.</p> <p dir="ltr">O exemplo abaixo mostra os pontos importantes de biodiversidade ao redor do mundo medindo a densidade de biomassa.</p> <div class="wp-caption aligncenter" style="width: 810px"><img alt="" class="" decoding="async" height="473" loading="lazy" src="https://e360.yale.edu/images/slideshows/gallery_ncsu_biodiversity_hotspots_global.jpg" width="800"/><p class="wp-caption-text">As áreas vermelhas representam aquelas com maior densidade de espécies e os territórios azuis, com a menor. Imagem cedida pela Saving Species 2012.</p></div> <h2 class="summary-item" id="mapa-de-bolhas"><a href="#mapa-de-bolhas">Mapa de Bolhas</a></h2> <p dir="ltr">Este tipo de mapa é semelhante ao mapa de pontos, com a diferença que você pode dimensionar o tamanho dos pontos de acordo com valores numéricos, criando a aparência de uma bolha para chamar atenção para eventos num determinado lugar. Esse estilo de mapa também é conhecido como mapa de “símbolos graduados”, já que os símbolos que apresenta não se limitam a círculos.</p> <p dir="ltr">No exemplo seguinte, as localidades de incêndios em florestas está organizado de acordo com o número de eventos. Este mapa foi produzido no <a href="https://geojournalism.org/tools/tableau-public-software/" title="Tableau">Tableau Public Software</a>.</p> <div class="wp-caption aligncenter" style="width: 692px"><img alt="" decoding="async" height="538" loading="lazy" src="https://www.tableausoftware.com/public/sites/default/files/Bubble%20Map%20Forest%20Fires.png" width="682"/><p class="wp-caption-text">O tamanho das bolhas sobre o mapa representa a quantidade de acres queimados, mostrando que a Costa Oeste dos Estados Unidos é mais afetada ao longo de um período de 10 anos. Imagem cedida pela Tableau Public.</p></div> <h2 class="summary-item" id="mapa-coropletico"><a href="#mapa-coropletico">Mapa Coroplético</a></h2> <p dir="ltr">Colorir polígonos tais como fronteiras de um país de acordo com valores representados no mapa é o chamado <a href="https://pt.wikipedia.org/wiki/Mapa_coropl%C3%A9tico" target="_blank" title="Mapa Coroplético na Wikipedia BR">mapa coroplético</a>. Este formato clássico de cartografia deve ser o estilo de mapa mais reconhecido. Mapas políticos, como os que mostram as divisões entre Republicanos e Democratas nos Estados Unidos, estão em todos os programas de TV e jornais. Mas há muitas outras maneiras de utilizar esse tipo de mapa. Um deles é fazer uso de uma graduação que siga um intervalo numérico. Para selecionar as cores, nós recomendamos a ferramenta <a href="https://geojournalism.org/tools/color-brewer/" title="Color Brewer">Color Brewer</a>.</p> <p>Aqui há um exemplo de um coroplético feito no projeto InfoAmazonia, que mostra a quantidade de cabeça de gado por município no Norte do Brasil.</p> <p><iframe frameborder="0" height="480" loading="lazy" src="https://infoamazonia.org/en/embed/?no_stories=1&amp;map_id=2530&amp;width=820&amp;height=480&amp;lat=-7.710991655433229&amp;lon=-59.23828124999999&amp;zoom=5" width="820"></iframe></p> <h2 class="summary-item" id="cartograma"><a href="#cartograma">Cartograma</a></h2> <p dir="ltr">Um cartograma distorce o tamanho das formas no mapa de acordo com os valores que elas representam. O exemplo abaixo dá um novo formato ao tamanho dos países de acordo com sua emissão de carbono. Como é possível verificar de imediato, os Estados Unidos e a China estão realmente inchados, enquanto o continente africano quase desaparece por inteiro.</p> <div class="wp-caption aligncenter" style="width: 690px"><img alt="" decoding="async" src="https://www.viewsoftheworld.net/wp-content/uploads/2010/11/CarbonEmissionMap_2009.jpg" width="680"/><p class="wp-caption-text">Mapa originalmente publicado em <a href="https://www.viewoftheworld.net">www.viewoftheworld.net</a></p></div> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://geojournalism.org/wp-content/uploads/2013/09/gustavo-faleiros.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <strong>Gustavo Faleiros</strong> é Jornalista formado pela PUC-SP com mestrado em Política Ambiental pelo King´s College da Universidade de Londres. Trabalhou como repórter da editoria Brasil do jornal Valor Ecônomico de 2001-2004 e, entre os 2006 e 2011, atuou como correspondente em Brasília e editor do site O Eco, onde foi responsável pelo lançamento dos projeto <a href="https://www.oecoamazonia.com/">oecoAmazonia</a> e <a href="https://www.oeco.com.br/geonoticia">Geonotícias</a>. Em 2012 lançou o projeto <a href="https://www.mapascoletivos.com.br/">mapasColetivos</a> com apoio do Instituto Claro e parceria com a jornalista Juliana Mori.  Atualmente, como bolsista Knight pelo ICFJ trabalha no portal de dados <a href="https://infoamazonia.org/" target="_blank">InfoAmazonia</a>, que reune mapas interativos com reportagens nos 9 países da floresta tropical. </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/map-styles/">Escolha o tipo certo de mapa para a sua reportagem</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 179 https://geojournalism.org/pt/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/ Gabriel Gianordoli Wed, 31 Jul 2013 19:39:07 +0000 Design Visualization deforestation data https://dev.cardume.art.br/toolkit/?p=131 <p>Neste tutorial vamos ver como fazer um gr&#225;fico de colunas a partir de dados de uma tabela e personaliz&#225;-lo com alguns &#237;cones. Introdu&#231;&#227;o O Adobe Illustrator &#233; uma ferramenta de desenho que pode tamb&#233;m ser utilizada na constru&#231;&#227;o de gr&#225;ficos est&#225;ticos simples. Embora suas op&#231;&#245;es sejam limitadas (barra, linha, &#225;rea, scatterplot, pizza e radar), suas [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/">Gráfico sobre desmatamento com Adobe Illustrator</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p>Neste tutorial vamos ver como fazer um gráfico de colunas a partir de dados de uma tabela e personalizá-lo com alguns ícones.<span id="more-131"></span></p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <p>O <a href="https://geojournalism.org/tools/adobe-illustrator/" title="Adobe Illustrator">Adobe Illustrator</a> é uma ferramenta de desenho que pode também ser utilizada na construção de gráficos estáticos simples. Embora suas opções sejam limitadas (barra, linha, área, scatterplot, pizza e radar), suas possibilidades de customização de cor, tipografia e outros elementos visuais fazem dele um software bastante popular.</p> <p>Neste tutorial vamos ver como fazer um gráfico de colunas a partir de dados de uma tabela e personalizá-lo com alguns ícones.</p> <h2 class="summary-item" id="comecando-um-novo-documento"><a href="#comecando-um-novo-documento">Começando um novo documento</a></h2> <p>No menu superior, selecione arquivo &gt; novo. Nomeie o arquivo e mantenha as configurações padrão de tamanho (A4), alterando apenas a orientação da página para “paisagem”.</p> <p style="text-align: center;"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter" decoding="async" height="578" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator01-1024x826.png" width="717"/></p> <h2 class="summary-item" id="ferramentas"><a href="#ferramentas">Ferramentas</a></h2> <p>Se você nunca usou o Illustrator antes, não se assuste: são poucas as ferramentas de que vamos precisar.<br/> A primeira é a ferramenta gráfico de colunas. Selecione ela e depois clique e arraste definindo uma área sobre o documento, que será o tamanho do seu gráfico.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02.png"><img alt="" class="aligncenter" decoding="async" height="614" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02-144x1024.png" width="86"/></a></p> <h2 class="summary-item" id="adicionando-os-dados"><a href="#adicionando-os-dados">Adicionando os dados</a></h2> <p>Assim que você definir a área do seu gráfico, uma janela aparecerá com uma tabela em branco. Vamos usar os dados totais de desflorestamento da Amazônia Legal de 2004 a 2012, medidos pelo <a href="https://www.obt.inpe.br/prodes/index.php" target="_blank">PRODES</a>. Você pode selecionar a linha com os números correspondentes (apenas os totais, sem a taxa de variação ou os números por Estado) e colar direto na janela do Illustrator.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-242" decoding="async" height="231" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-300x112.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png 1758w" width="614"/></a></p> <p>Cole os dados na segunda linha. Vamos usar a primeira linha para inserir a legenda dos anos.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-243" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png 1380w" width="614"/></a></p> <p>Para que o software interprete os números dos anos como legendas, e não valores, eles precisam estar entre aspas.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-244" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png 1380w" width="614"/></a></p> <p>Por último, inverta os valores de linha e coluna selecionando <i>transpor linha/coluna</i>.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-245" decoding="async" height="301" loading="lazy" sizes="auto, (max-width: 540px) 100vw, 540px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png 900w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator06-300x167.png 300w" width="540"/></a></p> <p>Clicando no botão <i>aplicar</i> ou salvando as alterações ao fechar a janela, o gráfico de colunas vai ser desenhado.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-246" decoding="async" height="329" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-300x160.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png 1596w" width="614"/></a></p> <h2 class="summary-item" id="formatando-o-grafico"><a href="#formatando-o-grafico">Formatando o gráfico</a></h2> <p>Você pode alterar as legendas e cores do seu gráfico usando a ferramenta <i>seleção direta</i>. Use a ferramenta <i>seleção</i> apenas se quiser mover o gráfico inteiro.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png"><img alt="illustrator08" class="aligncenter wp-image-247" decoding="async" height="111" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png" width="101"/></a></p> <p>Ao selecionar um elemento, a barra superior exibirá suas características que podem ser alteradas (cores, fonte, tamanho da fonte, contorno etc).</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"><img alt="illustrator09" class="aligncenter wp-image-248" decoding="async" height="34" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-300x14.png 300w" width="717"/></a><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"><br/> </a></p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-249" decoding="async" height="364" loading="lazy" sizes="auto, (max-width: 645px) 100vw, 645px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png 1312w" width="645"/></a></p> <p>Aqui, um aviso: não desagrupe o gráfico (<i>Objeto</i> &gt; <i>Desagrupar</i>). Embora isso te permita alterar mais facilmente os elementos isoladamente, você perderá a capacidade de editar os dados e outras opções de formatação dele.</p> <h2 class="summary-item" id="inserindo-imagens"><a href="#inserindo-imagens">Inserindo imagens</a></h2> <p>Você pode customizar seu gráfico para que ele exiba imagens ao invés de colunas. Qualquer imagem desenhada no Illustrator vai funcionar para isso. No nosso caso, vamos usar um ícone à disposição para download no site <a href="https://thenounproject.com/noun/tree/#icon-No2429" target="_blank">NounProject</a>. A licença desse desenho é livre para uso, modificação e reprodução. Alguns outros desenhos do site podem impor restrições de uso que variam da obrigatoriedade de citar o autor até a proibição de uso comercial, fique atento para isso quando fizer novas pesquisas.</p> <p>Ao descompactar o <i>.zip</i> do site, você encontrará um arquivo <i>.svg</i>. Esse é um tipo de arquivo vetorial, portanto escalonável, bastante comum. Abra ele no Illustrator, clique na árvore com a ferramenta <i>seleção</i> e cole-a no arquivo que contém o gráfico.</p> <p>Você pode alterar as cores desse desenho da mesma forma que fizemos com as colunas antes. Aqui, vou deixar a árvore verde e sem contorno:</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-250" decoding="async" height="94" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png" width="104"/></a></p> <p><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png"><img alt="illustrator12" class="aligncenter size-full wp-image-251" decoding="async" height="188" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png" width="168"/></a></p> <p>Agora, selecione a árvore e use o comando <i>Objeto</i> &gt; <i>Gráfico</i> &gt; <i>Design</i>, no menu superior. Na caixa de diálogo <i>Design</i>, selecione <i>Novo design</i>.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-252" decoding="async" height="611" loading="lazy" sizes="auto, (max-width: 546px) 100vw, 546px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png 910w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator13-268x300.png 268w" width="546"/></a></p> <h2 class="summary-item" id="aplicando-imagens-no-grafico"><a href="#aplicando-imagens-no-grafico">Aplicando imagens no gráfico</a></h2> <p>Clique sobre o gráfico com a ferramenta <i>seleção</i>, clique novamente com o botão direito e selecione <i>Coluna</i>. Selecione seu gráfico na lista do lado esquerdo. A partir daí, existem 4 opções para aplicar o ícone nas colunas: as duas primeiras vão redimensionar o desenho (distorcendo ou não). Na última, apenas um pedaço do ícone é redimensionado, fazendo ele se “esticar” até a altura da barra. Vamos usar a 3ª opção, onde os símbolos vão sendo repetidos de acordo com o valor da coluna. Na segunda caixa, selecione o valor que cada ícone vai representar. Observando os números da nossa lista, que vão de aproximadamente 4500 a 27000, podemos usar 5000 como unidade. A última opção especifica se valores fracionados a partir da unidade definida (5000) vão ser representados por um desenho cortado ou dimensionado. Vamos ficar com a primeira opção.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-253" decoding="async" height="346" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png 1322w" width="614"/></a></p> <h2 class="summary-item" id="finalizando-a-formatacao"><a href="#finalizando-a-formatacao">Finalizando a formatação</a></h2> <p>Você pode acessar outras opções de fornatação do gráfico — inclusive mudando o gráfico inteiro para uma das outras formas pré-definidas, como gráfico de pizza —, clicando com o botão direito sobre ele e selecionando <i>Tipo.</i> Nesse caso, vamos alterar apenas alguns detalhes dos eixos x e y para melhorar a legibilidade.</p> <p>No menu <i>Eixo de valor</i>, altere as <i>marcas de escala</i> de forma que elas ocupem toda a largura do gráfico. Como não estamos escrevendo os valores sobre as colunas, essas marcações vão ajudar a melhorar sua leitura.</p> <p>No menu <i>Eixo de categoria</i>, retire as marcas de escala, já que as colunas já são o suficiente para dividir os anos.</p> <p>Por fim, deixe um pouco mais clara a cor das marcas horizontais, para que elas interfiram menos sobre seu desenho. E adicione o título com a ferramenta <i>texto </i>(ele será um elemento separado do gráfico):</p> <p><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png"><img alt="illustrator15" class="aligncenter size-full wp-image-254" decoding="async" height="50" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png" width="60"/></a></p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png"><img alt="illustrator16" class="aligncenter wp-image-255" decoding="async" height="406" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-300x198.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png 1294w" width="614"/></a></p> <h2 class="summary-item" id="conclusao"><a href="#conclusao">Conclusão</a></h2> <p>Embora o esforço para gerar um gráfico no Illustrator possa parecer grande à primeira, as opções de desenho e personalização compensam a tentativa. Esse tutorial apresenta apenas uma introdução à ferramenta de gráficos. Se não estiver confiante o bastante para começar tudo do zero, baixe o arquivo <i>.ai </i>desse exemplo e altere o que achar necessário.Tente explorar outras opções clicando com o botão direito sobre o gráfico. Você poderá inclusive voltar à tabela original para alterar os números ao selecionar a opção <i>Dados</i> — o que é bastante útil quando você ainda não tem certeza de estar trabalhando com as informações finais.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://lh4.googleusercontent.com/-DK3qONGlzXk/AAAAAAAAAAI/AAAAAAAAAFQ/dgEWkgWJHaQ/s120-c/photo.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/07/grafico-sobre-desmatamento-com-adobe-illustrator/">Gráfico sobre desmatamento com Adobe Illustrator</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 131