[REPRODUCCIÓN DE MÚSICA] 

DAVID CHOUINARD: Soy David Chouinard, y esto es D3. Bienvenido. Vamos a aprender sobre D3 hoy. D3 es un marco de JavaScript para la construcción de una alta calidad visualizaciones interactivas para la web. Cosas como lo que somos ver detrás de mí, vamos a aprender a hacer los cosas, clase de los fundamentos de la misma. Pero va a ser genial. Vamos a empezar hacer fotos bonitas. Tenemos más demos de perspectivas disponibles. Vamos a hacerlo. 

Acto I, DOM manipulation-- Vamos para comenzar de inmediato haciendo cosas interesantes. En primer lugar, a la izquierda, tenemos código. A la derecha, tenemos el resultado de nuestro código. Vamos a ir a través de él. 

Vamos a hacer un círculo. ¿Qué te parece? svg.append circle-- que acaba de hacer un círculo. Usted no me cree, ¿verdad? No está ahí. 

Así que lo que hicimos aquí es, SVG es gráficos vectoriales escalables. Esta es la manera en que decimos que el navegador hacer gráficos vectoriales del navegador. Lo que acabamos de hacer en este momento se añade un círculo para navegar. 

La promesa es que el círculo requiere un poco de atributos básicos antes de que realmente podemos verlo. Tenemos que decirle que su posición x, su posición y, su radio. No le dijimos que nada de eso, por lo que no estamos viendo ahora mismo. Pero vamos a decirle que eso. 

Así que en primer lugar, usted tiene para dar a nuestro círculo un nombre. Así que vamos a llamarlo círculo. Nuestro círculo tiene un nombre ahora. Y vamos a darle un par de atributos. ¿Qué hay de cx se centraría x, por lo que el centro de la posición x. Digamos, de 200 por 200 píxeles. 

Vamos a darle un año de 200 píxeles también. Y una r, un radio, de unos 40 píxeles. Ahora vamos a ver. Yo no puedo escribir. 

Hay que ir. Contamos con un círculo en la posición 200 píxeles, 200 píxeles, radio de 40 píxeles. Una especie de fresco, ¿no? Tenemos un círculo. Sí. 

Así que no hay necesidad de seguir a lo largo. Todos estos ejemplos, todas el código que estoy haciendo hoy será proporcionado en línea en el extremo en forma de ejemplos interactivos con puestos de control en cada acto, y así sucesivamente. 

Vamos a hacer más cosas. Este círculo negro es realmente feo. Lo siento por ese error mensajes allí mismo. Hay que ir. 

Vamos a darle un color. ¿Cómo es eso? Me gusta azul acero. Bueno, nuestro círculo cambió de color. Eso es genial. Vamos a hacer que semitransparente también-- semitransparente. 

Así que estos son atributos estamos definiendo en el círculo. Lo primero que hicimos es ponemos un círculo en la página. Y luego estamos definiendo un grupo de atributos. Algunos de éstos están obligados, como CX, CY, y Radio. Y otros son opcionales. 

Hay muchos más atributos. Hay un montón de ellos. Por ejemplo, podríamos tener un accidente cerebrovascular, así, un golpe de rojo. Pero vamos a quitar eso. Estamos de vuelta a un círculo, un círculo azul. 

Así que vamos a hacer más círculos. ¿Cómo es eso? Vamos a hacer otro círculo. Esto es emocionante, ¿no? 

Así que decir que me acaba de pegar-Copy lo que ya teníamos. Llamémoslo circle2. Y vamos a hacer la exacta lo mismo y darle atributos, dada una posición x del 300. Yay, tenemos dos círculos ahora. 

Y, por supuesto, podríamos actualizar estos valores. Yo podría ponerlo a 400, y ahora se mueve. Y ya que es molesto, vamos a y eliminar, por lo circle2.remove. Ahora se ha ido. 

Así que lo que estamos haciendo y es muy, very-- este es muy similar a lo que podría hacer en jQuery, por ejemplo. Sólo estamos manipulando el DOM, se llama. Usted puede haber oído esa palabra antes. Estamos creando cosas, el establecimiento de atributos en cosas, la eliminación de la materia. 

