[Música tocando] 

DAVID Chouinard: Eu sou David Chouinard, e este é D3. Bem-vindo. Vamos aprender sobre D3 hoje. D3 é um framework JavaScript para a construção de uma alta qualidade visualizações interativas para a web. Coisas como o que estamos vendo em volta de mim, vamos aprender a fazer os coisas, tipo de os fundamentos da mesma. Mas vai ser legal. Vamos começar fazer fotos bonitas. Temos mais demos de perspectivas disponíveis. Vamos fazê-lo. 

Act I, DOM manipulation-- vamos para começar imediatamente fazer coisas legais. Primeiro de tudo, à esquerda, que tem o código. À direita, temos o resultado do nosso código. Vamos passar por isso. 

Vamos fazer um círculo. O que acha disso? svg.append circle-- nós só fizemos um círculo. Você não acredita em mim, certo? Não está lá. 

Então, o que nós fizemos aqui é, SVG é gráficos vetoriais escaláveis. Esta é a nossa forma de dizer ao navegador para fazer gráficos vetoriais no browser. O que nós fizemos agora é adicionado um círculo para navegar. 

A promessa é que o círculo requer um pouco de atributos básicos antes que possamos realmente vê-lo. Nós precisamos dizer que a sua posição x, sua posição y, o seu raio. Nós não dizer que nada disso, por isso não estamos vendo isso agora. Mas vamos dizer que coisas. 

Então, primeiro de tudo, você tem para dar o nosso círculo de um nome. Então, vamos chamá-lo de círculo. Nosso círculo tem um nome agora. E vamos dar-lhe alguns atributos. Como cerca de cx iria centrar x, de modo o centro da posição x. Digamos que, de 200 para 200 pixels. 

Vamos dar-lhe um y de 200 pixels também. E um r, um raio, de cerca de 40 pixels. Agora vamos ver. Eu não posso soletrar. 

Lá vai você. Nós temos um círculo na posição 200 pixels, 200 pixels, raio de 40 pixels. Kind of legal, né? Nós temos um círculo. Sim. 

Então não há necessidade de seguir adiante. Todos estes exemplos, todas o código que estou fazendo hoje será fornecida em linha na extremidade sob a forma de exemplos interactivos com postos de controle na cada ato, e assim por diante. 

Vamos fazer mais coisas. Este círculo preto é realmente feio. Sinto muito por esse erro mensagens logo ali. Lá vamos nós. 

Vamos dar-lhe uma cor. Como é isso? Eu gosto de azul aço. Bem, nosso círculo mudou de cor. Isso é ótimo. Vamos torná-lo semi-transparente demasiado-- semi-transparente. 

Então, esses são atributos estamos definindo no círculo. A primeira coisa que fizemos é nós colocamos um círculo na página. E então estamos definindo um monte de atributos. Algumas destas são requeridas, como CX, CY, e Radius. E outros são opcionais. 

Há um monte mais atributos. Há um monte deles. Por exemplo, poderíamos ter um acidente vascular cerebral, bem como, um golpe de vermelho. Mas vamos remover esse. Estamos de volta a um círculo, um círculo azul. 

Então, vamos fazer mais círculos. Como é isso? Vamos fazer um outro círculo. Isso é emocionante, não é? 

Então, dizer que eu apenas Copy-Colado o que já tínhamos. Vamos chamá-lo circle2. E vamos fazer exatamente o mesma coisa e dar-lhe atributos, dada uma posição de 300 x. Yay, temos dois círculos agora. 

E, claro, nós poderíamos atualizar esses valores. Eu poderia colocá-lo em 400, e agora ele se move. E já que é chato, vamos removê-lo, por isso circle2.remove. Ele já se foi. 

Então, o que estamos fazendo e é apenas muito, very-- este é muito semelhante ao que você pode fazer em jQuery, por exemplo. Estamos apenas manipulando o DOM, ele é chamado. Você já deve ter ouvido essa palavra antes. Estamos criando coisas, estabelecendo atributos de material, remoção de material. 

