As melhores ferramentas para reportagem multimídia Mon, 22 Aug 2016 14:58:43 +0000 pt-BR hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/pt/2016/08/how-to-make-an-animated-forest-fire-map-using-google-my-maps-and-carto/ Gustavo Faleiros Fri, 19 Aug 2016 20:55:52 +0000 Maps Visualization Carto cartography https://geojournalism.org/?p=1520 <p>&#160; &#160;Introdu&#231;&#227;o Queimadas e inc&#234;ndios florestais s&#227;o um dos problemas ambientais mais graves e, infelizmente, mais comuns em quase todo o planeta. Na Amaz&#244;nia, Bacia do Congo ou Sudeste Asi&#225;tico, as grandes queimas de vegeta&#231;&#227;o podem significar o avan&#231;o do desmatamento. Em grande parte, inc&#234;ndios s&#227;o provocados pelo ser humano com o fim de &#8220;limpar [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2016/08/how-to-make-an-animated-forest-fire-map-using-google-my-maps-and-carto/">Como fazer um mapa animado de incêndio florestal utilizando Google My Maps e Carto</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p> </p> <h1 class="summary-item" id="introducao"><a href="#introducao"> Introdução</a></h1> <p>Queimadas e incêndios florestais são um dos problemas ambientais mais graves e, infelizmente, mais comuns em quase todo o planeta. Na Amazônia, Bacia do Congo ou Sudeste Asiático, as grandes queimas de vegetação podem significar o avanço do desmatamento. Em grande parte, incêndios são provocados pelo ser humano com o fim de “limpar o terreno” para a produção agrícola ou a abertura de pastagens.</p> <p>Neste tutorial, vamos demonstrar como é possível criar seu próprio mapa de focos de calor com atualização em tempo real ou análises gráficas. Isso é possível graças a disponibilidade de dados advindos de satélites em órbita na Terra. As bases de dados são fornecidas diariamente pela NASA – agência espacial americana – e podem ser visualizadas com o auxílio de duas ferramentas de produção de mapas digitais – o Google My Maps e o Carto.</p> <h1 class="summary-item" id="encontre-os-dados"><a href="#encontre-os-dados">Encontre os dados</a></h1> <p>O site <a href="https://earthdata.nasa.gov/" target="_blank">Earth Data</a> da NASA é um dos mais completos repositórios de dados satelitais disponíveis gratuitamente. Através do sistema <a href="https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms%20%20%C2%A0" target="_blank">FIRMS (Fire Information Resouce Management System)</a> é possível acessar às bases de dados em tempo real em diversos formatos de arquivo e também requisitar séries históricas para download. Neste tutorial, nós vamos trabalhar com o formato <a href="https://geojournalism.org/tracks/csv/" target="_blank">CSV</a>, a tabela separadas por vírgulas.</p> <p><a href="https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms/active-fire-data" target="_blank"><img alt="Active Fire Data site" class="aligncenter wp-image-1523" decoding="async" fetchpriority="high" height="326" sizes="(max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-site-1024x521.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-site-1024x521.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-site-300x153.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-site.jpg 1898w" width="640"/></a></p> <p style="text-align: center;"> <em>Está é a página Active Fire Data no site Earth Data da NASA</em></p> <p>O primeiro passo após acessar a página do FIRMS  é continuar até repositório <a href="https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms/active-fire-data">Active Fire Data</a>.  Existem duas bases de dados que podem ser utilizadas. Uma delas, proveniente do sensor <a href="https://modis.gsfc.nasa.gov/" target="_blank">MODIS</a>, embora tenha menor resolução (1 km), possui série histórica mais longa, pois o sensor já opera há anos no satélites Terra e Aqua. Uma base mais recente, a do <a href="https://jointmission.gsfc.nasa.gov/viirs.html" target="_blank">sensor VIIRS</a>, possui maior resolução (375 m) e, por esta razão, gera maior quantidade de dados. Para nosso exemplo, usaremos o arquivo texto (CSV) do sensor MODIS para o período de 24 horas para a África Central.</p> <p><img alt="Active Fire Data selection" class="aligncenter wp-image-1522" decoding="async" height="352" sizes="(max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-selection-1024x563.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-selection-1024x563.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-selection-300x165.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/Active-Fire-Data-selection.jpg 1544w" width="640"/></p> <p>Uma vez selecionado, o arquivo pode ser salvo como um CSV ou seu link pode ser usado para atualizar planilhas em tempo real. A planilha que vai conter os dados de incêndios pode estar armazenada em um arquivo CSV ou pode ser armazenada diretamente na planilha Google que permite a constante atualização a cada vez que ela é aberta.</p> <p>Para importar um link basta criar uma nova planilha e inserir a seguinte formula em qualquer célula</p> <div class="et-box et-shadow"> <div class="et-box-content">=ImportaData(“URL”)</div></div> <div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control">   <li><a href="#"> Insira a fórmula </a></li> <li><a href="#"> Este é o formato final da tabela </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper">   <div class="et_slidecontent"> <img alt="Formula Import 2" class="aligncenter wp-image-1534" decoding="async" height="548" sizes="(max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/Formula-Import-2-1024x877.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/Formula-Import-2-1024x877.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/Formula-Import-2-300x257.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/Formula-Import-2.jpg 1153w" width="640"/> </div> <div class="et_slidecontent"> <img alt="full spreadsheet" class="aligncenter wp-image-1537" decoding="async" height="440" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-1024x704.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-1024x704.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-300x206.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet.jpg 1454w" width="640"/> </div> </div> </div> </div> .et-tabs-container <h1 class="summary-item" id="abrindo-a-planilha-nos-softwares-de-mapa"><a href="#abrindo-a-planilha-nos-softwares-de-mapa">Abrindo a planilha nos softwares de mapa</a></h1> <p>Agora, você já pode abrir o arquivo CSV diretamente nos software de visualização.</p> <p>Comecemos com o Google My Maps</p> <p>1.Escolha criar um novo Google My Maps no menu do Google Drive</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/03/selecting-mymaps.jpg"><img alt="selecting mymaps" class="aligncenter wp-image-1544" decoding="async" height="469" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/selecting-mymaps.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/selecting-mymaps.jpg 990w, https://geojournalism.org/wp-content/uploads/2016/03/selecting-mymaps-300x220.jpg 300w" width="640"/></a></p> <p>2. Clique em ‘Adicionar Nova Camada’ e ‘Importar’</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/03/Import-my-maps.jpg"><img alt="Import my maps" class="aligncenter wp-image-1538" decoding="async" height="480" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/Import-my-maps-1024x768.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/Import-my-maps-1024x768.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/Import-my-maps-300x225.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/Import-my-maps.jpg 1302w" width="640"/></a></p> <p>3. Utilize a opção de conectar uma planilha Google ao seu mapa. Alternativamente, você pode carregar a planilha CSV diretamente.</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/03/selecting-spreadsheet-my-maps.jpg"><img alt="selecting spreadsheet my maps" class="aligncenter wp-image-1545" decoding="async" height="330" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/selecting-spreadsheet-my-maps-1024x528.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/selecting-spreadsheet-my-maps-1024x528.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/selecting-spreadsheet-my-maps-300x155.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/selecting-spreadsheet-my-maps.jpg 1909w" width="640"/></a></p> <div class="et-box et-warning"> <div class="et-box-content">Planilhas com mais de 1000 pontos não serão visualizadas no Google My Maps</div></div> <p><strong>Agora façamos o mesmo em Carto.com</strong></p> <p>1. Conecte-se ao Carto.com<a href="https://geojournalism.org/wp-content/uploads/2016/03/CartoDB-Login.jpg"><img alt="CartoDB Login" class="aligncenter wp-image-1524" decoding="async" height="307" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/CartoDB-Login-1024x491.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/CartoDB-Login-1024x491.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/CartoDB-Login-300x144.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/CartoDB-Login.jpg 1915w" width="640"/></a> (uma conta gratuita de 250 MB satisfaz ao nosso exercício).</p> <p>2. Escolha a opção ‘Dataset’e carregue o arquivo CSV.</p> <p><img alt="dataset page cartodb" class="aligncenter wp-image-1528" decoding="async" height="349" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/dataset-page-cartodb-1024x559.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/dataset-page-cartodb-1024x559.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/dataset-page-cartodb-300x164.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/dataset-page-cartodb.jpg 1714w" width="640"/></p> <p>3. Outra maneira de carregar os dados é utilizar o link do CSV (em uma conta paga, existe a opção de sincronizar o dataset.)</p> <p><img alt="full spreadsheet carto db" class="aligncenter wp-image-1536" decoding="async" height="316" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-carto-db-1024x505.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-carto-db-1024x505.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-carto-db-300x148.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/full-spreadsheet-carto-db.jpg 1888w" width="640"/></p> <h1 class="summary-item" id="estilizando-os-mapas-no-google-my-maps-e-carto-com"><a href="#estilizando-os-mapas-no-google-my-maps-e-carto-com">Estilizando os mapas no Google My Maps e Carto.com</a></h1> <p>Em ambos os programas é possível alterar o estilo e a cor dos ícones. Também se pode elaborar análises gráficas simples, como divisão por categorias ou animação dos dados por tempo.</p> <p>Em Google My Maps faça os seguintes testes</p> <p>1. Altere o ícone, tanto seu formato como cor ou carregue um ícone próprio clicando sobre os pontos criados&gt;Mais ícones&gt;Ícone Personalizado</p> <p><img alt="Final my maps" class="aligncenter wp-image-1532" decoding="async" height="319" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/Final-my-maps-1024x510.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/Final-my-maps-1024x510.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/Final-my-maps-300x149.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/Final-my-maps.jpg 1910w" width="640"/></p> <p>2. Classifique os dados atrelando cores a algum dos parâmetros. Para isso é necessário escolher uma coluna de dados para estilizar os ícones.</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/08/Google-my-maps.png"><img alt="" class="aligncenter wp-image-1654 size-full" decoding="async" height="339" loading="lazy" sizes="auto, (max-width: 587px) 100vw, 587px" src="https://geojournalism.org/wp-content/uploads/2016/08/Google-my-maps.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Google-my-maps.png 587w, https://geojournalism.org/wp-content/uploads/2016/08/Google-my-maps-300x173.png 300w" width="587"/></a></p> <p>No caso do Carto é possível fazer análises mais elaboradas. Faça os seguintes testes</p> <p>1. Divida por categorias</p> <p><img alt="final + customize cartodb" class="aligncenter wp-image-1531" decoding="async" height="313" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/final-customize-cartodb-1024x501.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/final-customize-cartodb-1024x501.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/final-customize-cartodb-300x147.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/final-customize-cartodb.jpg 1910w" width="640"/></p> <p>2. Faça um mapa de pontos animado por tempo como este abaixo feito para a América do Sul. <a href="https://carto.com/docs/tutorials/heatmap/" target="_blank">Utilize a ferramenta Torque</a></p> <p><iframe allowfullscreen="allowfullscreen" frameborder="0" height="520" loading="lazy" src="https://gufalei.carto.com/viz/dd6eac5c-581a-11e6-8e06-0e05a8b3e3d7/embed_map" width="100%"></iframe></p> <h1 class="summary-item" id="compartilhe-e-utilize-os-mapas-em-suas-reportagens"><a href="#compartilhe-e-utilize-os-mapas-em-suas-reportagens"> Compartilhe e utilize os mapas em suas reportagens</a></h1> <p>Agora, basta compartilhar publicar e compartilhar o mapa.</p> <p>1. Tanto no Google My Maps com no Carto</p> <p><img alt="embed my maps" class="aligncenter wp-image-1530" decoding="async" height="572" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/embed-my-maps.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/embed-my-maps.jpg 1001w, https://geojournalism.org/wp-content/uploads/2016/03/embed-my-maps-300x268.jpg 300w" width="640"/></p> <p><img alt="embed cartodb" class="aligncenter wp-image-1529" decoding="async" height="447" loading="lazy" sizes="auto, (max-width: 640px) 100vw, 640px" src="https://geojournalism.org/wp-content/uploads/2016/03/embed-cartodb-1024x715.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/03/embed-cartodb-1024x715.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/03/embed-cartodb-300x210.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/03/embed-cartodb.jpg 1271w" width="640"/></p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAlOAAAAJGJmNmMxZTFiLWY5ODUtNGFlNy05MTE0LTZjNDk3ZWJmNWRkMA.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <b>Gustavo Faleiros </b> é coordenador da Earth Journalism Network. Trabalhou como repórter da editoria Brasil do jornal Valor Ecônomico de 2001-2004 e, entre os 2006 e 2011, atuou como editor do site O Eco. Em 2012,como bolsista Knight pelo ICFJ,  lançou os projetos mapasColetivos e InfoAmazonia.org. </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/2016/08/how-to-make-an-animated-forest-fire-map-using-google-my-maps-and-carto/">Como fazer um mapa animado de incêndio florestal utilizando Google My Maps e Carto</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 1520 https://geojournalism.org/pt/2014/10/mixing-shapefiles-and-comma-separated-files-in-qgis/ Vitor George Mon, 13 Oct 2014 22:03:57 +0000 Dados Maps Visualization https://geojournalism.oeco.org.br/?p=1078 <p>&#160; Introdu&#231;&#227;o &#160;O formato CSV, do ingl&#234;s&#160;Comma Separated File, especifica um tipo de arquivo de dados armazenados de maneira tabular, em que cada linha &#233; um registro e campos s&#227;o separados por v&#237;rgula. Este formato &#233; aceito por ferramentas populares, como o Excel, LibreOffice e Google Docs, e por praticamente todas linguagens de programa&#231;&#227;o. Neste [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2014/10/mixing-shapefiles-and-comma-separated-files-in-qgis/">Construindo um mapa com csv e shapefile no QGIS</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p> </p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <div> O formato CSV, do inglês <em>Comma Separated File</em>, especifica um tipo de arquivo de dados armazenados de maneira tabular, em que cada linha é um registro e campos são separados por vírgula. Este formato é aceito por ferramentas populares, como o Excel, LibreOffice e Google Docs, e por praticamente todas linguagens de programação. Neste tutorial vamos descobrir como utilizar um arquivo CSV no QGIS, ferramenta de GIS aberta, para construir um mapa sobre a renda dos habitantes da cidade de São Paulo.</div> <div></div> <h2 class="summary-item" id="preparacao"><a href="#preparacao">Preparação</a></h2> <div>Vamos utilizar os dados do <a href="https://censo2010.ibge.gov.br/resultados" target="_blank">Censo Brasileiro 2010</a>, realizado pelo IBGE, preparados para este tutorial e disponíveis <a href="https://geojournalism.org/?attachment_id=1085" target="_blank">aqui</a>. Baixe os arquivos e descompacte em um diretório local.</div> <div></div> <div>Baixe e instale o <a href="https://qgis.org/en/site/forusers/download.html" target="_blank">QGIS</a>. Este tutorial usa a versão 2.2, mas é possível também seguir os passos com a versão 2.0.</div> <div></div> <h2 class="summary-item" id="construindo-o-mapa"><a href="#construindo-o-mapa">Construindo o mapa</a></h2> <div>Abra o QGIS e adicione uma camada vetorial a partir do arquivo <em>censo-2010-sp-setores.shp</em>.</div> <div></div> <div><a href="https://geojournalism.org/wp-content/uploads/2014/06/passo-1.gif"><img alt="Abrindo shapefile no QGIS" class="aligncenter wp-image-1089" decoding="async" height="600" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/06/passo-1.gif" width="800"/></a></div> <div></div> <div></div> <div> Agora, adicione uma camada de texto delimitado a partir do arquivo <em>censo-2010-sp-stats.csv:</em></div> <div></div> <div></div> <div><a href="https://geojournalism.org/wp-content/uploads/2014/06/passo-2.gif"><img alt="passo-2" class="aligncenter wp-image-1091" decoding="async" height="492" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/06/passo-2.gif" width="800"/></a></div> <div></div> <div> <div>Crie uma união entre as duas camadas, na área de propriedades do arquivo shapefile:</div> <div></div> <div> <a href="https://geojournalism.org/wp-content/uploads/2014/06/passo-3.gif"><img alt="passo-3" class="aligncenter wp-image-1093" decoding="async" height="543" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/06/passo-3.gif" width="800"/></a></div> <div></div> <div> <div>Esta união de camadas permite criar um estilo para o mapa baseado nos dados que vieram do arquivo CSV. Entre novamente na área de propriedades da camada dos setores e vá para aba de estilo.</div> <div></div> <div>Mude o estilo para ‘Graduado’, adicione no campo da coluna a fórmula <em>toreal(“censo-2010-sp-data_V009” ), </em>escolha a palheta de cores adequada e marque a caixa de modo como <em>Quantil.</em></div> <div></div> <div><a href="https://geojournalism.org/wp-content/uploads/2014/06/passo-4-pt.gif"><img alt="passo-4-pt" class="aligncenter wp-image-1112" decoding="async" height="527" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/06/passo-4-pt.gif" width="800"/></a></div> <div></div> <div></div> <h2 class="summary-item" id="o-mapa-resultante"><a href="#o-mapa-resultante">O mapa resultante</a></h2> <div></div> <div>Agora você pode adicionar uma legenda e exportar a imagem do mapa para ter um resultado como este:</div> <div></div> <div></div> <div><a href="https://geojournalism.org/wp-content/uploads/2014/06/mapa1.png"><img alt="mapa" class="aligncenter wp-image-1108" decoding="async" height="1753" loading="lazy" sizes="auto, (max-width: 1240px) 100vw, 1240px" src="https://geojournalism.org/wp-content/uploads/2014/06/mapa1.png" srcset="https://geojournalism.org/wp-content/uploads/2014/06/mapa1.png 1240w, https://geojournalism.org/wp-content/uploads/2014/06/mapa1-212x300.png 212w, https://geojournalism.org/wp-content/uploads/2014/06/mapa1-724x1024.png 724w" width="1240"/></a></div> </div> <div>  <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://geojournalism.org/wp-content/uploads/2015/02/IMG_20140611_130510_-2594441642.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <a href="https://www.twitter.com/vitor_george" target="_blank"><strong>Vitor George</strong></a> é engenheiro de transportes, <a href="https://www.github.com/vgeorge" target="_blank">programador</a> e especialista em dados abertos e tecnologias para cartografia na web. Coordena a iniciativa <a href="https://codigourbano.org">Código Urbano</a> e é colaborador do <a href="https://www.infoamazonia.org">InfoAmazonia</a>. </div> <!-- .author-info --> </div> <!-- .author-inner --> </div> <!-- .author-shortcodes --></div> </div> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <p>The post <a href="https://geojournalism.org/pt/2014/10/mixing-shapefiles-and-comma-separated-files-in-qgis/">Construindo um mapa com csv e shapefile no QGIS</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 1078 https://geojournalism.org/pt/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/ Oluseun Onigbinde Thu, 13 Feb 2014 18:29:25 +0000 Apps Dados Visualization https://geojournalism.oeco.org.br/?p=968 <p>Organiza&#231;&#245;es de m&#237;dia proeminentes est&#227;o usando o Datawrapper, uma ferramenta simples e gratuita, para melhorar a sua narrativa desta forma. O Datawrapper &#233; um aplicativo gr&#225;fico interativo que pode ser incorporado em mat&#233;rias como esta, que mostra a proposta de or&#231;amento do governo nigeriano em 10 gr&#225;ficos. Para sustentar a aten&#231;&#227;o do usu&#225;rio e direcionar [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/">Passos fáceis para fazer gráficos e infográficos usando DataWrapper</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p>Organizações de mídia proeminentes estão usando o <a href="https://datawrapper.de" target="_blank">Datawrapper</a>, uma ferramenta simples e gratuita, para melhorar a sua narrativa desta forma. O Datawrapper é um aplicativo gráfico interativo que pode ser incorporado em matérias como <a href="https://www.yourbudgit.com/blog/view/8" target="_blank">esta</a>, que mostra a proposta de orçamento do governo nigeriano em 10 gráficos.</p> <p><span id="more-968"></span></p> <p>Para sustentar a atenção do usuário e direcionar o engajamento público, jornalistas e veículos de comunicação devem aprender a utilizar a visualizações de dados.</p> <p>Visualizações de dados permitem explicar um conjunto de dados de forma simples com um infográfico, um aplicativo interativo ou um quadro. Com inúmeras matérias competindo pela atenção dos usuários na Internet, as visualizações de dados são uma forma criativa de atrair os usuários para seu conteúdo e acrescentar contexto ou uma perspectiva diferente para a sua história.<a href="https://geojournalism.org/wp-content/uploads/2014/02/dsc_4391.jpg"><img alt="dsc_4391" class="size-full wp-image-994 alignright" decoding="async" height="200" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/02/dsc_4391.jpg" width="300"/></a></p> <p>Como <a href="https://www.icfj.org/about/profiles/oluseun-onigbinde" target="_blank">bolsista do programa Knight International Journalism Fellowship do Centro Internacional para Jornalistas</a> na Nigéria, eu trabalho com o uso de métodos digitais para apoiar os jornalistas na melhoria de sua narrativa jornalística e na promoção de um engajamento mais amplo. Nossa equipe de bolsistas e o nosso <a href="https://groups.google.com/forum/?hl=en#%21forum/hackshackers-lagos" target="_blank">grupo HacksHackers local</a> em Lagos organizou recentemente uma aula de jornalismo de dados focada em como usar o aplicativo <a href="https://datawrapper.de/" target="_blank">Datawrapper</a> para fortalecer a narrativa de uma reportagem.</p> <p>Nossos participantes nunca tinham usado DataWrapper, mas é tão simples de usar que voltaram para suas redações e já criaram estas visualizações:</p> <p>—<a href="https://sustainableconvos.com/infographics-population-and-economic-growth/" target="_blank">Infografia sobre população e crescimento econômico</a></p> <p>—<a href="https://www.yarnmesomething.com/2014/01/marketing-gadgets-to-women.html" target="_blank">Aparelhos de marketing para mulheres</a></p> <p>—<a href="https://www.tech360ng.com/activities-social-media-driving-force-data-demand/" target="_blank">A mídia social é uma força propulsora para a demanda de dados</a></p> <h2 class="summary-item" id="comeca-a-usar-o-datawrapper"><a href="#comeca-a-usar-o-datawrapper">Começa a usar o DataWrapper</a></h2> <p> </p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Passo 1 </a></li> <li><a href="#"> Passo 2 </a></li> <li><a href="#"> Passo 3 </a></li> <li><a href="#"> Passo 4 </a></li> <li><a href="#"> Passo 5 </a></li> <li><a href="#"> Passo 6 </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> <p>1. Encontre um conjunto de dados</p> <p>Você vai precisar de um conjunto de dados em formato de planilha. Neste exemplo, estou usando um conjunto de dados obtido a partir do <a href="https://budgetoffice.gov.ng" target="_blank">Escritório de Orçamento da Federação</a> da Nigéria. Se você não tem sua própria planilha útil, use o mesmo que eu fiz para que possa experimentar o Datawrapper e compreender o poder da ferramenta. A planilha de orçamento está disponível gratuitamente aqui no <a href="https://docs.google.com/spreadsheet/ccc?key=0Aj_5npSmNt1IdHRlOHIxWElRRjlySU1jYkc5QnAydEE&amp;usp=sharing" target="_blank">Google Doc</a>.</p> </div> <div class="et_slidecontent"> <p>2. Acesse o site do Datawrapper através de um endereço de e-mail ou senha de Twitter</p> <div> <p><img alt="image: " class="aligncenter" decoding="async" height="241" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data1.png?itok=H_Y9s89A" title="image: " width="420"/></p> </div> <div class="et_slidecontent"> <p>3. Em seguida, copie e cole os dados de uma planilha do Microsoft Excel ou faça o upload de um documento de planilha CSV.</p> </div> <div><img alt="image: " class="aligncenter" decoding="async" height="192" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data3.png?itok=yYlCbqXb" title="image: " width="420"/></div> <div> </div> <div class="et_slidecontent"> </div> <div></div> <div>4. O aplicativo DataWrapper traduz os dados em uma tabela e exibe isso para você. Você pode adicionar fontes de dados e também links se tiver. Se a tabela parece boa, clique no botão ” Visualize.”</div> <div><img alt="image: " class="aligncenter" decoding="async" height="184" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data4.png?itok=o0WElFyq" title="image: " width="420"/></div> <div> </div> <div class="et_slidecontent"> </div> <div></div> <div>5. Em seguida, você verá a aba “Visualize”, que mostra uma variedade de tipos de gráficos que pode usar.</div> <div><img alt="image: " class="aligncenter" decoding="async" height="254" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data5.png?itok=T7P6ig4X" title="image: " width="420"/></div> <p>Precisa de ajuda para descobrir qual o tipo de gráfico usar? Confira este <a href="https://extremepresentation.typepad.com/blog/files/choosing_a_good_chart.pdf" target="_blank">guia</a> (em inglês).</p> <p>As mini-abas podem ajudar a refinar o gráfico. Permitem adicionar títulos e descrições, e também alterar os layouts.</p> </div> <div class="et_slidecontent"> <p></p> <p>6. Finalmente, você pode copiar e colar o código embutido e publicar o gráfico. (Se precisar corrigir a tabela mais tarde, vai precisar republicar o gráfico para obter um novo código).</p> <div><img alt="image: " class="aligncenter" decoding="async" height="231" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data6.png?itok=Da6WjJ7a" title="image: " width="420"/></div> <div> </div> </div> </div> </div> <!-- .et-tabs-container --></div> <p>Espero que você experimente o DataWrapper e publique suas visualizações em seu site de notícias ou seu próprio blog.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://pbs.twimg.com/profile_images/420474130799284224/k_pzRQfA.jpeg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <em><a href="https://twitter.com/seunonigbinde" target="_blank">Oluseun Onigbinde</a> é um inovador digital e defensor de dados abertos. Como parte de sua <a href="https://www.icfj.org/our-work/nigeria-increasing-citizen-engagement-health-news" target="_blank">bolsa do Knight International Journalism Fellowship do Centro Internacional para Jornalistas</a> na Nigéria, ele promove o uso de ferramentas digitais criativas em organizações de mídia para aumentar a participação do público sobre questões fundamentais para o desenvolvimento, como saúde e educação.</em> </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/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/">Passos fáceis para fazer gráficos e infográficos usando DataWrapper</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 968 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" height="551" loading="lazy" sizes="auto, (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" loading="lazy" sizes="auto, (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" loading="lazy" sizes="auto, (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