>> [Música tocando]
>> DAVID Chouinard: Eu son David Chouinard, e este é D3.
Benvido.
Imos aprender sobre D3 hoxe.
D3 é un framework JavaScript para a construción dunha alta calidade
Vistas interactivas para a web.
Cousas como o que estamos vendo ao redor de min,
imos aprender a facer os cousas, tipo de os fundamentos da mesma.
Pero vai ser legal.
Comecemos facer fotos bonitas.
Temos máis demos de perspectivas dispoñibles.
Imos facelo.
>> Act I, DOM manipulation-- imos para comezar inmediatamente facer cousas legais.
Primeiro de todo, á esquerda, que ten o código.
Á dereita, temos o resultado do noso código.
Imos pasar por iso.
>> Imos facer un círculo.
Que pensas disto?
svg.append circle-- nós só fixemos un círculo.
Non cre en min, non?
Non está alí.
>> Entón, o que nós fixemos aquí é, SVG é gráficos vectoriais escalabades.
Esta é a nosa forma de dicir ao navegador para facer gráficos vectoriais no navegador.
O que nós fixemos agora engádese un círculo para navegar.
>> A promesa é que o círculo require un pouco de atributos básicos
antes de que poidamos realmente velo.
Necesitamos dicir que a súa posición x, súa posición y, o seu radio.
Non dicir que nada diso, polo que non estamos a ver iso agora.
Pero imos dicir que cousas.
>> Entón, primeiro de todo, ten para dar o noso círculo dun nome.
Entón, imos chamalo de círculo.
Noso círculo ten un nome agora.
E imos dar-lle algúns atributos.
Como uns cx ía centrarse x, de xeito o centro da posición x.
Digamos que, de 200 a 200 píxeles.
>> Imos darlle un y 200 píxeles tamén.
E un r, un raio, de preto de 40 píxeles.
Agora imos ver.
Eu non podo soletrar.
>> Alí vai vostede.
Temos un círculo na posición 200 píxeles, 200 píxeles, radio de 40 píxeles.
Kind of legal, non?
Temos un círculo.
Si.
>> Entón non hai necesidade de seguir adiante.
Todos estes exemplos, todas o código que estou facendo hoxe
será proporcionada en liña no extremo baixo a forma de exemplos interactivos
con postos de control na cada acto, e así por diante.
>> Imos facer máis cousas.
Este círculo negro é realmente feo.
Sinto moito por este erro mensaxes logo alí.
Alí imos nós.
>> Imos darlle unha cor.
Como é isto?
Eu gusto de azul aceiro.
Ben, o noso círculo cambiou de cor.
Isto é óptimo.
Imos facelo semitransparente demasiado-- semitransparente.
>> Entón, eses son atributos estamos definindo no círculo.
O primeiro que fixemos é poñemos un círculo na páxina.
E entón estamos definindo unha morea de atributos.
Algunhas destas son requiridas, como CX, CY, e Radius.
E outros son opcionais.
>> Hai unha morea máis atributos.
Hai unha morea deles.
Por exemplo, poderíamos ter un vertedura, así como, un golpe de vermello.
Pero imos eliminar este.
Estamos de volta a un círculo, un círculo azul.
>> Entón, imos facer máis círculos.
Como é isto?
Imos facer outro círculo.
Iso é emocionante, non é?
>> Entón, dicir que eu só Copy-Pegado o que xa tiñamos.
Imos chamalo circle2.
E imos facer exactamente o mesmo e darlle
atributos, dada unha posición de 300 x.
Yay, temos dous círculos agora.
>> E, por suposto, poderiamos actualizar eses valores.
Podería poñelas 400, e agora se move.
E xa que é aburrido, imos eliminar-lo, polo que circle2.remove.
El xa se foi.
>> Entón, o que estamos facendo e é só moito, very-- este
é moi semellante ao que pode facer en jQuery, por exemplo.
Estamos só manipulando o DOM, é chamado.
Xa que ter oído esa palabra antes.
Estamos creando cousas, establecendo atributos de material, retirada de material.
>> Agora, aquí é onde fica interesante.
Entón, máis tarde no código, poderiamos aínda refírense ao círculo orixinal aquí.
Entón, imos axustar o seu atributo para caixa.
Digamos, a súa posición x 400.
E eu vou facer a transición que, por iso é obvio.
Alí imos nós.
>> Por iso, engadiu un círculo.
Nós axustar algúns atributos.
Nós engadimos outro círculo, eliminou.
E entón nós estamos modificando o círculo orixinal.
>> Pero aquí é onde fica moito máis interesante.
Non só podemos definir atributos só como valores, podemos dicir,
hey, círculo, ir á posición 200.
Tamén pode configurar-los como funcións.
>> Entón, en vez de dar 400 aquí, podemos facer un cálculo
on the fly para o que nós quero ese atributo para ser.
Entón é así que expresalo.
Nós dicimos, en vez de 400, déixeme darlle unha función no seu sitio.
E aquí, dentro desa función, podemos facer calquera cálculo tolo.
>> Poderiamos tomar o tempo e mirar para algunha outra cousa
e decidir de forma dinámica para o círculo que valor que queremos.
Que tal dar -lle un x posición aleatoria?
Entón é iso.
>> Entón, o que di é, por cada x, realizar esta función.
E o que estamos facendo é o cálculo algunhas cousas, unha horarios aleatorios o ancho
e retornando que.
Entón, cada vez que corremos, temos un círculo que vai a un lugar ao chou.
É ben legal.
Eu sinto como se eu puidese ollar no presente por pouco.
Estamos empezando a chegar algo interesante aquí.
Imos facer eses datos conducido agora.
Non hai datos aquí.
Imos cambiar isto.
>> Documents-- Act II, Fecha Driven Entón imos voltar a aquí.
E imos só se librar de circle2, porque estamos só engadindo e eliminando
lo.
Entón, nós realmente non precisa.
Necesitamos ser moito máis intelixente aquí.
Digamos, temos algúns datos de calquera tipo.
Un moment-- imos dicir, tivemos datos deste formulario.
Tivemos unha matriz, só unha morea de números.
Temos sete números, o que quere que estes cantidade represent--
en conta bancaria da xente, como como eles pesan, Deus sabe o que.
>> Estes son os números, e nós quere usar os nosos círculos
para representar os números de algunha maneira.
Queremos amarre nosa círculos a estas cifras.
Entón, o que nós facemos.
Digamos, queremos unha círculo para cada número.
Poderiamos facer o vello cousa que foron doing--
círculo de acréscimo e circle2 e Circle3.
Pero iso queda fóra de man, e hai unha morea de repetir a lóxica.
>> Entón, imos comezar máis intelixente con iso.
En vez de usar o círculo var svg.append que estabamos usando,
usaremos este pequeno bloque aquí.
Eu non quero ir en profundidade en que todas estas pezas fan.
E é unha especie de un tema avanzado.
E gustaríame poder.
>> Pero a principal cousa a recognize-- e vai ver é moi frecuentemente no código D3.
Este bloque de texto básico crea tantos círculos
xa que hai elementos de datos nesa matriz aquí.
Entón iso crea tantos círculos como hai elementos.
Vai crear connosco sete círculos.
E fai unha cousa moi, moi fundamental.
Entón, imos realizar iso.
Imos eliminar o noso outro círculo.
Nós só comentar esta parcialmente fóra e correr de novo.
>> Alí imos nós.
Así, o noso círculo aquí é un moito máis escuro, porque nós
ten sete círculos, un enriba do outro.
Nós acabamos de crear sete círculos, un cada para cada un destes elementos de datos.
Pero hai unha cousa fundamental que pasou con ese fragmento aquí.
>> É que os datos foron obrigados.
Así, cada un de estes elementos de datos,
10, 45, 105, foi conectado para un círculo en particular.
Polo tanto, estas non só creou unha morea de círculos
Pero os lazos estas dúas cousas xuntas.
>> E, no futuro, porque creamos aqueles círculos con esta función, D3
se eu lle der un círculo, pode darme os datos asociados.
Así, podemos preguntar D3.
Hey, D3, eu teño ese círculo.
Cal é a datos que o círculo ten?
E D3 nos diría 10 ou 45 ou 105.
>> Esas cousas están vinculados.
Isto é un concepto moi, moi fundamental.
Imos ollar para iso.
>> Así, a forma que pediría D3-- así iso é irrelevante para este,
pero confía en min mesmo.
Isto é como se require D3.
Hey, D3, dáme o primeiro círculo que pode atopar.
Déame o primeiro círculo que pode atopar.
E entón poderíamos preguntarnos D3, o que é os datos en que, como este, 10.
>> Entón, nós só pedimos D3, atopar-me o primeiro círculo que pode atopar.
O que hai de seus datos?
10, que é de feito o noso primeiro elemento de datos.
Poderiamos preguntar-la, hey, D3, atopar-nos o noso terceiro círculo.
105.
Por que iso é realmente importante?
>> Entón, aquí, eu mencionen que poderiamos usar funcións.
E eu mencionen que era unha cousa moi poderosa.
Así, non só pode facer cousas nosas funcións como facer algunha computación, por exemplo,
devolver un número aleatorio, que pode tamén facer as cousas a partir dos datos.
Isto é o que Fecha Driven documentos significan.
Iso é o que D3 representa.
>> Polo tanto, este x postition-- vez de só dicir, todos os círculos,
obter x posición 200, que podería darlle unha función.
E aquí, podemos facer algúns cálculos.
e d aquí queda no lugar para os datos.
Entón, cada vez que temos un círculo, basicamente,
D3 creará estes sete círculos.
E, a continuación, para cada
>> círculo, está indo a ir, hey, circle1 cal é a súa posición x.
Anteriormente, eran respondendo sempre 200.
Pero agora, cada vez pide D3 -Nos o que é a súa posición x,
que dará US-- temos ese círculo, por iso temos os datos.
Vai dar os datos e dicir: o que quere a exposición a ser,
con base neses datos.
>> Nós só devolver os datos reais.
Entón, se nós realizar este, isto dá datos dos EUA conducido documentos.
Estes medios están baseados en relación Position--
son bases como unha función dos datos.
>> Así, para o primeiro círculo, D3 pon un círculo.
E entón D3 nos pide, o que facer quere que a exposición sexa.
E acabamos de dicir, todo o que os datos son.
Fai a exposición 10.
>> A continuación, el pregunta, o que quere que o exposición a ser para o segundo círculo.
E nós respondemos, de 45 anos.
E nós, por suposto, pode facer algunha computación aquí.
Creo que eses círculos son unha especie de esmagado up.
>> Entón multiplique por 3, multiplicar datos por 3.
Noso círculo acaba de ser expandido para fóra.
O noso valor foi triplicado.
>> O círculo é realmente no límite, entón imos quizais tipo de compensalo la.
Digamos que, en 20.
Aquí vai.
>> Isto é a vista de datos.
É unha forma moi básica, pero este nos dá algúns consellos sobre os nosos datos.
Dinos que, por exemplo, nos teñen un pequeno grupo de elementos.
E nós temos unha gran outlier aquí.
Isto dános unha información sobre a distribución.
>> Se nós, por exemplo, para cambiar os datos a 150 aquí e actualización,
a visualización é alterada.
Este documento é dirixido datos.
>> Entón, por suposto, todos estes elementos, todos estes atributos aquí,
podemos utilizar unha función, non só os números, e non só
x e y posicións.
Así, podemos utilizar unha función para a cor.
Entón, imos facer o mesmo.
Nós imos darlle unha función.
>> E imos dicir, poderiamos condicións na nosa función.
Esta función pode ser cen longas colas.
Pode facer cousas moi, moi complicadas.
>> Entón, imos poñer unha declaración aquí.
Digamos que, se os nosos datos é menor de 50, que é un limiar
que estamos interesados en por algún motivo.
Imos facelo verde.
Se non, imos facelo vermello.
Como é isto?
Nice.
>> Polo tanto, a nosa visualización de datos está comezando para transmitir información máis interesante
en moitas canles.
Polo tanto, agora sabemos un pouco sobre a distribución.
E sabemos que hai algún tipo de cortados en 50 que estamos interesados.
Sabemos que hai dous puntos de datos debaixo dese limiar e a maioría deles
arriba.
>> Así, como un paso final, estes datos aquí, é moi raro ver este como aquel.
Entón imos só tirala a unha variable porque é máis limpo, como este.
E, entón, usar esta variable aquí.
É exactamente o mesmo.
É só un pouco de.
>> Logo Acto III, Scales-- Entón, un problema de dereito
aquí é que, se non mudarmos a nosa datos deste 200 value--
se cambia-lo para 400 ou algo así e de actualización,
entón este valor só fun fóra de campo.
Polo tanto, a nosa lóxica aquí de como facemos as veces 3
e 20, para espallalas-lo para fóra, e, a continuación, compensa-la un pouco é realmente pesado.
>> O que significan eses números?
Están só codificado alí.
E eles están moi ligados aos datos.
Queremos un documento de datos conducido.
Queremos un documento moi flexible, dado que os datos, se adapta a iso
e representa-lo.
>> O que necesitamos é, basicamente, nós ter ese intervalo de números 10.
45, 105.
E nós queremos mapear que saíu o ancho, o ancho total aquí.
Polo tanto, temos a gama de números que van de 0 a 100.
E nós temos este campus I vai 20-700, neste caso.
>> Nós medio que quere mapear que diante.
Queremos que escalar para arriba e entón compensa-la un pouco.
Acontece que o D3 ten estes.
Chama-se unha escala.
Entón, imos usalo.
>> O xeito que works-- vou escriba isto e, a continuación, explicar.
Esta é unha escala.
O que vai facer é, que vai mapear valores de 1 a 200 en 20 a 600.
Podemos comprobar iso.
Podemos ver iso aquí.
>> Entón, se eu alimento-lo 1-- un momento.
Dáme un segundo.
Debo escribir mal-lo.
Alí vai vostede.
Eu sinto moito por iso.
>> Entón, o que a escala vai facer é, vai levar un valor
e, a continuación, converter que, ampliar ese fóra, por iso
enche toda a gama que está pedindo.
Polo tanto, neste caso, se derme a el un, que vai mapear que saíu 20.
E se nós lle damos 200, é vai mapear en que a 600.
E nalgún lugar no medio, se logramos 100, é
vai estar nalgún lugar entre 20 e 600.
>> E, por suposto, agora iso é o que necesitamos eliminar eses codificado
cousas que temos alí.
Entón, o que queremos facer é ter os datos que estamos
dada, que os datos individuais elemento, e pasalo a escalar por primeira vez.
Entón escala vai escala-lo para arriba.
>> Bom-- Oh, temos un pequeno erro aquí.
Estamos perdendo datos.
Alí vai vostede.
E que se expande para fóra.
>> Isto nos dá a mesma resultado que tiñamos antes,
pero no canto de ter os codificado restricións.
E se o tamaño do noso cambios de lona, ​​por exemplo,
Se queremos ter iso máis 400 píxeles e que espreme a fóra,
podemos ter over-- podemos expandir-lo, ou nós
pode reducir esta marxe esquerda a algo máis ou menos que 20.
Estas cifras, estes codificado números agora ten sentido para nós.
>> E nós poderíamos facer moito máis cousas interesantes tamén.
Entón, en vez de ter un lineal escala, podemos querer rexistrar unha escala.
E iso daranos unha escala logarítmica.
>> Entón, agora a nosa escala, no canto de só mellore a fóra do intervalo,
está facendo cousas máis sofisticadas.
En vez de ter esta gama duro codificada, e en vez de ter que 600,
podemos querer usar só o ancho, así segundo o ancho 20 menos 40,
2 veces a marxe do outro lado.
E iso fai moito máis sentido alguén que se pode ollar o código.
>> Curiosamente, as escalas de obter moi, moi sofisticado.
Eles fan unha chea de cousas interesantes.
Así, as escalas non teñen necesariamente para operar só con números.
Imos facer unha escala de cores.
>> Polo tanto, a nosa gama podería ser-- noso dominio é de 1 a 200.
Esa é a cousa entrada.
Pero podemos querer mapear verde a vermello, por exemplo.
E agora, se pasar 1, imos obter verde.
Se derme 200, nós imos chegar vermello.
E se pasar algo entre os dous, que vai haber algún mix de que,
nalgún lugar no gradiente entre o verde eo vermello.
>> E, en vez de ter este tipo de lóxica torpe
temos aquí coa condicional alí mesmo,
poderiamos ter un something-- escala lineal entre eses.
Por iso, usaría a escala que acabamos creado, que chamamos cor.
E nós queremos darlle D, que é a nosa elemento de datos.
E alí imos nós.
Temos unha escala de cores.
>> Polo tanto, este é o mapeamento.
Así, a extrema esquerda é completamente verde.
A extrema dereita é completamente vermello.
E todo no medio é unha función d.
Temos unha interesante Vistas aquí.
Pero os nosos datos foi medio aburrido.
Veremos que poderiamos facer se tivemos datos máis interesantes.
>> Acto IV, Con Traballo Data-- o primeiro
imos querer facer para facer a visualización máis interesante
é mover os datos noutro lugar.
É moi pesado para ter os datos codificados aquí.
E, xeralmente, nós imos estar se pregunta outra persoa para os datos.
Estaremos quizais pedindo que o goberno, o Census Bureau, o que é o seu de datos
e, a continuación, trazando que é pedir algunha entidade de terceiros para obter algúns datos
e, a continuación, a construción dun visualización sobre iso.
>> Entón o primeiro que queremos facer é pasar isto para algún outro lugar.
Entón, eu estou indo a crear unha arquivar aquí chamado data.json.
JSON é o formato de datos.
Non precisa saber moito sobre iso.
E nós estamos indo a copiar o poucos datos que temos alí,
pegalo alí na súa totalidade, acceda de volta ao noso código de visualización
aquí, e empregue esta función aquí.
Non ten que saber os detalles.
Pero o que isto vai facer é, vai atopar o ficheiro,
buscala, e devolve-lo para nós.
Entón, o que iso fai é, que vai e obter o ficheiro data.json.
E, a continuación, todo o código que é recuadas dentro-- esencialmente,
todo o código temos há-- vontade realizar só cando chegamos os datos de volta.
E entón el vai realizar ese código cos datos que temos.
Grande, temos unha visualización que consulta
por algún código nalgún lugar outra, o que adoita
onde consulta de datos a partir dalgúns noutro lugar, o que é normalmente
como visualizacións traballar.
>> Pero quero volver para os datos.
Así, os datos fundamentalmente D3-- D3 consome datos que é unha lista de cousas.
D3 espera que os datos só ser unha lista das cousas, unha serie de cousas.
Non importa o que esas cousas son, por tanto, sempre que sexa unha matriz deles.
>> Entón, aquí, por exemplo, poderiamos de Claro que teñen valores de punto flotante.
Poderiamos ter negativos.
A D3 non me importa, tal como é unha lista de cousas.
>> Como as cousas interesantes que podería, tamén poderiamos
Ten unha lista de cadeas como esta.
Entón, estas son as titulares carmesim Peguei uns días.
E quizais podes atopar algunhas interesantes cousas sobre estes un titulares.
>> Entón, de novo, esta é unha lista de cousas.
A D3 non me importa.
Estes ocorrer de ser un string.
Nós cambiamos os nosos datos.
>> Imos volver á nosa vista.
Agora, a nosa vista espera a entrada a ser números.
Entón, nós imos ter para facer algúns cambios.
Así, por exemplo, en primeiro lugar, quizais queremos poñer eses círculos ao longo
pola lonxitude do título, o número de caracteres no título.
>> Entón, o que nós imos facer é-- cada vez que o noso función é chamada cunha corda,
imos descubrir que é lonxitude E a continuación, pasar isto para escala.
A cor, eu vou volver que a Blue Steel.
E alí imos nós.
Temos unha visualización titulares de carmesim.
>> Nosa escala é un pouco fóra.
Supoñamos que o máis longo Headline é de 100 caracteres,
de xeito que abranguen un pouco.
E nós temos unha visualización.
Así, parece que a maioría dos titulares son moi próximos uns dos outros,
en termos de liña de carácter.
Pero hai realmente destaca.
>> Poderiamos construír algunhas ferramentas explotar iso máis.
Pero cando estaba a traballar sobre iso, eu estaba curioso para saber se, nese conxunto de datos,
titulares con dous puntos neles sería maior.
I asume o farían.
>> Entón, imos descubrir.
Imos usar a cor canle, como fixemos antes,
para codificar algunha sobre se hai un colonos ou non.
Entón, imos empregar unha condicional novo.
Non ten que saber os pormenores deste,
pero é así que comprobar un cadea para un personaxe en particular
en JavaScript, de novo, non é relevante.
>> Pero, se non atopar un colon, imos voltar verde.
E se o facemos, imos voltar vermello.
Entón, de novo, titulares que teñen dous puntos será vermello.
Isto é o que esta means-- nice.
>> Así, parece que o meu hipótese é batido.
Hai só dous.
Nós só temos seis puntos de datos e só dous tiveron dous puntos.
Pero parece un pouco máis no extremo inferior, en realidade.
Headlines con dous puntos parecen ser xeralmente máis curto,
polo menos nos nosos datos set-- interesante.
>> Imos volver ao que aceiro azul e, a continuación, ver
o que podemos facer co mesmo datos máis interesantes.
Entón, de novo, eu mencionen que datos en D3 é unha lista de cousas.
Vimos números de moitos tipos.
Vimos cadeas.
Pero as cousas poden ser obxectos.
>> Poden ser cousas complicadas que inclúen unha morea de cousas.
Para dicir que de forma máis clara, na maioría dos casos, nós
quere construír todos os puntos de datos como máis complicado do que só un valor.
Se imaxina unha base de datos sobre alumnos,
pode haber un estudante nome, unha carteira de estudante,
e unha morea de cousas asociadas cun rexistro particular,
non só unha secuencia ou un número.
Entón, imos ollar para iso.
>> Este é un conxunto destes datos.
Este é un conxunto de datos de terremotos.
Entón, todo aquí na nosa lista ou matriz de cousas contén en si moitas cousas.
Así, cada punto de datos ten un magnitude e unha coordenada.
E coordina-se conter dúas cousas.
>> Así, cada día é agora moito máis complicado e moito máis interesante
e contén moito máis información interesantes.
Veremos que poderiamos construír a partir diso.
Retornando ao aquí, unha vez máis, usando nosa vista círculo histograma
nós construímos, imos ver se podemos construír unha ver a distribución magnitude
no noso conxunto de datos.
>> Entón, aquí, é o mesmo concepto.
Pero agora, d contén máis cousas.
d contén moitos elementos de datos.
Entón, nós temos d volta.
D3 dános d.
E nós respondemos por atopar a magnitude d e, a continuación, de paso, que a escala.
>> E entón debemos cambiar nosa escala, por suposto.
Entón magnitudes simplemente non facer ir moito máis do que 10.
De feito, nunca houbo un terremoto de magnitude 10.
Pero ese é o tipo do noso superior final, a parte superior do espectro.
>> Imos actualizar.
Bo, temos unha visualización.
É interesante note-- así hai dous puntos de datos que
son case exactamente por riba de cada outro, en termos de magnitude.
Ve iso pola opacidade que estamos a usar.
>> Temos datos xeográficos agora.
Temos latitudes e lonxitude.
Quizá poderiamos facer algo un moito máis interesante con iso.
Imos descubrir un pouco máis xeito interesante para ver
este máis complicado datos que temos acceso.
>> Act V, Mapping-- fundamentalmente, queremos poñer estes nun mapa.
Quero dicir, este é o lugar onde isto vai dar.
Queremos codificar información sobre o posición destas lecturas do terremoto,
así como a súa magnitude, porque temos iso agora.
Entendemos como consumir datos máis complicadas.
>> O primeiro que imos facer é crear un mapa, un mapa de fondo.
Vou pasar por isto moi rapidamente.
Este é o código complicado.
É máis un deses ingresos que realmente non
Ten que entender completamente a usa.
Pero este é o código.
Este código aquí crea un mapa.
>> Non imos entrar en detalles.
Pero superficialmente, o que fai é, el consulta o arquivo us.json, que
é un ficheiro de datos como a que tivemos antes.
É máis complexo, por suposto.
Pero, neste caso, todo, todos os puntos de datos é este estado
e ten unha lista de latitudes e lonxitude
que definen o polígono, esa forma, ese estado.
>> Entón, o que vai facer D3 é semellante ao que fixemos antes.
Vai pedir que e que se ligan a un elemento.
E non hai unha función que mapeará este elemento para fóra,
con base nas latitudes e lonxitude.
Pode ler máis sobre iso.
E eu recomendo.
>> Hai enlaces no final deste código posta.
E o código é comentado.
En hai enlaces a máis sobre este asunto.
Eu recomendo que buscalo.
Pero o que nos interesa é esta función de proxección.
Quero pasar por iso.
>> Primeiro de todo, deixe-me amosar vostede que, si, temos un mapa.
Mapas son legais.
Entón, imos ollar para este función de produción.
>> A proxección é moi como unha balanza, balanza de novo.
Entón, o que a produción de esta función de proxección
non é, poderiamos pasalo lonxitude e latitudes-- neste caso,
estes valores aquí son o LAT-Longs do edificio
estamos sentados dereito agora-- para proxección.
E proxección converterá que en xey valores de píxeles.
>> Entón, o que está facendo proxección é moi semellante á nosa escala.
É tomar nosas latitudes e lonxitude que representa todo un globo
e encollendo e dimensionamento que ata a praza que queremos,
que demos a el.
Neste caso, estamos pasando eses valores.
E iso está nos dando, así, que na pantalla significa 640 píxeles.
Esta pantalla enteira é de 700 píxeles ampla, de xeito que nos fai por aquí,
e 154 píxeles abaixo, que eu estimación é moi fermoso aquí.
>> Así, tendo estas-Longs lat, que representar algo en todo o mundo
e espremer e movendo-se que uns nos valores X e Y de píxeles dar,
esta é a primeira cousa que é feito neste código de cartografía.
E, a continuación, o resto do codificar os datos consome
e, a continuación, mapea eses LAT-Longs en algo na súa pantalla.
>> Pero imos usar esa proxección funcións, pois verifícase se
temos lat-Longs Longs tamén.
Mirando cara atrás, os nosos datos, temos latitudes e lonxitude
para cada observación.
Entón, imos usar proxección.
>> Entón, ollando para a nosa exposición, queremos que o noso exposition--
temos unha latitude e unha lonxitude.
Pero queremos que os valores de píxeles.
E ao parecer, temos exactamente o que want-- proxección.
Moi parecido nós usando a escala aquí,
agora estamos indo a usar a proxección e pasalo coordina.
Entón o primeiro estamos doing-- entón estamos
quedando d, que é un individuo datos elemento dun terremoto individuo
lectura.
O primeiro que facemos é obter as coordenadas.
Todo ben, nós temos as coordenadas.
>> A segunda cousa que facemos é pasar isto para a proxección.
Proxección converte esas coordenadas en valores de píxeles, x e y.
E entón o último que quero facer é só incorporarse o x,
que neste caso é o primeiro.
É a primeira das dúas cousas que son devoltos por proxección.
>> Nós imos facer o mesmo para y.
Mais en vez diso, imos volver o segundo elemento, o y.
Prepare-se para actualizar.
Ooh, carácter extra aqui-- agradable, temos
un documento dirixido datos que é ocultando o ficheiro JSON de obxectos,
facendo un mapa, e cambiando o atribúen, en relación aos datos
proxecto-lo no mapa.
Isto é realmente interesante.
Iso é legal.
>> Imos levalo ata un entalhe.
Quero dicir, nós temos dúas pezas de información con todos os puntos de datos.
Quero dicir, tres.
Temos as coordenadas, que é un x e y.
E nós temos a magnitude.
>> Necesitamos codificar magnitude de algunha maneira.
Temos unha morea de canles.
Podemos utilizar a cor.
Podemos usar raio.
Poderíamos usar opacidade.
Poderíamos usar moitas cousas no código.
Calquera destes atributos e moitos máis que non están listados aquí,
porque son opcionais, nós puidemos utilizado para codificar os datos, o accidente vascular cerebral
e todas esas cousas que eu xa mencionen.
>> Imos facer raio.
Creo que raio é o máis intuitivo.
Entón, de novo, imos substituír o hard-coded 40 e facer algúns cálculos.
Imos usar a nosa escala favorito de novo.
E nós estamos pasado d.
Pero non d porque queremos a magnitude d. d é só o punto de datos.
Nós imos pasar a magnitude na escala.
>> Imos tentar iso de novo.
Ooh, non funciona.
Por que non funciona?
>> Entón recorda que escala fai.
Vexamos escala de novo.
Mapas a escala de 1 a 10 sobre a 22 a 600, máis ou menos.
600 é enorme.
É por iso que estamos a recibir este.
>> Entón, nós queremos cambiar a nosa escala para algo máis razoable.
Digamos, queremos 0-60.
60 é grande, pero 10 terremotos son incriblemente raras.
En realidade, eles nunca aconteceu.
>> Entón, o que isto vai facer é, que vai levá- a magnitude que vai de 1 a 10
e mapea-la para expandir-lo para fóra.
E mapea-la para 0-60.
Imos actualizar.
>> Bo, temos unha visualización.
Isto é óptimo.
Estes son datos reais.
Vai notar, no meu pequeno xoguete exemplo, o maior terremoto
é ben encima de nós.
Pero é iso.
Temos unha visualización data impulsado que consome os datos
e dános realmente información interesantes.
Si, imos engadir un pouco de interactividade a el.
Eu mencionar que era a forza forte de D3.
>> Entón, aquí, para cada elemento, somos describindo unha morea de atributos.
Pero tamén podemos describir o que queremos pasar con elementos de interactividade.
Por exemplo, poderiamos describir o que ocorre cando o rato over.
E moi semellante que, que vou levar unha función,
moi semellante ao atributos que tiñamos antes,
onde nós facer algo para o elemento cando pasa o rato sobre el.
>> Entón o primeiro que necesitamos facer é seleccionar este elemento,
para atopalo, basicamente, no navegador.
e entón poderiamos definir un atributo a el.
Entón o que eu estou facendo aquí é que, cando pasamos o rato sobre algo, nós imos chegar ese elemento
e axuste súa opacidade de volta 1, completamente opaca.
Imos ver o que parece.
>> Parece que temos un punto e coma adicional aquí.
Entón, se nós pasar o rato sobre aquí, pasa a ser completo.
Pero agora, por suposto, fica chea, porque nós
ten que describir o que pasa cando eliminar o noso cursor.
Entón, imos facer exactamente isto en mouseout, en oposición a mouseover.
>> E nós imos axustar-la para o que tiñamos antes-- 0,5.
E agora, todos nós o tempo pairo, temos un círculo completo.
El nos axuda a ver o que nos estamos seleccionando esencialmente.
>> E agora imos facer este realmente grande.
Imos chamar este a datos reais.
Entón, imos pedir podería USGS sobre os seus datos.
Así, o Servizo Xeolóxico de Estados Unidos ten datos sobre terremotos.
Teñen unha API pública que é capaz para ser consumido en formato JSON.
Entón, imos facelo.
>> Entón, iso é un pouco de código que lígase a API USGS.
E hai un pouco de procesamento sobre el.
Iso non é relevante, pero simplifica-lo a un formato de datos simples como aquel
que tiñamos antes.
Entón, para me librar da nosa chamada para nosa data.json falso no ficheiro.
E en vez diso, eu estou chamando o USGS esencialmente.
>> Imos actualizar, agradable.
Estes son datos reais, da vida real dende esta semana para sismos.
Isto é realmente interesante.
Isto non é sorprendente para nós, pero hai
unha morea de terremotos en West Coast, en California.
Pero eu penso que era moi interesante que había tantos terremotos
en Alasca, e, ao parecer, aquí no Centro-Oeste.
Quero dicir, interesante, e nós somos bos.
Esa é a conclusión.
>> Pero, fundamentalmente, este é o que nos axuda a facer D3.
El nos axuda a levar os datos, se ligan para elementos no DOM,
e ter eses elementos cambiar como unha función dos datos,
ten eses atributos, todo diversos atributos dos elementos,
todo ser útiles para canles para transmitir información.
>> D3 é incrible poderoso biblioteca e sorprendentemente ben executado.
Isto é algo poderosa.
A visualización de datos é unha ferramenta incrible poderosa
para o transporte de persoas profundas insights que chega ao seu núcleo
e axuda-los a entender, en Desta forma profunda e intuitiva,
como os datos funciona e como datos cambia a nosa vida.