Agora, aqui é onde fica interessante. Então, mais tarde no código, poderíamos ainda referem-se ao círculo original aqui. Então, vamos redefinir seu atributo para cx. Vamos dizer, a sua posição x 400. E eu vou fazer a transição que, por isso é óbvio. Lá vamos nós. 

Por isso, acrescentou um círculo. Nós definir alguns atributos. Nós adicionamos um outro círculo, removeu. E então nós estamos modificando o círculo original. 

Mas aqui é onde fica muito mais interessante. Não só podemos definir atributos apenas como valores, podemos dizer, hey, círculo, ir para a posição 200. Nós também pode configurá-los como funções. 

Então, ao invés de dar 400 aqui, nós podemos fazer algum cálculo on the fly para o que nós quero esse atributo para ser. Então é assim que você expressar isso. Nós dizemos, em vez de 400, deixe-me dar-lhe uma função em seu lugar. E aqui, dentro dessa função, nós podemos fazer qualquer cálculo louco. 

Poderíamos tomar o tempo e olhar para alguma outra coisa e decidir de forma dinâmica para o círculo que valor que queremos. Que tal dar -lhe um x posição aleatória? Então é isso. 

Então, o que diz é, por a cada x, executar esta função. E o que estamos fazendo é o cálculo algumas coisas, uma horários aleatórios a largura e retornando que. Então, toda vez que corremos, temos um círculo que vai para um lugar aleatório. É bem legal. Eu sinto como se eu pudesse olhar no presente por pouco. Estamos começando a chegar algo interessante aqui. Vamos fazer esses dados conduzido agora. Não há dados aqui. Vamos mudar isso. 

Documents-- Act II, Data Driven Então vamos voltar para aqui. E vamos apenas se livrar de circle2, porque nós estamos apenas adicionando e removendo lo. Então, nós realmente não precisa. Precisamos ser muito mais inteligente aqui. Vamos dizer, temos alguns dados de algum tipo. Um moment-- vamos dizer, tivemos dados deste formulário. Tivemos uma matriz, apenas um monte de números. Temos sete números aqui, o que quer que estes quantidade represent-- em conta bancária das pessoas, como quanto eles pesam, Deus sabe o que. 

Estes são os números, e nós quer usar nossos círculos para representar os números de alguma forma. Queremos amarrar nossa círculos a esses números. Então, o que nós fazemos. Vamos dizer, nós queremos uma círculo para cada número. Nós poderíamos fazer o velho coisa que foram doing-- círculo de acréscimo e circle2 e Circle3. Mas isso fica fora de mão, e há um monte de repetir a lógica. 

Então, vamos começar mais esperto com isso. Em vez de usar o círculo var svg.append que nós estávamos usando, vamos usar este pequeno bloco aqui. Eu não quero ir em profundidade em que todas estas peças fazem. E é uma espécie de um tópico avançado. E eu gostaria de poder. 

Mas a principal coisa a recognize-- e você vai ver é muito frequentemente no código D3. Este bloco de texto básico cria tantos círculos uma vez que existem elementos de dados nessa matriz aqui. Então isso cria tantos círculos como há elementos. Vai criar-nos sete círculos. E ele faz uma coisa muito, muito fundamental. Então, vamos executar isso. Vamos remover o nosso outro círculo. Vamos apenas comentar esta parcialmente para fora e correr novamente. 

Lá vamos nós. Assim, o nosso círculo aqui é um muito mais escuro, porque nós tem sete círculos, um em cima do outro. Nós acabamos de criar sete círculos, um cada para cada um destes elementos de dados. Mas há uma coisa fundamental que aconteceu com esse trecho aqui. 

É que os dados foram obrigados. Assim, cada um de esses elementos de dados, 10, 45, 105, foi ligado para um círculo em particular. Portanto, estas não só criou um monte de círculos Mas os laços essas duas coisas juntas. 

E, no futuro, porque nós criamos aqueles círculos com esta função, D3 se eu lhe der um círculo, você pode dar-me os dados associados. Assim, podemos perguntar D3. Hey, D3, eu tenho esse círculo. Qual é a dados que o círculo tem? E D3 nos diria 10 ou 45 ou 105. 

Essas coisas estão vinculados. Isso é um conceito muito, muito fundamental. Vamos olhar para isso. 