Ahora, aquí es donde se pone interesante. Así que más adelante en el código, que todavía podía consulte el círculo original aquí. Así que vamos a restablecer su atributo de cx. Digamos, su posición x 400. Y yo voy a la transición que, por lo que es obvio. Hay que ir. 

Así que añadimos un círculo. Establecimos algunos atributos. Agregamos otro círculo, la eliminamos. Y luego estamos modificando el círculo original. 

Pero aquí es donde se pone mucho más interesante. No sólo podemos establecer atributos como se acaba de valores, podemos decir, bueno, círculo, ir a la posición 200. También podemos establecer como funciones. 

Así que en lugar de dar 400 aquí, podemos hacer un poco de cálculo sobre la marcha por lo que Quiero ese atributo sea. Así que esta es la forma en que te expresas eso. Decimos, en lugar de 400, me dejó darle una función en lugar. Y aquí, en el interior de esta función, podemos hacer cualquier cálculo loco. 

Podríamos tomar el tiempo y mirar a otra cosa y decidir dinámicamente para el círculo que valor que queremos. ¿Qué tal si sólo damos una posición aleatoria x? Así que eso es todo. 

Así que lo que dice es, por cada x, ejecutan esta función. Y lo que estamos haciendo es calcular algunas cosas, unas veces al azar el ancho y devolver eso. Así que cada vez que nos encontramos, tenemos una círculo que va a un lugar al azar. Es una especie de fresco. Me siento como si pudiera mirar en esto por un poco. Estamos empezando a llegar a algo interesante aquí. Vamos a hacer estos datos impulsada ahora. No hay datos aquí. Vamos a cambiar eso. 

Documents-- acto II, Data Driven Así que vamos a volver a aquí. Y vamos a deshacernos de circle2, porque sólo estamos agregando y quitando ella. Así que realmente no lo necesitamos. Tenemos que ser mucho más inteligente aquí. Digamos, tenemos algunos datos de algún tipo. Uno moment-- digamos, teníamos los datos de este formulario. Tuvimos una matriz, sólo un montón de números. Tenemos siete números aquí, cualesquiera que éstas cantidad represent-- en la cuenta bancaria de la gente, cómo mucho que pesan, dios sabe qué. 

Estos son los números, y nos que desee utilizar nuestros círculos para representar los números de alguna manera. Queremos vincular nuestra círculos a esos números. Así que lo que hacemos. Digamos, queremos un círculo para cada número. Podríamos hacer el viejo cosa que nos doing-- append círculo y circle2 y circle3. Pero esto va de las manos, y hay un montón de repetir la lógica. 

Así que vayamos más inteligente con eso. En lugar de utilizar el círculo var svg.append que estábamos usando, vamos a utilizar este pequeño bloque de aquí. Yo no quiero ir a fondo en lo que hacen todas estas partes. Y es algo de un tema avanzado. Y me gustaría poder hacerlo. 

Pero la clave para recognize-- y verás que es muy a menudo en código D3. Este bloque de texto básico crea tantos círculos ya que hay elementos de datos en esta serie aquí. Así como esto crea muchos círculos, ya que hay elementos. Se va a crear nosotros siete círculos. Y lo hace de una cosa muy, muy clave. Así que vamos a correr eso. Vamos a quitar nuestro otro círculo. Vamos a comentar este separarse y correr de nuevo. 

Hay que ir. Así que nuestro círculo que aquí hay una mucho más oscuro, porque tienen siete círculos, uno en la parte superior de la otra. Acabamos de crear siete círculos, uno cada uno para cada uno de estos elementos de datos. Pero hay una cosa clave que sucedió con este fragmento aquí. 

Es que los datos fueron obligados. Así que cada uno de esos elementos de datos, 10, 45, 105, estaba obligado a un círculo particular. Así que estos no sólo crearon un montón de círculos pero corbatas esas dos cosas juntas. 

Y en el futuro, porque hemos creado esos círculos con esta función D3, si te doy un círculo, se puede dame los datos asociados con él. Así que podemos pedir D3. Hey, D3, tengo este círculo. ¿Cuál es la información que el círculo tiene? Y D3 nos diría 10 o 45 o 105. 

