Projetando visualizações de dados: começando com o processamento

1. Introdução: Oi, meu nome é Nicholas Felton. Sou um designer de informação baseado em Nova Iorque. A maior parte do meu trabalho é fazer a visualização de dados com base em dados pessoais ou em outros conjuntos de dados que eu encontrar no mundo. Comecei a trabalhar com dados há cerca de 10 anos. Como designer gráfico em busca de histórias, descobri que a que eu tinha o melhor acesso era minha, e era mais fácil coletar isso na forma de dados. As visualizações de dados saem disso como uma forma de representar essas histórias de forma compacta e interessante. Minha investigação de dados pessoais foi em grande parte impulsionada pela curiosidade. Eu tenho esse desejo de conhecer o incognoscível, é quase como ser um explorador. Sou influenciado pelo tipo de ciência, matemática, geometria, minimalismo. Esta classe vai abordar uma das coisas que eu acho mais interessante, que é pegar um conjunto de dados realmente enorme, um que você nunca poderia gerenciar manualmente, e colocar todos esses pontos em um mapa. Neste caso, vamos ver os ataques de meteoritos em todo o mundo. Nós temos um conjunto de dados de cerca de 34.000 pontos, e nós vamos colocar tudo isso em um mapa, e rotular o site de topo. Eu acho que esta é fundamentalmente uma classe de design, mas também deve ser uma boa introdução ao processamento. Espero que ele desça um pouco a cortina e mostre às pessoas como é fácil começar e quanta potência você tem para manipular seus projetos usando o processamento. Vamos trabalhar em três áreas diferentes hoje. Um deles vai ser sobre olhar para os dados, investigar um pouco em uma planilha e, em seguida, passar para o processamento. Aqui vamos fazer a maior parte do trabalho, onde estaremos configurando um programa que pode analisar os dados, e projetá-los em um mapa. Finalmente, no Illustrator, vamos limpar um pouco e mostrar algumas das maneiras de arrumá-lo e corrigir alguns dos problemas. Você não tem que ser um designer para fazer essa aula, você apenas tem que ter alguma curiosidade ou interesse em começar a transformar uma tabela de números em algo que é realmente consumível. Eu escolhi o conjunto de dados e escrevi o aplicativo que eu vou orientá-lo. Isso garantirá que todos possam chegar ao fim e obtenham os mesmos resultados, e também teremos um modelo para trabalhar em outros dados que você possa encontrar no futuro. Nos documentos para esta classe, há algumas outras fontes onde você pode encontrar conjuntos de dados extras se você quiser jogar com eles. Historicamente, os designers têm trabalhado com texto e imagem, e eu acho que porque estamos vivendo neste mundo de dados em todos os lugares, ele se tornou esse novo elemento fundamental do design com o qual os designers têm que se tornar tanto. 2. Seu projeto: Sua missão é visualizar um grande conjunto de dados de meteoritos como um mapa. Incluí o conjunto de dados aqui, para que você possa baixá-lo imediatamente e começar. O que eu adoraria ver as pessoas carregarem o Skillshare no final do curso é um PNG ou um jpeg retirado do Illustrator do seu mapa final dos ataques de meteoritos. Há um pouco mais de dados em um conjunto de ataques de meteoritos que você poderia usar para empurrar isso ainda mais. Posso imaginar codificar cores os ataques de meteorito pelo ano em que eles acontecem do mais antigo para o mais novo. Há também conjuntos de dados extras que você pode olhar e começar a investigar outros mapas de diferentes fontes. A maneira de alcançar o maior sucesso com esta classe vai ser re-executar as lições de processamento como eu as demonstrei. Você terá o aplicativo concluído e você pode ter certeza de que você tem um estado final funcionando, mas realmente trabalhando até isso, e entender as diferentes seções que passamos para fazê-lo funcionar corretamente irá ensiná-lo mais, e colocá-lo no melhor estado para ser capaz de explorar outros dados ou aplicá-lo de novas maneiras. 3. Como funciona o Processing: Antes de começarmos a fazer este mapa, gostaria de compartilhar alguns conceitos-chave que serão úteis à medida que passarmos pelas lições. O primeiro é sobre formatos de dados. Então, vamos começar com uma planilha. Uma planilha é uma maneira de mostrar dados em linhas e colunas. O que vamos precisar fazer para colocar isso em processamento é convertido em um formato diferente chamado CSV. CSV significa valores separados por vírgula, e basicamente tudo o que estamos fazendo, é em vez de ter divisores explícitos no aplicativo que separam essas linhas, vamos substituí-los por uma vírgula em um espaço, e então será apenas um arquivo de texto, um que você pode abrir no TextEdit. Precisamos colocar os dados em um formato CSV porque, é isso que o processamento espera ingerir. Ele remove toda a formatação extra que uma planilha pode ter anexada a ela, e simplesmente retira-a para um formato de texto sem formatação. Assim que abrirmos o processamento, você verá que existem três componentes principais. Há um editor, um console e a tela. Começaremos pelo editor. Aqui é onde todo o código é digitado. O console pode então ser usado para imprimir pequenos pedaços de dados para garantir que tudo está funcionando sem problemas, ou para encontrar problemas em nosso código. Finalmente, a tela é a área em que estaremos desenhando coisas. Isso é o que vamos salvar em um PDF. Vamos escrever o código e processar no editor. Como HTML, há uma hierarquia para a forma como esse código é escrito, e há três áreas principais com as quais estaremos lidando. Acima de tudo é onde podemos definir variáveis que usaremos em todo o aplicativo. Também podemos importar bibliotecas diferentes, se quisermos usar as ferramentas de outra pessoa que eles construíram para processamento. Abaixo disso está uma pequena área chamada configurar. Aqui, vamos colocar todo o código que só precisa ser executado uma vez para definir as coisas que vamos usar no aplicativo. Aqui, vamos configurar o tamanho da tela, por exemplo. Abaixo disso está uma área chamada empate. Esta é uma área que irá repetidamente, a menos que digamos o contrário. Neste caso, só queremos que o nosso esboço seja executado uma vez, e por isso vamos colocar algum código lá para dizê-lo apenas para terminar assim que ele chegar ao final da seção de desenho. Como vamos trabalhar com dados e processamento, vamos precisar de várias variáveis para mantê-los. Variáveis são apenas contêineres. Isto é o que vamos definir para conter nomes ou números. No processamento, precisamos ser explícitos sobre o que uma variável vai conter. Então, temos que dizer que este recipiente só pode conter este tipo de informação, ou então teremos problemas para executar o código. Alguns dos tipos básicos de variáveis que você encontrará neste aplicativo são um inteiro, e isso é definido dizendo, int, e, em seguida, o nome do inteiro, e, em seguida, definindo seu valor. Com estas variáveis básicas. Você também pode fazer com que eles imprimam seus valores no console introduzindo este código, a função println. Então, para este exemplo inicial de um inteiro i com o valor de zero, se você colocar esta linha println abaixo, e você deseja remover esses dois traços que essas duas barras, estes estão comentando. Então, qualquer código que você não quer executar, você pode colocar essas duas barras na frente dele. Isso irá imprimir o valor de i no console. Para números mais detalhados estes são números decimais, precisamos usar um flutuador. Então, isso tem um nome diferente porque requer mais memória. Então, se quiséssemos economizar 0,0 ou 2,895, usaríamos um flutuador. Então, finalmente, String é usado para segurar palavras. Então, neste caso, para a variável de boas-vindas que estamos definindo como hello world, precisaremos definir isso como uma string. Para conjuntos maiores de dados, podemos usar uma estrutura chamada Array. Agora, uma matriz é basicamente uma lista de dados. Estes também têm tipos. Estes podem ser inteiros, flutuadores ou strings, mas eles são configurados com essa sintaxe de raquete. Uma matriz chamada números, na qual eu quero armazenar zero, um, dois e três, é definida desta forma com os colchetes na frente e, em seguida, as chaves para números importantes. Basicamente, o que acabamos com é um recipiente de várias seções. Este Array agora contém zero, um e dois, e então podemos imprimir todos eles, dizendo printIn i, que irá apenas imprimir a lista inteira, ou podemos usar este formato de colchetes para obtê-lo qualquer uma das posições em nosso Array. Então, o grupo de pessoas zero seria o primeiro, este seria Mark neste caso, ou grupo de pessoas um, seria qualquer e assim por diante. A estrutura de dados final que encontraremos é uma matriz 2D. Esta é uma lista de listas ou uma matriz. Então, se você pensar sobre o Array que acabamos de discutir, este agora vai ser um que contém vários outros Arrays. Então, em vez de ter um colchete após o tipo de dados que ele mantém como colchete inteiro, que é como uma matriz é definida, este requer dois. Agora estamos voltando a essa ideia de planilha. Estamos falando de colunas e linhas. Como você pode ver nesta matriz, temos nossa primeira linha, que é denotada por zero, porque é assim que os computadores contam de zero para cima. Temos a linha um, e a linha dois. Nós também temos as colunas zero um e dois. Agora, se você olhar para como nós definimos esta matriz de dados, com três funções Array, você pode então usar este código println para acessar diferentes partes dele. Destacei na matriz, o que será destacado ou que será selecionado por cada uma dessas linhas de código. Então, se tentarmos imprimir números matriz zero, zero, vamos obter a primeira posição. Enquanto se fizermos a impressão na matriz de números dois, dois, teremos a última posição. Agora, aplicamos todos esses dados no processamento, vamos precisar de algo que será capaz de fazer loop através dele e chamar todos esses diferentes bits de dados fora da memória. Então, vamos trazer os nomes desses meteoritos e sua latitude e longitude, e assim, usamos um loop for para percorrer todos esses dados. Um loop for é algo que pode parecer um pouco intimidante antes, mas é simplesmente uma estrutura que é usada várias vezes quando você está fazendo qualquer coisa no processamento. Parece um pouco intimidante porque é realmente um pedaço de código condensado. O que está acontecendo aqui, é que estamos dizendo que queremos um inteiro i, e vamos definir como zero. Então, enquanto esse Integer é menor que três, queremos adicionar 1 a ele. Este i mais, é o mesmo que i igual a i mais um. Então, enquanto essas condições são verdadeiras, então continue fazendo tudo dentro dessas chaves. Então, podemos jogar isso manualmente. Então, a primeira vez que isso correr, eu serei igual a zero. Então, para cada uma dessas linhas de impressão podemos imaginar substituir o i por um zero. Então, a primeira vez que passarmos, estaremos imprimindo zero zero, zero um e zero dois. Quando chegarmos ao fim, vamos adicionar um a i. Então, agora estará correndo através dele com i igual a um. Então, vamos imprimir para um zero, um um, e um dois. Finalmente, vamos adicionar outro, e agora eu vou ser igual a dois. Vamos verificar novamente, e imprimir dois zero, dois um, e dois dois dois. Então adicionaremos um, e serão três, mas não atenderá a essa condição de ser menor que três. Então, o loop for terminará. Esta é apenas uma estrutura que você verá em todos os lugares no processamento, e vamos usá-la hoje. 4. Geometria dos mapas: Um dos outros conceitos que precisamos para controlar é como medir a Terra. A Terra é uma esfera, e a única maneira realmente precisa de mostrar isso é com o globo. Mas precisamos achatá-lo em uma superfície 2D para colocá-lo em nossa tela. Assim, a Terra é medida em duas dimensões, latitude, que são as faixas horizontais ao redor da Terra, e longitude, que são as faixas verticais. Eles são um pouco complicados porque as balanças não começam no zero. Latitude é de 90 graus no pólo norte, e 90 graus negativos no pólo sul com um equador de zero. Por isso, estende-se por 180 graus. Considerando que a longitude, que precisa envolver o mundo inteiro, tem que cobrir uma escala de 360. Então, para isso, ele vai de menos 180 para 180 com zero sendo definido em Greenwich, na Inglaterra. Agora, para achatar isso, há muitas maneiras diferentes de projetar uma esfera em uma superfície plana. Se você acessar a pesquisa de imagens do Google e observar as projeções do mapa, verá várias maneiras diferentes de fazer isso. Hoje, vamos usar o que é chamado de projeção equiretangular. Esta é, de longe, a maneira mais simples de transformar uma esfera em um retângulo plano. Você também pode ver alguns dos problemas com o uso dessa abordagem. Neste diagrama, eu mostrei como se você tem círculos de diferentes partes do globo, quando você achatá-lo, você obtém diferentes graus de distorção usando esta projeção. Então, áreas ao redor da parte superior e inferior do nosso globo vão ser realmente deformadas. Então, a Antártida aparecerá muito, muito maior do que na realidade. Mas a matemática para obter isso na tela é muito mais simples do que qualquer outro método, e isso será realmente útil para nós. Finalmente, há mais uma função no processamento que será crucial para traduzir esse conjunto de dados em nosso glorioso mapa. Esta é a função de mapa, e o que isso faz é que diz que dado o valor que existe em uma escala, traduza isso para o valor em uma escala diferente. Então, você pode ver que esta função leva cinco entradas diferentes. O primeiro é o valor que queremos traduzir. Neste caso, 127.55, e isso é da escala de latitude, que vai de 180 a 180 negativos. O que queremos fazer é traduzir isso para a nossa escala de tela, que vai começar em zero e, neste caso, vai para 400. Então, uma vez que fazemos tudo isso, a função de mapa irá produzir um valor ao longo dessa escala. Neste caso, 341.7. Então, vamos usar isso para traduzir nossa latitude e a longitude para os valores de tela que precisamos. Esta função de mapa será inestimável para nós enquanto tentamos converter a latitude e longitude da Terra para a tela que estamos usando. Então, uma tela para este projeto pode ter 400 pixels de largura. Então, vamos pegar essa escala de latitude e convertê-la de 127,55 na escala de 180 a 180 negativos, para 341,7 na escala de zero a 400, a largura de nossa tela. Também precisaremos de marcadores para mostrar o tamanho desses meteoritos em relação um ao outro. Uma das peças cruciais desta classe é compartilhar essa ideia de que quando você converte quantidade em área, você tem que fazer um pouco de matemática. Então, seria muito bom se pudéssemos desenhar retângulos que queremos representar apenas dizendo ambos os lados, a largura e a altura são quatro. Infelizmente, isto traduz-se numa área que é deturpada daquilo que queremos mostrar. Então, a maneira correta de mostrar algo com uma área de quatro, é pegar a raiz quadrada dessa área, e isso nos dá as dimensões do quadrado. Então, para mostrar quatro, precisamos de lados que são dois e dois, não neste caso os lados que são quatro e quatro. Então, a regra para gerar um retângulo que vai mostrar área é pegar a raiz quadrada dessa área e usá-lo para as dimensões da forma. Com círculos, a matemática é um pouco mais complexa. Se você se lembrar de volta à classe de geometria, a maneira de calcular a área de círculos é pi R ao quadrado. Porque queremos que a área represente a nossa quantidade, precisamos recuar. Então, para obter o raio do nosso círculo, vamos pegar a quantidade que queremos representar, vamos obter sua raiz quadrada, e então dividi-lo por pi para obter o raio. 5. Exportando dados para CSV: Agora vamos começar com este projeto. Bem-vindo ao seu conjunto de dados, isto chama-se meteoros. Uma vez que você abriu, você pode começar a rolar um pouco para baixo para ter uma noção do tamanho aqui, isso é algo que nenhuma pessoa racional gostaria de colocar em um mapa manualmente. Se descermos até a parte inferior, você verá que temos 34.066 linhas para este conjunto de dados. Eu sempre gosto de começar em uma planilha como dado um novo conjunto de dados porque é aqui que podemos começar a sentir os limites do que nos foi dado. Você pode ver que existem seis colunas diferentes aqui, cada uma está nos dizendo algo um pouco diferente sobre nosso conjunto de dados. Então, temos um nome ou um lugar para cada ataque de meteorito, temos o ano, temos sua massa em gramas, a longitude, latitude, e se foi visto caindo ou se foi encontrado. A grande coisa sobre planilhas é que podemos fazer alguma análise simples real dos dados para ter uma noção para eles na frente. Então, uma das primeiras coisas que eu quero fazer é ver quantos anos esse conjunto de dados abrange? Então, no momento, eu acho que está definido para ser classificada em decrescente, eu vou mudar isso. Então, já posso ver alguns destes na parte inferior não têm um ano e este conjunto de dados vai para 2012. Se eu rolar até o topo, posso ver que isso volta para menos 600. Então, existem alguns valores negativos aqui para estar ciente e também lhe dá uma noção da duração deste conjunto de dados. Ao clicar aqui novamente, posso mudar esta massa para ser ascendente ou descendente. Então, eu quero ter uma noção de quais são os tamanhos desses diferentes meteoritos e se todos eles têm valores. Então, no maior, temos um Hoba com 60 milhões de gramas, e no final menor, temos aqueles que estão abaixo de 0,01 de um grama. A latitude e longitude vai variar dentro dos limites da terra e fell_found parece que é bastante simples, isso pode ser algo que vale a pena codificar mais tarde, mas eu acho que temos um senso para o conjunto de dados e vale a pena exportá-lo agora para um formato que o processamento possa usar. Acho que vou querer trazer esses dados pela sua massa. Então, eu vou querer ter os maiores meteoritos no topo do meu CSV. Para fazer isso, eu vou clicar no topo aqui e classificar essas massas em ordem decrescente, tão maior lá em cima. Vou rolar até o topo e ter certeza que esse é o caso. Sim, o meteorito Hoba está aparecendo em cima. Então, eu não tenho nenhuma linha ou colunas extras que vão ficar no caminho aqui quando eu exporto, que apenas levaria a coisas vazias que eu não preciso. Então, eu me sinto bem com o estado em que está. Em Exportação, vou exportar isso para um CSV. Posso deixar a codificação de texto como está, basta pressionar Avançar e vou salvar isso na área de trabalho como Meteors.csv. Agora vamos dar uma olhada nisso, abri-lo na edição de texto e ver no que isso se transformou. Aqui temos, deve ser um arquivo de 34.000 linhas de texto longo. Você pode ver que todas essas colunas foram traduzidas agora em valores separados por vírgulas, com nossa primeira aparecendo como a chave nos dizendo o lugar, ano, massa, longitude, latitude e derrubada. Eu só vou excluir essa linha de cima porque isso não é dados, é apenas uma chave e eu vou salvá-la e estaremos prontos para colocá-lo em processamento. Eu classifiquei os meteoritos por massa porque eu vou querer rotular os maiores meteoros. Isso vai ser mais fácil de fazer apenas dizendo, eu quero rotular os primeiros 10 ou 20, em vez de analisar todos os valores e testá-los se eles estão em uma determinada escala. Esses dados também podem ser acessados no Google, há um link no site Skillshare para esse conjunto de dados e tamanho do meteorito. Esta é uma planilha do Google e aqui você pode ver algumas das mesmas informações, essas coordenadas, há até links para uma entrada de banco de dados para os meteoros. Mas se você quiser baixá-lo aqui ou explorá-lo, você pode classificar as coisas novamente clicando na parte superior do rótulo da coluna ou em Arquivo selecionando download, você pode baixá-lo como um CSV também. 6. Novo sintaxe de arquivos e pasta de dados: Se você não tiver processamento no seu computador, você pode obtê-lo gratuitamente visitando processing.org. Há um grande botão de processamento de download aqui em cima. Sinta-se livre para fazer uma doação se quiser, porque este é um software de código aberto. Em seguida, baixe a versão correta que você precisará. Então, eu tenho a versão Mac já instalada. Mas se você não tem, basta baixá-lo aqui. Uma vez instalado, abra Processing e faremos um novo esboço. Aqui, você deve ver algumas das partes do aplicativo que eu discuti anteriormente. Temos o campo Editor vazio e o console abaixo. Vamos apenas salvar isso na área de trabalho. Vamos chamá-lo de MeteorSketch, e você verá isso aparecer na área de trabalho. O que vamos precisar adicionar a este esboço é uma pasta chamada dados. Agora, nem todos os esboços de processamento têm isso, mas se vamos trazer arquivos externos como vamos ser, aqui é onde ele precisa viver. Então, basta criar uma nova pasta neste diretório e chamá-lo de dados com um d minúsculo . Se você também baixou o exemplo de trabalho deste aplicativo que vamos construir, você verá que há uma pasta de dados lá, e tem as duas peças que precisamos. Ele tem o meteorite.csv e um arquivo chamado WorldMap.spg. Você pode simplesmente copiar esses arquivos para sua pasta de dados ou você pode usar o arquivo meteors.csv que geramos anteriormente. Então, no seu MeteorSketch, você já pode clicar em Executar e você verá a tela aparecer. Vamos precisar começar configurando o sorteio e as seções de configuração de nossa saída. Então, você pode digitá-los indiretamente ou você pode abrir o esboço de referência fornecido no arquivo Skillshare. Aqui você vai ver o pequeno rótulo comentado fora que eu uso para indicar o início da seção de configuração, e abaixo disso nós só vamos precisar dizer configuração vazia com alguns parênteses e uma chave aberta e uma chave fechada. Então também teremos este rótulo comentado para indicar o início da seção de desenho. Aqui, podemos dizer empate vazio, depois abrir a cinta e fechar a cinta. Lá em cima, farei mais uma indicação do que estará lá. É aqui que vamos colocar tanto a biblioteca que precisaremos quanto as variáveis globais. Então, este é o esqueleto do nosso aplicativo. É aqui que as peças de que precisaremos estarão vivas. Você pode bater Run novamente, e você vai ver o mesmo pequeno quadrado acontecendo. Então, toda vez que você clicar em Executar, ele vai verificar seu código e certificar-se de que não há erros. Então, estamos em boa forma. Vamos salvar isso e começar a trazer alguns dos elementos básicos que precisaremos. Na seção de configuração, vamos encontrar coisas como o tamanho do nosso projeto, vamos importar o mapa que vamos usar, e essas são coisas que queremos que aconteça uma vez abaixo na seção de desenho vazio. Aqui é onde você pode ter código que é executado uma e outra e outra vez. Então, se estivéssemos fazendo uma animação ou um interativo, queremos que continuemos desenhando quadros na tela. A principal coisa que queremos que aconteça em nossa seção de desenho é que vamos querer que ele comece a salvar um pdf no início, e salvá-lo no final. Então, nós só queremos que isso seja executado uma vez ou então nós vamos acabar com um pdf sendo salvo uma e outra vez e outra vez. 7. Importando SVG: Nesta seção, vamos trazer o mapa base. Estes serão os contornos do globo que formarão um contexto para entender onde esses meteoros ocorreram em todo o mundo. Um dos itens na pasta de dados é um gráfico chamado WorldMap.svg, e esta é uma projeção retangular do Aqua do mundo. Você pode ver nossa gigantesca Antártida no fundo e como o topo dos Estados Unidos, e da Sibéria, e Canadá, e Groenlândia, se tornaram realmente distorcidos. Mas isso será fácil de importar e fácil de colocar nossos marcadores. Isto veio da Wikipédia, você sempre pode procurar por Aqua mapa vetorial retangular no Google e encontrar outras fontes. Então, o que precisamos fazer é tornar nossa tela grande o suficiente para manter este mapa, e usar um pouco de código para colocá-lo em segundo plano. Então, a primeira coisa que vamos fazer é definir o tamanho da nossa tela para uma que corresponda às proporções deste mapa. projeção do mapa retangular Aqua será sempre duas vezes maior do que é alta. Então, se decidirmos que queremos que isto tenha 900 pixels de altura, faremos 1.800 pixels de largura. Defina o tamanho da tela em processamento por com a função de tamanho. Então, digamos 1.800 para a largura, e 900 para a altura. Essas funções são sempre iniciadas com um parêntese aberto e fechadas com um parêntese fechado, e no final de cada linha você precisará de um ponto-e-vírgula. Se apertarmos o botão play agora, você verá de repente nosso esboço é 900 por 1.800, o que é muito mais confortável. A próxima coisa que faremos é trazer esse bit de código para carregar o BaseMap. Vamos precisar definir nossa primeira variável. Este é um tipo especial chamado PShape, e isso é o que detém um SVG. Então, definimos seu tipo primeiro, e depois damos um nome. Vou chamá-lo de mapa base. Você sempre pode ver se você está inserindo código corretamente no processamento, se você estiver usando essas funções, elas serão destacadas. Então, PShape sabe que é um tipo variável e é laranja, enquanto essas funções sabem que são verdes ou azuis. Nestes configurados, o código que vamos executar apenas uma vez, vamos definir neste mapa base. Então, nós digitamos o nome da nossa variável, e então precisamos de outra função, loadshape, que você verá se eu digitar tudo em minúsculas ele não realça se eu usar o S maiúsculo lá, ele destaca corretamente. Agora eu só quero dar a ele o nome do nosso SVG, então eu vou copiar isso da pasta de dados, e eu preciso colocar isso entre aspas aqui, WorldMap.svg. Isso não é o suficiente, mas vamos executá-lo só para ter certeza. Certo, temos um problema com o mapa base. Isso é porque eu não coloquei um M maiúsculo no nome da variável. Então, ele me disse no console, ele não pode encontrar nada chamado BaseMap. Depois de alterar o nome da variável PShape, isso deve ser executado corretamente. Agora, no modo de desenho, eu vou adicionar mais um pedaço de código e isso é o que vamos adicioná-lo à tela. Esta vai ser uma função chamada forma, e eu vou dizer-lhe para colocar o meu mapa base na posição zero, zero, que é o primeiro ponto na tela, e que eu quero que ele seja tão largo e tão alto quanto a tela. Agora, eu poderia redigitar as dimensões que eu coloquei no tamanho, ou eu posso usar esses pequenos métodos de conveniência apenas para perguntar a tela de que tamanho é. Estas são palavras reservadas como largura e altura que representam essas quantidades. Então, nesta linha de código, eu estou dizendo que eu quero uma forma que é preenchida com o BaseMap que é o nosso SVG, e ele começa em zero, e ele vai para largura e altura. Fechei isto com um ponto-e-vírgula, e se eu rodar, temos o mapa. Então, estamos em boa forma para começar a trazer nossos dados e começar a colocar isso em nosso mapa. Para esta classe, eu forneci a você um mapa retangular do Aqua devidamente formatado que eu obtive a partir da Wikipédia. Mas também descobri que há outros lugares para obter mapas. Este método só vai funcionar se usarmos uma projeção de mapa retangular Aqua, mas você pode digitar este vetor retangular no Google e eu geralmente vou para a seção de imagens para tentar encontrar outras fontes. Você pode ver aqui, há muitos exemplos diferentes de mapas retangulares Aqua com diferentes quantidades de detalhes, ou com divisores de países sobre eles. Então, você sempre pode tentar colocar um desses em seu arquivo também. 8. Marcadores de desenho: O próximo passo será obter alguns marcadores desenhando no nosso mapa. Conectaremos os dados um pouco mais tarde, mas vejamos como o processamento pode desenhar essas formas que precisaremos. Existem alguns tipos diferentes de formas que o processamento pode nos fornecer. Podemos usar retangulares, retângulos ou elipses. Vamos começar por olhar para estes dois e alguns dos passos que vamos precisar para obter estes para desenhar de uma forma que estamos entusiasmados. Então a primeira função é um rect. Você verá que apenas digitando rect e colocando em nossos parênteses o processamento reconhece esse pedaço de código. Um retângulo leva quatro parâmetros. Queremos a localização X e Y e, em seguida, a largura e a altura. Então, se eu disser 100, 100 para a posição e eu quero que ela tenha 200 pixels de largura, 100 pixels de altura, se eu executar isso, você verá que temos este retângulo aqui. Por padrão, ele tem um contorno preto e um preenchimento branco. Eu realmente não quero que ele tenha este contorno preto. Então, na linha acima, eu vou usar este pequeno pedaço de código, sem traço, e isso vai desligar o contorno se eu executá-lo novamente. Agora eu só tenho um retângulo branco, mas isso é bem invisível. Então, o que vou fazer agora é dar-lhe um preenchimento. Você pode fazer isso de várias maneiras diferentes no processamento. Ele reconhecerá preto e branco. Você pode especificá-lo como preto e branco com alfa, ou RGB, ou RGB com alfa, alfa que significa transparência. Então, primeiro, vamos apenas dizer que eu quero preenchê-lo com preto. A escala preta vai de 0 a 100. Então, se eu disser preencher 0, ele vai me dar um retângulo preto. Vai de 0 a 255. Então, um valor de 255 me dará um retângulo branco. Se eu voltar a dizer preenchê-lo com 0 ou preto, eu posso adicionar outro parâmetro que será uma transparência. Então aqui, eu posso colocar 50, e agora você pode ver que eu tenho um retângulo semitransparente. Quero usar um pouco de cor. Então, eu vou para a escala de cores que leva três parâmetros todos de 0 a 255. Estes estão na ordem de vermelho, verde e azul. Então, se eu disser 255, 0, 0, eu vou pegar um retângulo vermelho. Agora, se eu der mais um parâmetro, como 50, eu vou obter um retângulo vermelho semitransparente. Ainda não colocamos a função sem loop, então este loop de desenho é apenas desenhar, desenhar, desenhar constantemente. Uma das coisas interessantes que você pode fazer no processamento é brincar com cores. Há uma função chamada aleatória. Isto irá apenas definir um valor aleatório. Isso pode ser realmente útil para experimentar e explorar. Nesse caso, estamos dizendo que queremos um valor entre 0 e 255 em vez de definir 255. Agora você verá essa animação progredindo. Você pode ver que temos uma forma cintilante agora e você pode soltar esse código aleatório onde quiser. Mas só queremos correr desta vez. Então, para manter este código mais simples em nossa configuração, vamos apenas adicionar uma linha que diz sem loop, e isso significa que uma vez que ele é executado uma vez que será feito. Podemos testar que isso está funcionando porque agora o aleatório vai apenas escolher um valor e será estático depois. Vou redefinir isto para 255. Vamos executá-lo de novo. Temos um retângulo vermelho. Finalmente, vamos apenas olhar para como as elipses são desenhadas no processamento. Como você pode imaginar, isso leva uma função chamada elipse. Vou dar-lhe uma posição diferente como 500, 500 e uma largura de 100, e uma altura de 100, fechar os parênteses e colocar um ponto semi cólon. Uma vez que eu rodar isso, eu vou obter uma nova elipse e o próximo passo será importar alguns de nossos dados e ser capaz de começar a desenhar esses marcadores programaticamente que eles nos mostrem onde todos esses ataques de meteoritos aconteceram em todo o mundo. 9. Importando e analisando dados: Para esta próxima seção, vamos trazer os dados CSV em uma matriz 2D para que possamos processá-lo e colocar nossos marcadores na posição correta no mapa. Agora, vamos usar um pouco de código repetitivo para analisar este CSV em nossos arrays. Eu vou fazer um pouco de configuração, mas este pedaço de código que nós copiamos, é apenas algo que você vai reutilizar sempre que quiser importar dados para processamento de um arquivo de texto. A primeira coisa que vamos configurar é uma variável para manter o conteúdo do nosso arquivo de texto. Isto vai ser uma corda. Vamos chamá-lo de CSV porque isso é o que ele é, e ele vai ser um array automaticamente. Isso porque quando o trouxermos, ele vai interpretar cada um dos retornos desse arquivo de texto como uma nova linha de dados. Então, a cadeia CSV vai ser uma lista de todos os meteoritos. Para preencher esse CSV com os dados do arquivo de texto, precisamos ter uma linha em nossa configuração onde definimos o que é CSV. Então, CSV agora vai igualar o conteúdo desta função que é chamado LoadStrings. Isto é o que você usa para trazer dados de um arquivo de texto. Então, eu tenho a função lá, e eu vou apenas copiar neste nome MeteorStrikes. Mais uma vez, isso precisa viver entre aspas. Vamos apenas executar isso para ter certeza de que tudo está funcionando corretamente. Ok, então as cordas estão carregadas. Eu vou me livrar desse retângulo que tínhamos na instância anterior, e eu vou usar o console pela primeira vez. Eu só quero ter certeza de que tudo está acessível, então eu vou digitar esta linha println. Isso significa imprimir algo para o console, e eu vou dizer-lhe para imprimir CSV, nossa variável que está segurando o conteúdo do nosso arquivo de texto. Eu dirijo isso de novo. Lá vamos nós, temos 34.000 linhas de dados de meteoritos suculentos em nosso console. Então, tudo está funcionando bem até agora. Vou apagar isto. Vou configurar a matriz 2D. Esta é a lista de listas onde, em vez de ter tudo em linhas, vamos agora dividir tudo em linhas e colunas para que possamos acessar qualquer pedaço de dados que quisermos. No CSV, poderíamos acessar uma linha de dados dizendo println CSV, e então em um dos parênteses, apenas dando um número como 23 porque eu sei que este é um arquivo de texto muito longo. Eu sei que 23 estarão em limites. Vou rodar isso de novo, você verá a 24ª linha do arquivo de texto. O que queremos fazer agora é dividi-lo em todas essas vírgulas, para que eu possa acessar qualquer parte disso. Para fazer isso, vamos precisar definir a matriz 2D que vamos usar. Isto vai ser uma corda de novo. Para este, vou chamar MyData, e vamos dizer-lhe para ser uma matriz 2D por ter dois conjuntos de colchetes. Então, eu defini essa variável. Agora, eu vou explicar o processamento, quão grande eu quero que este recipiente seja. Eu quero que ele ajuste os dados corretamente para ser eficiente, então o que eu vou fazer é dizer, “O tamanho dos meus dados é uma nova string, e eu quero que ele tenha tantas linhas quanto o arquivo MeteorStrike.csv. Então, nós sabemos que isso é como 34,000 algo, mas nós podemos realmente obtê-lo diretamente usando este pequeno método de conveniência de dizer csv.length. Então, isso irá preenchê-lo automaticamente com o comprimento do arquivo CSV. Acho que temos, aqui podemos contar o número de colunas que temos, um, dois, três, quatro, cinco, seis. Há seis colunas, então eu especifico que como seis, e apenas pressione Executar para verificar novamente, tudo está indo bem. O próximo passo será este bit de código reutilizável para dividir essas linhas CSV em nossa matriz 2D. Então, eu vou copiar isso do arquivo de referência. Na verdade, vou datilografar de novo. Nós vamos usar nosso primeiro quatro loop então, eu vou apenas configurar o esqueleto básico do loop for que começa com para paren aberto e fechar paren, e, em seguida, uma chave aberta, e uma cinta estreita. Agora, vou definir as condições para o loop for. Isso será, para um Inteiro i, que é zero, enquanto ele é menor que o comprimento do CSV, então csv.length incrementá-lo, que é i plus, plus ou i é igual a i mais um. Então o que vamos dizer é que esta matriz 2D MyData para cada uma das posições i neste recipiente, queremos dividir esse CSV na cadeia que é caractere de uma vírgula. Então, csv i.split, esta é uma função de string que irá dizer-lhe o personagem em que você quer dividi-lo, e eu fiz tudo corretamente aqui, e apertei Run. É feito isso tudo em segundo plano. Agora, vamos apenas imprimir alguns bits aleatórios de MyData para ter certeza de que ele está funcionando corretamente. Então, vou adicionar outro println. Eu quero acessar MyData na posição 23 novamente, mas desta vez, eu quero a quarta linha ou a quarta coluna na linha 23, fechar isso e executá-lo, e lá vamos nós. Eu tenho um pouco de dados de localização sendo espalhados. Então, eu acho que tudo está no sistema agora onde devemos ser capazes de percorrer ele, e começar a fazer nossos marcadores. Sinta-se livre para copiar sobre isso para loop ou até mesmo a seção de configuração concluída. Agora que terminamos, essa divisão no pedaço de código da vírgula é algo que eu normalmente copio de um projeto para outro, e não me preocupo em memorizá-lo. 10. Convertendo lat/long em coordenadas de tela: Então, neste momento você tem este CSV importado para processamento, e você copiou esse código. Então, temos uma análise em uma matriz 2D e agora podemos entrar em nossa seção de desenho, e começar a convertê-lo em coordenadas de tela para que possamos colocá-lo em nosso mapa. Vamos para a seção de desenho, e o que vamos fazer, é configurar outro loop for aqui para percorrer todos os nossos dados. Espero que isso esteja ficando um pouco mais familiar para você. Como eu disse anteriormente, esta é a mesma estrutura que usamos repetidamente durante todo o processamento. Vamos começar digitando para, abrir e fechar esses parênteses, dar uma chave para o que queremos que ele faça durante o loop for e fechar essa chave. Mais uma vez, podemos usar esta estrutura int i. Não vai entrar em conflito com o i que usamos acima porque estes estão em contextos diferentes. Se você quiser que uma variável seja acessível ao longo de todo o projeto, temos que configurá-la aqui na seção de variáveis globais. Então, eu vou usar i novamente, eu vou dizer para int i é igual a zero, i é menor que o comprimento dos meus dados, então isso é meu data.length. Adicione um a i, i plus. Então, vou fazer isto, certificar-me de que está tudo bem. Parece bom ainda. Eu vou mover esta elipse que eu desenhei mais cedo para o loop for. Mas deixe-o assim e eu executá-lo, vou ter 34.000 elipses empilhadas uma em cima da outra. Você pode ver já, que o código diminuiu um pouco, mas agora o vermelho da elipse é totalmente opaco, porque todas essas elipses transparentes em cima umas das outras tornaram-se agora uma massa sólida. Vamos adiar o desenho desta elipse. Então, vamos dar duas barras para comentar por um minuto. Agora, o que precisamos fazer é calcular a latitude e longitude. Podemos usar a função de mapa para fazer isso. Primeiro, vamos imprimir partes do nosso conjunto de dados para garantir que as tenhamos nos lugares certos. Para fazer isso, eu vou usar o PrintIn, e o que eu quero fazer, é acessar meus dados para cada linha que será i, e eu acho que vamos trabalhar com o arquivo CSV aqui. Vamos usar uma, duas, três, a quarta e quinta posições, porque estamos falando com um computador que precisamos subtrair uma, porque eles contam de zero. Então, serão três e quatro. Nós podemos fazer isso na verdade tudo em uma linha colocando um plus aqui, e aspas abertas, e, apenas fazer outro plus lá, e um plus e, em seguida, o outro bit dos meus dados. Então, o que está acontecendo aqui, é que eu estou dizendo, eu quero uma impressão duas variáveis, e eu só quero colocar um pouco de texto no meio para torná-lo legível. Isto vai ser um espaço, e um plus, e um espaço. Então, se eu rodar isso, eu deveria ver todos os dados passarem por aqui. Como você pode ver no console, eu tenho a latitude e, em seguida, a longitude separados por um plus. Posso fazer isto uma vírgula ou uma barra, se quiser. Então, eu tenho os dados em um loop onde eu posso acessar todos eles agora. Vou usar a função de mapa para converter tudo isso em coordenadas de tela. Então, para fazer isso, vou configurar uma nova variável. Então, vou ligar para o GraphLong. Isto vai ser um carro alegórico, porque eu quero ter muita precisão nisso. Vai ser um número decimal em vez de um número inteiro, e o valor dele vai ser a saída de uma função de mapa. Também vou precisar de um gráfico disso. Então, eu vou configurar isso também com uma nova variável e a saída desta função de mapa. Então, se você se lembrar de antes, uma função de mapa vai levar cinco entradas. Vamos primeiro pegar o número que queremos um mapa, e depois as duas escalas que estamos usando. Então, vamos nos preparar. Vamos acessar a parte de dados que queremos inicialmente. O primeiro será este MyData [i] [3]. Então, podemos copiar isso e colocá-lo no primeiro mapa, e então esses dados estarão na escala de menos 180 a 180. Então, primeiro número aqui menos 180, 180, e queremos que isso seja mapeado para a largura de nossa tela. Sabemos que a tela começa com zero e vai para uma largura que pode ser acessada apenas digitando a largura da palavra. Então, começamos com zero e, em seguida, vamos digitar largura. O processo para a latitude é muito semelhante, mas precisamos ajustar os valores um pouco. Para isso, usaremos MyData [i] [4], e isso será na escala de menos 90 a 90, e para os dados de terra, e então ele estará na escala de zero a altura quatro para a nossa posição da tela. Vamos alterar este Printin um pouco, vamos cortá-lo e colá-lo abaixo destas equações, e em vez de conectar MyData [i] [3], vamos conectar a saída dessas funções do mapa. Então, podemos acessar isso copiando sobre um GraphLong e colocando-o na função de impressão, e copiando GraphLat, e colocando na função de impressão. Então, agora, se tudo está funcionando corretamente, podemos esperar isso para loop percorrer todos os valores de latitude e longitude em nosso CSV e salvá-los nas variáveis, GraphLong e GraphLat. Toda vez que ele vai para o loop for, ele vai reinicializar a variável e usar o próximo valor. Então, o que devemos esperar no console é que este GraphLong e GraphLat imprimam todos os valores de tela que vamos precisar. Mas eu fiz algo errado. Sim. Este é o único passo que está faltando. Nossos dados estão em formatos de string. Então, acha que tudo o que está encontrando é uma palavra. Infelizmente, sabemos que é um número, e temos que colocá-lo em um formato que esta função de mapa possa usar. Ele só pode funcionar com números como inteiros ou flutuadores. Então, a maneira de dizer o processamento para usar este MyData, que ele pensa que é uma palavra porque ele está vindo de um conjunto de variáveis de string. Temos que lançar para um número. Isso significa apenas traduzi-lo, e a maneira como fazemos isso é com uma pequena função chamada float. Então, se envolvermos MyData em um flutuador e na linha abaixo, vamos embrulhar isso. Em um flutuador isso agora deve ser possível pela função, e nosso console deve cuspir todos os valores de tela que precisaremos. Você pode ver, agora esse conjunto de números está na escala de nossa tela. Todos eles devem estar em menos de 1800 no primeiro número e menos de 900 no segundo número. Agora, se você tiver esse código funcionando, você pode copiá-lo do outro arquivo ou talvez ajustá-lo até que seja bem-sucedido para você. Vamos para a nossa elipse para desenhar todos esses marcadores na tela. Então, ao invés de dar dimensões explícitas como 500 e 500, agora podemos dizer que realmente queremos colocar todos os nossos pontos em GraphLong e GraphLat e 100-100 vai ser bem grande, vamos torná-los 10 por 10. Se executarmos isso, veremos nosso primeiro vislumbre de todos esses dados aparecendo no mapa. Cometemos um erro em algum lugar. Como podem ver, este mapa está de cabeça para baixo. Esses meteoritos não estão pousando em nossos continentes. Então, eu acho que o que eu preciso fazer, eu preciso mudar esse mapeamento de escala. Em vez de ir de menos 90 para 90, eu quero que ele vá de 90 para menos 90. Espero que essa mudança seja a certa. Lá vamos nós. Isso parece muito melhor. Temos todos os meteoritos pousando na Terra agora, e no próximo passo podemos ligar a escala do tamanho do meteorito ao tamanho do marcador que vemos na tela. 11. Conectando marcadores aos dados: Ok. Nessa última seção, espero que você tenha tido a emoção de colocar todos os marcadores de meteorito no mapa. Agora, vamos fazer um pouco de matemática para dimensioná-los corretamente, e acessar a massa do meteorito. Nós vamos fazer um pouco de limpeza neste For Loop, nos livrar do espaço aqui, e eu estou muito feliz com o resto deste código. Então, vou deixar no lugar. O que eu vou querer fazer, é definir uma variável para o diâmetro de cada um desses meteoritos. Então, eu preciso usar meu cálculo de área correto, e acessar o pedaço certo de dados do nosso CSV para conectá-lo a esta equação. vez, vou querer um carro alegórico, e vamos chamar isso de MarkerSize. Este vai ser o recipiente para o diâmetro dos nossos meteorMarcadores. Então, vamos verificar novamente onde a escala do nosso meteorito está sendo mantida. Então, ele está sendo mantido na terceira coluna do nosso arquivo de texto. Então, vamos acessar isso com a minha matriz 2D de dados. Podemos continuar usando (i) para iterar através de todos eles, mas usamos a segunda posição agora. Então, agora eu preciso conectar o MarkerSize no tamanho da elipse. Então, em vez de usar um estático, eu vou apenas dizer colar MarkerSize onde eu estava dizendo 10 antes. Podemos tentar isso, mas acho que são duas coisas. Primeiro, estes marcadores vão ser enormes. Não seremos capazes de ver nosso mapa, e também temos que transformar a string que meus dados estão retornando em um flutuador. Temos que fazer algo que o código de desenho da elipse possa reconhecer. Então, agora estamos dizendo “Pegue essa palavra que está definindo um número e trate-o como um número.” Você deve desligar o println, função agora, eu acho que vai demorar muito e retardar este processo. Então, vamos excluir isso e executar isso novamente. Então, um monte de vermelho, isso é porque alguns desses marcadores eram 60 milhões de gramas. Então, vamos realmente precisar reduzir esses marcadores. Infelizmente, uma das coisas que vamos fazer é implementar esse cálculo de área. Então, como mostrei nos conceitos iniciais, precisamos pegar uma raiz quadrada do tamanho do meteorito e dividi-la por pi e isso nos dará o raio. Então, vamos ver. Temos uma função para fazer raiz quadrada no processamento é SQRT, e talvez tenha minúsculas. sqrt, abra um parenth, e feche parenth. Então isso vai trazer para baixo o tamanho do marcador um monte, nós também temos que dividi-lo por pi. Então, usamos uma barra e Pi como um método de conveniência no processamento, bem como apenas PI, e eu vou apenas multiplicá-lo por 0.5. Vamos ver. Então, seja lá o que for, vou dividi-lo para reduzir um pouco. Vamos tentar executar isso de novo. Está ficando um pouco mais racional, mas ainda está fora dos limites da aceitabilidade. Então, vamos adicionar outro decimal ao fator de escala. Então, agora multiplique por 0,05, e isso parece muito bom. Consigo distinguir áreas de densidade, e áreas onde não há muitos meteoritos. Vou até tentar aumentar isso um pouco. Diga, 0.1, e execute novamente. Vou deixar isso para você. Acho que vou voltar para 0.05. Isso pareceu me mostrar uma boa quantidade de detalhes aqui, enquanto também comunicava um monte da densidade desses ataques de meteoritos. Então, eu não acho que haja uma resposta certa ou errada para encontrar a escala correta aqui, mas podemos ir para o pequeno muito facilmente, se formos para 0,01, eu acho que vamos começar a perder essa densidade, muitos dos meteoritos menores estão agora invisível, enquanto que se formos para 0,1, eu acho que muitas dessas áreas ficam muito apertadas. Então, eu estou começando a perder detalhes no centro-oeste dos Estados Unidos e eu acho que eu quero derrubar um pouco mais, que eu possa ver um pouco mais disso. Então, eu vou tentar metade disso, 0,05. que, aos meus olhos, parece equilibrar a quantidade certa de detalhes nas áreas mais pequenas com uma parte da densidade que eu acho comunica a intensidade dos ataques de meteoritos mexicanos. Esta é a decisão de ilegível de garantir que você pode ver o conjunto de dados completo em sua visualização. 12. Etiquetando marcadores: Ok, então, nós temos todos os meteoritos desenhando em nosso mapa, eles são todos dimensionados corretamente, nós convertemos nossas quantidades para área com a metodologia adequada, e agora eu só quero rotular alguns desses. E a palavra-chave aqui é, alguns deles, porque com 34.000 meteoritos em nosso mapa, isso realmente iria atolar tanto o processamento quanto o ilustrador para tentar rotular todos eles. Então, eu quero rotular um subconjunto, e se você se lembra nós produzimos o CSV com os maiores meteoritos no topo. Então, podemos apenas dizer, “Para os primeiros 20, vamos colocar um rótulo sobre ele, ou até mesmo os primeiros 10.” E saberemos que estes são os 10 melhores meteoritos da nossa seleção. Então, para fazer isso, vamos usar mais uma pequena função aqui que é uma função if, isso é basicamente apenas indo para testar alguma saída e ver se devemos estar fazendo algo. Isto é semelhante a um loop para a frente, vamos dizer se, e abrir parens fechar parens, e abrir colchete fechar, e eu simplesmente quero dizer se eu é menor que 11, isso vai me dar o, na verdade se eu for menor que 10, Isso deve me dar os 10 maiores tamanhos de meteoritos, e é aqui que vou colocar o código de rotulagem. Então, primeiro eu vou apenas querer colocar o texto na tela. E não é tão difícil adicionar texto ao processamento, previsivelmente usamos uma função chamada, Texto, que vai definir o que queremos colocar na tela, e só precisamos dizer o que escrever, e onde colocá-lo. Já temos essa informação em nosso sistema. Então o CSV tem um nome, então e isso está em nossa matriz mydata dois D, e isso está na primeira posição. Então, será mydata i na posição zero, e então o próximo parâmetro será apenas o nosso GraphLong, e o próximo será GraphLat. Agora, eu vou rodar isso, mas ele só vai colocar o texto bem em cima do nosso marcador, então, provavelmente vamos querer compensá-lo. Você também pode ver que ele está desenhando na mesma cor que o meteorito, então nós queremos mudar isso. Vou querer desenhar isto em preto. Então, como fazemos isso, você só precisa adicionar outra linha para o preenchimento, e eu vou dizer preenchê-lo com zero. O problema é que, este preenchimento está agora dentro do loop quatro, então, eu vou ter um meteorito desenhado em vermelho se eu fizer isso, e todos os outros serão desenhados em preto. Talvez sejamos capazes de ver isso. Não, não consigo ver o vermelho. Mas tudo está desenhado em preto agora. Então, o que eu preciso fazer é mover esta descrição de preenchimento para o loop quatro, então toda vez que ele começa de novo, ele irá definir meus meteoritos para ser definido com o semitransparente vermelho, e então quando ele chegar à seção de texto, então toda vez que ele começa de novo, ele irá definir meus meteoritos para ser definido com o semitransparente vermelho, e então quando ele chegar à seção de texto, irá configurá-lo para ser preenchido com preto. Se eu rodar isso de novo, espero que os resultados cheguem, ótimo. Temos rótulos pretos nos nossos meteoritos vermelhos semitransparentes. Agora eu quero tirar todos esses rótulos dos círculos, que eu possa usar uma linha para anexá-los ao ataque de meteorito correto. Podemos apenas fazer isso especificando algum deslocamento, e uma das coisas boas é que já sabemos o tamanho de cada um desses círculos nesta iteração. Então, eu vou dizer que eu quero compensá-lo por GraphLong mais o tamanho do marcador, mais 100, ver se isso é suficiente. Tudo bem, isso parece demais, então, talvez eu faça por 30, vamos tentar isso pelo tamanho. Realmente micro-tamanho. Tudo bem. Parece razoável. Agora vamos desenhar uma linha que liga o texto ao meteorito. Eu não quero preencher minha linha com zero, eu realmente quero dar um golpe, então, eu vou dizer, sem preenchimento, e eu quero que meu traço seja preto. Então, isso será golpe de zero. E quando eu começar esse loop de novo, eu não quero estar usando esse derrame. Então, lá em cima eu vou ter que dizer sem derrame. Desenhar uma linha é tão simples quanto desenhar algumas dessas outras formas, vamos apenas dizer que eu quero uma linha, e isso levará duas medidas, a posição inicial x e y, e a posição final x e y. Neste caso, sabemos que queremos iniciá-lo no GraphLong mais o tamanho do marcador e GraphLat. Então estamos adicionando o tamanho do marcador aqui para que ele comece na borda do círculo, eu posso tirá-lo por agora para que possamos ver como isso apontará para o centro do círculo se não o usarmos. Então, o ponto final disso será GraphLong novamente, mais o tamanho do marcador e GraphLat. Vamos ver o que isso faz, e como precisamos ajustá-lo. Certamente que vai. Então ele está correndo para o nosso texto um pouco, e ele está correndo para o centro do marcador. Então, eu quero que esta linha apenas se conecte à borda do nosso marcador, dessa forma, em algumas dessas áreas mais densas você pode ver qual círculo está sendo descrito. Então, para fazer isso, vou adicionar o tamanho do marcador acima de dois para fazer isso funcionar. Então eu preciso dividi-lo por dois, caso contrário, será o diâmetro do círculo. Isso é ótimo, nós temos uma conexão com a borda agora. E eu só quero mover o texto um pouco para a direita, e um pouco para baixo, isso deve tornar nossa conexão completa. Então, o texto eu vou dar-lhe um pouco de preenchimento, como cinco pixels, e a latitude do gráfico, e dar-lhe outro dizer cinco pixels, e você pode ajustar esses valores para levá-lo para onde pensar que ele está confortavelmente alinhado, parece um pouco baixo para os meus olhos, então eu vou mudar esse cinco para um quatro, e agora isso está parecendo muito bom. A linha e o texto estão se conectando aos nossos meteoritos, e vamos adicionar um pouco de código para que possamos publicar isso como um PDF. 13. Fazendo um PDF: Ok. Estamos todos prontos. todos os nossos círculos sendo desenhados na escala certa no processamento, temos rótulos de texto que estão conectados aos nossos marcadores de uma maneira excelente. A próxima etapa é, como colocamos isso em um PDF, que possamos trazê-lo para o Illustrator e fazer alguns ajustes finais, ou levá-lo mais longe, trazê-lo para ou levá-lo mais longe, o InDesign ou Photoshop. Vamos precisar de uma biblioteca para fazer isso, e isso vem automaticamente com o processamento. Você só tem que adicionar um pouco de código em bibliotecas. Na verdade, você pode apenas fazê-lo sob o menu de esboço no processamento. Se você diz importar biblioteca, há um PDF bem aqui, e ele vai plop no pedaço certo do código. Ou você pode simplesmente copiá-lo do arquivo de referência. Dizemos importar, processing.pdf, e agora temos acesso às ferramentas necessárias para salvar um PDF. O resto do código para isso, irá em torno de nossa área de desenho. Então, tudo o que precisamos fazer é dizer, começar a gravar no início do sorteio, e depois gravar no final. No início do código de gravação, vamos apenas dizer-lhe o que queremos que o nosso PDF seja nomeado. Então, digamos começar a gravar ou começar a gravar, e abrir colchetes, colocar nesse ponto e vírgula e nós queríamos salvar isso como um PDF então, esse é o primeiro parâmetro, e o segundo é exatamente o que você quer chamá-lo. Vou chamá-lo de meteorStrikes.pdf. Certifique-se de que está entre aspas, e no final do nosso loop de desenho, vamos apenas dizer, registro final, é tão simples quanto essa função, e eu vou apenas adicionar uma pequena saída de console aqui, modo que Eu sei que o PDF é feito salvando, e isso será apenas algo que diz PDF salvo. Então, printlin e PDFs salvos. Isso é apenas uma coisa útil para mim saber que eu posso verificar, e é seguro abrir o PDF. Então, é executado. Eu vejo no console, ele diz PDF salvo. Vou fechar este esboço, e se eu for para sua pasta pai, você verá que eu tenho um PDF de 1,1 megabytes chamado meteoros. Eu posso abri-lo em pré-visualização, e parece muito bom. Vou tentar abrir isso no Illustrator agora, e ver o que preciso mudar se alguma coisa, e como posso fazer isso parecer um pouco melhor. Eu adoraria dar-lhe algumas fontes mais agradáveis do que o padrão que eu recebo no processamento, e eu poderia adicionar um título ou mudar as cores. Eu o tenho aberto no processamento agora. Vai haver uma coisinha que acho que vou querer mudar. Por padrão, o processamento descreve todos os textos quando ele o traz. Então, se você for para o modo de contorno no Illustrator pressionando Comando Y, você pode ver que este não é mais texto em tempo real, tudo foi contorno. Então, se eu quiser mudar qualquer aspecto dele, eu vou precisar adicionar mais algumas linhas de código no processamento para torná-lo texto ao vivo. Felizmente, você pode ver alguns dos detalhes que temos neste PDF, é apenas bastante fenomenal, a densidade que pode ser criada. Aqui na Arábia Saudita, temos muitos ataques de meteoritos. O que isso significa, é para você decidir explorar com mais profundidade. Eles são bons em encontrá-los lá, ou eles apenas tendem a ter muitos meteoritos? processamento pode salvar coisas como PDF ou JPEG com diferentes bits de código, mas como estamos interessados em trazer isso para Illustrator e fazer um pouco de limpeza nele, importamos esse código PDF e configuramos para exportar esse maneira. Esta é uma das coisas que eu realmente gosto no processamento, é que para um designer gráfico mergulhado em trabalhar em impressão, eu quero vetores, eu não quero JPEGs ou PNGs. Agora, para que este tipo esteja ao vivo, há mais algumas partes que precisaremos adicionar. Precisaremos adicionar um novo contêiner chamado de fonte P. Vou chamá-lo de F, e é aqui que o tipo de letra que definimos vai viver, e será capaz de produzir tipo live em nosso PDF. Em nossa configuração, o código que executamos apenas uma vez, eu vou agora definir F. Esta vai ser uma função chamada CreateFont, e você pode usar qualquer tipo de letra que é carregado em sua máquina. Vou usar o Avenir porque acho que o Mac o obteve por padrão. Então, isso deve funcionar para todos, e parece um pouco melhor do que a fonte padrão que estávamos usando antes. Então, a maneira de referência é neste caso, dizendo então o nome da fonte e o peso que queremos. Eu quero Avenir médio, e eu quero que ele seja tamanho 12. Então, eu deveria ter esse tipo de configuração. Agora, eu só preciso especificar que eu quero usá-lo no meu gráfico. Eu tenho que usar um modo de texto diferente para que ele não descreva tudo. Esta é uma linha chamada modo texto, e o código para a forma como queremos que ele seja tratado, como um modelo. Acho que isto deve bastar. Mais uma linha acima onde especificamos o texto que está sendo escrito, vamos dizer que queremos usar esse tipo de letra que eu defini. Então, apenas uma linha bem simples aqui, fonte de texto F. Esperemos que isso faça isso. Vamos dar uma corrida. Então, isso vai executar novamente o esboço, salvar novamente o PDF sobre o antigo, e então vamos trazê-lo para Illustrator e certificar-se de que tudo está funcionando corretamente. Eu posso ver meu esboço agora, que o tipo de letra Avenir está sendo usado. Então, as coisas parecem um pouco mais designy, e eu vou abrir este PDF que ele me deu no ilustrador. Em seguida, vá para o modo de visualização novamente. Eu posso ver agora que o tipo está preenchido, e se eu mudar para a ferramenta de texto, eu posso selecioná-lo e eu posso mudar as coisas. Então, isso parece bom. Ok. Agora temos tudo no Illustrator, nosso texto é editável, e podemos seguir em frente e brincar com o ajuste de alguns tipos, eliminando alguns problemas que podem estar aparecendo em nosso esboço e ajustando algumas das cores. 14. Limpando: Tudo bem. Estamos aqui no Illustrator agora. Temos este belo PDF que guardamos com todos os nossos ataques de meteoritos. Temos um monte de rótulos. Olhando para ele agora, acho que poderíamos adicionar mais alguns. Então, se você quiser apenas ir para Processamento, você pode alterar esse número de rótulos de 10 aqui para 20. Acho que vamos conseguir algo que tem um pouco mais de riqueza que vai aparecer de volta no Illustrator. Sim. Ótimo. Então, reabra nosso PDF no Illustrator. Então, eu tenho 20 etiquetas neste mapa. A primeira coisa que você pode notar no Illustrator quando estiver olhando para este PDF é que, se você clicar neste gráfico, você apenas obtém os limites desse retângulo externo, e uma das coisas que o Processamento faz é colocar uma máscara de mapa sobre o toda a saída. Então, a primeira coisa que faço sempre que entro no Illustrator é que só preciso remover essa máscara. Então, em Máscara de recorte, em Objeto, eu só vou dizer liberar a máscara, e agora se eu selecionar meus limites novamente e excluí-lo. Vamos ver. Parece que liberei uma máscara, mas isso estava no mapa. Agora, eu vou apenas selecionar todos e, novamente, dizer Clipping Mask, Liberar. Então, isto deve permitir-me selecionar qualquer coisa agora. Sim, recebi a minha mensagem. Tenho os meus rótulos. Então, selecionando tudo e no menu Objeto dizendo liberação de máscara de recorte, eu sou capaz de acessar todas as várias partes deste mapa que eu quero acessar. Então, tudo é convenientemente uma cor diferente agora no Illustrator, e eu acho isso muito útil porque agora podemos agrupar as coisas novamente. Temos nosso fundo em uma cor cinza. Temos o mapa que está em branco, mas fragmentado. Então, vamos selecionar uma parte do mapa, e no menu Selecionar, vamos apenas dizer selecione a mesma cor de preenchimento. Agora, vamos agrupar estes apertando o Comando G. Então, eu tenho o meu passado, é acessível. O mapa está acessível. Vou fazer o mesmo processo para os meteoritos, os rótulos e as linhas. Então, vou selecionar um meteorito. Diga Selecionar, Mesmo, Preencher e Traçar, e eu vou pegar todos eles, e eu posso agrupá-los. Vou pegar um pedaço de texto. Selecione, Mesmo, Preencher e Traçar, agrupá-los e agarrar as linhas e fazer a mesma coisa. Ótimo. Então agora, meus cinco componentes diferentes são facilmente selecionáveis e editáveis. A próxima coisa que você pode notar é que este arquivo é um RGB. Isso vai ser bom se você estiver indo para a saída da tela, mas eu geralmente penso em cores mais em um CMYK ou uma impressão enviada. Então, eu vou apenas mudar tudo para CMYK agora para tornar as coisas um pouco mais simples. Você pode ver que imediatamente há um pouco de mudança de cor do vermelho RGB para um vermelho CMYK. Mas eu nem quero que esses meteoritos sejam de cor vermelha. Prefiro fazê-los algo que seja mais do que a minha estética. Gosto de um bluegreen. Então, eu vou para ciano, digamos 80 e adicionar 30 amarelo e lá vamos nós. Estamos em um lugar melhor. Poderíamos até editar a transparência se quiséssemos. Se não ficássemos satisfeitos com o que o Processamento nos deu. Se você for para Janela, Transparência no Illustrator, verá que, no momento, tudo está definido em 100. Isso é para todo o grupo. Se o desagruparmos, ganharemos acesso aos componentes individuais, e todos eles estão definidos em 20% de opacidade. Então, talvez eu mude isso para 30. Você pode até olhar para ele em 100% de opacidade, mas eu acho que o que você vai descobrir é que muitos dos detalhes que estávamos desfrutando antes desaparecem agora. Nós temos este mapa sólido onde você não pode ver alguns dos aspectos subjacentes. Então, provavelmente, qualquer coisa abaixo de 50% é melhor para esta tarefa. Sim, 50 é um pouco escuro para o meu gosto. Eu vou desistir e vou agrupar estes de volta em uma grande seleção agora. O texto está agora em Avenir. Posso ver que está caindo um pouco atrás de alguns desses ataques de meteoros. Se você ampliar aqui, verá que alguns deles estão caindo por cima. Então, eu quero mover essa seleção para o primeiro plano. Vejamos, Object Organize, Traga para a Frente. Ok. Então agora, nosso texto está na frente. Eu também tenho um par de colisões acontecendo no texto, então eu vou ambos querer mudar o tipo para algo que eu gosto um pouco mais do que Avenir e eu vou querer mover alguns dos rótulos que estão começando a colidem uns com os outros. Então, primeiro, vamos selecionar esse grupo de tipos. Eu tenho sido um fã deste novo tipo chamado Entrada recentemente. É uma fonte gratuita oferecida pelo Font Bureau. É muito bom para edição de texto e tem um dobrado informativo para ele que eu gosto. Como esses pesos estreitos que também funcionam melhor na visualização de dados, porque você pode obter mais altura de suas fontes quando eles estão um pouco mais compactados. Então, eu vou mudar isso para Input Sans Compressed, no peso normal. É um preto bem preto agora. Se você olhar para o CMYK, é bem pesado. Então, isso é a partir da conversão de RGB, então eu vou apenas configurá-lo para 100 por cento K ou 100 por cento preto sem qualquer um dos outros componentes CM e Y para ele. Isso parece bom. Essas linhas são um pouco grossas também e estão definidas para este preto realmente, muito rico que é muito denso para nossas necessidades, então defina isso para um preto adequado e altere o traço de 1,2 para meio ponto, e eu vou dar-lhe um pouco mais leveza e não será tão distraído de algumas das informações que estamos tentando representar aqui. 15. Tipografia: O último problema que tenho aqui são dois lugares onde esses rótulos estão colidindo uns com os outros. Então, o que eu vou querer fazer é virar essa coisa toda. Como todas essas linhas estão agrupadas, eu vou ter que ir para o seletor de seta aberta, a ferramenta de seleção de grupo, que vai me deixar pegar uma dessas linhas, também ver que essas linhas estão sentadas atrás dos meteoritos. Então, eu quero fazer o mesmo que fiz com o texto, e trazer todo esse grupo para a frente. Então, eu vou fazer isso com o objeto, organizar e trazer para frente. Então, voltando para a ferramenta de seleção de grupos, eu vou pegar essa linha, e mantendo a tecla shift, eu vou pegar um pedaço do tipo, e eu vou levar isso para a borda direita do meteorito com o qual estou lidando. Então eu só preciso mudar a orientação deste pedaço do tipo da esquerda alinhado para a direita alinhado com a ferramenta de parágrafo, e puxá-lo para a borda da linha. Uma das coisas boas sobre o processamento é que suas medidas permanecem as mesmas quando você entra no Illustrator. Então, enquanto ele está lidando com pixels em nossas medidas lá, eles realmente traduzem para pontos no Illustrator. Então, eu acho que a distância que eu tinha para o deslocamento da linha para o tipo foi de cinco pontos, e você pode ver que se eu mover sobre um dos rótulos para as linhas, seu deslocamento é cinco. Então, se eu pegar meu rótulo, cinco pontos para a esquerda, ele estará exatamente na posição correta como todos os outros, e eu vou passar por cima deste outro rótulo aqui. Na verdade, eu tenho, parece que eu tenho dois para me mudar para cá. Estão todos colidindo uns com os outros. Usando a ferramenta de seleção de grupos, eu escolherei esse pedaço de texto, e a linha associada a ele, e movê-lo para a borda direita do meteoro. É este mais externo, vamos ver se acertamos, porque a linha se conectará à borda mais à esquerda do círculo e mudará o texto para alinhar à direita, movê-lo para a borda da linha, e, em seguida, passá-lo sobre Cinco pixels, 1-2-3-4-5. Agora podemos ver que nossas opções para ajustar uma rotulagem ficaram sem iterações esquerda e direita, então vamos precisar de mais um pequeno ajuste para fazer com que ele funcione corretamente para o ataque do meteorito Morito. Então, se eu pegar essa linha e a etiqueta, eu vou movê-la para baixo. Tem que ir junto com este círculo menor aqui. Então, eu só vou adicionar mais uma iteração às nossas opções de rotulagem, onde eu giro essa linha e coloco o rótulo ao lado dela. Então, isso vai aqui, e o rótulo Morito pode ir ao lado dele, ou abaixo dele. Acho que vou mudá-lo para o centro alinhado e colocá-lo cinco pixels abaixo dessa linha. Eu acho que isso limpou toda a nossa saída do processamento, e a última coisa que eu quero fazer é apenas dar um título ao meu gráfico. Eu acho que uma das coisas mais impressionantes sobre este conjunto de dados é o tamanho puro dele. Então, este é um bom lugar para chamá-lo para fora, para falar sobre toda a amplitude deste gráfico, e que é que ele contém 34.000 ataques de meteoritos. Então, eu vou voltar para onde começamos esse conjunto de dados original para obter uma contagem precisa de quantos representamos. Eu posso ver que tem 34.066 fileiras, significa que há 34.065 meteoritos representados, e eu só vou precisar de um novo pedaço do tipo para expor isso, 34.065 ataques de meteoritos. Vou colocar isso em um canto onde não há muito que ele vai obscurecer, e dar-lhe um tamanho maior,para e dar-lhe um tamanho maior, que fique imediatamente aparente e espero que vá atraí-lo para este mapa muito detalhado do globo. 40 pontos devem bastar. - Sim. Dê um pouco de estofamento, e acho que estamos em boa forma. Agora você pode salvar isso como um arquivo do Illustrator , trazê-lo para o Photoshop exportá-lo como PDF, PNG ou JPEG, e publicá-lo onde quiser e, espero, compartilhar a saída final no a página Skillshare. 16. Conclusão: Então, neste exemplo, eu acho que seria difícil dar errado com a cor. Você quer algo que certamente vai ter visibilidade, mas nós só estamos codificando para um tipo de evento aqui. Provavelmente usar amarelo não vai ter contraste ou impacto suficiente e queremos ficar longe de usar cinza porque estamos usando isso para definir o mapa base. Então, eu acho que algo que é brilhante e funciona bem com transparência, então ele se constrói para algo sólido e impactante é bom. Então, quando estamos usando o tipo, você tem que pensar sobre a escala em que isso vai ser visto e como isso vai ser distraído da informação que você realmente quer se comunicar. O coração e a alma desta página são todos os ataques de meteoritos. Então, se o tipo é muito grande ou muito exigente, ele realmente vai dominar os dados que estamos tentando expressar. Então, eu gosto de usar algo que tem uma textura uniforme, que pode ser condensado porque isso pode nos dar muito mais impacto em uma pequena quantidade de espaço. Sim, e geralmente insistir em apontar para legibilidade. Então, a menos que eu esteja codificando para algo, então provavelmente será apenas texto preto. Se estou tentando expressar o que é um rótulo ou uma chave, então eu posso mudar as cores. Esta é uma abordagem que é realmente verdadeira para os dados. Se você olhar para essa planilha e olhar para este mapa, eu acho que certamente representamos a maioria das informações mostradas lá. Temos a latitude e longitude de cada um desses ataques de meteoritos e também estamos representando suas escalas relativas. Além disso, nós até rotulamos alguns deles e você pode ir mais longe e você pode codificá-los por encontrado ou caiu. Isso é algo que você realmente tem que emparelhar a estética a fim de ser capaz de comunicar essa densidade de informação, é por isso que não há realmente nenhum elemento decorativo aqui. Eu acho que eu estaria apenas distraindo do núcleo do que estamos tentando comunicar aqui. O que é algo que alguém poderia gastar muito tempo analisando as nuances de onde esses eventos acontecem. Eu acho que este conjunto de dados é realmente atraente para explorar como um mapa porque você vê esses eventos realmente grandes, alguns deles perto de onde vivemos, outros que podem ser muito, muito distantes e eu acho que o que é interessante aqui é que ele também se torna um pouco de um mapa para a densidade populacional. Começa a mostrar onde as pessoas vivem. Se você olhar para a Sibéria ou olhar para a floresta tropical, você não vê nenhum meteorito atingindo lá. Mas, eu acho que provavelmente é evidente que isso não é porque eles não acontecem lá, é só porque eles não foram recuperados ou eles não foram vistos lá. Então, isso para mim é quase como se fosse um gostinho do que realmente está acontecendo. Temos 34.000 ataques de meteoritos conhecidos, mas pense em todos os que acontecem no oceano ou acontecem na Sibéria que nós nem sabemos. Isso é o que é bastante convincente para mim sobre ver este mapa.