Assim, a maneira que pediria D3-- assim isso é irrelevante para este, mas confia em mim nele. Isto é como nós pedimos D3. Hey, D3, dá-me o primeiro círculo que você pode encontrar. Dê-me o primeiro círculo que você pode encontrar. E então nós poderíamos perguntar D3, o que é os dados em que, como este, 10. 

Então, nós apenas pedimos D3, encontrar-me o primeiro círculo que você pode encontrar. O que há de seus dados? 10, que é de fato nosso primeiro elemento de dados. Poderíamos perguntar-la, hey, D3, encontrar-nos o nosso terceiro círculo. 105. Por que isso é realmente importante? 

Então, aqui, eu mencionei que poderíamos usar funções. E eu mencionei que era uma coisa muito poderosa. Assim, não só pode fazer coisas nossas funções como fazer alguma computação, por exemplo, devolver um número aleatório, que pode também fazer as coisas com base nos dados. Isto é o que Data Driven documentos significam. Isso é o que D3 representa. 

Portanto, este x postition-- vez de apenas dizer, todos os círculos, obter x posição 200, que poderia dar-lhe uma função. E aqui, nós podemos fazer alguns cálculos. e d aqui fica no lugar para os dados. Então, toda vez que temos um círculo, basicamente, D3 irá criar estes sete círculos. E, em seguida, para cada 

círculo, ele está indo para ir, hey, circle1 qual é a sua posição x. Anteriormente, eram respondendo sempre 200. Mas agora, toda vez pede D3 -nos o que é a sua posição x, que vai dar US-- temos esse círculo, por isso temos os dados. Vai nos dar os dados e dizer: o que você quer a exposição a ser, com base nesses dados. 

Vamos apenas devolver os dados reais. Então, se nós executar este, isto dá dados dos EUA conduzido documentos. Estes meios são baseados em relação Position-- eles são bases como uma função dos dados. 

Assim, para o primeiro círculo, D3 coloca um círculo. E então D3 nos pede, o que fazer você quer que a exposição seja. E acabamos de dizer, tudo o que os dados são. Faça a exposição 10. 

Em seguida, ele pergunta, o que você deseja que o exposição a ser para o segundo círculo. E nós respondemos, de 45 anos. E nós, é claro, pode fazer alguma computação aqui. Acho que esses círculos são uma espécie de esmagado up. 

Então multiplique por 3, multiplicar dados por 3. Nosso círculo acabou de ser expandido para fora. Nosso valor foi triplicado. 

O círculo é realmente no limite, então vamos talvez tipo de compensá-la. Digamos que, em 20. Aqui você vai. 

Esta é uma visualização de dados. É uma forma muito básica, mas este nos dá algumas dicas sobre os nossos dados. Diz-nos que, por exemplo, nós têm um pequeno grupo de elementos. E nós temos uma grande outlier aqui. Isto dá-nos algumas informações sobre a distribuição. 

Se nós, por exemplo, para alterar os dados a 150 aqui e atualização, a visualização é alterada. Este documento é dirigido dados. 

Então, é claro, todos esses elementos, todos estes atributos aqui, podemos usar uma função, não apenas os números, e não apenas x e y posições. Assim, podemos usar uma função para a cor. Então, vamos fazer o mesmo. Nós vamos dar-lhe uma função. 

E vamos dizer, poderíamos ter condições na nossa função. Esta função pode ser centena de longas filas. Ele pode fazer coisas muito, muito complicadas. 

Então, vamos colocar uma declaração se aqui. Vamos dizer que, se os nossos dados é menor de 50, que é um limiar que nós estamos interessados em por algum motivo. Vamos torná-lo verde. Caso contrário, vamos torná-lo vermelho. Como é isso? Nice. 

Portanto, a nossa visualização de dados está começando para transmitir informações mais interessante em muitos canais. Portanto, agora sabemos um pouco sobre a distribuição. E nós sabemos que há algum tipo de cortados em 50 que nós estamos interessados. Sabemos que existem dois pontos de dados abaixo desse limiar e a maioria deles acima. 