Estas cosas están limitadas. Ese es un concepto muy, muy fundamental. Echemos un vistazo a eso. 

Así que la forma en que le preguntaría D3-- así esto es irrelevante para esto, pero sólo confía en mí en él. Así es como nos preguntamos D3. Hey, D3, dame la primera círculo que se puede encontrar. Dame el primer círculo que puedes encontrar. Y entonces podríamos preguntar D3, lo que es los datos en que, de esta manera, 10. 

Así que sólo pedimos D3, encontrarme el primer círculo que puedes encontrar. ¿Qué es sus datos? 10, que es de hecho nuestra primer elemento de datos. Podríamos pedirle que, hey, D3, nosotros encontrar nuestro tercer círculo. 105. ¿Por qué es realmente importante? 

Así que aquí, he mencionado que podíamos usar las funciones. Y mencioné que era una cosa muy poderosa. Así que no sólo pueden hacer nuestras funciones cosas como hacer algún cálculo, por ejemplo, devolver un número aleatorio, puede también hacer cosas basadas en los datos. Esto es lo que significan los documentos de datos impulsadas. Eso es lo D3 representa. 

Así que esta vez x postition-- de simplemente decir, todos los círculos, obtener la posición x 200, podría darle una función. Y aquí, podemos hacer algunos cálculos. y d aquí se encuentra en su lugar para los datos. Así que cada vez que tenemos un círculo, en el fondo, D3 creará estos siete círculos. Y a continuación, para cada 

círculo, se va a ir, hey, circle1 ¿cuál es tu posición x. Anteriormente, estábamos siempre contestando 200. Pero ahora, cada vez que pide D3 nosotros cuál es tu posición x, que va a dar a nosotros-- tenemos ese círculo, lo que tenemos los datos. Se va a darnos los datos y decir: ¿qué quieres que la exposición sea, sobre la base de esos datos. 

Vamos a volver a los datos reales. Así que si corremos esto, esto da datos nos impulsados ​​documentos. Estos círculos se basan en relación Position-- son bases como una función de los datos. 

Así que para el primer círculo, D3 pone un círculo. Y entonces D3 nos pregunta, ¿qué hacer desea que la exposición sea. Y acabamos de decir, lo que será la información. Haga la exposición 10. 

Entonces se pregunta, ¿qué es lo que desea que el exposición sea para el segundo círculo. Y nosotros respondemos: 45. Y, por supuesto, puede hacer algún cálculo aquí. Me parece que esos círculos son un poco aplastado hacia arriba. 

Así se multiplica por 3, multiplicar por 3 los datos. Nuestro círculo acaba de ampliarse a cabo. Nuestro valor se triplicó. 

El círculo es realmente en el borde, así que vamos a tal tipo de compensarlo. Digamos, por 20. Aquí tienes. 

Esta es una visualización de datos. Es una pregunta muy básica, pero esto nos da una idea de nuestros datos. Nos dice que, por ejemplo, que tener un pequeño grupo de elementos. Y tenemos un gran valor atípico aquí. Esto nos da un poco de información acerca de la distribución. 

Si tuviéramos que, por ejemplo, para cambiar los datos a 150 aquí y actualización, se cambia nuestra visualización. En este documento se utiliza la información. 

Así que por supuesto, todos estos elementos, todos estos atributos aquí, podemos utilizar una función, no sólo los números, no sólo las posiciones x e y. Así que podemos utilizar una función para el color. Así que vamos a hacer lo mismo. Vamos a darle una función. 

Y digamos, podríamos tener condicionales en nuestra función. Esta función puede ser cientos de líneas largas. Se puede hacer cosas muy, muy complicados. 

Así que vamos a poner una sentencia if aquí. Digamos, si nuestros datos son menos de 50, eso es cierto umbral que nos interesa en por alguna razón. Hagámoslo verde. De lo contrario, vamos a hacer que el rojo. ¿Cómo es eso? Niza. 

Así que nuestra visualización de datos está comenzando para transmitir la información más interesante en muchos canales. Así que ahora sabemos un poco acerca de la distribución. Y sabemos que hay algún tipo de cortado a 50 que nos interesa. Sabemos que hay dos puntos de datos por debajo de ese umbral y la mayoría de ellos anteriormente. 

