Visualização de dados interativa: como começar com D3. js - V5

1. Introdução: D3.js em uma nutshell: Bem-vindo ao D três pontos Js conceitos chave. Este curso é uma introdução muito sólida ao que se tornou uma das tecnologias mais populares para fazer visualizações interativas de dados para a Web. Meu nome é Bill Sander. Faço informações, design e visualização de dados há mais de 20 anos, trabalhando em experiências estáticas, infográficas e interativas. Faço design, e sou um programador autodidata. Eu tenho memórias vívidas das dores que você passa por tecnologias de aprendizagem com pouca ou nenhuma documentação ou tutoriais e um gurus técnico em vez de humanos normais. E adoro não produzir disparates e instruções claras de que qualquer um pode enrolar a cabeça . D three é uma biblioteca JavaScript que é surpreendentemente fácil de usar para aqueles que já trabalharam em JavaScript antes, especialmente bibliotecas como Jake Weary porque segue muitas das normas e melhores práticas que você já viu antes. D três, Também como Jake Weary permite que você manipule e interaja com qualquer elemento em uma página da Web que você poderia alterar e ler a partir de CSS HTML e interagir com outro JavaScript. Portanto, qualquer coisa que você criar é um elemento totalmente compatível de toda a experiência no navegador . Se você não conhece qualquer CSS HTML e JavaScript em tudo. Você vai querer tomar inter classes sobre essas tecnologias antes de trabalhar muito com os três. No entanto, eu costumo usar linguagem muito simples e tentar explicar as coisas claramente, como se meu público não fosse super técnico. Assim, mesmo uma pessoa um pouco tecnofóbica será capaz de cair junto com este curso, mesmo que alguns dos detalhes estejam um pouco confusos. Uma vez que tudo em D três acontece em um navegador, isso significa que precisamos começar criando uma página básica da Web. Então aqui estou eu em Sublime Text, que é um grande editor de texto para codificação porque ele reconhece o seu código e faz coisas como o abate surgi-lo, ajudando você a encontrar bugs em problemas e texto sublime vai até mesmo terminar seus trechos de código para você enquanto você digita coisas. Ele vai fazer sugestões sobre escolhas que você pode fazer que faz sentido e permitir que você faça coisas como apenas digitar HTML. Pressione a tecla tab, e ele irá configurar toda a sua página Web básica para você, uma enorme economia de tempo em comparação com trabalhar em nenhum bloco ou enviá-lo por SMS, por exemplo. Então, agora que eu tenho um framework HTML, eu posso apenas colocar no título para este documento. Eu também vou adicionar uma div vazia com o gráfico I D, que é onde todas as coisas boas D três vai acontecer mais tarde. Em seguida, vou adicionar alguns CSS à página para que eu pudesse apenas digitar, estilizar e pressionar Tab, e ele adicionará automaticamente uma tag de estilo para o meu CSS. Então, primeiro eu vou adicionar uma cor de fundo para o corpo toda a página Web essencialmente e também definir o com 2 100%. Então, desta forma, ele só vai esticar toda a largura da página. Então, se eu salvar isso, voltar para o meu navegador e atualizar esta página, vemos que a cor de fundo do que, como cinza, estende o todo com do documento. E também está usando a altura. Seria apenas, você sabe, o corpo vai tipo de padrão 200% de altura. Não precisamos nos preocupar com isso agora. Além disso, o que vou fazer é abrir outro elemento de estilo aqui, outra entrada CSS para o meu gráfico. E claro, gráfico hashtag significa que ele vai se aplicar apenas para o elemento com a idéia de gráfico esta coisa aqui em baixo e eu vou definir novamente a cor de fundo. Neste caso, vou combinar com o fundo do corpo, que explicarei em um segundo. Eu vou definir um específico com apenas para que seja um conjunto dentro de uma altura definida e você vai ver o que isso faz. E eu também vou definir uma, hum, margem superior e inferior de 50 pixels apenas para tipo de puxá-lo para fora da borda superior do navegador . Os animais disseram que uma margem horizontal automática para que seja automaticamente centralizar-se. E eu também vou dar-lhe uma fronteira. Apenas grupos sólidos. Um escolhe borda preta. Então, novamente, se eu voltar, recarregue minha página. Você sabe, eu apenas puxá-lo para longe da borda com que 50 picaretas margem superior, e então a margem automática coloca no centro, e eu tenho a mesma cor de fundo, mas um pouco de borda para que eu possa ver onde ele realmente vive . E eu uso essa cor de fundo porque mais tarde, eu posso dizer quando eu mudá-la, que você verá no próximo vídeo. Eu vou ser capaz de ver a diferença para ter certeza que as mudanças que fazem você fazê-la realmente acontecer. Ok, é hora de seguir em frente para fazer algo nesta página que realmente tem a ver com D 3. Descobri que a melhor maneira de aprender é trabalhando em uma tarefa específica em vez de aprender em teoria sobre o que o código faz o quê. Então vamos construir um gráfico de dispersão animado e interativo usando D três. Este curso não vai tentar cobrir cada detalhe e nuance sobre D três, mas vamos nos concentrar em vários dos conceitos-chave mais importantes que, uma vez que você entendê-los, vai capacitá-lo a fazer todos os tipos de realmente interessantes coisas. E a partir daí será mais fácil aprender conceitos de nível mais profundo na biblioteca. Vale a pena notar que D três pode criar seus objetos tanto como elementos SPG, que são gráficos vetoriais, auras, elementos de tela que fazem parte do padrão HTML cinco. Eles são prós e contras para ambos que eu não vou entrar aqui. Este curso estará trabalhando em Lee um SPG. Mas se você preferir canvas html five, não será difícil converter o que você aprende aqui para usar esse padrão em vez disso, por fim, antes que possamos realmente trabalhar com D três. Nós temos que realmente adicionar d três, a biblioteca para a página. Então eu vou adicionar uma tag de script, e eu só tenho que definir a fonte. E essa fonte é um arquivo JavaScript neste caso que vive bem na pasta ia mostrar aqui mesmo na pasta ao lado do meu arquivo html index dot. Então eu não tenho que dar um caminho. Mas você pode, é claro, referenciar a biblioteca em um repositório Cdn que vive na nuvem em algum lugar. Mas eu tinha acabado de usar um arquivo local. Em seguida, começaremos a adicionar elementos SPG à página para ver como funcionam os métodos mais básicos de D três . A propósito, todo o código para este curso estará disponível via link na descrição do curso para que você possa baixar e acompanhar lição por lição. Mas se puder, recomendo que escreva o código você mesmo ao longo do caminho. Não há melhor maneira de aprender do que fazendo você mesmo 2. Adição de elementos SVG no D3: Então agora é hora de pegar o arquivo que nós apenas tipo de configurar a estrutura básica para e começar a adicionar coisas à página, começar a adicionar os elementos SPG que vão se tornar são realmente sexy e legal gráfico interativo . Então a primeira coisa que preciso fazer é adicionar uma tag de script abaixo da minha div aqui. E a razão pela qual eu coloquei isso lá é que, você sabe, a forma como HTML carrega é que ele carrega de cima para baixo. Então isso lê daqui de cima até aqui. E eu não quero que meu JavaScript tente fazer nada com esse div colocando coisas nele até que ele realmente exista. Então é por isso que eu coloco coisas abaixo que há maneiras de fazê-lo. Onde você colocou aqui não importa. Não é realmente detalhe que precisamos nos preocupar hoje, mas é mais fácil apenas colocá-lo abaixo do dia em que você quer que as coisas aconteçam. Então, nesta tag script, a primeira coisa que eu vou fazer é criar uma variável chamada Xvg, e esta variável vai conter um D três elemento E então deixe-me apenas criar isso. Eu vou dizer d três pontos selecionar e eu vou dizer Selecione aquele gráfico, Dave que nós criamos. E então com isso, eu quero que você upend um SV G. E eu quero dar-lhe um atributo de oops A com atributos de 1000 pixels. Copie e cole a alteração na altura e altere para 500 pixels. E no meu pequeno “semi-cólon”. Então, o que está acontecendo aqui? Eu estou literalmente apenas criando uma variável que essencialmente, em seguida, irá conter um d três spg de uma certa largura e altura. Isso é, então, essencialmente, vai ser anexado ao gráfico. E o que vou fazer agora é guardar isto. Vou voltar ao meu navegador. Eu vou bater, atualizar, e você não vai ver nada, porque essencialmente, espero que haja um elemento SPG aqui, mas nós não demos nenhum atributo além de largura e altura, Então eu não posso dizer se ele está lá. Mas o que posso fazer é abrir meu inspetor web. Então essa é a opção de comando. Eu no Mac e eu posso ir ver os elementos. Se você não está familiarizado com este tipo de processo e como isso funciona definitivamente olhar para ele . É uma ótima maneira de depurar o código. Mas no centro eu posso ver cada elemento HTML como ele foi gerado na página para que eu possa clicar no meu gráfico, que eu vejo tem uma seta ao lado dele, que é um bom sinal. Deve haver algo lá dentro. Caso contrário, não haveria este pequeno herói. Eu clique nele aberto e com certeza o suficiente, Eu não tenho elemento spg. Ele tem uma largura de 1000 picaretas e uma altura de 1000 pixels, é por isso que é ovos sentindo a área completa da mesma borda de fundo que eu criei anteriormente. Então, quando você rolar, você pode ver que é uma espécie de destaque em azul. Então ele fez isso. Não consigo ver exatamente agora, então vamos consertar isso. Então o que eu vou fazer é, hum eu vou entrar e eu vou adicionar estilo ao meu CSS aqui. Eu só vou dizer para quaisquer elementos SPG apenas usando a tag SPG lá, eu quero que você defina a cor de fundo. E aqui é onde eu vou dizer para esperar. Ok, então era disso que eu estava falando mais cedo quando eu criei o fundo deste cinza. E então eu fiz meu dia exatamente o mesmo cinza. Então, meio que se misturou. Isso foi meio inútil, exceto que agora, quando eu atualizar, meu branco vai realmente aparecer. Então agora eu sei que ele existe sem sequer ter um olhar aqui em baixo no Inspetor faz sentido. A outra coisa que vou fazer é adicionar algumas outras variáveis. Vou adicionar uma variável acima de tudo aqui, e o 1º 1 vai ser chamado com. Eu vou definir isso para 1000 presunto e criar um chamado altura que eu vou definir para 500. E para aqueles de vocês que fizeram alguma programação, vocês provavelmente podem prever o que eu vou fazer a seguir. Na verdade, vou definir esses atributos para usar essas variáveis, e, essencialmente, estou começando a abstrair. Sabe de coisas que se eu quisesse mudar a largura e a altura mais tarde, eu poderia mudá-lo aqui em cima, e isso mudará automaticamente aqui. E claro, você vai ver. Provavelmente no fim da estrada, estarei usando essas variáveis de outras maneiras, é por isso que é útil fazer isso. Ok, então, depois do que eu quero fazer, eu quero realmente adicionar algo ao meu SPG. Hum e eu quero apenas mostrar a vocês como o SPG funciona um pouco. Primeiro vou fazer é pegar meu SPG. Então agora essa variável é? Como eu disse, um recipiente que tem um elemento SPG inteiro nele para que eu pudesse fazer algo parecido com o que eu fiz antes, onde eu vou escrever algo para ele. Então eu vou pegar meu SPG, e eu só quero mudar um retângulo. E a abreviação para isso na linguagem SPG, é uma espécie de linguagem própria. Vamos chamá-lo. Eu normalmente apenas as quatro letras destruídas. Ok, então eu vou fazer um retângulo panda. Eu também vou dar-lhe alguns atributos. E então eu diria primeiro, eu quero definir os atributos X onde ele vai ser localizado na página horizontalmente e devo dizer, Coloque-o em 100 copiar colar. Eu devo definir o porquê em 100 para eu vou adicionar um com atributos. E vamos dar-lhe um 10 e vai fazer a altura também 10. Então, o que eu fiz aqui é que eu adicionei um retângulo ao meu SPG Se eu disser isso e eu ir e atualizar Boom, eu não tenho retângulo svg que é 100 fotos é sobre na direção X e 100 pixels para baixo na direção Y Alguns pontos importantes aqui d três spg a altura O porquê é um pouco confuso e contra-intuitivo. Aqui é 00, no canto superior esquerdo. Então, sempre que você adiciona uma altura, você está realmente caindo às vezes fica um pouco confuso quando você está colocando coisas na tela. Mas tente lembrar da neve. Se eu entrar no meu inspetor e entrar no meu elemento SPG agora, ele terá um erro ao lado dele. Eu posso abrir esse e eu posso ver que eu tenho um retângulo localizado um ex de 100. Por que ter 100 com de 10 pixels e eu tinha de 10 pixels. Você percebe que não precisa ter o PX aqui. Ele apenas descobre automaticamente. Então o SPG permite que você crie esses objetos geométricos como retângulos ou eu posso fazer um círculo e meu círculo, eu poderia adicionar, e atributos, que é chamado C X. E eu vou explicar que em um segundo eu sou Vou empurrar este um pouco para a direita. Então, tem 100. Eu vou dizer 200. Vou dar um C. Por quê? E podemos muito bem mantê-lo na mesma. Por que posicionar como o outro e é outro atributo para círculos, que é o nosso que, se você estiver familiarizado com a geometria, você pode ser capaz de adivinhar é o raio do círculo. Então o que eu fiz aqui, Como eu disse, o C X, que é essencialmente um retângulo, é a posição baseada no canto superior esquerdo desse retângulo. Então este canto superior esquerdo tem exatamente 100 pixels sobre e 100 pixels para baixo. Onde está agora? Se eu atualizar, See Ex está dizendo. Coloque o centro do círculo exatamente neste caso, 200 pixels sobre e 100 pixels para baixo, para que os círculos estejam localizados com base em seus centros. Retângulos e alguns outros objetos estão localizados com base em seus cantos superiores esquerdo que também podem ficar um pouco confusos e funky apenas para que você saiba. Então você sabe, você tem que se lembrar disso. E então eu disse um raio de cinco para este círculo. E então este é um diâmetro de exatamente 10. Então é o mesmo com este raio de cinco diâmetros 10. Esta é uma largura de 10 etc. Você provavelmente pode obter o justo aqui. Ideia tão básica de novo. AAP montada em objetos geométricos. Adicionar um monte de atributos, como a sua localização. largura, sua altura, seu raio nele faz o que você poderia esperar. Eu vou fazer mais um aqui você também pode uma caneta, coisas como linhas. OK, e aqui estão os atributos alterados mais uma vez. Então, em vez de X ou C X, o que temos é X um. Então o x do primeiro objeto e eu digo, por que um e vamos colocar isso também em 100 para baixo e eu vou fazer um x dois e por que dois? E assim o x dois eu vou colocá-lo 400 o Y dois em 200. E assim, para a linha, você também tem que adicionar outros atributos, que é a cor do traçado. Alguns de pele e dado golpe preto. Ponha minha atualização do ponto e vírgula e verá uma linha. Então, de novo, o que estou olhando aqui? O que eram todas aquelas coisas? X um, O primeiro valor X A linha começa aqui e termina aqui. Então ele tem essencialmente duas posições e assim a segunda posição é X dois. E por que para tão x dois é empurrado Todo o para aqui. Por quê? Para empurrar para cá. Então ele cria uma linha daqui até aqui e automaticamente descobre que o SPG, você sabe, tinha uma espécie de colocar o ângulo lá dentro. Apenas conecte essas duas coisas. Ideia básica. Posso definir a cor do traço. Eu poderia mudar o derrame com se eu quisesse todos os tipos de coisas. Então, você sabe, SPG tem todos os tipos de coisas além de retângulos, círculos e linhas. Você pode adicionar símbolos que você pode adicionar, você sabe, essencialmente geométricos como polígonos que têm todos os tipos de formas estranhas. Mas a ideia básica é sempre a mesma. Você adiciona o objeto usando a linguagem SVG. Você adiciona os atributos que são necessários para que você possa vê-lo e colocá-lo em algum lugar na tela, e é isso. Então, como, enquanto estamos criando nosso gráfico interativo um pouco mais tarde, vamos apenas fazer isso. Será adicionar objetos em um determinado local e colori-los etcetera, com base em vários atributos. Espero que isso faça sentido. Deve ser bem simples. Então, em seguida, vamos passar para realmente trabalhar com alguns dados. 3. Primeiros passos Como trabalhar com dados no D3: Então isso é ótimo. Você sabe, nós podemos criar formas e linhas e todos os tipos de coisas no SPG no navegador usando D três . Mas D 3 é realmente tudo sobre trabalhar com dados. Então, por que não começamos a fazer isso? Vamos carregar alguns dados e ver o que podemos fazer com eles. Então eu sou um começo apenas excluindo as coisas que acabamos de fazer antes, onde adicionamos o retângulo no círculo na linha. Não preciso mais dessas coisas. E vou criar uma nova linha. E o que eu vou fazer, primeiro de tudo, é que eu vou estar usando algo embutido em D três chamado d três que CS v. E quando você faz um d três pontos CSP é que vai carregar, como você poderia imaginar, um arquivo C S v . E eu estou trabalhando com um arquivo chamado Boston Housing dot CS fee, que está disponível na pasta com coisas que você baixou para o curso aqui. E vamos antes de começarmos. Vamos dar uma olhada nisso. Veja, arquivo SV e eu podemos explicar o que está acontecendo lá dentro. Portanto, um arquivo de taxa CS é um arquivo delimitado por vírgula, que significa que você tem campos e dados que são apenas separados por vírgulas. Então, como você pode ver aqui, eu estou olhando para ele tipo de nativamente no editor de texto. Aqui eu tenho nomes de campo que estão sempre na primeira linha em um arquivo CSP separado por vírgulas . Então eu tenho um campo chamado Crime um chamado Charles etcetera, todos separados por vírgulas e, em seguida, cada linha de dados abaixo. É um valor de dados para o campo associado na mesma posição, separado por vírgula do próximo e, em seguida, do próximo, etcetera, etc. Então você pode olhar para ele no editor de texto. É apenas um arquivo de texto bruto com os valores separados por vírgulas. Você pode realmente abrir esses arquivos no Excel, que está tendo uma olhada nele agora, e ele apenas estabelece mais como uma planilha típica. Excel, por sinal, pode exportar ver arquivos SV para ver se você tem dados que não está no formato CSP, e você deseja usar um comentário de arquivo delimitado. Você pode exportar do Excel qualquer formato do Excel para um CSP. Então, muito rapidamente, quais são os dados aqui? Temos dados da habitação de Boston. Este é um tipo de conjunto de dados famoso que contém distrito por distrito, diferentes variáveis para várias coisas sobre novos distritos habitacionais em Boston. Temos a taxa de criminalidade no distrito. Nós temos, ah, valor binário chamado Charles, que é um zero ou um. A maioria deles são zeros. Mas de vez em quando você encontra um bairro habitacional que tenha um. E o que representa é que este distrito fica ao lado do rio Charles, em Boston. Isso é tudo o que um representa. Nós também este que está medindo óxido nitroso na atmosfera naquele distrito. Por qualquer razão, temos o número de quartos em uma habitação naquela região. O número médio ou mediano de quartos, a idade, a idade mediana da habitação, seja, quando foi construída há 65 anos? Neste caso, a distância de algumas áreas de metro chave. Temos a percentagem de pessoas pobres naquele distrito e também o valor mediano de uma habitação nesse distrito. E, hum, eu não tenho certeza se isso é em milhares ou qual é o valor aqui, mas isso é o que esses campos significam, e então é assim que os dados se parecem quando olhamos para eles, apenas uma espécie de formato direto. Então, se eu voltar para o código aqui, Eu comecei digitando em d três pontos CS taxa. E então você coloca o nome do arquivo e uma nota importante sobre isso. D três não pode ler arquivos de dados como este de apenas como uma pasta de arquivos. Então você não pode executar este código simplesmente soltando no arquivo html com JavaScript nele em seu navegador. É por isso que você deve ter notado meu eu. Os RL também se parecem com isso. É sites Colon 80 80 porque eu estou executando um navegador Web muito simples localmente na minha máquina de desenvolvimento. Uma das maneiras mais simples de fazer isso Faça isso é ir para bit NAMI B i t. E eu sou ponto ou cara acreditar, e você pode baixar uma pilha de mapas. Então, no meu computador é senhora, que sou eu, nenhum Macintosh Apache, minha sequela PHP, e você pode baixar este aplicativo e, em seguida, ele essencialmente executar um servidor Web localmente. É uma maneira muito fácil de fazer isso. Há mais 1.000.000 de maneiras de fazê-lo. Mas se você não é super técnico bit NAMI, senhora, pilhas estavam ótimas esperando para começar. Então você tem que executar a partir de um servidor. Essa é a coisa rápida de você acertar erros, tentando não usar um servidor. Será por isso, só para que saibas. Tudo bem, então vamos dar uma olhada no código, então d três pontos CSP d três pontos nativamente CSP cargas ver arquivos SV esses arquivos delimitados por vírgula . D três também tem d três pontos tsv, que irá carregar um arquivo delimitado por tabulação onde os campos de ar separados por abas. Há também agora d três pontos dsv, que irá essencialmente ler quaisquer valores delimitados. Então, em outras palavras, você pode ter dados que vem com tubos verticais entre cada campo de dados que você consorte de definir manualmente Qual é o dilema na UE d três pontos dsv. Resumindo, esta é apenas uma espécie de função ou o método de como fazer essas coisas. E vou mostrar-te a sintaxe. E então a idéia básica é que eu digo d três pontos CSP caminho para o arquivo neste caso está na mesma pasta que este código, que é por isso que não há nenhum caminho de pasta aqui e, em seguida, D três. A versão cinco começou a usar promessas. Então eu não vou ter uma grande lição aqui sobre promessas e o que elas são. Mas a idéia básica é que d três ambos JavaScript, realmente geralmente por anos e anos poderia fazer um coisas síncronas. Significa que você pode pedir um arquivo e, em seguida, javascript você deseja fazer algo com os dados nesse arquivo? E costumava ser um significado síncrono que você pediria o arquivo e então você teria que ter um código escrito, que diria, que diria, e uma vez que chegasse aqui, uma vez que fizéssemos esse trabalho, então fazer coisas. E JavaScript agora usa essa sintaxe onde você diz d três pontos c s v Neste caso para D três, você sabe, você sabe, é assim que Syntex funciona aqui e então usado ponto, e o que quer que esteja dentro disso, então, não será acionado até que D três tenha baixado e analisado esse arquivo CSB. Por isso, só faz com que seja muito mais fácil. Essencialmente, não cometa erros onde você tenta chamar código antes das coisas anteriores acontecerem, especialmente em seus arquivos de chamada, porque se esse arquivo está, uh, no verão da Web e você ele iria codificar que estava falando com a web para ir buscar um arquivo e , em seguida, baixar os dados e, em seguida, enviá-lo. Isso ... ... pode demorar um pouco. Então, se os treinadores dispararem muito rápido, você pode entrar em apuros rápido. Então, longas promessas curtas salvam você de cometer esse erro. Tudo bem, então d três ponto c S v nema arquivo ou caminho para o ponto de arquivo Então e então eu quero fazer algo . E o que eu vou fazer é chamar uma função porque agora eu poderia fazer um monte de coisas em um só lugar. Então é assim que isso parece d três pontos c s v ponto então função, você sabe, chaves e qualquer coisa aqui. Tudo o que eu quiser fazer aqui dentro, eu posso fazer agora. Uma coisa que eu vou fazer também é eu vou dizer dados de função agora que dados de palavras aqui é apenas um parâmetro e o que isso significa Neste caso, se você está familiarizado com JavaScript, você pode chamar uma função, e então você passando uma função do parâmetro para a função e, em seguida, você pode fazer coisas com esse parâmetro. Em funções como esta, o parâmetro é mais um reflexo do que aconteceu. Então, em outras palavras, d três pontos c s v está lendo nesse arquivo C S V. E o que quer que aconteça lá dentro, estou dizendo que quero fazer coisas com ele nesta função. E então a primeira coisa que eu vou fazer com isso é eu vou dizer dados de log de pontos do console. Então, se você é programador, você já sabe o que isso está fazendo. Se não for, isso pode ser novo. Mas a ideia básica é que, nos navegadores modernos, você tem o inspetor da Web. E assim, se eu dio opção de comando I no cromo ou controle, Opção I no PC e cram, ele abre este inspetor web onde você tem como ferramentas de desenvolvimento, um dos quais é chamado o cônsul e o cônsul. Quando eu carregar este código, você vai ver se eu faço log de pontos console, que novamente é construído na maioria dos navegadores modernos. Será essencial para fora o que eu pedi para ele para direita para fora. Então deixe-me trocar o cabelo Eurail para usar isso. Qual era a pasta que estava trabalhando agora, que é a pasta de dados 03. E se eu agora executar esse código, veja o que acontece no conselho agora que os dados que receberam leitura do arquivo CSB estão lá porque eu pedi para ele ser escrito lá e eu posso ver que eu tenho 506 elementos porque existem 506 linhas no conjunto de dados. E se eu acertar este pequeno ar aqui, ele se abre e eu posso ver que ele está realmente quebrado em segmentos 100 100 subiu de cada vez. Por alguma razão, não sei por que faz isso? Mas faz. E então se eu abrir isso eu posso ver cada linha individual de dados. E então se eu verificar isso com meus dados originais disse, se eu voltar para o arquivo CSB minha primeira linha, a taxa de criminalidade é 0,632 e com certeza, esse é o número que eu vejo aqui. E o óxido nitroso é 0,0 ponto 537999 seja lá o que for. E isso combina com o que eu tenho aqui tão literalmente linha por linha, eu escrevi para o console apenas para que eu possa ver que os dados estão lá. Não está lançando um erro ou qualquer outra coisa. E, a propósito, cada uma dessas linhas você vai notar que este é Jason JavaScript. As notações de objetos do C S V foram convertidas em Jason, que é um formato de dados que o JavaScript realmente adora. D 3/10 para trabalhar com ele. Muitos dos JavaScript que você trabalha nos dias de hoje estarão trabalhando com Jason quando você está falando sobre dados. E o formato Jason é apenas nome do campo de chaves, vírgula do valor do campo de dois-pontos, outro nome de campo , valor , etcetera, etcetera, etc. Você pode ver aqui nós vemos ponto, ponto ponto. Mas posso abrir novamente cada linha e ver cada um dos campos em cada valor. Então você pode tipo de inspecionar os dados dessa maneira e certificar-se de que tudo está acontecendo da maneira que deveria acontecer apenas fazendo o log de pontos do console. Então agora tenho dados. Não é o anel da era, está funcionando. Está fazendo exatamente o que eu queria fazer. Então agora podemos realmente começar a fazer algumas coisas com esses dados, então vamos começar a isso. Vou comentar os registros de dúvidas do cônsul. Não precisamos mais disso. E o que vou fazer é isto. Vou começar a digitar aqui. Eu vou dizer spg dot select all quote dot d o t. E então o que está acontecendo aqui? Você vai notar antes de fazermos algo parecido. Nós dissemos d três pontos selecionar gráfico hash libra sinal gráfico. E eu estava dizendo, Hey, d três, por favor selecione o Div com o gráfico i d. Isso já está no dom o modelo de objeto do documento. E estamos vendo este simp algo muito parecido aqui. Primeiro, estou dizendo, use o objeto S V g que criamos eu poderia ter dito d três pontos electil ou como Fiji Die Select Todo tipo de não importa. Mas estou dizendo para trabalhar dentro dessa coisa que já temos. É como cada um, não apenas um dos 1 1 que é o que d três pontos selecionar como. Todos eles gostam de cada coisa que tem o ponto de classe Agora estes ainda não existem, que eu vou falar em um segundo, mas selecione todas essas coisas se eles existem e se não, está tudo bem porque nós vamos fazer coisas. De qualquer forma, há uma daquelas coisas estranhas sobre D 3 que você pode fazer isso mesmo eles não existam, e ainda funciona. Então, acredita na minha palavra. Então eu vou dizer ponto selecionar todos os pontos e então eu vou começar a fazer coisas com eles porque a maneira como esses seletores funcionam, que se você está familiarizado com Jake cansado, você já está acostumado a trabalhar com seletores idéia muito semelhante. Você seleciona coisas e, em seguida, você faz coisas com ele e também tem métodos encadeados. Então eu digo svg dot selecionar tudo. E então se eu fizer outro ponto algo ou outro e outro ponto algo em vez disso ,tudo vai ficar acorrentado tudo trabalhando na mesma coisa até você acertar um ponto semi cólon, , nesse caso é meio que feito. Então, por exemplo, aqui eu vou dizer que cortou todos os pontos e eu vou dizer com essas coisas, eu quero que você use dados. Isso é o que os dados do ponto estão fazendo. E então eu estou passando aquele parâmetro que eu retirei mais cedo. By the way, esses parâmetros podem ser nomeados qualquer coisa. Eu poderia chamar essa coisa de Fred e se eu me referisse a ele como Fred mais tarde isso vai funcionar não tem que ser chamado de dados. Só para você saber, isso é tem que ser dados de ponto, mas o nome do parâmetro pode ser qualquer coisa. Então eu vou usar dados só porque é simples. Então os dados de pontos usaram esses dados e então eu vou dizer entrar. E este é outro tipo de coisa específica estranha sobre D três, onde essencialmente há este comando Enter. Há também uma chamada saída. E então o acordo aqui é que eu estou dizendo, tudo bem, D três. Eu quero você como qualquer coisa que tem um ponto de classe Eu quero que você trabalhe com dados e especificamente esses dados que eu tenho e então quando eu quero fazer é para cada objeto que entra na tela, que vai ser um para cada linha de dados. Quero que faça coisas com ele. Então é isso que o ponto entra está fazendo. Se eu tivesse era, digamos, digamos, atualizando os dados e alguma rosa tinha desaparecido de um conjunto de dados porque eu filtrá-los ou algo assim, eu poderia chamá-lo de saída ponto e, em seguida, eu estaria dizendo que pode ser para remover qualquer pontos na tela que estão saindo porque eles estão desaparecendo dos dados. Então nós não vamos realmente entrar em ponto exit em tudo, mas o ponto Enter é para cada coisa que está sendo adicionada à tela, eu quero que você faça coisas. Então, o que eu quero que você faça. Bem, eu vou dizer, uh ponto anexar um círculo porque eu queria um círculo para cada linha de dados. E assim, você sabe, mais cedo quando estávamos testando adicionando círculos, dissemos s v g ponto círculo upend, que era um círculo pendente, certo? Isso é ótimo. O que é realmente poderoso e legal sobre D três é que quando eu digo selecionar algo usado dados e para cada uma dessas coisas, insira-o. E então para cada um deles eu estou dizendo anexar um círculo. Essencialmente, isso age como um loop. Ele está literalmente percorrendo os dados uma estrada do tempo e para cada uma dessas coisas, adicionando um círculo ao palco, que é super legal e poderoso. E agora eu vou dizer para esse círculo, eu quero você em um atributo. É assim que os métodos acorrentados funcionam, certo? E agora eu estou trabalhando nesse círculo porque eu anexei algo. E para cada um deles fazer coisas, e eu vou dizer que eu preciso dizer onde o centro deve estar. E eu vou apenas definir isso para 100 tipo como fizemos antes. Preciso definir o valor c y. Faça isso 100. Além disso, eu vou definir o raio para, digamos, cinco, e eu vou ter um novo atributo que eu vou chamar. Bem, eu não vou ligar. É o Phil. E então o que isso é é a cor de preenchimento agora um par de notas sobre isso. Primeiro de tudo, você tem que usar a palavra Phil. Você sabe, se você está fazendo isso em CSS, que você pode fazer do jeito que eu poderia em vez de dizer, atributo, Phil, Phil, eu poderia dizer classe de atributo e dar-lhe um nome de classe e, em seguida, colocar uma classe aqui em cima no meu CSS e estabeleceu que a cor de preenchimento lá em cima, e eu tenho que adicionar após chamada Phil, eles não são cor porque este é SPG. E esta é a palavra que o SPG usa para o carro do Phil. Mas resumindo, eu posso produzir um CSS, mas neste caso, eu estou intencionalmente fazendo isso como uma cor de preenchimento definida manualmente no JavaScript. Porque mais tarde, eu vou me adaptar. Sinto cor baseada nos dados. É por isso que estou fazendo assim. Você pode definitivamente fazê-lo de qualquer maneira depende do que você está tentando fazer. Então, se eu salvar essa coisa e eu for agora e eu recarregar a página que estamos trabalhando mais cedo, mas o que acontece? Tenho o que parece ser um círculo. E então eu estou no meu inspetor web. Além do console, eu tenho essa coisa chamada elementos e elementos. Eu deveria mostrar todos os elementos na página, todo o modelo de objeto do documento. Então eu tenho minha div com idéia de gráfico aqui. Se eu abrir isso, eu tenho meu SPG. E se eu abrir isso, olhe para isso. Consigo ver os meus círculos e não é só um círculo. São muitos, muitos , muitos círculos. Mas é claro que todos eles têm o mesmo c x e ver porquê. Então, essencialmente, eu tenho mais de 500 círculos sentados bem em cima um do outro bem ali. Então, em outras palavras. O código está fazendo exatamente o que deveria estar fazendo está fazendo exatamente o que eu quero . Então estamos indo muito bem. Nada a fazer antes de irmos embora aqui é que vou acrescentar uma coisa que vou dizer círculos iguais a esta coisa. Estou definindo uma variável. E a razão pela qual eu estou fazendo isso é porque se eu quiser me referir a esses círculos que eu criei mais tarde rapidamente e facilmente, agora eu tenho eles essencialmente ligados a um objeto. Tipo como eu disse, você sabe, s V G é igual a essas coisas, e eu poderia me referir a SPG mais tarde e trabalhar com ele. É por isso que estou fazendo círculos iguais para que eu tenha acesso a ele mais tarde. E até esse ponto, eu vou declarar que círculos variável aqui em cima, que introduz outra idéia realmente importante na programação que é referido como escopo . E então eu não vou aqui realmente para explicar o alcance e a profundidade. Mas a idéia básica é que se eu disser que você sabe, círculos são iguais a algo e eu não declará-lo fora desta função, então que os nomes de variáveis círculos só estão disponíveis para mim enquanto eu estiver dentro dessas chaves . Então, em outras palavras, se eu tentar fazer algo com círculos aqui fora, você sabe, mais tarde e meu script não vai funcionar, porque o script não sabe que ele existe. Mas se eu declarar aqui em cima, eu digo que há uma variável. Vai chamar círculos e você fica de olho nisso. Então quando eu faço coisas com ele e você sabe, tipo de um sinal de valor aqui, então ele ainda está disponível para mim mais tarde. É por isso que temos essas variáveis globais, como dentro de altura e círculos. E, uh, SPG também é variável global. Então, trabalharemos com eles mais tarde. Certo, então a seguir vamos começar a aplicar mais atributos aos círculos que vão ser dados e começar a fazer essa coisa realmente ganhar vida. 4. Como criar gráficos motivados em dados no D3: Tudo bem, então podemos começar a fazer coisas com esses círculos agora, baseado nos dados que temos carregando e trabalhando na primeira vez que realmente fazer é eu vou voltar aqui. E eu ia adicionar algo a esses círculos. E quando eu vou acrescentar é essa classe porque, você sabe, eu estou fazendo essa seleção todas as coisas da classe ponto aqui em cima e elas ainda não existem. Estou fazendo coisas com eles de qualquer maneira, mas eles querem isso. Adam, eu poderia muito bem ter certeza que eles têm essa classe porque mais tarde, se eu alguma vez quis me referir de volta para eles usando um seleto tudo, você sabe coisas de ponto de classe, então eles vão tê-los. Então isso não serve a nenhum propósito agora, exceto saber que ele está lá para uso mais tarde . Eu também vou fazer isso. Vou acrescentar outra coisa. Além disso, atributos que podemos adicionar estilos diretamente e um atributo de estilo será adicionado ao objeto diretamente na tag, como você verá em um segundo. Então o estilo que vou acrescentar é opacidade. Mensagem a opacidade para 0,5, e assim a capacidade pode estar em qualquer lugar entre zero e um zero é invisível. Um é 100% opaco e, portanto, 0,5 é 50% translúcido. Então eu vou bater, salvar. Eu vou atualizar a página e você vai ver que ele parece exatamente o mesmo porque eu ainda tenho 506 pontos rodando em cima um do outro. Mesmo que estejam meio trans escutados, parece que um único ponto ainda está. Mas eu posso ver aqui no inspetor que eles têm um estilo de passe. É 0,5 cada um deles. E, a propósito, eles têm a classe é igual a ponto, então tudo está sendo adicionado apropriadamente. O código está fazendo o que deveria estar fazendo. Então, você sabe, é obviamente um ótimo lugar para começar. Então a próxima coisa que vou fazer, que é, você sabe, realmente o que estamos aqui para fazer, como o mais importante em D 3, é também. Altere o posicionamento desses objetos com base em dados, à direita. Um gráfico de dispersão são pontos em um gráfico colocado no eixo X horizontalmente em uma determinada posição, baseado no número, por que acessar um porão determinada posição, e no nosso caso, vamos usar Thea o tamanho DOT, também com base em dados. Então vamos fazer o valor X primeiro. Então aqui eu estou definindo o centro no eixo horizontal manualmente. 200 pixels da esquerda. Isso é ótimo. Seja qual for. Não é realmente uma visualização datada, no entanto. Em vez de enviá-lo manualmente e estaticamente, o que posso fazer é usar uma função. E então a função se parece com isso e você sabe, então é como a função mais cedo onde temos uma função e, em seguida, parâmetro. Então, o que é esse parâmetro D agora, a propósito, mais uma vez, eu não tenho que chamar isso de d. Eu poderia chamar isso de Fred Joe ou X Y Z não importa, mas eu estou chamando isso porque isso é uma espécie de norma em D três. E o que é realmente poderoso e incrível sobre D três é que cada círculo como sendo adicionado ao palco porque eu disse, você sabe, selecionar coisas usadas dados, e para todos que estão sendo adicionados em um círculo para ele, não adicionou apenas os círculos. Ele também vincula os dados de cada círculo a cada círculo, significa que cada linha de dados que está conduzindo essa existência círculos também está ligado a esse objeto. Então D três está ciente dos dados associados a cada um desses objetos. Então, se eu disser vamos usar a função em vez de dizer isso manualmente e eu só digo console parece que log D eu acerto, atualizar na página, salvar e atualizar e assistir o que acontece. Primeiro de tudo, todos os círculos ficam presos aqui porque eu não disse um valor para usar. Sim, só para que saibas. Mas se eu voltar para o meu console, olhe para o que eu tenho aqui agora, como vimos mais cedo cada linha de dados. Se eu rolar para longe, até o topo agora está visível no console porque eu pedi para ele ser escrito lá. E então esta é a primeira linha de dados. Lembrem-se, crime é de 0,63 a, uh, óxido nitroso nocivo é 0,5379 etc. E assim que os dados estão ligados a ele. Então eu posso usar esses dados sempre que eu me refiro a esse objeto. Então deixa-me livrar-me disso. E se eu fizesse isso? Então a função agora, a fim de definir esse valor C X, eu tenho que usar o retorno porque o que isso está fazendo é que eu devo dizer que 200 realmente é. Eu estou dizendo, disse que os atributos C X atributo para os resultados desta função, e você tem que usar a palavra retorna. Se eu disser este retorno 100 e eu apertar Refresh, veja o que acontece. É exatamente o que tínhamos antes, onde tenho centenas de pontos, todos na mesma posição. Sexo é 100 c sábio 100. Então não é nada mudou do que eu fiz antes, exceto em vez de dizer definir o c x 200 você todos em um só lugar. Estou dizendo para usar uma função, mas ainda estou voltando. Valores estáticos. Isso não é tão interessante se eu tirar o retorno, a propósito. Então eu só seguro 100 aqui e eu bati. Refresque os círculos e para cima aqui porque não há nenhum C X que está sendo definido D três é confuso. E então, se você acertar um erro como este, que você provavelmente vai fazer nove vezes que ele está na presença porque você esqueceu de usar a palavra return aqui, então certifique-se que é o valor de retorno, mas eu não quero definir este valor para ser estático. Esse não é o ponto aqui. Quero configurá-lo para ser conduzido pelos dados. Então, em vez disso, eu vou dizer Use esse parâmetro D e use d dot poor. E então é assim que você se refere aos valores de Jason em JavaScript. É D porque é o nome do objeto que atribuímos aqui ponto nome do campo e lembre-se, temos um campo que é chamado de pobre direito? A porcentagem de pessoas pobres naquele distrito. Então, quando eu digo retorno d ponto pobre, ele está dizendo, usado esse campo para este valor círculos que foi ligado a ele. Um escreveu uma vez. Então, se eu bater, atualizar, ver o que vai acontecer? Eu não tenho mais 500 pontos em cima um do outro, mas eles estão todos bem presos aqui. E então por que isso? Bem, porque a porcentagem de pessoas pobres neste primeiro ponto é 4,98% o que significa que eu pedi a D três para colocar o ponto 4,98 pixels da esquerda. Os próximos nove pixels da esquerda. Próximos para os próximos. Cerca de três, etcetera, etcetera, etc. Esses pobres valores são números muito pequenos, então eles estão todos presos bem ali e lado esquerdo . Então, só para que eu possa vê-los todos. E se eu multiplicar todos eles por digamos 50 agora eu acerto, atualizar, e olhar, Agora eu posso vê-los. E porque eles estão espalhados, agora posso ver a translucidez. Há apenas um ponto Aqui há um monte inteiro um em cima do outro bem aqui, etc, etc. Agora eles estão correndo para fora da tela. Então, eu só vou mudar principalmente para 30 por enquanto, só para que eu possa vê-los. Essa não é a maneira que você faz a visualização de dados causa questões de escala, certo? Você nunca multiplicaria manualmente o meu número. Hum, mas eu só quero ver onde eles vivem e ver como se sente. E parece estar funcionando. Então é bom o suficiente por enquanto. Agora, eu faria algo muito parecido. Onde, em vez de usar ah, definir valor ah, valor duro para ver por que eu vou definir isso usando uma função. Além disso, em vez de usar o campo pobre, eu quero usar o campo de salas. Eu sou um novo dizer vassouras vezes 50 neste caso e eu sou uma atualização hit e Uau. Eis que temos algo que se parece com um gráfico de dispersão. E então, mais uma vez, ele está definindo manualmente os parâmetros, você sabe, em termos de como, quanto em multiplicar números pelo qual é estranho. Mas é bom o suficiente para ter uma noção de como esses dados se parecem. E assim eu tenho pobres. Você é mais pobre para a direita. E você tem. Não te esqueças, isto é outra coisa estranha. Zero no eixo Y está aqui em cima no topo e um alto. Por que o número está aqui em baixo. Então, em outras palavras, quanto mais pobre você é, menos quartos você tem em sua habitação, o que faz sentido. Mas é claro, está subindo verticalmente, o que parece um pouco estranho. Lidaremos com isso mais tarde. Agora, finalmente, eu vou adicionar também para o meu valor, direito o tamanho da bolha, outra função, e eu vou usar o campo de valor, certo. O preço de cada hit habitação, atualizar. E eu tenho pontos gigantes e eu tenho pontos menores. Mas o ar é realmente gigante. Eles estão todos em cima um do outro, e eu poderia tornar os mais fáceis ainda menores. Então eu vou dividir por dois de novo só para ver como é. E isso é bom. Então agora eu tenho uns pequenos pontos bonitos e eu tenho grandes pontos agrupados. E mais uma vez, apenas do ponto de vista dos dados, tudo faz sentido. Menos pobres está aqui, significando mais ricos, muito mais pontos maiores, significando maior valor, mais pobres, pontos menores, casas de menor valor. Isso é que faz sentido conceitualmente quando pensamos sobre como esses tipos de coisas funcionam do ponto de vista dos dados. Então a última coisa que eu vou fazer, porque eu só vou adicionar um estilo ao meu CSS aqui em cima porque eu quero que meus pontos, minhas coisas com ponto de classe para ter dois atributos associados a eles. O 1º 1 é um traço, e estou ajustando a cor do traçado manualmente para preto. Mas eu também vou adicionar um acidente vascular cerebral com e esta é a sintaxe para isso e o acidente vascular cerebral com eu vou definir para ah um. E eu acho que é um. Na verdade, um minuto. Eu acho que eu tenho que fazer um PX um e então eu acho que ele faz um pixel por padrão no SPG. E se eu disser isso e eu bater, atualizar nós realmente não podemos vê-lo porque os pontos já estão pretos e a capacidade é de 50% do traço é que você realmente não pode dizer a diferença, mas nós vamos usar isso dinamicamente mais tarde. É por isso que eu disse assim no Azaz. Uma aula com estilo. Tudo bem, então a seguir vamos começar a trabalhar com realmente definir essas escalas dessas coisas corretamente, usando outra ferramenta realmente poderosa embutida em D três. 5. Usando escalas D3: Tudo bem, esta vai ser uma grande. Esta vai ser uma lição muito complicada, um monte de código, mas muito do seu repetitivo. Então, uma vez que você obtém os conceitos, ele vai se reunir relativamente simples. Mas há muito o que passar por aqui. Basta dizer, você sabe, então a última lição que você sabe, nós colocamos esses pontos na tela apenas multiplicando as coisas corretamente. Tínhamos pequenos valores para os pobres, então ele é meio que multiplicado por 30 só para que ele se espalhe manualmente. E essa não é a maneira certa de fazer isso. O que realmente precisamos fazer é usar uma ferramenta construída em dois D três para definir nossas escalas dinamicamente com base nos dados e com base na quantidade de espaço disponível para nós e D 3 incorporou essas ferramentas incríveis para fazer isso. O que realmente precisamos fazer é usar uma ferramenta construída em dois D três para definir nossas escalas dinamicamente com base nos dados e com base na quantidade de espaço disponível para nós e D 3 E então estas são D três escalas, e há um monte de maneiras diferentes de fazer escalas e d três. Eu só vou fazer um deles aqui, na verdade acabar fazendo um casal durante esta aula. Mas eu vou começar usando um que você provavelmente vai se encontrar usando um pouco, que é uma escala linear. Então a primeira coisa que vou fazer é criar uma variável chamada Escala X porque essa Gail vai usar para o nosso eixo X são posicionamento horizontal. E eu vi a Escala Oito X igual a D 3 pontos escala linear. E isso porque esta é uma escala linear, que significa que ela terá essencialmente um ponto de partida e um ponto interminável. E se você passar valores em qualquer lugar entre esses dois números, ele essencialmente colocará algo na tela baseado em qualquer lugar entre esses dois números a mesma proporção, que todos começaram a barbear um segundo. Assim, uma escala consiste em duas coisas. Há o domínio, e há também o alcance. E assim o domínio também é muitas vezes referido como os valores de entrada e os intervalos se referem como o valor de saída. Então eu ia definir manualmente meu domínio e alcance e explicar o que eles são. Então a idéia básica aqui é que eu estou dizendo que eu vou usar uma escala, e eu vou passar em valores e aqueles passados em valores ou os valores de entrada, e então isso vai magicamente convertê-los em coordenadas X. no eixo X entre zero e 500. É a maneira que você realmente usá-lo é em vez de dizer, retornar d ponto pobres vezes 30 como fizemos anteriormente. Em vez disso, dizemos retorno ex escala Didot pobre. E agora, quando eu estou dizendo é ok para descobrir onde colocar as coisas no valor X, use esta função chamada escala X, usando este círculos de baixo valor. E então esse é o valor de entrada. Então, algures entre zero e 30, suponho. Ou talvez os valores mínimo e máximo disponíveis dentro desse campo. E assim, em outras palavras, se foi, se d dot pobre foi 15 para este círculo será bem no meio. Entre estes dois linear a escala, os valores lineares e, portanto, vai retornar e colocar no eixo X que exatamente um 250 novamente a meio caminho entre zero e 500. Assim, o valor de entrada é o valor de dados e o intervalo o valor de saída é o posicionamento nas coordenadas X. Então vamos ver o que acontece se eu apenas apertar salvar aqui e atualizar. Olha para isto. Então ele vai todo o caminho potencialmente de seu pequeno zero todo o caminho até ele deve ser 500 que deve ser cerca de metade do caminho. Por que vai além dos 500? Talvez eu deva ter valores acima de 30 e isso é o que uma escala linear é. Ele vai fazer qualquer lugar entre esses dois valores, deixando números de alça que vão além desses dois valores. Então vamos dar uma olhada em nossos dados aqui. Se eu for até aqui e olhar para o meu campo pobre e eu classificar de maior para menor. Com certeza, o valor mais alto é, na verdade, cerca de 38. E é por isso que as coisas estão se estendendo além do destro. Então, se eu nos mudar, é isso. Eu pensei que convidado o máximo era 40 hit, salvar, bater, atualizar, assistir. Isso acontece. Tudo esmaga agora. Agora não há valores superiores a 500. Na verdade, isso é um pouco menor que 500, porque um pouco abaixo dos 40, se isso faz sentido. Uma coisa que você vai notar é que tanto o domínio e o intervalo que você passa em uma matriz após esses pequenos colchetes são assim que é uma matriz com o primeiro valor e um segundo valor. Se você está fazendo escalas e tem erros , não está funcionando, certo? Ou talvez esteja lançando um erro real. As probabilidades são muito boas. Você esqueceu que os colchetes dentro desses parênteses eram a vírgula ou algo assim . Este é um erro muito comum, especialmente quando você está apenas começando. Então nós ainda temos, você sabe, alguns problemas aqui, que é que eu estou em primeiro lugar, você sabe, você sabe, sentando meu valor máximo em 500 a partir de eu escrever meu alcance, certo. O valor de saída real, onde ele realmente vai na tela que você realmente ser um milhares. Deixe-me mudar isso por enquanto. Mais uma vez, basta ser atualizado manualmente. E com certeza olhando, ele se espalha. Este é o poder das escalas, certo? Torna muito mais fácil fazer coisas assim. Mas pior do que isso é que estou a tentar adivinhar. Acho que o valor mínimo para esse campo pode ser zero. O valor máximo pode ser 40. Na verdade, o primeiro palpite que tive foi errado, certo? Exemplo perfeito de um erro. Esta também é uma maneira ruim de fazê-lo. E se eu tivesse um conjunto de dados gigante e eu não soubesse que os valores mínimo e máximo eram ainda piores? E se eu estivesse trabalhando com dados dinâmicos e esses dados estivessem mudando? Portanto, o máximo mínimo pode estar mudando ao longo do tempo, então não posso definir manualmente esses números. Não faz sentido fazer isso. O que me traz para a próxima ferramenta realmente grande, poderosa , importante , importantee útil que está embutida em D três, onde eu posso realmente, você sabe, calcular os valores mínimo e máximo . Então, mais uma vez, vou criar uma variável. Eu só vou ligar para X homens, Max, porque isso é me dar o mínimo máximo para a colocação X novamente, e eu vou usar d três pontos extensão e d três pontos extensão faz exatamente o que eu estou dizendo. É, na verdade, apenas encontra os valores mínimos e máximos. É só a sintaxe. É o jeito que eu faço. À medida que passo os dados mais uma vez, tenho essa variável chamada de dados. Então eu estou passando isso, e então eu tenho que usar uma função para sair dela. O que eu quero tirar disso. É um bom tempo usar a função d apenas porque isso é uma boa norma de usar. Mas eu poderia chamar isso de d o que eu quisesse e a razão pela qual eu tenho que fazer uma função é porque esses dados são essencialmente uma coleção de um monte de campos. Eu tenho que dizer a D três pontos extensão qual campo eu me importo. Então eu quero dizer retorno d dot poor Agora, se eu apenas retornar d dot poor vai ficar muito confuso porque em um arquivo C S V, todos esses dados são realmente armazenados como um texto. E por isso, três coisas. Todos esses valores, mesmo aqueles que são, sabemos seus números porque olhamos para ele ou para os humanos, podemos dizer qual é o número. D 3 acha que é uma mensagem de texto alguma coisa. Ele acha que a string 0.632 Então, na verdade, para converter isso em um número e eu vou usar apenas uma função JavaScript construída chamada bolsa flutuante. E então analisar float está literalmente usando JavaScript para dizer, Pegue esta string e retornar o valor flutuante. O número decimal real que essa string representa 0.632 Se eu usar analisar em I nt, então estaremos arredondando os números para cima ou para baixo dois inteiros que não queremos porque queremos os valores reais. Então, a bolsa flutua faz isso. Tudo bem, então agora eu tenho o valor mínimo máximo. E vamos apenas, você sabe, direcionar isso para o console para que eu possa ver como ele se parece. E certifique-se de que eu não estou vendo nenhum erro estranho. Alguns dizem console ponto log min Max, voltar aqui, ir para o meu console bater, atualizar, e olhar, eu não tenho array. Veja os pequenos colchetes e meu valor mínimo é 1,73 qualquer coisa. E o meu valor máximo é que 37,97 etc. E assim eu posso ver cada valor individual. Está a funcionar. Então eu tenho esses números. O que faço com eles? Bem, você pode adivinhar em vez de definir manualmente o meu mínimo e máximo para o meu domínio, eu vou usar essa variável em vez disso. Um ensaio usou o X Men Max. Use o primeiro valor para o mínimo de entrada e use o segundo valor para o máximo. E então você notará que o primeiro valor é que posição de índice zero em uma matriz e JavaScript E o segundo valor está na primeira posição de índice. Um pouco confuso se você não é um programador, mas isso só teve trabalho de script. Ele usa indexação zero para acessar o primeiro elemento em uma matriz. E então agora se eu bater, atualizar mais uma vez você vai ver agora que ele vai todo o caminho de zero agora porque meu se eu não tiver o que o meu mínimo é, vai colocá-lo em zero. Seja qual for o meu máximo, ele vai colocá-lo em 1000 e qualquer coisa no meio vai colocar qualquer coisa no meio. E então é zero. Mas não se esqueça, este é o centro dos círculos em zero. Portanto, ele está correndo para fora da borda esquerda ou, neste caso, correndo para fora da borda direita. Mas é colocado exatamente em zero ou 1000 para os menores pontos finais maiores. Então minha escala de ex está funcionando lindamente. Então eu vou fazer exatamente a mesma coisa pelo meu porquê. E minha soma chamaria isso de Lyman de volta Simon Collison ou Min Max. E para o meu porquê Min Max valoriza. Não quero o campo dos pobres. Quero o campo dos quartos e para o meu braço e valor máximo de novo. Não quero os pobres. Eu quero o valor porque aqueles campos que estão dirigindo a posição Y neste caso e o tamanho da bolha neste caso. E mais uma vez, vou usar uma coisa parecida. Vou criar mais duas escalas. Vou criar uma escala Y e na nossa escala e em vez dos X Men, Max, vou usar o Wyman Max. Então, para o meu Wyman Max, vou dizer 0 a 300. Vamos ver como isso se parece por enquanto. E eles para a minha escala. Vou usar o braço e o Max em vez dos X-Men. O Max. E eu vou apenas dizer manualmente que eu quero que eu não quero que meus círculos sejam menores que dois ou digamos qualquer maior do que 10 raio de dezenas de diâmetro de 20. E mais uma vez, faço o mesmo que fiz aqui. Eu digo usar a escala y com este valor. E usei a nossa escala com este valor. E eu não preciso mais desse divisor. Então, se eu salvar, eu acerto, atualizar e olhar para o que temos. Então vamos todo o caminho de cima para baixo até eu só disse isso para 300. Eu acho que a minha altura é o que é isso? 500. É só mudar para 500 ver o que acontece. Sim, agora ele vai todo o caminho para o fundo de todo o caminho para o topo, o fundo todo o caminho para a esquerda todo o caminho para a direita, e assim está usando todo o espaço que eu tenho disponível para mim, que é um ótimo ponto de partida. Mas, você sabe, ele está correndo fora do limite. Isso é estranho. Então também há uma maneira fácil de corrigir isso . Você sabe, eu estou dizendo para começar em zero e terminar em 500 começou zero e entrou 1000. Mas por que realmente não definir isso para que ele lida com que mawr elegantemente e da maneira que eu vou fazer isso como eu tenho minha largura e altura como variáveis aqui em cima, eu vou adicionar uma nova variável chamada Margin no meu conjunto que para 30. Digamos que sim. Os 30 pixels de margem no meu gráfico são o que estou procurando. E agora eu não quero colocar o meu valor mínimo em zero. Quero colocá-lo na margem. Em outras palavras, 30 pixels da esquerda e, em seguida, o meu valor máximo em vez de 1000. Eu quero colocar para fora o com menos a margem, então vai ser 970 pixels. Mas a razão pela qual estou fazendo isso é que se eu quisesse dobrar o tamanho, eu poderia apenas mudar esse número e ele iria descobrir automaticamente como fazer todos os meus ajustes aqui embaixo. E assim, da mesma forma, eu vou dizer para os meus valores por que eu quero o valor mínimo em vez de estar em zero novamente para ser a margem neste caso em vez de com a minha margem de bunda, eu vou dizer altura, minha margem mais alta porque eu não estou falando sobre ir por aqui com meu sábio. É todo o caminho daqui até aqui. Então tinha salvo hit, atualizar. E agora tudo é movido em 30 pixels de todas as bordas diferentes. Mas isso traz à tona um tipo importante de coisa interessante. E eu mencionei isso brevemente antes. Eu acho que onde, você sabe, nós temos menos pobres, tão ricos, mais pobres para a direita, e os mais pobres têm menos quartos. Mas ele sobe, e isso é meio estranho para as pessoas. Até é um número menor porque o Y zero aqui em cima e alto sábio aqui em baixo. Então, como consertamos isso? Você sabe, usar escalas torna-se tão fácil de consertar porque tudo o que eu tenho que fazer é dizer, você sabe o quê? Para os meus valores de entrada, em vez de ter o meu valor mínimo e isso está associado com o mais distante que você sabe, o mais baixo. Por que, que está no topo e meu valor máximo com o Y. Eu posso apenas trocar estes. Posso dizer, colocar no máximo um no topo e o mínimo na parte inferior. E eu poderia ter deixado estes iguais e dito Troque estes dois. Mas qualquer um funciona. Agora, se eu apertar a atualização, a coisa toda vai virar verticalmente. E agora, sim, mais pobre eu recebo menos quartos, certo, porque geralmente lendo a escala para os sábios, indo de um número baixo, um número alto. Então ele só fez isso automaticamente muito facilmente para mim. Então as escalas não são apenas para colocação, você pode fazer outras coisas com escalas, e eu vou usar outro tipo de escala aqui, e eu vou chamar este um ver escala, porque eu vou estar usando este para as cores Em vez de usar uma escala linear, vou usar-nos uma escala anormal. Então esta é a escala de ponto orginal. E isso também tem um domínio e chicotes um intervalo ainda tem valores de entrada e saída. Neste caso, o domínio é essencialmente, hum, duro revestido valores únicos. No meu caso, que novamente eu poderia tornar esta dinâmica. Eu queria, mas não há necessidade, e os valores de saída são essencialmente diretamente associados a cada um deles. Então, uma escala linear vai para qualquer lugar daqui até aqui. Na verdade, como você viu antes, ele vai até mesmo sair dos limites da demanda que você fornece. Considerando que uma escala comum literalmente associa o primeiro valor e, em seguida, o intervalo para o primeiro valor no domínio e o segundo valor com o segundo valores do diretamente vinculado. Isso é o que eu vou fazer aqui é eu vou apenas dar-lhe um valor hexi decimal de valor de cor . E eu tenho pelo meu valor máximo, o que eu vou deixar as coisas laranja pelo valor mínimo. Eles vão ser desta cor cinza. E assim, a maneira que vou usar este aqui é para formar. Eu preencho a cor, e então eu vou mudar isso para uma função, Andi, como você pode imaginar, retornar a escala C. E neste caso, vou usar o ponto D Charles. E então o que está acontecendo aqui é que eu estou dizendo, se você se lembrar que o Campo Charles, se eu voltar para a planilha aqui, é este um dos sebes, zeros e uns. De vez em quando você vê um que significa que este distrito está perto do rio Charles. E então eu estou literalmente dizendo, passando um zur ou um desse campo se ele zero me passou um valor cinza, se for um 1, me passe um valor laranja. E agora que já assinou que eu volto, eu bati, atualizo e boom. Lá temos ele. Temos pontos laranja, temos pontos cinzentos. Agora os pontos laranja são um pouco difíceis de ver por duas razões. Um deles é opacidade. E isso é fácil o suficiente para consertar um. Adicione outra coisa a isso em vez de definir isso manualmente. Mais uma vez, posso usar uma função. E então eu vou usar novamente os dados vinculados. E em vez de sentar em um cordeiro para dizer retorno Dida, Charles é igual a um. Se assim for, devolva um se não retornar, digamos 0.3. Então, se você não está familiarizado com a declaração abreviação if else em JavaScript isso é o que parece. Isto diz literalmente que se for verdade, Dita Charles é igual a um. Isto é o que te diz que é uma declaração “se”. Em seguida, faça isso caso contrário, faça isso e então vai retornar esse valor. Baseado em quê? Sabe o que é verdade aqui? Então agora, mais uma vez, acerte, refresque e estoure este ar perfeitamente opaco, enquanto estes são agradáveis e desbotados muito pouco, mas como você pode ver, eu ainda tenho um problema porque estes laranja pontos estão atrás de alguns desses pontos pretos e eu realmente quero que os laranja para se destacar. E especialmente se tivéssemos um pequeno ponto laranja atrás como vários pontos pretos, ele talvez você nem fosse capaz de vê-lo. Então isso também é flexível e a maneira como é flexível é entender uma coisa muito importante sobre svg. O SPG é tudo sobre o pedido. Os elementos aparecem no dom na página. Então, a primeira linha de dados colocou este primeiro dotnet deixou cair aqui o 2º 1 está aqui. A 3ª 1 está aqui. E então, se todos estes três estavam em cima um do outro, este terceiro 1 aqui estaria literalmente em cima deste aqui. Este não seria visível, enquanto este seria visível. E então é tudo sobre a colocação na ordem. Então isso me diz o que se eu classificar os dados de modo que todos os dados foram ordenados pelo campo Charles River e todos os zeros vêm em primeiro lugar, todos os cinza e todos os laranja vêm mais tarde, Então os laranja serão então no topo de Aqueles cinzentos. Então ordenação e script Java é um pouco estranho, a sintaxe. Mas não é difícil. É só um pouco estranho e um pouco confuso às vezes. Então, a maneira rápida e fácil de fazer a classificação é apenas usar os trabalhos embutidos, obter a função. Eu só estou indo para eles dizer dados é igual a classificação de ponto de dados, e o que você faz aqui é mais uma vez, você usa uma função e eles são dois parâmetros que são usados na função. E, essencialmente, ele é assim e eu vou explicar. Charles, menos derrotar Charles. Então, essencialmente, o que a classificação datada faz e JavaScript é. Ele passa pelos dados uma linha, um elemento de vezes, na verdade, tipo de dois elementos no momento, o primeiro número de hits e, em seguida, a segunda ou a primeira coisa que atinge a primeira linha de dados. Vamos chamá-lo na segunda linha de dados e dizendo retornar oito fora, Charles menos bateu fora Charles estavam apenas dizendo Javascript. Se forem os números baixos, faça-o primeiro. Se for o grande número pode vir em segundo lugar. Se eu reverter isso derrotar Charles menos oito Charles, eu realmente reverteria classificar isso. Então pode parecer um pouco confuso. Definitivamente. Procure classificação e JavaScript em outro tutorial para saber mais sobre ele. Mas por enquanto, não se preocupe com isso. Esta é a sintaxe é exatamente como ela funciona. Então, mais uma vez , agora para esses , como, olhar para esses pontos aqui que estão tipo de atrás desses outros pontos. Quando eu apertei Refresh. Agora eles estão no topo porque eles estão vindo mais tarde, quando são empurrados para o, uh, campus para o palco por D três e eu ia fazer outra coisa no código muito rapidamente. Hum, você sabe, nós conversamos um pouco sobre escopo variável aqui, e nós temos nossas variáveis globais aqui em cima. Na verdade, vou adicionar a minha escala de ex. E por que variáveis de escala aqui? Porque eu preciso usar aqueles fora desta função mais tarde. Isto são apenas provas futuras. Sei que vou querer uma referência em outro lugar. E agora, se eu declará-lo aqui em cima, em vez aqui em cima, então eles estarão disponíveis para mim mais tarde. 6. Usando eixos D3: Tudo bem. Então ainda temos algumas outras coisas que queremos ajustar neste projeto. E, verdade, na verdade,notei um erro que cometi antes. Se você se lembra, quando olhamos para o código, um, você sabe, eu tinha adicionado esta classe de ponto, e eu tinha definido o traço para esta cor. Mas eu tenho aspas em torno do valor da cor, e então você percebe que não vemos o traçado aqui. E um exemplo tão clássico do tipo de erro que eu cometo o tempo todo. Sabe, se eu não fizer isso, você não precisa de aspas em torno desse valor de cor, então eu preciso tirar isso. Agora, se eu apertar Refresh. E agora podemos ver este belo contorno preto em torno de nossos pontos laranja. E por causa de sua opacidade 100% eu os vejo, esses outros que são, você sabe, essencialmente menor rapacidade. Você realmente não percebe isso, mas é realmente muito sutilmente lá porque não se esqueça, esta é realmente uma cor cinza sensação, eu acredito. Resumindo a história. Eu só queria consertar isso rapidinho. Então o que vamos fazer nesta lição é adicionar a linha de acesso. Então aqui está a versão final e nós temos, você sabe, nosso valor mínimo máximo. Temos nossas pequenas linhas verticais e horizontais. Você sabe, nós temos machados. E como você cria um acesso? Bem, você sabe, nós poderíamos apenas criá-lo manualmente, certo? Eu poderia literalmente desenhar manualmente uma linha horizontal que começa aqui e termina aqui manualmente. Desenhe esta pequena linha principalmente. Largue esta pequena linha, desenhe principalmente os rótulos. Diz-se um por um. Isso seria uma espécie de dor no rabo. Por que você faria isso dessa maneira? Isso é loucura. Felizmente, é claro, eu vou dizer D três tem ferramentas construídas para fazer isso muito facilmente. Então como a última lição. Este vai ser muito envolvido. Vai demorar um pouco. Os machados são. É uma ótima ferramenta. Construído em dois. D três leva alguns passos, mas novamente, copiar colar. Na verdade, é um conceito bastante simples. É preciso apenas alguns passos diferentes em algumas linhas diferentes de código para fazê-lo. Então deixe-me voltar ao nosso documento de trabalho aqui e nosso código, e a primeira coisa que eu preciso fazer é criar uma variável que eu vou chamar eixo X. E então eu vou dizer X acesso é igual D três pontos espera acesso inferior eo que não é Boston inferior. E eu queria usar a minha balança de ex. Então, o que está acontecendo aqui? Eu estou criando um objeto, e eu estou dizendo que eu quero usar D três construído no método inferior acesso e um fundo de acesso é literalmente apenas um acesso inferior. Esse é o tipo de acesso que vive no fundo dos gráficos normalmente, que é o que é um eixo X, certo? É assim que nos referimos a ele. E você verá que ele não acaba na parte inferior da página por padrão. Temos que movê-lo. Mas também temos que dizer qual escala usar, porque então D três irá automaticamente torná-lo o certo com o uso desse domínio e intervalo que nós configuramos acima na escala. Então, isso realmente ajuda a tornar mais fácil ajustar seus eixos na estrada à medida que seus dados mudam, e eu vou lhe mostrar isso em um momento. A próxima coisa que eu preciso fazer é criar outro objeto que eu vou chamar X X SG e o que é o X Axis G e o que isso vai conter é um elemento de grupo SPG. Então spg ponto upend G e elementos assim agrupados. G elementos são realmente boas coisas sabem como usar. Essencialmente, se você colocar coisas dentro de um elemento de grupo no SPG, então você pode tipo de agir sobre esse único elemento agrupado como um único elemento. E assim, por exemplo, se eu voltar aqui, este eixo consiste essencialmente em dois rótulos. Uma da parte superior da parte inferior para marcas de marca, uma da parte inferior da parte superior e a linha vertical que os conecta. É que são cinco objetos diferentes se você está para criá-los principalmente. E mesmo se você quisesse criar um manualmente, você poderia. Mas você gostaria de colocá-lo em um G um elemento agrupado, então você pode então realmente movê-los como um único objeto. Prefiro ter removendo tudo individualmente. Isso seria loucura, certo? Resumindo, crio meu elemento agrupado. Na verdade, vou dar a esse grupo um par de precisos, então até dar em i d. e eu ia chamar o eixo X para o meu i d para que eu possa me referir a ele mais tarde, e eu também vou adicionar uma classe e a classe. Vou ligar para o acesso. E isso é porque eu não preciso ter classe de eixo X. Isso é diferente da minha classe de eixo y, porque ambos compartilham a mesma cor e tratamento visual etc, tanto para os rótulos quanto para as linhas. Então, uma classe de ação fará o truque para isso. E então a última coisa que eu preciso fazer é, então, essencialmente, pegar esse elemento de grupo que eu criei esse objeto e chamar o acesso que eu também criei. Há apenas esta sintaxe é exatamente como ela funciona. Não fique muito pendurado nisso. É assim que eu criei o Eixo? Adicionado são, você sabe, também criou um elemento de grupo com um par de atributos e, em seguida, usar esse elemento de grupo para chamar o acesso. Se eu voltar aqui, bater atualizar espera que o novo em desculpe bater, atualizar e Boom. Nós temos um acesso inferior entre aspas, mesmo que esteja no topo e você notará que um D 3 fez algumas coisas muito legais, você sabe. Primeiro de tudo, ele usou automaticamente a escala, então ele começa em qualquer coisa. Esse valor mínimo é 1.7 e vai todo o caminho até 38 ish em que você pode dizer direito Isso vai de 30 para 35. É desta largura. É menos por isso que é uma mentira como três, não cinco diferença. Também adicionou automaticamente marcas de verificação em alguns intervalos regulares e até adicionou os valores direita. Então ele está fazendo coisas baseadas em algoritmos que são muito inteligentes, muito poderosos. Não quero usar os padrões embutidos, que vamos corrigir mais tarde. Mas é muito bom, certo? Este é realmente um bom começo, então a próxima coisa que eu quero fazer é mover o acesso para o fundo do gráfico onde ele pertence. Só não quer, realmente viver no topo. É uma norma que seu acesso ex vive na parte inferior do gráfico e seu eixo Y vive à esquerda do gráfico. Então a maneira de fazer isso é usar algo chamado Transformar porque essencialmente o que queríamos é mover todo esse grupo, então depois de chamar o acesso, podemos apenas adicionar outro atributo, que é uma transformação atributos e o que eu vou usar o método de tradução dentro dos atributos de transformação e método de tradução se parece com isso. Agora você vai notar. Primeiro de tudo, esta é uma corda. Então eu chamo atributos de transformação e eu traduzo e traduzo essencialmente traduz para eu estou movendo zero pixels no eixo X e 100 pixels no eixo Y. Então eu estou dizendo, não mova tudo horizontalmente, mas mova para baixo 100 pixels. Então, se eu apertar Atualizar agora, todo esse grupo de acesso, a coisa toda deve mover-se para baixo 100 pixels para lá. Então, se eu apertar atualizar Boom lá ele iss direito fez exatamente o que eu queria fazer. Então, como você pode imaginar, eu realmente não quero movê-lo manualmente. 100 pixels. Eu poderia movê-lo manualmente. 470 pixels, altura direita dos membros, 500 milhas , 30 margem, e iria bem aqui. Mas por que eu usaria valores codificados quando alguns desses valores podem mudar pelas estradas e disse, eu estou realmente mudar esse número codificado e usar as variáveis que já estabeleceram da maneira que eu vou fazer isso é, se você está familiarizado com o script Java, enfraquecer fazer o que é chamado de concatenação de string, que é uma palavra grande apenas para significar que eu quero pegar minha string e combiná-lo com variáveis e tipo de colocá-lo de volta juntos como uma string. E a maneira de fazer isso é essencialmente, você sabe, você sabe, eu tenho aspas de abertura e aspas intermináveis, e o que eu quero fazer é terminar a citação e abrir a citação novamente e, em seguida, separado com sinais de adição e, em seguida, no meio aqui, eu vou adicionar a variável. Então, se você se lembra, a variável é que temos nossa altura menos margem. Então você vai notar que eu coloquei entre parênteses porque se eu tentar, Cat pode fazer uma corda e não colocar os parênteses em torno dela? Às vezes ele vai fazer coisas estranhas onde vai ser, você sabe, altura menos margem. E vai acabar mesmo. É esses dois números tipo de juntos, e ele vai acabar sendo um grande número em vez de realmente fazer a subtração primeiro, em seguida, colocando que 470 pixels nessa string. , Experimente, experimente e verá do que estou falando. Resumindo a longa história. Se eu fizer isso agora, se eu tivesse salvo e pressionado atualizar, minha linha de acesso vai direto para a parte inferior, é exatamente onde eu quero. Agora eu tenho um problema em que eu tenho um círculo que está atravessando, porque mais uma vez, isso também está sendo colocado exatamente centrado aqui, e nós vamos lidar com isso mais tarde. Então o que eu quero fazer agora é eu quero corrigir esse problema onde eu tenho, você sabe, você sabe, marcas de carrapatos interessantes. D 3 está fazendo automaticamente para mim, o que é ótimo, mas há alguns problemas aqui. Uma é que você sabe, não há razão para este mercado de carrapatos 15 como quem se importa onde 15 está por defeito? Eu recomendo que quando você está fazendo visualizações de dados que você usa como algumas marcas de ticks, como você pode possivelmente se safar. Então minha posição padrão é sempre ter o número inferior e o número superior e nada mais entre eles. Você tem que me convencer a incluir marcas extras, valores extras, porque se eles não servem a um propósito, então eles não deveriam estar lá porque eles são realmente uma distração visual. Eles tiram seu olho dos dados, que é realmente onde você quer que seu público se concentre. Então há um monte de maneiras diferentes de fazer isso. Uma coisa é construída em dois D três eixos, claro, porque eles são tão grandes que eu posso fazer coisas como, digamos, adicionar a isso, você sabe, eixo X. Ele vai d três pontos de excesso de fundos x escala. Eu poderia dizer apenas “ticks zero”. E se eu salvar e bater, atualizar Agora veja o que acontece. Eu não tenho carrapatos, sem rótulos, sem marcas extras, apenas o início e o fim marca de verificação para que eu pudesse colocar manualmente o número inferior e o número superior aqui. Mas essa não é a maneira mais útil de fazer. Em vez disso, posso usar algo chamado valores de ticks. E então valores de ticks é uma espécie de porque eu posso interessar manualmente dizer, eu quero valores de tickets em , digamos, três chicotes três e 12 e você vai notar que estes ar em uma matriz Ok, então apenas, você Sabe, novamente, se você fizer isso e algo estranho acontecer, você provavelmente está esquecendo os colchetes na vírgula. E então, se eu disser colocar, tomar valores em três e 12 e eu apertar Atualizar Look, há um tick que marca em três. E então há 1 a 12 você sabe, e Aiken, porque é uma matriz tem tantos destes que eu quero que eu queria 33. Boom! Há 1 33 agora. Claro, eu não quero valores de ticks colocados aleatoriamente. Isso é meio estranho. Em vez disso, eu quero apenas ter um do número inferior e um no número superior. E não se esqueça que já temos uma variável que contém nossos números inferiores e superiores. Direito são valores mínimos e máximos, então eu posso copiar essa variável. Em vez de fazer isso manualmente, Eu posso dizer Use minha tenda X Men Max, Primeiro Valor e Meu X Men Max valor, segundo valor salvar. E agora eu tenho um na parte inferior e um no topo, e você vai notar que ele está usando inteiros por padrão. Isso é o que você sabe. O D D D D três métodos de acesso usar. Há uma maneira de mudá-lo para usar o valor flutuante em, mas eu não vou me incomodar fazendo agora. Podemos sempre ajustar esses tipos de coisas mais tarde, então a próxima coisa que eu quero corrigir relacionada a reduzir a distração visual é ocolonialplayers, porque eu também recomendo fortemente que você nunca use preto contra um fundo branco suas linhas de acesso ou rótulos novamente, você deseja reduzir o contraste, reduzir a distração. Você não quer que seu público se concentre em suas linhas de acesso e etiquetas. Eles têm que ser capazes de lê-lo, mas eles não precisam estar chamando atenção para si mesmos. Então eu fui recomendado usar uma chuva como nós já criamos estilo ah. Nós adicionamos uma classe para esses objetos e assim eu posso criar uma classe no meu CSS usando acesso ponto. E quando eu preciso fazer é eu preciso dizer linha de acesso ponto e caminho de acesso ponto. E eu vou definir o golpe de ah para que ambos sejam legais como Ray. Então por que eu fiz Don Access Line e tenho caminho de acesso? Bem, se olharmos para o acesso real no inspetor direito, os elementos aqui é o elemento grupo, que contém todas as coisas certas. E se eu abrir os lábios e você pode ver que ele tem o eixo de classe. Se eu abrir isso, há um caminho, que é como D três cria a linha horizontal e há também cada tick e cada tick é um grupo que consiste em uma linha, que é o conector vertical e o texto. E então, por qualquer motivo, D três cria caminhos e linhas. E então ambos precisam ter essa, tipo, graça, graça, cor do traço. E há também o texto que contém o próprio rótulo. E assim, enquanto eu estou nisso, eu poderia muito bem dizer texto do eixo do ponto. E eu quero que isso use a cor de preenchimento. E lembre-se, eu tenho que usar Phil, não a palavra cor aqui. Se eu usar cor, nada vai acontecer. Então, novamente, bom lugar para depurar seu código. Você provavelmente vai usar cor por padrão se você fizer isso muito HTML e CSS, você não pode. Tens de usar o Phil. Então preencha com o mesmo cinza voltar atualizar hit. E agora eles são legais, como taxas legíveis, mas não distrai. Então agora vamos fazer a mesma coisa para o eixo y, certo? Então eu vou voltar para os meus eixos e eu vou criar Oh, por que Access Object? E em vez de uma escala inferior, usou o que é chamado de escala esquerda. E em vez de usar a escala x, vou usar o objeto de escala Y. Quantos é o meu porquê Min Max valores? E eu vou criar outro objeto chamado Por que Access G. E isso, é claro, usa meu braço em um irmão. Atribuir-lhe uma idéia de por que o acesso e novamente tem a mesma classe. E então eu vou usar isso. Por quê? Grupo de acesso? Vou chamar o objeto do eixo y. E em vez de traduzir zero horizontalmente e 470 ou seja lá o que for verticalmente neste caso, eu quero ter essa coisa em vez de estar bem aqui no ponto zero, que é onde estaria por padrão. Eu não quero me mover verticalmente. Quero movê-lo horizontalmente. 30 pixels. Então, se eu voltar aqui em vez de fazer a contaminação nesse valor e salmão para fazê-lo no primeiro valor, então agora ele vai movê-lo horizontalmente e não verticalmente. Mas é claro, eu não quero movê-lo. Altura menos margem. Eu só quero movê-lo 30 pixels para cima da esquerda. E então eu vou apenas dizer, movê-lo sobre a mesma quantidade que a variável margem. Eu poderia Hagit código às 23:30 se eu quisesse, mas eu só vou fazer isso como margem por enquanto. Então, agora, se eu bater, Refresque lá ele ISS. Agora você vai notar que você sabe, eu tenho novamente círculos cruzando linhas porque novamente eles são colocados exatamente no mesmo lugar que nós vamos consertar mais tarde. E os próprios eixos se cruzam, o que não é necessariamente um problema. Mas vamos consertar isso enquanto consertamos algumas das outras coisas. E este é outro caso em que os eixos, você sabe, tornam muito mais fácil de fazer do que você poderia pensar de outra forma. E então o que eu vou fazer é eu vou realmente você sabe, nós temos nossas variáveis aqui em cima com margem de altura. Ele disse que eu vou adicionar outra variável que eu vou chamar de nossos valores. E eu vou apenas atribuir isso para ser uma matriz de uma lista de duas coisas neste caso que vai ser dois e dez. Se você se lembra, nós temos o nosso mínimo, e o tamanho máximo da bolha são significados. O menor é dois pixels e raio. O maior é 10 pixels. E então eu quero usar esses valores em alguns pontos diferentes. O primeiro lugar que vou usá-lo é definir a minha escala. Então, se você se lembrar para o nosso intervalo direito, nossos valores de saída, dissemos, colocá-lo a partir da esquerda. Você sabe, o valor mínimo será exatamente 30 pixels da esquerda, e o valor máximo será a largura total de menos o 30. Então 1001 é um 30 que é 970 e isso é bom. Mas se eu quiser enfiar tudo bem, não quero esse cara aqui. Quero que ele seja empurrado um pouco. E quanto eu quero que ele seja empurrado? Por que um empurrou literalmente, exatamente a mesma quantidade que o raio direita metade da largura do círculo. Porque então ele estará bem aqui, e a borda dele estará exatamente na borda do próprio acesso. Então eu posso fazer isso usando nossos valores. Então eu posso dizer, colocar o valor mínimo de X nas coordenadas X na margem, mais nossos valores, aquela coisa que eu criei no máximo. Então, em outras palavras , sempre vai se arrepender. Não 10, apenas um. Vai ser sempre neste caso porque há valores é definido como 10. Vai ser um 30 mais dezenas de 40 pixels acima e a mesma coisa a largura menos margem menos os nossos valores. Valor máximo. E agora, se eu bater, atualizar tudo vai aparecer mais um pouco, certo? Então, literalmente, esse cara está atingindo o limite e eu poderia ajustar isso. Posso adicionar um ou dois pixels a ele se eu quiser, mas isso é algo que você pode se ajustar mais tarde. Então, tenho os meus valores. Vou adicioná-lo a este ano, e vou fazer a mesma coisa lá em baixo para o porquê de eu não querer isso do início. Eu queria o topo mais o raio máximo, e eu quero de novo. A altura menos a margem menos esse raio. Então, novamente, se eu atualizar agora, tudo vai enfiar um pouco na vertical e você vai notar que alguns vão fechar esse cara. Então, não continua, uh, destacando enquanto eu vou para frente e para trás. E eu poderia muito bem mudar estes porque porque, disse Thies, codificado quando estes poderiam ser configurados manualmente ou abusando dados dinâmicos também, então eu vou usar o valor mínimo e máximo que eu tenho vindo de minhas variáveis Aqui em baixo. Então, mais uma vez, salve hit, atualize. Nada visível. Mudar a causa deles. Já vimos o que tínhamos feito antes. Agora, uma das coisas que você vai notar é que este círculo é, você sabe, nem mesmo para o limite porque este círculo é menor. Estamos empurrando tudo por 10. Este tem um raio pequeno. É por isso que este está no limite. Mas este não é. E você sabe, enquanto eu estou brincando com meus números aqui, eu vou fazer o maior círculo um pouco maior. Vou chamar-lhe 15. Agora, se eu disser que os maiores círculos são um pouco maiores, as coisas ainda são automaticamente empurradas, movidas, colocadas exatamente onde precisam estar. E esse é o valor de usar variáveis em vez de definir as coisas manualmente. Se eu tivesse um monte de lugares onde eu iria definir os valores r manualmente, eu teria que mudar. Então, cada lugar onde está agora? Eu só mudo em um lugar e em atualizações em todos os lugares que eu precisava. Tudo bem. As coisas parecem muito boas. Acho que tudo o que resta a fazer agora é animar isso e adicionar um pouco de interatividade , e estaremos prontos para ir. 7. Animação em D3: Tudo bem. Então, nosso gráfico de bolhas de gráfico de dispersão aqui está parecendo muito bom. Estou muito feliz com isso. E, hum, a seguir, o que eu quero fazer é animá-lo, trazê-lo à vida porque, você sabe, estamos usando JavaScript. Estamos criando uma coisa dinâmica que vive em um navegador da web, e temos à nossa disposição as ferramentas para, pelo menos, trazê-la à vida visualmente, um pouco mais, em vez de simplesmente carregar essa coisa e fazer com que seja um gráfico estático enfraquecer. Dê um pouco de doce para os olhos, o que é realmente uma coisa muito importante. Sabe, estética importa nas comunicações, e é isso que se trata. Isto são comunicações. E então, se você pudesse torná-lo bonito e envolvente uma animação é uma ótima maneira de fazer isso, nós poderíamos muito bem fazê-lo. Então, eu só vou para o código aqui. E a primeira coisa que vou fazer é você sabe, nós criamos esses círculos. Demos aos círculos atributos como sua posição X e y lá, raio , tamanho , preenchimento , cor , rapacidade, etc. E então o que vou fazer primeiro é mudar o raio destes círculos. Vou apagar a função. Eu realmente vou cortá-lo usando, você sabe, comando X no Mac controle Exxon PC para que eu possa colá-lo mais tarde. E vou mudá-lo manualmente, volta a zero. Algo bateu, salve e atualize e carregue-o. E o que vemos? O que vemos? Nada, certo? Porque todos os círculos que, aliás, ainda estão lá. Então, se eu entrar no CO, os elementos aqui e abrir talvez o gráfico e o SPG, ainda temos círculos. Eles ainda têm atributos X e y. E ainda está posicionado exatamente onde eles deveriam estar na tela, como você pode ver enquanto eu roto sobre eles, mas todos eles têm um raio de zero. E então eles são objetos que não têm largura e altura, então eles são essencialmente invisíveis. Mas eles estão lá. Tudo bem, então eles ainda existem. Eles ainda estão na tela, eles só não têm nenhuma visibilidade. E vamos mudar isso na animação. Então a maneira de fazer isso são duas coisas rápidas A primeira coisa que eu vou fazer é adicionar uma chamada de função aqui em baixo. Então, uma vez que meu script é feito, eu criei meu objeto SPG Conjuntos de variáveis criam o objeto SPG. Leu os dados, ordenou configurar o meu material de escala, adicionou os círculos fora das linhas de eixo. E agora eu vou dizer, por favor, faça uma atualização. E esta é uma função que eu vou criar chamada atualização. Eu poderia ligar para essa coisa. O que eu queria, eu ia chamá-lo de atualização e, em seguida, criar uma nova função aqui em baixo e você vai notar que ele está fora desta função que temos vindo a trabalhar acima. Lembre-se destas chaves que terminou a função que começou com D três pontos CS taxa, que traz para a vanguarda aqui uma idéia muito semelhante ao escopo variável. Essencialmente, as funções têm escopo para. E então, se eu fosse escrever o código para executar o que eu quero que aconteça nesta atualização, a animação dentro desta função, como onde o resto deste material está, então eu não teria acesso a ele fora dessa função. Agora, nesta lição que eu estou ensinando em D 3, nós não vamos fazer nada com isso, mas é uma boa prática colocar suas atualizações, coisas fora dessa função de chamada de dados, porque depois, mais tarde, Eu tinha um botão na página. Eu quero clicar nesse botão que talvez carrega novos dados ou altera coisas que eu quero reanimar coisas. Se é fora dessa função original, então eu tenho acesso a ele quando eu faço coisas como clicar em botões. Portanto, é apenas uma boa prática para fazê-lo desta forma. Então eu vou chamar uma função chamada Atualização, e então eu tenho que criar essa função. E esta é a sintaxe para fazer isso. E agora essa função vai consistir no código para fazer a animação acontecer. E assim, como eu disse, você sabe, você sabe, nós temos seu objeto chamado círculos, que mantém nossos círculos que criamos e vinculamos a dados e adicionamos atributos para o que eu possa fazer. Essa função de atualização é referida a esse objeto. É por isso que adicionamos o nome da variável, o nome do objeto. É uma chamada de um minuto que eu vou dizer apenas círculos transição ponto e este é apenas outro ótimo método. Construir em D três que permite que você crie animações acontecem. Você quer uma transição coisas no palco e fazer as coisas acontecerem. E então o que eu quero fazer acontecer é, você sabe, eu mudei meu raio para zero. E então eu quero animar o raio ao longo do tempo. E então a maneira de fazer isso é dizer, atributo de ponto de transição circulado porque o que eu quero uma transição são os atributos em si . E então eu quero fazer a transição do atributo são o raio voltar aqui e colar nessa função que eu copiei anteriormente, e então literalmente eu estou dizendo tomar meus círculos animar os atributos são e animado para este valor que nós usado anteriormente. Tudo bem, então eu vou economizar e eu sou um sucesso atualizar e ver o que acontece. Todos eles animados para o palco, e isso acontece muito rapidamente porque a velocidade padrão da animação é bastante rápido. Então eu ia carregar de novo. Só pode ver mais uma vez. É a animação em. Está tudo bem. É melhor do que não animar, eu acho. Mas é muito rápido. E então, em vez de apenas animá-los todos de uma vez, o que eu quero fazer é que eles atrasem e eu vou apenas mostrar a sintaxe para atrasar as coisas e apenas mostrar uma coisa rápida. Então, antes de fazer a mudança de atributos, você quer dizer a ele para fazer o atraso acontecer. Então digamos que entrei aqui e disse: “ Atrasar 1000 milissegundos e o atraso. O valor está sempre em milissegundos, então 1000 milissegundos é um segundo. Então, se eu apertar Salvar, eu aperto Refresh. O que vai acontecer, não é? Vamos ver uma tela em branco Blakes por um segundo, e então eu ainda animo muito, muito rapidamente, tão em branco e depois animo. Então está tudo bem. Isso é pelo menos eu posso ver que eles estão se animando separadamente dos eixos. Já está um pouco melhor do que era. Mas o que eu realmente quero fazer é que eu quero ter cada ponto animado individualmente um por um na ordem em que eles aparecem no palco na tela. Assim, a maneira de fazer isso como eu também posso mais uma vez mudar esse atraso em uma função. E então o que eu vou fazer é dizer função, talvez algo um pouco diferente aqui. Além de passar o valor de dados em si, o que você pode fazer em qualquer função como fizemos muitas vezes onde passamos os dados vinculados e, em seguida, podemos referir-se aos nomes dos campos para fazer coisas com ele. Você também pode, em qualquer uma dessas funções, também se referir ao número de índice do que está sendo passado. E então o que isso significa? Eu já falei sobre índices antes onde, você sabe, eu criei um raio chamado X Men Max, e era um, você sabe, um array com dois itens nele. Então o primeiro item é a posição de índice zero, e o segundo item é uma posição de índice um. Então, apenas a ordem em que essas coisas são armazenadas nessas funções onde têm dados vinculados , que tem 506 elementos nele? Quando eu digo fazer coisas e fazer coisas com base no valor do índice, que é sempre o segundo parâmetro disponível para você nesses raios, essencialmente, isso significa que ele vai estar looping através desses 506 valores. E tenho acesso ao número 12345 depois do 506. Então, de fato, se eu consola dúvida, registro que eu agora que eu me referi a ele. Sim, eu não me referi a isso aqui em baixo, mas eu poderia fazer a mesma coisa em qualquer uma dessas funções. Mas eu me refiro a isso aqui. Portanto, eu posso acessá-lo aqui. Cônsul, dialogue, atualize e veja o que acontece? Isso o escreve. Veja, todos esses números estão escritos porque eu tenho acesso a todos esses números todo o caminho de 0 a 505, certo? Não cinco ou seis. Bom começa no zero. E então o que vou fazer agora é não dizer “Ok”. Em vez de atrasar 1000 milissegundos, quero atrasar. E novamente, eu tenho que usar essa palavra de retorno. Quero atrasar exatamente esse número. Então o primeiro círculo que aparecer vai atrasar zero milissegundos. Não vai atrasar nada porque é índice zero, o segundo 1 que é que o índice um vai atrasar um milissegundo. O terceiro vai ficar em milissegundos. E uma corrida de cinco na 6ª 1 vai colocar 505 milissegundos pouco mais de meio segundo. Então, se eu atualizar minha tela, você vai vê-los se animar um por um muito rapidamente. Parece muito doce neste momento, mas é um pouco rápido demais. Eu só vou agora, apenas manualmente, você sabe, digamos multiplicar por 10 e agora vai abrandar. Então o ponto 506º será adiado 5000 e 60 milissegundos. Então, pouco mais de cinco segundos. E assim toda esta animação vai levar cinco segundos. E agora parece muito elegante e agradável, limpo e simples. E eu posso ver como ele se constrói em todo o conjunto de dados. Só parece lindo. É uma boa maneira de ver as coisas. Outra coisa que vale a pena notar é que transições, você sabe, animações e D três podem realmente acontecer em, você sabe, praticamente qualquer coisa. Certo? Então aqui estou eu, você sabe, causando uma transição para ocorrer. Estou atrasando. E então a coisa que eu realmente estou transitando é os atributos são, certo, o raio dos círculos. Se eu quisesse, eu poderia mudar, sabe, inimigo. Qualquer um dos outros atributos que defini a exposição, a posição Y, a cor de preenchimento, a capacidade, etc. E então você sabe, por exemplo, E se eu mudar o valor X para zero por padrão e então fazer a transição do valor X para ser essa coisa? O que aconteceria é que todos os pontos começariam aqui e deslizariam para o lugar, certo? Ou se eu fizer a transição da opacidade e não do valor PR em vez de os pontos serem minúsculos e ficarem maiores do raio zero invisível Teoh para um raio maior, eles seriam invisíveis e ficam um pouco mais opaco. Aziz, a capacidade se sente dentro para que você possa animar qualquer coisa. É realmente ótimo. E D 3 torna muito fácil fazê-lo. Então essa coisa está realmente se dando bem. Tudo que eu tenho que fazer agora é adicionar um pouco de interatividade e o que eu vou fazer na próxima lição é mostrar como adicionar um efeito de rollover muito simples. 8. Interatividade em D3: Tudo bem. Então nosso gráfico de dispersão parece ótimo. É animadora. Tudo o que queremos fazer agora é adicionar alguma interatividade apenas para mostrar como isso funciona. E então o que eu vou fazer, Simon e um evento pairar, uma dica de ferramenta para mostrar os dados associados a pontos ou algo realmente simples. E a primeira coisa que você precisa fazer é realmente criar uma div, que vai essencialmente conter meus elementos de ponta de ferramenta. E alguns iam criar uma div. E eu vou dar uma idéia de dicas de ferramentas para que eu possa me referir a elas mais tarde. E enquanto eu estou nisso, eu poderia muito bem adicionar a aula de Tese es, que, porque eu quero ter certeza de que a coisa parece o jeito que eu queria olhar certo. Então eu vou criar uma dica, em vez de uma classe CSS. Só para que eu d ferramenta dica para salmão fazer é eu vou dizer posição Absolute. Então, para aqueles de vocês que conhecem CSS, posicionamento absoluto significa que onde quer que eu decida dizer ao Javascript para colocar essa div, ela será colocada em uma posição absoluta, significando relativo ao canto superior esquerdo de todo o navegador não uma espécie de dentro dos parâmetros de algo que ele fica dentro de apenas torna mais fácil gerenciar o posicionamento exato. Vou dar-lhe uma cor de fundo de branco, e vou adicionar um pouco de estofamento. , Acho que,na verdade, só 20 pixels de preenchimento. Isso só para quando eu adicionar conteúdo na dica de ferramenta, você sabe, texto e qualquer outra coisa que eu colocar lá, ele não é esmagado todo o caminho até as bordas daquela Div. Vou dar-lhe uma fronteira. Hum, e eu acho que eu vou apenas fazer, como, uma borda sólida de um pixel preto por enquanto, nós não estamos realmente não estou projetando isso. Estou apenas a torná-lo visível para que possamos ver as bordas para que possamos julgar em termos de sucesso que está a funcionar. Então deixe-me só apertar “Salvar” nisso. Vou atualizar a página e o que vai acontecer e deixar-me fechar com o meu inspetor . Aí está minha dica de ferramenta, certo? Está preso aqui porque é um dia que vem depois deste dispositivo, apenas sentando aqui no fundo. Não disse a ela para morar em lugar nenhum. É visível, mesmo que não tenha conteúdo por causa do preenchimento. Claro, isso é ótimo. Ele existe. Mas agora eu preciso fazer coisas com ele. E então a primeira vez a fazer é que eu sou realmente um anúncio na classe que ele tem zero opacidade é suficiente. Eu refresco seu invisível. Ainda está lá. Mas é invisível porque eu só quero que isso se torne visível. Quando eu rolo sobre um ponto e quando eu adiciono conteúdo a ele direito, isso meio que faz sentido. Ok, então eu queria ganhar vida quando eu rolar o ponto Como eu vou fazer isso? Bem, vamos para os nossos círculos são pontos e, você sabe, nós temos esses eventos acorrentados. Primeiro, selecionei todas as coisas com a turma. Fiz ação, sabe, sabe, tipo de coisa aconteceu com base em dados. As coisas que eu fiz para fazer era uma caneta círculos e os círculos têm atributos uma vez adicionado todos esses atributos. Há outras coisas que eu posso fazer, como adicionar mouse sobre ponto no mouse sobre evento. E assim, se você usar Jake cansado, você está familiarizado com este conceito ponto no mouse sobre ponto no mouse movido para fora no mouse para fora é como ele é referido em D três. Então, se eu disser ponto no mouse sobre e eu usar uma função, então o que eu posso fazer é dizer a ele para fazer coisas quando eu passar o mouse sobre ele, como você esperaria. Então o que eu vou fazer aqui é que eu estava indo para começar bem simples aqui e você vai notar que eu estou passando os dados vinculados, a propósito, certo. Então eu só vou dizer isso, eu vou criar uma variável. Vou ligar para HTML. Vou dizer html é igual a d dot pobre. Então eu estou literalmente dizendo, coloque essa pobre porcentagem de pessoas pobres neste distrito habitacional nesta variável e então eu vou dizer que eu preciso tipo de decidir onde eu quero que a dica de ferramenta esteja na tela. Na verdade, antes de eu fazer isso, vamos apenas fazer este HTML é igual a d aquele pobre. E então tudo o que eu tenho a dizer é, um d três selecionar a dica div ferramenta que nós criamos e dar-lhe HTML, que é dot html. Neste caso, estou passando a variável idade do nome para mais uma vez. Posso chamar isso de nome variável? Qualquer coisa que eu quisesse fez informação. Agora, contanto que eu diga html sobre uma informação masculina, vai funcionar. Mas estou usando uma variável simples chamada HTML. Espero que isso não seja confuso. Então eu atribui a variável. Estou selecionando a dica de ferramenta. Estou dizendo, coloque esse html nele como HTML. E agora, se eu atualizar a página novamente, ela não estará visível. Mas se eu voltar para a minha aula e comentar esta linha agora, vai ser visível agora você pode ver esses números mudando à medida que eu rolar pontos diferentes , certo? Então deixe-me tornar isso uma passagem mais fácil novamente porque a próxima coisa que eu vou dio é realmente colocar e tornar visível esta dica ferramenta depois que eu adicionar coisas a ele. Então eu adicionei meu macho ht. É invisível porque eu o tornei invisível de novo. Então a próxima coisa que eu quero fazer é eu quero dizer, Vamos definir os chicotes de estilo para este div dica ferramenta. E quando eu quero fazer é antes de tudo, fazer a posição esquerda para, digamos, apenas 100 pixels. Ok? Da borda esquerda, eu também vou definir este estilo. Digo, coloque 100 pixels do topo. Apenas tipo de definir principalmente esses números para começar, e eu tenho que torná-lo visível. Então eu tenho que adicionar o estilo opacidade, e eu vou sentar isso para eu não vou fazer um. Vou torná-lo um pouco translúcido para que você possa ver os pontos por trás. Mas principalmente, você sabe, principalmente mais opaco de em translúcido salvar. Volte para trás, Refresh. Então minha dica de ferramenta é invisível porque eu não estou rolando sobre nada. Assim que estou em massa sobre algo, torna-se visível e está ali. Exatamente 100 pixels deste canto, 100 sobre e 100 maldito topo esquerdo, direita. À medida que eu rolar sobre os diferentes, você pode ver que o tamanho dele tipo de mudanças com base em ter o número é quantos pontos decimais existem etc. Então isso é mercadoria. Bom começo. Mas a próxima coisa que quero fazer é tornar essa colocação mais dinâmica. Hum, eu não vou fazer isso perfeitamente, mas eu vou te mostrar o que estou fazendo e então você pode sempre ajustá-lo sozinho. mais tarde, em vez de apenas dizer manualmente Coloque 100 pixels da esquerda, que é meio estranho, como, Por que eu iria querer colocá-lo lá? Na verdade, não segui meu rato. Eu realmente queria estar exatamente onde quer que eu rolar sobre o ponto eu quero que a ponta da ferramenta apareça lá. Então D três incorporou nele. D três eventos ponto página x. então deixe-me apenas dizer que atualizar hit. Agora o que ele vai fazer é dizer D três me dizer onde o mouse está agora em termos de sua exposição e colocar a ponta de ferramenta bem ali. E então lá está ISS. Agora você notará que ele está alinhado à borda esquerda da ponta da ferramenta. Não é centrado sobre o meu ponto do meu mouse, em vez disso, então eu tenho que realmente fazer isso manualmente para que eu pudesse dizer D evento de três dias fora da Página X. Eu só vou dizer principalmente Talvez, talvez isso é 200 pixels de largura. Eu não sei de nada. Subtraia 100 de modo a fazê-lo manualmente novamente. Não é a melhor maneira de fazer isso. Mas está tudo bem por enquanto. E agora está um pouco longe demais para a esquerda. Mas, como posso acrescentar, mais conteúdo que May centraliza melhor. Então não vou me preocupar com isso agora. Eu só quero classificá-lo geralmente na posição certa, ish para o momento. Então eu me perguntei a mesma coisa para o posicionamento por quê. E então eu vou dizer D evento de três pontos nessa página, porque eu vou economizar menos 100 agora. Mais uma vez, atualize. E agora ele está seguindo minha bagunça para cima e para baixo, bem em todo o caminho, não perfeitamente posicionado, mas novamente, eu posso twittar isso mais tarde. Então isso é ótimo. Estamos fazendo um bom progresso aqui. A única coisa que você vai notar, no entanto, é que mesmo que isso esteja fazendo o que eu queria fazer, a única coisa que ele não está fazendo é uma vez que eu me afaste, não está desaparecendo. Então isso é estranho. Isso não é bom. Eu tenho que consertar isso, também. Então, como você pode imaginar, se você já fez qualquer programação com Hickory antes, eu também tenho que adicionar um ponto no mouse fora evento passado em função, e neste caso eu nem preciso vincular os dados. Quero dizer, eu não preciso passar esses dados vinculados ao Islã disfuncional. É só para dizer, Ei, Ei, selecione essa dica de ferramenta e esconda-a para mim. Então d três faz selecionar a dica de ferramenta Div e vamos definir o estilo E eu estou indo para algo realmente simples. Eu só vou dizer, movê-lo 1000 pixels para a esquerda, negativo 1000 para fora da tela e enquanto eu estou nisso Mas eu realmente não preciso fazer os dois, mas eu vou não sei o porquê. Vamos definir a capacidade de volta para zero para E então se eu apenas fazer isso tinha salvo atualização hit. Agora ele segue o meu mouse e sua ativa assim que os pontos disponíveis na tela, mesmo enquanto sua direita de animação. E uma vez que eu me afasto, ele desaparece. Então agora eu tenho uma dica de ferramenta funcionando, realmente fazendo o que eu queria fazer. Mas acho que quero adicionar mais conteúdo à dica de ferramenta. Isso é funcionalmente suficiente, mas eu só quero mostrar um dos conceitos aqui. Você não tem que apenas passar em um valor que você sabe que podemos fazer membro de concatenação string. Falamos sobre isso mais cedo. E se eu quisesse dar mais informações na dica de ferramenta? Bem, uma coisa que eu poderia fazer é dizer, OK, HTML é igual ao texto primeiro. Quero que saibas, este é o valor X. Então eu ia dizer X, eu vou te dizer que este é o poro, hum, campo. E isso é ótimo. Então, agora, se eu apertar a atualização Agora você pode olhar, pensar que eu quebrei alguma coisa. Esqueci-me de acrescentar a ciência mais, ver que me esqueci, não consigo fazer essas estirpes outracoisa de depuração de código onde você fez algo tudo que quebra e coisas como Esqueci-me de acrescentar a ciência mais, ver que me esqueci, não consigo fazer essas estirpes outra ver que me esqueci, não consigo fazer essas estirpes outracoisa de depuração de código onde você fez algo tudo que quebra e coisas como coisa de depuração de código onde você fez algo tudo que quebra e coisas como esquecendo mais sinais no meio é um exemplo clássico de um erro que você vai cometer. Então agora eu vejo aquela cadeia completa que ambas as coisas contaminaram juntas , e eu poderia muito bem dar todos os valores de campo. Certo? Temos o Ford. Tudo está acontecendo aqui. Eu tenho o X, o porquê o raio do círculo e também a cor, certo? Então deixe-me mudar tudo isso. Estou assegurando a você o porquê o são e a cor e o porquê é o campo Lábios Crooms. Então vamos colocar isso aqui, o R é o valor mediano de cada propriedade, e então a cor é baseada no campo Charles River. Então, se eu fizer isso, no entanto, se eu não fizer uma mudança rápida, o que você vai notar eu estou dizendo HTML é igual a isso. E então eu estou dizendo HTML é igual a isso. Então eu estou essencialmente redefinindo a variável milha extra cada vez aqui. Isso não é bom. O que eu preciso fazer é realmente fazer mais iguais para esses subseqüentes. E então se você não está familiarizado com esta abreviação, eu estou dizendo HTML é igual a algo para esta primeira linha e eu estou dizendo, Agora adicione isso, em seguida, adicione isso e, em seguida, adicione isso a ele. Então eu estou apenas acrescentando isso ao longo do caminho. Então, agora, se eu disser até mesmo clique em atualizar agora toda a informação está lá, mas está tudo na mesma linha. Eu não adicionei quebras de linha ou fiz qualquer outro estilo, não a melhor maneira de fazê-lo, mas uma maneira simples de fazê-lo. Eu posso literalmente apenas adicionar quebras de linha. Há outras maneiras de fazer isso, mas eu ia fazer a maneira rápida e fácil aqui por enquanto, então eu vou adicionar quebras de linha para o primeiro 3 Eu não preciso dele para o último hit Atualizar, e agora eu tenho todas as minhas informações lá e é piscando e piscando porque ele está essencialmente atrás do meu mouse, que é sobre um ponto. Mas assim que ele aparecer agora, eu estou fora do mouse sobre o ponto que eu estou acabado. Então eu preciso principalmente mudar essa posição y. Eu só vou dizer, menos 150 por agora e ver se isso sai do caminho. Então isso é ótimo. É, você sabe, é bom por agora codificar esses valores. Vale a pena notar que a maneira certa de fazer isso da maneira que eu normalmente faria isso e você deve fazer isso é, em vez de dizer manualmente, menos 100 menos 1 50 Para essas duas coisas, você pode detectar o com de que Div depois que você adicionou o HTML para ele e, em seguida , dizer tipo de evento Ajax, menos que dibs com dividido por dois direita, você quer subtrair metade do com porque você quer ser centrado em seu mouse e mesma coisa para a altura . Detecte a altura depois de ter adicionado o extremo el a ele e, em seguida, dizer Subtrair a altura e, em seguida, talvez alguns pixels extras. Então você quer que esse tipo quadrado de deslizou o inclinado ligeiramente acima do mouse apenas maneiras rápidas e fáceis de fazê-lo. Você sabe que há outras maneiras, mas essa é uma maneira muito rápida, eficaz e precisa de fazê-lo. Isto é bom. Então temos dicas de ferramentas lá seguindo o mouse. Isso fazer, você sabe, praticamente o que eu quero que ele faça é certamente muito trabalho a ser feito em termos de estilo e fazer parecer bonito em tornar as coisas um pouco mais dinâmicas. Mas funciona bem o suficiente para nossos propósitos hoje, então estamos praticamente feitos, exceto como uma coisa menor que está me incomodando sobre este gráfico de bolhas que temos trabalhado , e eu vou consertar isso na nossa próxima e Lição final. 9. D3 - mais uma coisa: Então fizemos tudo o que nos propusemos a fazer com o nosso gráfico de dispersão. Tudo está funcionando muito bem. Está ganhando vida. Está animando todas essas coisas. Mas há uma coisa neste gráfico de dispersão que me incomoda desde o momento em que começamos a criá-lo. Hum, se você se lembra mais cedo nós tivemos um problema onde eu virei tudo verticalmente, certo? Porque eu queria, hum, esses caras aqui em cima contra aqui embaixo porque era estranho ter, hum , alto valor, viver no fundo, bem em baixo valor, viver no topo. Virámo-lo verticalmente. Lembre-se que eu tenho um problema semelhante com a nossa escala horizontal, porque o que eu tenho aqui é um número baixo que significa uma baixa porcentagem de pessoas pobres em um número alto, uma alta porcentagem de pessoas pobres. Mas pour nous é sobre a falta de algo. E então, se eu estiver, se eu tiver mais pessoas pobres em um distrito, eu tenho casas menos valiosas, pontos menores e menos salas exatamente onde estavam na parte inferior dessa escala no eixo Y, e para que apenas isso pareça errado. Na verdade, é uma coisa conhecida. Pesquisas comprovadas pessoas esperam valores elevados para estar no topo, que é o que fizemos anteriormente foram refletidos verticalmente, mas também uma espécie de acima para a direita. Hum, então nós temos um alto valor, ah, alta porcentagem de pessoas pobres. Mas são pessoas com menos riqueza aqui, e por isso parece errado. E então o que eu quero fazer é que eu quero virar nosso eixo X assim como nós invertemos o eixo r y mais cedo. E então é exatamente o mesmo processo que seguimos anteriormente, onde nós, onde nós, em vez de termos o nosso valor máximo Wyman mais baixo, valor mais alto, você sabe, menor valor de lado, associado com o baixo por que que é no topo, nós literalmente apenas suar com trocá-los. Então o máximo está agora aqui e o mínimo está aqui. Onde fazer exatamente a mesma coisa? Vou dizer, use o valor máximo à esquerda e o valor mínimo à direita. Então, agora, se eu apenas acertar salvar hit, atualizar osso agora ele está virado em volta. E assim, como um leitor de gráficos, isso parece mais natural para mim que alta riqueza, que significa menos pour nous, mas alta riqueza está aqui no canto superior direito. Agora eu tenho um problema semelhante relacionado onde eu tenho um número alto à esquerda em um número baixo à direita. Isso é tecnicamente correto, porque esses são os números. Estamos medindo a porcentagem de pessoas pobres, mas ainda parece errado. E então o que eu quero fazer é me livrar desses números e colocar manualmente em rótulos diferentes. Só vai fazer mais sentido para o leitor de gráficos. Então, se você se lembra mais cedo quando criamos nossos eixos, definimos manualmente os valores de ticks que dissemos usar o menor e o maior número, mais alto, e isso funciona muito bem. Essa é uma boa maneira de fazer isso para um monte de gráficos. Mas em vez de fazer isso usando a função de valores de ticks embutidos, vou voltar e definir os ticks. Se te lembrares disto quando te mostrei o Eixo, eu ia dizer, sabes que mais? Você zero carrapatos não colocar nenhum carrapato lá dentro. E então, se eu apertar atualizar meus rótulos desaparecem, então eu tenho que principalmente agora colocá-los em mim mesmo. Então a maneira rápida e fácil de fazer isso é eu vou apenas adicionar texto manualmente. Vou colocá-lo aqui depois de ter criado meus eixos antes de chamar minha atualização. Eu só vou dizer que você sabe o quê? Vamos adicionar texto ao nosso SPG. Não vou usar um nome de variável. Eu não vou fazer isso exatamente da maneira mais perfeita de sempre. Mas muito rapidamente, vamos adicionar algum texto e eu preciso desse texto para viver no eixo X. Eu vou usar esta escala porque eu queria ser colocado exatamente onde eu quero. Eu quero que você primeiro coloque este texto este primeiro pedaço de texto na expedição X um uh, usando a escala x que nós configuramos anteriormente. E eu quero usar essa variável X homens Max e eu quero colocar o valor mínimo em seu primeiro. Então a exposição é nesta escala para esse número mínimo, e então eu vou dizer para a oposição branca, vamos também usar, uh, vamos dizer a mesma coisa. Vou usar a escala y e estou acostumado. O porquê Min Max e I mesquita em usar o valor mínimo porque agora não se esqueça que somos o nosso mais baixo sábio ou na parte inferior do nosso gráfico, que é onde eu quero que este tick exista. E então eu digo que você tem que dizer o que o texto deve ler. E o jeito que você faz isso é aqui. Você sabe, se você adicionar um elemento de texto que está no texto, você realmente diz que o texto de ponto é igual a qualquer ou texto de ponto, parênteses, o que quer que seja. E então eu vou dizer para o valor mínimo, que é a baixa porcentagem de pessoas pobres, eu vou chamar isso de mais rico porque é realmente isso que estamos olhando aqui. Então, se eu voltar e atualizar, agora tenho as palavras mais ricas aqui porque é isso que isto é. É mais riqueza, Les pour nous, e isso faz mais sentido apenas para o nosso público. Mas é claro que tenho alguns problemas. Primeiro de tudo, o texto é um alinhamento perfeito com esta posição aqui, mas ele está alinhando com a borda esquerda do texto e correndo para fora da tela. Então o que eu quero fazer é centralizá-lo e também fazer isso parecer mais como rótulo da maneira que eu recomendaria que é menor cinza Menos contraste e mais simples, etc. Então eu vou fazer isso de duas maneiras diferentes. Primeiro vou consertar o posicionamento. Então eu queria ser centrado e D 3 foi incorporado nele. Bem, SPG realmente incorporou isso. Portanto, d três também faz o tributo AC âncora de texto. E assim eu posso definir a ancoragem desse texto para este o início, o meio ou o fim. E então se eu disser que é ele dito para começar o que é por padrão, isso significa que a linha esquerda para aquela posição que eu escolhi. Se eu disser final ital direito muito e dizendo meio, ele vai linha central. Então, se eu atualizar agora, está alinhado no centro, então isso é bom. É um bom começo. Mas agora eu quero mudar a formatação deste texto. E depois disso, vou movê-lo verticalmente também, porque não sei porquê. É o que eu sei porquê. Mas está sentado aqui em cima, enquanto eu queria estar aqui em baixo. Mas primeiro, vamos fazer a aparência real, então vou adicionar uma aula e já fizemos isso antes. Eu vou dizer atributo, classe e eu vou chamar essa etiqueta de acesso de classe. E agora, se eu voltar e adicionar a classe CSS para o rótulo de acesso, vou colocá-la ao lado desses caras. Então é fácil de encontrar Mais tarde, eu vou fazer a mesma luz, cor cinza de preenchimento. E eu quero usar uma fonte de um bom em Sarah Font. Eu vou dizer tamanho divertido de 10 pixels. Eu queria ser gentil e pequeno, você sabe, idealmente, eu quero me parecer com esse cara aqui, e isso é muito bom. Muito perto. Bom o suficiente por enquanto. Eu não vou ajustá-lo loucamente para esta lição, mas eu quero corrigir o fato de que ele está preso aqui em cima, certo? Está perfeitamente alinhado com o fundo da nossa balança, que é onde este tipo está posicionado, certo? O valor mais baixo vive exatamente lá, é por isso que está aqui em cima. Então você sabe, há algumas maneiras diferentes de fazer isso. Uma maneira simples, rápida e fácil é, vez de dizê-lo, colocá-lo na posição Y exatamente na parte inferior, o valor mínimo Faça isso. Além disso, digamos que nossa margem direita, porque isso vai empurrá-la para baixo. Lembre-se, nós empurramos tudo em 30 pixels. Se eu empurrar de volta 30 pixels, talvez seja exatamente onde eu queria estar. E eis que ISS. Agora, às vezes você tem que twittar isso um pouco. Às vezes, não deve perfeitamente exatamente onde você quer em alguns pixels, se você precisar . Mas você sabe, isso funciona muito bem. E eu quero fazer a mesma coisa. Mas para o rótulo mais esquerdo. Então vou duplicar, certo? Um texto de caneta. Agora, o posicionamento ex vai ser baseado no valor máximo, que neste caso, é o menos rico, certo? Eu queria estar na mesma posição. Eu ainda queria estar alinhado no centro e usar a mesma classe. Mas neste caso, o rótulo é menos rico, seguro, atualizado. E agora é exatamente como eu queria ser. Então eu espero que este curso em D três tenha sido útil e interessante. Realmente. Nós estamos apenas configurando algumas habilidades fundamentais, você sabe, vai ser relativamente simples agora para você, espero ir e procurar d três sintaxe e adicionar mais habilidades e recursos dois projetos que em que estás a trabalhar. Sabe, se você trabalhou com Jake, Jake Weary ou outros trabalhos reclamam no passado, muito disso provavelmente foi mais fácil para você aprender. Se não, você sabe, você aprendeu um monte de coisas importantes aqui, que você será capaz de replicar e aplicar a novas aprendizagens à medida que você avança com D 3. O que eu definitivamente recomendo é verificar d três Js dot org é o d três site. Vá para a página de exemplos e você encontrará infinitos exemplos de grandes D três projetos onde você poderá ver o código-fonte e brincar com ele. Alguns conceitos e o medo mais complexo e outros para ter certeza. Mas este deve ser um bom ponto de partida para você, Mike, eu disse, eu realmente espero que você tenha gostado do curso. Claro, espero que tenha aprendido muito e desejo-lhe feliz. D três ng indo para a frente