Assim, como um passo final, estes dados aqui, é muito raro ver este como aquele. Então vamos apenas tirá-la a uma variável porque é mais limpo, como este. E, então, usar essa variável aqui. É exatamente a mesma coisa. É apenas um pouco de. 

Em seguida, Ato III, Scales-- Então, um problema de direito aqui é que, se não mudarmos a nossa dados deste 200 value-- se alterá-lo para 400 ou algo assim e de atualização, então este valor só fui fora de campo. Portanto, a nossa lógica aqui da forma como fazemos as vezes 3 e 20, para espalhá-lo para fora e, em seguida, compensá-la um pouco é realmente pesado. 

O que significam esses números? Eles estão apenas codificado lá. E eles estão muito ligados aos dados. Queremos um documento de dados conduzido. Queremos um documento muito flexível, dado que os dados, se adapta a isso e representa-lo. 

O que nós precisamos é, basicamente, nós ter esse intervalo de números 10. 45, 105. E nós queremos mapear que saiu a largura, a largura total aqui. Portanto, temos a gama de números que vão de 0 a 100. E nós temos este campus I vai 20-700, neste caso. 

Nós meio que deseja mapear que diante. Queremos que escalar para cima e então compensá-la um pouco. Acontece que o D3 tem estes. Chama-se uma escala. Então, vamos usá-lo. 

A maneira que works-- eu vou escreva isso e, em seguida, explicar. Esta é uma escala. O que ele vai fazer é, ele vai mapear valores de 1 a 200 em 20 a 600. Podemos verificar isso. Podemos ver isso aqui. 

Então, se eu alimentá-lo 1-- um momento. Dê-me um segundo. Devo ter escrito mal-lo. Lá vai você. Eu sinto muito por isso. 

Então, o que a escala vai fazer é, vai demorar um valor e, em seguida, converter que, expandir esse fora, por isso preenche toda a gama que você está pedindo. Portanto, neste caso, se dermos a ele um, que vai mapear que saiu 20. E se nós lhe damos 200, é vai mapear em que a 600. E em algum lugar no meio, se conseguirmos 100, é vai estar em algum lugar entre 20 e 600. 

E, claro, agora isso é o que precisamos remover esses codificado coisas que temos lá. Então, o que nós queremos fazer é ter os dados que estamos dada, que os dados individuais elemento, e passá-lo para escalar pela primeira vez. Então escala vai escalá-lo para cima. 

Bom-- Oh, temos um pequeno erro aqui. Estamos perdendo dados. Lá vai você. E que se expande para fora. 

Isso nos dá a mesma resultado que tínhamos antes, mas em vez de ter os codificado restrições. E se o tamanho do nosso mudanças de lona, ​​por exemplo, Se queremos ter isso mais 400 pixels e que espreme para fora, nós podemos ter over-- podemos expandi-lo, ou nós pode reduzir esta margem esquerda para a algo mais ou menos do que 20. Estes números, estes codificado números agora faz sentido para nós. 

E nós poderíamos fazer muito mais coisas interessantes também. Então, ao invés de ter um linear escala, podemos querer registrar uma escala. E isso nos dará uma escala logarítmica. 

Então, agora a nossa escala, em vez de apenas expandindo para fora desse intervalo, ele está fazendo coisas mais sofisticadas. Em vez de ter esta gama duro codificada, e em vez de ter que 600, podemos querer usar apenas a largura, assim de acordo com a largura 20 menos 40, 2 vezes a margem do outro lado. E isso faz muito mais sentido alguém que pode olhar o código. 

Curiosamente, as escalas de obter muito, muito sofisticado. Eles fazem um monte de coisas interessantes. Assim, as escalas não têm necessariamente para operar apenas com números. Vamos fazer uma escala de cores. 

Portanto, a nossa gama poderia ser-- nosso domínio é de 1 a 200. Essa é a coisa entrada. Mas podemos querer mapear verde para vermelho, por exemplo. E agora, se passar 1, vamos obter verde. Se dermos 200, nós vamos chegar vermelho. E se passar algo entre os dois, que vai haver algum mix de que, em algum lugar no gradiente entre o verde eo vermelho. 