Así como un paso final, estos datos aquí, es muy raro ver este así. Así que vamos a moverlo a una variable porque eso es más limpio, como este. Y luego usamos esa variable aquí. Es exactamente lo mismo. Es sólo un poco más limpia. 

El siguiente, acto III, Scales-- Así que un problema de derecho aquí es, si cambiamos nuestra datos en esta 200 value-- si cambiamos a 400 o algo y actualización, entonces este valor sólo se fue fuera de la pantalla. Así que nuestra lógica aquí de la forma en que hacemos las veces 3 y 20, para extenderlo hacia fuera y después compensar un poco es muy torpe. 

¿Qué significan esos números? Sólo están codificado allí. Y están muy ligados a los datos. Queremos un documento de datos impulsada. Queremos un documento muy flexible, que los datos dados, se adapta a ella y lo representa. 

Lo que básicamente necesitamos es que tener este rango de números 10. 45, 105. Y queremos mapear que salir a el ancho, el ancho completo aquí. Así que tenemos la gama de números que van de 0 a 100. Y nosotros tenemos este campus que va 20 a 700, en este caso. 

Es como que queremos mapear que en. Queremos que escalar y luego compensarlo un poco. Resulta que D3 tiene estos. Se llama una escala. Así que vamos a utilizarlo. 

La forma en que works-- voy a escribir esto y luego explicarlo. Esta es una escala. Lo que hará es, será trazar los valores de 1 a 200 sobre a 20 a 600. Podemos comprobar que. Podemos ver que aquí. 

Así que si me alimento que 1-- un momento. Dame un segundo. Debo haber escrito mal ella. Hay que ir. Lo siento por eso. 

Entonces, ¿qué va a hacer una escala es, tomará un valor y luego convertir ese, ampliar eso, por lo que llena toda la gama que está pidiendo. Así que en este caso, si le damos una, que va a asignar que fuera sobre 20. Y si le damos 200, es va a asignar que a 600. Y en algún lugar en el medio, si conseguimos 100, es va a estar en algún lugar entre 20 y 600. 

Y, por supuesto, ahora esto es lo que tenemos que eliminar esos cifrados duros cosas que tienen allí. Así que lo que queremos hacer es tomar los datos que estamos dado, que los datos individuo elemento, y pasarlo a escala primero. Así balanza ampliarlo. 

Bueno-- Oh, tenemos un pequeño error aquí. Nos faltan datos. Hay que ir. Y que se expande hacia fuera. 

Eso nos da la misma resultado que teníamos antes, pero en lugar de tener las codificado limitaciones. Y si el tamaño de nuestra cambios de lona, ​​por ejemplo, si queremos tener esto sobre 400 píxeles y que aplasta a cabo, podemos tenerlo over-- podemos ampliar, o hacemos puede reducir este margen izquierda a algo menos o más de 20. Estos números, éstos codificados números ahora tienen sentido para nosotros. 

Y podríamos hacer mucho más cosas interesantes también. Así que en lugar de tener un lineal escala, que puede ser que desee registrar una escala. Y eso nos dará una escala logarítmica. 

Así que ahora nuestra escala, en lugar de sólo la expansión fuera de ese rango, que está haciendo las cosas más sofisticadas. En lugar de tener este rango duro codificada, y en lugar de tener que 600, lo que se quiere sólo tiene que utilizar el ancho, por lo que desde el 20 a la anchura de menos de 40 años, 2 veces el margen en el otro lado. Y esto tiene mucho más sentido alguien que pueda mirar el código. 

Curiosamente, las escalas quedan muy, muy sofisticado también. Ellos hacen un montón de cosas interesantes. Así escalas no tienen necesariamente para operar sólo con números. Vamos a hacer una escala de colores. 

Así que nuestra gama podría ser: nuestro dominio es de 1 a 200. Esa es la cosa entrada. Pero lo que se quiere mapear desde verde a rojo, por ejemplo. Y ahora, si nos pasamos 1, vamos a conseguir verde. Si le damos 200, nos pondremos rojo. Y si le pasamos algo intermedio, que va a ser un poco de mezcla de eso, en algún lugar en el gradiente entre verde y rojo. 