E, em vez de ter esse tipo de lógica desajeitado temos aqui com a condicional ali mesmo, poderíamos ter um something-- escala linear entre esses. Por isso, usaria a escala que acabamos criado, que chamamos de cor. E nós gostaríamos de lhe dar D, que é nossa elemento de dados. E lá vamos nós. Nós temos uma escala de cores. 

Portanto, este é o mapeamento. Assim, a extrema esquerda é completamente verde. A extrema-direita é completamente vermelho. E tudo no meio é uma função de d. Nós temos uma interessante visualizações aqui. Mas nossos dados foi meio chato. Vamos ver o que poderíamos fazer se tivemos dados mais interessantes. 

Ato IV, Com Trabalho Data-- a primeira coisa vamos querer fazer para tornar a visualização mais interessante é mover os dados em outro lugar. É muito pesado para ter os dados codificados aqui. E, geralmente, nós vamos estar se perguntando outra pessoa para os dados. Estaremos talvez pedindo que o governo, o Census Bureau, o que é seu de dados e, em seguida, traçando que ou pedir alguma entidade de terceiros para obter alguns dados e, em seguida, a construção de um visualização sobre isso. 

Então a primeira coisa que queremos fazer é passar isso para algum outro lugar. Então, eu estou indo para criar uma arquivar aqui chamado data.json. JSON é o formato de dados. Você não precisa saber muito sobre isso. E nós estamos indo para copiar o poucos dados que temos lá, colá-lo lá na íntegra, acesse de volta para o nosso código de visualização aqui, e use esta função aqui. Você não tem que saber os detalhes. Mas o que isto vai fazer é, ele vai encontrar esse arquivo, buscá-la, e devolvê-lo para nós. Então, o que isso faz é, ele vai e obter o arquivo data.json. E, em seguida, todo o código que é recuadas dentro-- essencialmente, todo o código temos há-- vontade executar somente quando chegarmos os dados de volta. E então ele vai executar esse código com os dados que temos. Grande, temos uma visualização que consulta por algum código em algum lugar outra, o que é geralmente onde ele consulta de dados a partir de alguns em outro lugar, o que é normalmente como visualizações trabalhar. 

Mas eu quero voltar para os dados. Assim, os dados fundamentalmente D3-- D3 consome dados que é uma lista de coisas. D3 espera que os dados apenas ser uma lista das coisas, uma série de coisas. Não importa o que essas coisas são, por isso, desde que seja uma matriz deles. 

Então, aqui, por exemplo, poderíamos de Claro que têm valores de ponto flutuante. Poderíamos ter negativos. A D3 não me importo, contanto como é uma lista de coisas. 

Como as coisas interessantes que poderia ter, também poderíamos tem uma lista de strings como essa. Então, essas são as manchetes carmesim Peguei alguns dias atrás. E talvez você pode encontrar algumas interessantes coisas sobre estes um manchetes. 

Então, novamente, esta é uma lista de coisas. A D3 não me importo. Estes acontecer de ser um string. Nós mudamos os nossos dados. 

Vamos voltar à nossa visualização. Agora, nossa visualização espera a entrada a ser números. Então, nós vamos ter para fazer algumas mudanças. Assim, por exemplo, em primeiro lugar, talvez queremos colocar esses círculos ao longo pelo comprimento do título, o número de caracteres no título. 

Então, o que nós vamos fazer é-- toda vez que o nosso função é chamada com uma corda, vamos descobrir que é comprimento E em seguida, passar isso para escala. A cor, eu vou voltar que a Blue Steel. E lá vamos nós. Nós temos uma visualização manchetes de carmesim. 

Nossa escala é um pouco fora. Vamos supor que o mais longo headline é de 100 caracteres, de modo que abrangem um pouco. E nós temos uma visualização. Assim, parece que a maioria das manchetes são muito próximos uns dos outros, em termos de linha de caráter. Mas há realmente se destaca. 

Poderíamos construir algumas ferramentas explorar isso mais. Mas quando eu estava trabalhando sobre isso, eu estava curioso para saber se, nesse conjunto de dados, manchetes com dois pontos neles seria maior. I assume o fariam. 

Então, vamos descobrir. Vamos usar a cor canal, como fizemos antes, para codificar alguma sobre se há um cólon ou não. Então, vamos usar uma condicional novamente. Você não tem que saber os pormenores deste, mas é assim que verificar um string para um personagem em particular em JavaScript, novamente, não é relevante. 

Mas, se não encontrar um cólon, vamos voltar verde. E se o fizermos, vamos voltar vermelho. Então, novamente, manchetes que têm dois pontos será vermelho. Isto é o que esta means-- nice. 

Assim, parece que o meu hipótese é batido. Há apenas dois. Nós só temos seis pontos de dados e apenas dois tiveram dois pontos. Mas parece um pouco mais na extremidade inferior, na verdade. Headlines com dois pontos parecem ser geralmente mais curto, pelo menos em nossos dados set-- interessante. 

Vamos voltar ao que aço azul e, em seguida, ver o que podemos fazer com o mesmo dados mais interessantes. Então, novamente, eu mencionei que dados em D3 é uma lista de coisas. Temos visto números de muitos tipos. Vimos strings. Mas as coisas também podem ser objectos. 

Podem ser coisas complicadas que incluem um monte de coisas. Para dizer que de forma mais clara, na maioria dos casos, nós quer construir todos os pontos de dados como mais complicado do que apenas um valor. Se você imagina uma banco de dados sobre alunos, pode haver um estudante nome, uma carteira de estudante, e um monte de coisas associadas com um registro particular, não apenas uma seqüência ou um número. Então, vamos olhar para isso. 

Este é um conjunto desses dados. Este é um conjunto de dados sobre terremotos. Então, tudo aqui na nossa lista ou matriz de coisas contém em si muitas coisas. Assim, cada ponto de dados tem um magnitude e uma coordenada. E coordena-se conter duas coisas. 

Assim, a cada dia é agora muito mais complicado e muito mais interessante e contém muito mais informações interessantes. Vamos ver o que nós poderíamos construir a partir disso. Retornando de volta para aqui, mais uma vez, usando nossa visualização círculo histograma nós construímos, vamos ver se podemos construir uma visualizar a distribuição magnitude em nosso conjunto de dados. 

Então, aqui, é o mesmo conceito. Mas agora, d contém mais coisas. d contém muitos elementos de dados. Então, nós temos de d volta. D3 nos dá d. E nós respondemos por encontrar a magnitude de d e, em seguida, de passagem, que a escala. 

E então temos de mudar nossa escala, é claro. Então magnitudes simplesmente não fazer ir muito mais do que 10. Na verdade, nunca houve um terremoto de magnitude 10. Mas esse é o tipo do nosso superior final, a parte superior do espectro. 

Vamos atualizar. Bom, temos uma visualização. É interessante note-- assim há dois pontos de dados que são quase exactamente por cima de cada outro, em termos de magnitude. Você vê isso pela opacidade que estamos usando. 

Temos dados geográficos agora. Temos latitudes e longitude. Talvez pudéssemos fazer algo um muito mais interessante com isso. Vamos descobrir um pouco mais maneira interessante para visualizar este mais complicado dados que temos acesso. 

Act V, Mapping-- fundamentalmente, queremos colocar estes em um mapa. Quero dizer, este é o lugar onde isso vai dar. Queremos codificar informações sobre o posição dessas leituras do terremoto, bem como a sua magnitude, porque nós temos isso agora. Entendemos como consumir dados mais complicadas. 

A primeira coisa que vamos fazer é criar um mapa, um mapa de fundo. Eu vou passar por isto muito rapidamente. Este é o código complicado. É mais um daqueles receitas que você realmente não tem que entender completamente para você usar. Mas este é o código. Este código aqui cria um mapa. 

Nós não vamos entrar em detalhes. Mas superficialmente, o que ele faz é, ele consulta o arquivo us.json, que é um arquivo de dados como a que tivemos antes. É mais complexo, é claro. Mas, neste caso, tudo, todos os pontos de dados é este estado e tem uma lista de latitudes e longitude que definem o polígono, essa forma, esse estado. 