Y en lugar de tener este tipo de lógica torpe tenemos aquí con la condicional allí mismo, podríamos tener un algo-- escala lineal entre aquellos. Así que usaríamos la escala que acabamos de creado, lo que llamamos color. Y nos gustaría darle D, que es nuestro elemento de datos. Y ahí vamos. Contamos con una escala de colores. 

Así que esta es la cartografía. Así que el extremo izquierdo es completamente verde. La extrema derecha es completamente rojo. Y todo lo demás es una función de d. Tenemos una interesante visualizaciones aquí. Pero nuestros datos fue un poco aburrido. Vamos a ver lo que podemos hacer si teníamos los datos más interesantes. 

Acto IV, que trabaja con el Data-- lo primero vamos a querer hacer para que nuestra visualización más interesante es para mover los datos a otro lugar. Es muy torpe para tener los datos no modificables aquí. Y, en general, vamos a estar pidiendo alguien más para los datos. Vamos a estar tal vez pidiendo al gobierno, la Oficina del Censo, ¿cuál es tu datos y luego el trazado que o pidiendo una entidad de terceros para algunos datos y luego la construcción de una visualización en eso. 

Así que lo primero que queremos hacer es trasladar eso a otro lugar. Así que voy a crear un presentar aquí llamado data.json. JSON es el formato de datos. Usted no tiene que saber mucho sobre eso. Y vamos a copiar el pocos datos que tenemos allí, pegarla allí textualmente, vaya de nuevo a nuestro código de visualización aquí, y utilizar esta función aquí. Usted no tiene que saber los detalles. Pero lo que esto va a hacer es, encontrará ese archivo, traérsela, y devolverlo a nosotros. Así que lo que hace es, va y obtener el archivo data.json. Y entonces todo el código que es sangría dentro-- esencialmente, todo el código que tener allí-- voluntad ejecute sólo cuando conseguimos los datos de nuevo. Y entonces va a funcionar que código con los datos que tenemos. Grande, tenemos una visualización que consulta por algún código en algún lugar otra cosa, que es generalmente donde algunos datos de consulta en otro lugar, que es generalmente cómo funcionan las visualizaciones. 

Pero quiero volver a los datos. Así que los datos fundamentalmente en D3-- D3 consume datos que hay una lista de las cosas. D3 espera que los datos que acaba de ser una lista de las cosas, una serie de cosas. No importa cuáles son esas cosas son, en tanto que es un conjunto de ellos. 

Así que aquí, por ejemplo, podríamos de Por supuesto haber valores de punto flotante. Podríamos tener los negativos. D3 no le importa, siempre y ya que es una lista de las cosas. 

Como las cosas interesantes que podría tener, también podría tener una lista de cadenas como esas. Así que estos son los titulares de Crimson Cogí hace unos días. Y tal vez usted puede encontrar algunos interesantes cosas de estos a los titulares. 

Así que de nuevo, esta es una lista de las cosas. D3 no le importa. Estos resultan ser una cadena. Hemos cambiado nuestros datos. 

Volvamos a nuestra visualización. Ahora, nuestro visualización espera la entrada a ser números. Así que vamos a tener hacer algunos cambios. Así, por ejemplo, en primer lugar, tal vez queremos poner estos círculos a lo largo por la longitud de la titular, la número de caracteres en el título. 

Entonces, ¿qué vamos a hacer es-- cada vez que nuestro función es llamada con una cadena, vamos a encontrar es la longitud Y luego pasa que a escala. El color, voy a volver que a azul acero. Y ahí vamos. Tenemos una visualización titulares de carmesí. 

Nuestra escala es un poco apagado. Vamos a suponer que el más largo título es de 100 caracteres, por lo que abarcan un poco. Y tenemos una visualización. Así que parece que la mayoría de los titulares son bastante próximos entre sí, en términos de línea de carácter. Pero uno que realmente se destaca. 

Podríamos construir algunas herramientas explorar que más. Pero cuando yo estaba trabajando en esto, yo estaba curiosidad por saber si, en este conjunto de datos, titulares con dos puntos en ellos sería más largo. I asume que lo harían. 