Então, o que vai fazer D3 é semelhante ao que fizemos antes. Ele vai pedir que e que se ligam a um elemento. E não há uma função que mapeará esse elemento para fora, com base nas latitudes e longitude. Você pode ler mais sobre isso. E eu recomendo. 

Há links no final deste código postado. E o código é comentado. Em há links para mais sobre este assunto. Eu recomendo que você procurá-lo. Mas o que nos interessa é esta função de projeção. Eu quero passar por isso. 

Primeiro de tudo, deixe-me mostrar você que, sim, nós temos um mapa. Mapas são legais. Então, vamos olhar para este função de produção. 

A projeção é muito como uma balança, balança novamente. Então, o que a produção de esta função de projeção não é, poderíamos passá-lo longitude e latitudes-- neste caso, estes valores aqui são o LAT-longs do edifício estamos sentados em direito agora-- para projeção. E projeção converterá que em xey valores de pixel. 

Então, o que está fazendo projeção é muito semelhante à nossa escala. É tomar nossas latitudes e longitude que representa todo um globo e encolhendo e dimensionamento que até a praça que nós queremos, que demos a ele. Neste caso, estamos passando esses valores. E isso está nos dando, assim, que na tela significa 640 pixels. Esta tela inteira é de 700 pixels ampla, de modo que nos faz por aqui, e 154 pixels para baixo, que eu estimativa é muito bonito aqui. 

Assim, tendo essas-longs lat, que representar algo em todo o mundo e espremendo e movendo-se que cerca de nos valores X e Y de pixels dar, esta é a primeira coisa que é feito neste código de mapeamento. E, em seguida, o resto do codificar os dados consome e, em seguida, mapeia esses LAT-longs em alguma coisa na sua tela. 

Mas vamos usar essa projeção funções, pois verifica-se temos lat-longs longs também. Olhando para trás, os nossos dados, temos latitudes e longitude para cada observação. Então, vamos usar projeção. 

Então, olhando para nossa exposição, queremos que o nosso exposition-- temos uma latitude e uma longitude. Mas queremos que os valores de pixel. E ao que parece, nós temos exatamente o que want-- projecção. Muito parecido com nós usando a escala aqui, agora estamos indo para usar a projeção e passá-lo coordena. Então a primeira coisa estamos doing-- então estamos ficando d, que é um indivíduo dados elemento de um terremoto indivíduo leitura. A primeira coisa que fazemos é obter as coordenadas. Tudo bem, nós temos as coordenadas. 

A segunda coisa que fazemos é passar isso para a projeção. Projeção converte essas coordenadas em valores de pixel, x e y. E então a última coisa que quero fazer é só pegar o x, que neste caso é o primeiro. É a primeira das duas coisas que são devolvidos por projeção. 

Nós vamos fazer o mesmo para y. Mas em vez disso, vamos voltar o segundo elemento, o y. Prepare-se para atualizar. Ooh, caractere extra aqui-- agradável, temos um documento dirigido dados que é ocultando esse arquivo JSON de objetos, fazendo um mapa, e mudando o atribuem, em relação aos dados projetá-lo no mapa. Isso é realmente interessante. Isso é legal. 

Vamos levá-lo até um entalhe. Quero dizer, nós temos duas peças de informações com todos os pontos de dados. Quero dizer, três. Nós temos as coordenadas, que é um x e y. E nós temos a magnitude. 

Precisamos codificar magnitude de alguma forma. Temos um monte de canais. Podemos usar a cor. Podemos usar raio. Nós poderíamos usar opacidade. Nós poderíamos usar muitas coisas no código. Qualquer um desses atributos e muitos mais que não estão listadas aqui, porque eles são opcionais, nós pudemos utilizado para codificar os dados, o acidente vascular cerebral e todas essas coisas que eu já mencionei. 

Vamos fazer raio. Eu acho que raio é o mais intuitivo. Então, novamente, vamos substituir o hard-coded 40 e fazer alguns cálculos. Vamos usar nossa escala favorito novamente. E nós estamos passado d. Mas não d porque queremos a magnitude de d. d é apenas o ponto de dados. Nós vamos passar a magnitude em escala. 

Vamos tentar isso de novo. Ooh, ele não funciona. Por que não funciona? 

Então lembre-se que escala faz. Vejamos escala novamente. Mapas à escala de 1 a 10 sobre a 22 a 600, mais ou menos. 600 é enorme. É por isso que nós estamos recebendo este. 

Então, nós queremos mudar a nossa escala para algo mais razoável. Vamos dizer, queremos 0-60. 60 é grande, mas 10 terremotos são incrivelmente raras. Na verdade, eles nunca aconteceu. 

Então, o que isto vai fazer é, ele vai levá- a magnitude que vai de 1 a 10 e mapeá-la para expandi-lo para fora. E mapeá-la para 0-60. Vamos atualizar. 

Bom, temos uma visualização. Isso é ótimo. Estes são dados reais. Você vai notar, no meu pequeno brinquedo exemplo, o maior terremoto é bem em cima de nós. Mas é isso. Nós temos uma visualização data impulsionado que consome os dados e dá-nos realmente informações interessantes. Sim, vamos adicionar um pouco de interatividade a ele. Eu mencionei que era a força forte de D3. 

Então, aqui, para cada elemento, nós somos descrevendo um monte de atributos. Mas também podemos descrever o que queremos acontecer com elementos de interatividade. Por exemplo, poderíamos descrever o que acontece quando o mouse over. E muito semelhante que, que vou levar uma função, muito semelhante ao atributos que tínhamos antes, onde nós fazer alguma coisa para o elemento quando passa o mouse sobre ele. 

Então a primeira coisa que precisamos fazer é selecionar esse elemento, para encontrá-lo, basicamente, no navegador. e então poderíamos definir um atributo a ele. Então o que eu estou fazendo aqui é que, quando passamos o mouse sobre algo, nós vamos chegar esse elemento e defina sua opacidade de volta 1, completamente opaca. Vamos ver o que parece. 

Parece que temos um ponto e vírgula adicional aqui. Então, se nós passar o mouse sobre aqui, torna-se completo. Mas agora, é claro, fica cheia, porque nós tem que descrever o que acontece quando remover o nosso cursor. Então, vamos fazer exatamente isso em mouseout, em oposição a mouseover. 

E nós vamos redefini-la para o que tínhamos antes-- 0,5. E agora, todos nós o tempo pairo, temos um círculo completo. Ele nos ajuda a ver o que nós estamos selecionando essencialmente. 

E agora vamos tornar este realmente grande. Vamos ligar este a dados reais. Então, vamos pedir poderia USGS sobre seus dados. Assim, o Serviço Geológico dos EUA tem dados sobre terremotos. Eles têm uma API pública que é capaz para ser consumido em formato JSON. Então, vamos fazer isso. 

Então, isso é um pouco de código que liga-se a API USGS. E há um pouco de processamento sobre ele. Isso não é relevante, mas simplifica-lo a um formato de dados simples como aquele que tínhamos antes. Então, para me livrar da nossa chamada para nossa data.json falso no arquivo. E em vez disso, eu estou chamando o USGS essencialmente. 

Vamos atualizar, agradável. Estes são dados reais, da vida real a partir desta semana para sismos. Isso é realmente interessante. Isto não é surpreendente para nós, mas há um monte de terremotos no West Coast, na Califórnia. Mas eu pensei que era muito interessante que havia tantos terremotos no Alasca, e, aparentemente, aqui no Centro-Oeste. Quero dizer, interessante, e nós somos bons. Essa é a conclusão. 

Mas, fundamentalmente, este é o que nos ajuda a fazer D3. Ele nos ajuda a levar os dados, se ligam para elementos no DOM, e ter esses elementos mudar como uma função dos dados, tem esses atributos, todos os diversos atributos dos elementos, tudo ser úteis para canais para transmitir informações. 

D3 é incrivelmente poderoso biblioteca e surpreendentemente bem executado. Isto é alguma coisa poderosa. A visualização de dados é uma ferramenta incrivelmente poderosa para o transporte de pessoas profundas insights que chega a seu núcleo e ajuda-los a entender, em Desta forma profunda e intuitiva, como os dados funciona e como dados muda a nossa vida.