Así que vamos a averiguar. Vamos a usar el color canal como lo hicimos antes, para codificar alguna acerca de si hay dos puntos o no. Así que vamos a utilizar un condicional de nuevo. Usted no tiene que saber los detalles de esta, pero así es como comprobamos una cadena para un personaje en particular en JavaScript, de nuevo, no es relevante. 

Pero si no encontramos un colon, volveremos verde. Y si lo hacemos, vamos a regresar rojo. Así que de nuevo, titulares que haber dos puntos será de color rojo. Esto es lo que este significa: agradable. 

Así que parece que mi hipótesis es golpeado. Sólo hay dos. Sólo tenemos seis puntos de datos y sólo dos tenían dos puntos. Pero parece un poco más en el extremo inferior, de hecho. Titulares con dos puntos parecen generalmente a ser más corto, al menos en nuestros datos definido-- interesante. 

Volvamos a que azul acero y luego ver lo que podemos hacer con aún los datos más interesantes. Así que de nuevo, he mencionado que datos en D3 es una lista de las cosas. Hemos visto los números de muchos tipos. Hemos visto cuerdas. Pero las cosas también pueden ser objetos. 

Pueden ser cosas complicadas que incluyen un montón de cosas. Decir que con mayor claridad, en la mayoría de los casos, quiere construir cada punto de datos como más complicado que un solo valor. Si usted se imagina un base de datos sobre los estudiantes, podría ser un estudiante nombre, una identificación de estudiante, y un montón de cosas asociada con un registro en particular, no sólo una cadena o un número. Así que echemos un vistazo a eso. 

Se trata de un conjunto de tales datos. Se trata de un conjunto de datos sobre los terremotos. Así que todo lo que aquí en nuestra lista o matriz de las cosas en sí contiene muchas cosas. Así que cada punto de datos tiene una magnitud y una coordenada. Y coordina a sí mismos contener dos cosas. 

Así que cada día es ahora mucho más complicado y mucho más interesante y contiene mucho más información interesante. Vamos a ver que podíamos construir fuera de eso. Volviendo de nuevo a aquí, de nuevo, usando nuestra visualización círculo histograma hemos construido, vamos a ver si podemos construir un la visualización de la distribución de magnitud en nuestro conjunto de datos. 

Así que aquí, es el mismo concepto. Pero ahora, d contiene más cosas. d contiene muchos elementos de datos. Así que visten D espalda. D3 nos da d. Y nosotros respondemos al encontrar la magnitud de d y luego paso, que a escala. 

Y entonces tenemos que cambiar nuestra escala, por supuesto. Así magnitudes simplemente no lo hacen ir mucho más de 10. En realidad, nunca ha habido un terremoto de magnitud 10. Pero eso es algo de nuestra parte superior final, nuestro espectro superior. 

Vamos a refrescar. Niza, tenemos una visualización. Es interesante lo note-- hay dos puntos de datos que son casi exactamente en la parte superior de cada otro, en términos de magnitud. Esto se ve por la opacidad que estamos usando. 

Tenemos datos geográficos ahora. Tenemos latitudes y longitud. Tal vez podríamos hacer algo un mucho más interesante con eso. Vamos a ver un poco más interesante forma de visualizar esta más complicado datos que tenemos acceso. 

Acto V, Mapping-- fundamentalmente, queremos poner éstos en un mapa. Quiero decir, aquí es donde va esto. Queremos para codificar información sobre el posición de estas lecturas del terremoto, así como su magnitud, porque tenemos que ahora. Entendemos cómo consumir datos más complicados. 

Lo primero que vamos a hacer es crear un mapa, un mapa de fondo. Voy a ir a través de esto muy rápidamente. Este es el código complicado. Es otro de esos recetas que realmente no tiene que entender completamente para que usted utilice. Pero esto es código. Este código aquí crea un mapa. 

No vamos a entrar en detalle. Pero por encima, lo que hace es, se consulta este archivo us.json, que es un archivo de datos como la que teníamos antes. Es más complejo, por supuesto. Pero en este caso, todo, cada punto de datos es este estado y tiene una lista de latitudes y longitud que definen el polígono, esa forma, ese estado. 

Entonces, ¿qué va a hacer D3 es similar a lo que hicimos antes. Se solicitará que y obligar a que a un elemento. Y hay una función que trazará un mapa de ese elemento fuera, basado en las latitudes y longitud. Puedes leer más sobre esto. Y lo recomiendo. 

Hay enlaces en la parte final de este código publicada. Y se comenta el código. En hay enlaces para más adelante esto. Te recomiendo que mires para arriba. Pero lo que nos importa es esta función de proyección. Quiero pasar por eso. 

En primer lugar, déjame mostrarte que, sí, tenemos un mapa. Los mapas son cool. Así que echemos un vistazo a esta función de producción. 

La proyección es mucho como una balanza, escalas de nuevo. Así que lo que la producción de esta función de proyección hace es, podríamos pasarlo longitud y latitudes-- en este caso, estos valores aquí son la lat-longs del edificio estamos sentados en la derecha ahora-- a la proyección. Y la proyección convertirá que en los valores de x e y de píxeles. 

Entonces, ¿qué está haciendo la proyección es muy similar a nuestra escala. Se trata de tomar nuestras latitudes y la longitud que representa todo un globo y la reducción y dimensionamiento que a la plaza que queremos, que le hemos dado. En este caso, estamos pasando estos valores. Y nos está dando, así, que en la pantalla significa 640 píxeles. Toda esta pantalla es 700 píxeles de ancho, por lo que nos hace por aquí, y 154 píxeles hacia abajo, que yo estimación es más o menos aquí. 

Así que teniendo esos lat-longs, que representar algo en todo el mundo y aplastando y que se mueve y todo nos valores X e Y de píxeles dar, esta es la primera cosa que es hecho en este código de correspondencia. Y luego el resto de la código consume los datos y luego esos mapas lat-longs con algo en su pantalla. 

Pero vamos a utilizar esta proyección funciones, porque resulta que tenemos lat-largos largos también. Mirando hacia atrás en nuestros datos, tenemos latitudes y coordenadas de longitud para cada observación. Así que vamos a utilizar la proyección. 

Así que buscando en nuestra exposición, queremos que nuestro exposition-- tenemos una latitud y una longitud. Pero queremos que los valores de píxeles. Y resulta que, tenemos exactamente lo que want-- proyección. Muy parecido estábamos utilizando la escala de aquí, ahora vamos a utilizar proyección y pasarlo coordina. Así que lo primero estamos doing-- así que estamos conseguir d, que es una de datos individual elemento de un terremoto individuo la lectura. Lo primero que hacemos es conseguir las coordenadas. Muy bien, tenemos las coordenadas. 

La segunda cosa que hacemos es sucedió que a la proyección. Proyección convierte esas coordenadas en valores de píxel, x e y. Y luego la última cosa que quiero hacer es obtener la x, que este caso es el primero. Es la primera de las dos cosas que son devueltos por proyección. 

Nosotros haremos lo mismo para y. Pero en cambio, vamos a regresar el segundo elemento, la y. ¡Prepárate para refrescar. Ooh, personaje extra aquí-- agradable, tenemos un documento impulsado datos que es ocultar este archivo JSON de los objetos, hacer un mapa, y cambiando la atributo en relación a los datos proyectarla en un mapa. Esto es realmente interesante. Esto es genial. 

Tomemos a un nivel superior. Quiero decir, tenemos dos piezas de información con cada punto de datos. Quiero decir, tres. Tenemos las coordenadas, que es un x e y. Y tenemos la magnitud. 

Necesitamos codificar magnitud de alguna manera. Tenemos una gran cantidad de canales. Podemos utilizar el color. Podemos usar el radio. Podríamos utilizar la opacidad. Podríamos usar muchas cosas en el código. Cualquiera de estos atributos y muchos más que no están en la lista, , porque son opcionales, podríamos utilizar para codificar estos datos, el accidente cerebrovascular y todas estas cosas que he mencionado. 

Vamos a hacer radio. Creo radio es el más intuitivo. Así que de nuevo, se lo cambiaremos que codificamos- 40 y hacer algunos cálculos. Usaremos nuestra escala favorito. Y estamos más allá d. Pero no d porque queremos que la magnitud de d. d es sólo el punto de datos. Pasaremos la magnitud a escala. 

Vamos a intentarlo de nuevo. Ooh, que no funciona. ¿Por qué no funciona? 

Así que recuerda lo que hace escala. Echemos un vistazo a la escala de nuevo. Mapas a escala de 1 a 10 sobre al 22 a 600, más o menos. 600 es enorme. Es por esto que estamos recibiendo este. 

Así que queremos cambiar nuestra escala a algo más razonable. Digamos, queremos 0-60. 60 es grande, pero 10 terremotos son increíblemente raro. De hecho, nunca han sucedido. 

Así que lo que esto va a hacer es, que va a tomar nuestra magnitud que va de 1 a 10 y asignarla a expandirlo a cabo. Y asignarla a 0 a 60. Vamos a refrescar. 

Niza, tenemos una visualización. Esto es muy bueno. Se trata de datos reales. Se dará cuenta, en mi pequeño juguete ejemplo, el terremoto más grande es justo encima de nosotros. Pero eso es todo. Tenemos una visualización fecha impulsada que consume los datos y nos da realmente información interesante. Sí, vamos a añadir un poco interactividad a ella. Mencioné que era la fuerza fuerte de D3. 

Así que aquí, para cada elemento, estamos que describe un grupo de atributos. Pero también podemos describir lo que queremos a pasar con elementos de interactividad. Por ejemplo, podríamos describir lo que sucede cuando el cursor sobre. Y muy similar que, Eso tomará una función, muy similar a la atributos que teníamos antes, donde hacemos algo al elemento cuando pasa sobre ella. 

Así que lo primero que tenemos que hacer es seleccionar ese elemento, para encontrarlo, básicamente, en el navegador. y entonces podríamos establecer un atributo a la misma. Así que lo que estoy haciendo aquí es, cuando pasemos por por algo, nos pondremos ese elemento a continuación, establezca su opacidad espalda a 1, hasta completamente opaca. Vamos a ver lo que parece. 

Parece ser que tenemos una punto y coma adicional aquí. Así que si pasemos por aquí, que se llena. Pero ahora, por supuesto, pensión completa, ya que tiene que describir lo que sucede Cuando se extrae la nuestra cursor. Así que vamos a hacer exactamente eso en mouseout, a diferencia de mouseover. 

Y vamos a restablecer a lo que teníamos antes-- 0.5. Y ahora, cada vez que vuelo estacionario, obtenemos un círculo completo. Nos ayuda a ver lo que estamos seleccionando esencialmente. 

Y ahora vamos a hacer esto realmente genial. Vamos a conectar este a datos reales. Preguntemos entonces podría USGS sobre sus datos. Así que el Servicio Geológico de EE.UU. tiene datos sobre terremotos. Tienen una API pública que es capaz para ser consumido en formato JSON. Así que vamos a hacer eso. 

Así que esto es un poco de código que se conecta a la API de USGS. Y hay un poco de procesamiento en él. Esto no es relevante, pero lo simplifica a un formato de datos simple como la que se que teníamos antes. Así que me deshago de nuestro llamado a nuestra data.json falso en el archivo. Y en cambio, estoy llamando el USGS esencialmente. 

Vamos a refrescar, agradable. Esto es, los datos reales de la vida real de esta semana para los terremotos. Esto es realmente interesante. Esto no es sorprendente para nosotros, pero hay una gran cantidad de terremotos en el Costa Oeste en California. Pero pensé que era muy interesante que había tantos terremotos en Alaska, y al parecer, aquí en el Medio Oeste. Quiero decir, interesante, y estamos bien. Esa es la conclusión. 

Pero fundamentalmente, esta es lo que nos ayuda a hacer D3. Nos ayuda a dar los datos, se unen a elementos en el DOM, y tienen los elementos cambian como una función de los datos, tener esos atributos, todos los muchos atributos de los elementos, todo ser útil para canales para transmitir información. 

D3 es un increíblemente poderoso biblioteca y increíblemente bien dirigido. Esto es un poco de materia de gran alcance. La visualización de datos es un herramienta increíblemente poderosa para transportar a las personas profundas ideas que llega a su núcleo y les ayuda a entender, en de esta manera profunda e intuitiva, cómo los datos de las obras y cómo datos cambia nuestra vida.