Visualización interactiva de datos: cómo empezar con D3. js - V5

1. Introducción en una etiqueta de nuez: Bienvenido a D tres puntos Js conceptos clave. Este curso es una introducción muy sólida a lo que se ha convertido en una de las tecnologías más populares para realizar visualizaciones de datos interactivas para la Web. Mi nombre es Bill Sander. Llevo más de 20 años haciendo información, diseño y visualización de datos, trabajando en experiencias estáticas, infográficas y interactivas. Yo hago diseño, y soy un programador autodidacta. Tengo vívidos recuerdos de los dolores que pasas por las tecnologías de aprendizaje con poca o ninguna documentación o tutoriales y un gurús técnico en lugar de humanos regulares. Y me encanta producir sin tonterías e instrucciones claras de que cualquiera pueda envolver su cabeza . D tres es una biblioteca de JavaScript que es sorprendentemente fácil de usar para aquellos que han trabajado en JavaScript antes, especialmente bibliotecas como Jake Weary porque sigue muchas de las normas y mejores prácticas que has visto antes. D tres, También al igual que Jake Weary te permite manipular e interactuar con cualquier elemento de una página Web que podrías alterar y leer desde HTML CSS e interactuar con otro JavaScript. Entonces cualquier cosa que crees es un elemento totalmente compatible de toda la experiencia en el navegador . Si no conoces ningún CSS HTML y JavaScript en absoluto. Tendrás que tomar inter clase sobre esas tecnologías antes de trabajar demasiado con las tres. No obstante, tiendo a usar un lenguaje muy sencillo y trato de explicar las cosas con claridad, como si mi público no fuera súper técnico. Por lo que incluso una persona algo tecnofóbica podrá caer junto con este curso, aunque algunos de los detalles sean un poco difusos. Ya que todo en D tres sucede en un navegador, eso significa que tenemos que empezar por crear una página Web básica. Entonces aquí estoy en Sublime Text, que es un gran editor de texto para codificar porque reconoce tu código y hace cosas como cull lo surgen, ayudándote a encontrar errores en problemas y texto sublime incluso terminará tus fragmentos de código para tú mientras escribes cosas. Hará sugerencias sobre opciones que puedes hacer que tengan sentido y te permitirán hacer cosas como simplemente escribir HTML. Presiona la tecla de tabulación, y configurará toda tu página Web básica para ti, un enorme ahorro de tiempo en comparación con trabajar sin pad o enviarlo mensajes de texto, por ejemplo. Por lo que ahora que tengo un marco HTML, sólo puedo poner en el título de este documento. También voy a agregar un div vacío con la gráfica I D, que es donde todo lo bueno de D tres va a suceder más tarde. A continuación, voy a agregar algo de CSS a la página para que solo pudiera escribir, estilo y presionar Tab, y automáticamente agregará una etiqueta de estilo para mi CSS. Entonces primero voy a agregar un color de fondo al cuerpo toda la página Web esencialmente y también establecer el con 2 100%. Entonces de esta manera simplemente estirará todo el ancho de la página. Entonces si guardo esto, volver a mi navegador y refrescar esta página, vemos que el color de fondo de eso, como gris, extiende todo el con del documento. Y también está usando hasta la altura. Simplemente, ya sabes, el cuerpo se especie de defecto 200% de altura. No necesitamos preocuparnos por eso ahora mismo. Además, lo que voy a hacer es abrir otro elemento de estilo aquí, otra entrada CSS para mi gráfico. Y por supuesto, gráfico hashtag significa que se va a aplicar sólo al elemento con la idea de gráfico esta cosa aquí abajo y voy a volver a establecer el color de fondo. En este caso, realidad lo voy a igualar con el fondo del cuerpo, lo cual voy a explicar en un segundo. Voy a establecer un específico con sólo para que sea un conjunto dentro de una altura establecida y ya verás qué hace eso. Y también voy a establecer un, um, um, margen superior e inferior de 50 píxeles solo para una especie de tirarlo del borde superior del navegador . Animales dijeron un margen horizontal automático para que se centre automáticamente. Y también le voy a dar una frontera. Tan sólo unos grupos sólidos. Uno recoge borde negro. Entonces otra vez, si vuelvo, recarga mi página. Ya sabes, acabo de sacarlo del borde con ese margen de 50 picks top, y luego el margen auto lo pone en el centro, y tengo el mismo color de fondo pero un pequeño borde para poder ver donde realmente vive . Y uso ese color de fondo porque más adelante, puedo decir cuando lo cambie, que verás en el siguiente video. Podré ver la diferencia para asegurarme de los cambios que te hacen hacerla realidad. De acuerdo, es hora de pasar a hacer algo en esta página que realmente tiene que ver con D tres. He encontrado que la mejor manera de aprender es trabajando en una tarea específica en lugar de aprender en teoría sobre qué código hace qué. Entonces estaremos construyendo una trama de dispersión animada, interactiva usando D tres. Este curso no va a intentar cubrir cada detalle y matiz sobre D tres, pero nos enfocaremos en varios de los conceptos clave más importantes que, una vez que los entiendas, te empoderarán para hacer todo tipo de realmente interesantes cosas. Y a partir de ahí será más fácil aprender conceptos de nivel más profundo en la biblioteca. Vale la pena señalar que D tres puede crear sus objetos ya sea como elementos SPG, que son gráficos vectoriales, auras, elementos de lienzo que forman parte del estándar HTML cinco. Son pros y contras a ambos a los que no voy a entrar aquí. Este curso estará trabajando en Lee un SPG. Pero si prefieres lienzo html cinco, no será difícil en absoluto convertir lo que aprendes aquí para usar ese estándar en su lugar, último, antes de que realmente podamos trabajar con D tres. Tenemos que sumar en realidad d tres, la biblioteca a la página. Entonces voy a agregar una etiqueta de script, y solo tengo que definir la fuente. Y esa fuente es un archivo JavaScript en este caso que vive justo en la carpeta te iba a mostrar aquí justo en la carpeta junto a mi archivo html index dot. Por lo que no tengo que darle un camino. Pero se podría, por supuesto, hacer referencia a la biblioteca en un repositorio Cdn que vive en la nube en algún lugar. Pero acababa de usar un archivo local. A continuación, comenzaremos a agregar elementos SPG a la página para ver cómo funcionan los métodos D tres más básicos . Por cierto, todo el código para este curso estará disponible vía link en la descripción del curso para que puedas descargar y seguir a lo largo lección por lección. Pero si puedes, recomendaría que escribas el código tú mismo en el camino. No hay mejor manera de aprender que haciéndolo tú mismo 2. Agrega elementos de SVG en D3: Así que ahora es el momento de tomar el archivo para el que acabamos de configurar el marco básico y empezar a agregar cosas a la página, Empieza a agregar los elementos SPG que se van a convertir son realmente sexy y cool Gráfico gráfico interactivo . Entonces lo primero que necesito hacer es agregar una etiqueta de script debajo de mi div aquí. Y la razón por la que lo puse ahí es que, ya sabes, la forma en que se carga HTML es que se carga de arriba a abajo. Para que eso lo lea desde aquí arriba hasta aquí. Y no quiero que mi JavaScript intente hacer nada con este div poniendo cosas en él hasta que realmente exista. Entonces por eso pongo cosas debajo que hay formas de hacerlo. Donde lo pongas aquí no importa. No es realmente detalle de lo que necesitamos preocuparnos hoy, pero es más fácil simplemente ponerlo debajo del día en el que quieres que pasen las cosas. Entonces, en esta etiqueta de guión, lo primero que voy a hacer es que voy a crear una variable llamada Xvg, y esta variable va a contener un elemento D tres Y así que déjame solo crear eso. Voy a decir d tres puntos seleccionar y voy a decir Seleccionar ese gráfico, Dave que creamos. Y luego con eso, quiero que subas un SV G. Y quiero darle un atributo de oops A con atributos de 1000 pixeles. Copiar y pegar el cambio a la altura y cambiar eso a 500 píxeles. Y en mi pequeño semi colon. Entonces, ¿qué está pasando aquí? Literalmente solo estoy creando una variable que esencialmente entonces contendrá un d tres spg de cierto ancho y altura. Eso es entonces esencialmente va a ser anexado al gráfico. Y entonces lo que voy a hacer ahora es que sólo voy a salvar esto. Voy a volver a mi navegador. Voy a golpear, refrescar, y no vas a ver nada, porque esencialmente, ojalá haya un elemento SPG aquí, Pero no hemos dado ningún atributo que no sea ancho y alto, así que no puedo decir si está ahí. Pero lo que puedo hacer es abrir mi inspector web. Entonces esa es opción de comando. Yo en el Mac y puedo ir a ver los elementos. Si no estás familiarizado con este tipo de procesos y cómo funciona esto definitivamente fíjate en él . Es una gran manera de depurar el código. Pero centro puedo ver cada elemento HTML ya que se ha generado en la página para que pueda hacer click en mi gráfico, cual veo tiene una flecha junto a él, lo cual es una buena señal. Debe haber algo dentro de ahí. De lo contrario, no habría este pequeño héroe. Hago clic en él abierto y lo suficientemente seguro, no tengo elemento spg. Tiene un ancho de 1000 picks y una altura de 1000 pixels, razón por la cual son los huevos sintiendo el área completa de ese mismo borde de fondo que creé antes. Por lo que a medida que te das la vuelta, puedes ver que es una especie de punto culminante en azul. Entonces lo hizo. Simplemente no lo puedo ver exactamente ahora, Así que arreglemos eso. Entonces lo que voy a hacer es, um voy a entrar y voy a añadir estilo a mi CSS aquí. Sólo voy a decir para cualquier elemento SPG solo con el uso de la etiqueta SPG ahí, quiero que establezcas el color de fondo. Y aquí es donde lo voy a decir que espere. De acuerdo, así que de esto estaba hablando antes cuando creé el fondo de este gris. Y entonces hice mi día de exactamente el mismo gris. Por lo que especie de mezclado juntos. Eso fue algo inútil, excepto que ahora, cuando me refresque, en realidad, mi blanco aparecerá. Entonces ahora sé que existe sin siquiera echar un vistazo aquí abajo en el Inspector tiene sentido . La otra cosa que voy a hacer es que en realidad voy a añadir un par de otras variables. Voy a agregar una variable por encima de todo aquí, y el 1er 1 se va a llamar con. Voy a poner eso en 1000 jamón y crear uno llamado altura que voy a poner en 500. Y para aquellos de ustedes que han hecho alguna programación, probablemente puedan predecir lo que voy a hacer a continuación. En realidad voy a establecer estos atributos para usar esas variables, y así, esencialmente, estoy empezando a abstraer. Um, ya sabes cosas que si quisiera cambiar el ancho y la altura más tarde, podría simplemente cambiarlo aquí arriba, y automáticamente lo cambiará aquí. Y por supuesto, ya verás. Probablemente por el camino, estaré usando esas variables de otras maneras , Por eso es útil hacer eso. De acuerdo, entonces a continuación lo que quiero hacer, en realidad quiero agregar algo a mi SPG. Um y yo quiero especie de solo mostrarte cómo funciona un poco la SPG. Primero que voy a hacer es que me voy a llevar mi SPG. Entonces ahora ese tipo variable ¿es? Como dije, un contenedor que tipo de tiene todo un elemento SPG en él para que pudiera hacer algo similar a lo que hice antes, donde voy a escribirle algo. Entonces me voy a llevar mi SPG, y sólo quiero subir un rectángulo. Y la taquigrafía para eso en lenguaje SPG, es una especie de lenguaje propio. Vamos a llamarlo. Normalmente sólo las cuatro letras naufragaron. De acuerdo, entonces voy a panda rectángulo. También le voy a dar algunos atributos. Y así diría primero, quiero establecer los atributos X donde se va a ubicar en la página horizontalmente y debo decir, Ponlo en 100 copy paste. Debo establecer el por qué en 100 a voy a agregar un con atributos. Y vamos a darle un 10 y hará que la altura también 10. Entonces lo que he hecho aquí es que he agregado un rectángulo a mi SPG Si digo esto y voy y refresco Boom, no tengo svg rectángulo que es 100 fotos se acabó en la dirección X y 100 píxeles abajo en la dirección Y Pareja puntos importantes aquí d tres spg la altura El por qué es un poco confuso y contraintuitivo. Esto es 00 aquí arriba en la esquina superior izquierda. Entonces, cada vez que añades una altura, en realidad estás bajando a veces se vuelve un poco confuso cuando estás colocando cosas en la pantalla. Pero sólo trata de recordar esa nieve. Si entro a mi inspector y entro en mi elemento SPG ahora, tiene un error al lado. Yo puedo abrir esa y puedo ver tengo un rectángulo ubicado un ex de 100. Por qué tener 100 con de 10 pixels y yo 'd de 10 pixels. Te das cuenta de que no tienes que tener aquí el PX. Simplemente lo descifra automáticamente. Por lo que SPG permite crear thes objetos geométricos como rectángulos o puedo hacer un círculo y mi círculo, podría agregar, y atributos, que se llama C X. Y te explicaré que en un segundo estoy va a empujar este un poco hacia la derecha. Entonces tiene 100. Voy a decir 200. Voy a darle un C. ¿Por qué? Y bien podríamos mantenerlo al mismo. Por qué posicionarse como el otro y es otro atributo para los círculos, que es nuestro que, si estás familiarizado con la geometría, podrías ser capaz de adivinar es el radio del círculo. Entonces lo que he hecho aquí, Como ya he dicho, la C X, que es esencialmente un rectángulo, es posición basada en la esquina superior izquierda de ese rectángulo. Por lo que esta esquina superior izquierda es exactamente de 100 píxeles sobre y 100 píxeles hacia abajo. ¿ Dónde está ahora? Si refresco, Ver Ex está diciendo. Ponga el centro del círculo exactamente en este caso, 200 píxeles sobre y 100 píxeles hacia abajo, por lo que los círculos se ubican en función de sus centros. Rectángulos y algunos otros objetos se localizan en base a sus esquinas superiores de la mano izquierda que también podrían ponerse un poco confusas y funky solo para que lo sepas. Entonces sólo lo sabes, tienes que recordar eso. Y luego dije un radio de cinco para este círculo. Y así este es un diámetro de exactamente 10. Entonces es lo mismo con es este radio de cinco diámetro 10. Se trata de un ancho de 10 etcétera. Probablemente puedas conseguir el justo aquí. Tan idea básica otra vez. SPG ensamblado en objetos geométricos. Agregas un montón de atributos como su ubicación. Es ancho, su altura, su radio en él hace lo que cabría esperar. Voy a hacer una más aquí también se puede un bolígrafo, cosas como líneas. OK, y aquí están los atributos cambiados una vez más. Entonces en lugar de X o C X, lo que tenemos es X uno. Entonces la x del primer objeto y digo, ¿por qué uno y pongamos eso también en 100 abajo y voy a hacer una x dos y por qué dos? Y así el x dos lo voy a poner 400 el Y dos a 200. Y así para la línea, también hay que agregar otros atributos, que es el color del trazo. Parte de piel y dado trazo negro. Ponte mi refresco de semi colon y verás una línea. Entonces otra vez, ¿qué estoy mirando aquí? ¿ Cuáles fueron todas esas cosas? X uno, El primer valor X Una línea comienza aquí y termina aquí. Por lo que tiene esencialmente dos posiciones y así la segunda posición es X dos. Y por qué a tan x dos se empuja Todo el por aquí. ¿ Por qué? Para empujar aquí abajo. Por lo que crea una línea de aquí a aquí y automáticamente se da cuenta de que la SPG, ya sabes, tenía una especie de poner el ángulo ahí dentro. Sólo una especie de conectar esas dos cosas. Idea básica. Puedo establecer el color del trazo. Podría cambiar el trazo con si quisiera todo tipo de cosas. Entonces, ya sabes, SPG tiene todo tipo de cosas más allá de rectángulos, círculos y líneas. Puedes agregar símbolos puedes agregar,ya sabes, ya sabes, esencialmente geométricos como polígonos que tienen todo tipo de formas extrañas. Pero la idea básica siempre es la misma. Agregas el objeto usando el lenguaje SVG. Agregas los atributos que se requieren para que puedas verlo y colocarlo en algún lugar de la pantalla, y eso es todo. Entonces, como, ya que estamos creando nuestro gráfico interactivo un poco más tarde, sólo estaremos haciendo esto. Estará agregando objetos en una determinada ubicación y coloreándolos etcétera, base en diversos atributos. Esperemos que esto tenga sentido. Debería ser bastante sencillo. Entonces a continuación vamos a pasar a trabajar realmente con algunos datos. 3. Introducción a trabajar con datos con D3: así que eso es genial. Ya sabes, podemos crear formas y líneas y todo tipo de cosas en SPG en el navegador usando D tres . Pero D tres realmente se trata de trabajar con datos. Entonces, ¿por qué no empezamos a hacer eso? Carguemos algunos datos y veamos qué podemos hacer con ellos. Entonces soy un comienzo solo por eliminar las cosas que acabamos de hacer antes donde agregamos el rectángulo en el círculo en la línea. Ya no necesito esas cosas. Y sólo voy a crear una nueva línea. Y lo que voy a hacer, primer lugar, es que voy a estar usando algo integrado en D tres llamado d tres que CS v Y cuando hagas un d tres puntos CSP es que cargará, como se adivinaría, un archivo C S v . Y estoy trabajando con un archivo llamado Boston Housing dot CS fee, que está disponible en la carpeta con cosas que descargaste para el curso aquí. Y vamos antes de que empecemos. Echemos un vistazo a eso. Ver, archivo SV y puedo explicar lo que está pasando ahí dentro. Por lo que un archivo de cuota CS es un archivo delimitado por comas, lo que significa que tienes campos y datos que solo están separados por comas. Entonces, como se puede ver aquí, lo estoy mirando de forma nativa en el editor de texto. Aquí tengo nombres de campo que siempre están en la primera fila de un archivo CSP separado por comas . Entonces tengo un campo llamado Crimen uno llamado Charles etcétera, todos separados por comas y luego cada fila de datos abajo. Se trata de un valor de datos para el asociado de campo en la misma posición, separado por coma del siguiente y luego del siguiente, etcétera, etcétera. Para que lo pudieras mirar en editor de texto. Es solo un archivo de texto sin procesar con los valores separados por comas. En realidad puedes abrir estos archivos en Excel, que lo está echando un vistazo ahora, y simplemente lo presenta más como una hoja de cálculo típica. Excel, por cierto, puede exportar ver archivos SV para ver si tienes datos que no están en formato CSP, y quieres usar un comentario de archivo delimitado. Se puede exportar desde Excel cualquier formato desde Excel a un CSP. Entonces simplemente real rápidamente ¿cuáles son los datos aquí? Contamos con datos de vivienda de Boston. Se trata de una especie de famoso conjunto de datos que contiene distrito por distrito, diferentes variables para diversas cosas sobre los nuevos distritos de vivienda en Boston. Por lo que tenemos el índice delictivo en el distrito. Tenemos, ah, ah, valor binario que acaba de llamar Charles, que es o un cero o uno. La mayoría son ceros. Pero de vez en cuando encuentras un distrito habitacional que tiene uno dentro. Uh, y lo que representa es este distrito está al lado del río Charles en Boston. Eso es todo lo que uno representa. Nosotros también este que está midiendo óxido nitroso en la atmósfera en ese distrito. Por lo que sea, tenemos el número de habitaciones en una vivienda de esa región. El promedio o la mediana de habitaciones, la edad, la edad mediana de la vivienda, Significado como, cuándo se construyó hace 65 años? En este caso, la distancia de algunas áreas clave del metro. Tenemos el, um el porcentaje de pobres en ese distrito y también el valor medio de una vivienda en ese distrito. Y, um, no estoy seguro si esto es en miles o cuál es el valor aquí, pero eso es lo que significan estos campos, Y así es como se ven los datos cuando lo miramos, solo una especie de formato directo. Entonces si vuelvo al código aquí, he empezado escribiendo d tres puntos cuota CS. Y luego pones en nombre del archivo y una nota importante al respecto. D tres no puede leer archivos de datos como este desde igual que una carpeta de archivos. Por lo que no puedes ejecutar este código simplemente dejando caer en el archivo html con JavaScript en él en tu navegador. Es por eso que quizá te hayas dado cuenta de mi tú. Los RL también se ven así. Es los sitios Colon 80 80 porque estoy ejecutando un navegador Web muy simple localmente en mi máquina de desarrollo. Una de las formas más sencillas de hacer eso Haz esto es ir a morder NAMI B i t. Y soy punto o chico creo, y puedes descargar una pila de mapas. Entonces en la señora de mi computadora, que soy yo, no Macintosh Apache, mi secuela PHP, y se puede descargar esta aplicación y luego esencialmente ejecutar un servidor Web localmente. Es una manera muy fácil de hacerlo. Hay un 1,000,000 de otras formas de hacerlo. Pero si no eres super técnico bit NAMI, señora, pilas eran geniales esperando para empezar. Por lo que hay que correr desde un servidor. Eso es lo rápido de que golpeas errores, tratando de no usar un servidor. Esta será la razón por la que Solo para que lo sepas. Muy bien, así que echemos un vistazo al código, así d tres puntos CSP d tres puntos cargas nativas CSP ver archivos SV estos archivos delimitados por comas . D tres también tiene d tres puntos tsv, que cargará un archivo delimitado por tabuladores donde los campos se separan al aire por pestañas. También hay ahora d tres puntos dsv, que esencialmente leerá cualquier valor delimitado. Entonces, en otras palabras, podría tener datos que vienen con tuberías verticales entre cada campo de datos que consortes de establecer manualmente Cuál es el dilema en el d tres puntos dsv de la UE. Tan larga historia en resumen, esto es sólo una especie de la función o el método para cómo hacer esto. Y solo te voy a mostrar la sintaxis. Y así la idea básica es que digo d tres puntos ruta CSP al archivo en este caso está en la misma carpeta que este código, razón por la cual no hay ruta de carpeta aquí y luego D tres. La versión cinco comenzó a usar promesas. Entonces no voy a entrar en una gran lección aquí sobre promesas y lo que son. Pero la idea básica es que d tres ambos JavaScript, realmente generalmente por años y años podría hacer unas cosas síncronas. Significa que podrías pedir un archivo y luego javascript quieres hacer algo con los datos en ese archivo? Y solía ser un significado sincrónico pedirías el archivo y luego tendrías que tener un código escrito, eso diría, eso diría, Y una vez que eso llegue aquí, una vez que hayamos hecho ese trabajo, entonces haz cosas. Y JavaScript ahora usa esta sintaxis donde dices d tres puntos c s v En este caso para D tres, ya sabes, así funciona Syntex aquí y luego usó punto entonces, y lo que sea que esté dentro de eso entonces no se activará hasta que D tres haya descargado y analizado ese archivo CSB. Por lo que sólo hace que sea mucho más fácil dedo del pie. Esencialmente, no cometas errores donde intentas llamar código antes de que haya pasado lo anterior, sobre todo en tus archivos de llamada, porque si este archivo está, uh, en el verano Web y tú él codificaría que estaba hablando con la web para ir a buscar un archivo y luego descargar esos datos y luego monedlo. Eso es, um, puede tomar un rato. Y así si los entrenadores se desencadena demasiado rápido, puedes meterte en problemas rápidamente. Tan larga historia corta promesas te salvan de cometer ese error. Muy bien, así d tres puntos c S v nema archivo o ruta al punto de archivo Entonces y luego quiero hacer algo . Y lo que voy a hacer es que voy a llamar a una función porque ahora podría hacer un montón de cosas todas en un solo lugar. Entonces así se ve eso d tres puntos c s v punto Entonces función, ya sabes, llaves y cualquier cosa aquí. Lo que quiera hacer aquí dentro lo puedo hacer ahora. Una cosa que voy a hacer también es que voy a decir datos de función ahora que los datos de palabras aquí son solo un parámetro y lo que eso significa En este caso, si estás familiarizado con JavaScript, puedes llamar a una función, y luego estás pasando una función del parámetro a la función y luego puedes hacer cosas con ese parámetro. En funciones como esta, el parámetro es más un reflejo de lo sucedido. Entonces en otras palabras, d tres puntos c s v está leyendo en ese archivo C S v. Y luego pase lo que pase ahí dentro, entonces digo que quiero hacer cosas con ella en esta función. Y así lo primero que voy a hacer con esto es que voy a decir datos de registro de puntos de consola. Y así si eres programador, ya sabes lo que está haciendo esto. Si no lo eres, esto puede ser nuevo. Pero la idea básica es que en los navegadores Web modernos se tiene el inspector Web. Y así si dio opción de comando I en chrome o control, Opción I en PC y cram, se abre este inspector web donde tienes como herramientas de desarrollo, una de las cuales se llama el Cónsul y el Cónsul. Cuando cargue este código, verá si hago registro de punto de consola, que de nuevo está integrado en la mayoría de los navegadores modernos. Será esencial justo fuera lo que le he pedido a la derecha. Entonces déjame cambiar el pelo de Eurail para usar esto. En cuáles eran la carpeta que funcionaba ahora, que es la carpeta de datos 03. Y si ahora ejecuto ese código, mira lo que pasa en el cabildo ahora que los datos que obtuvieron lectura del archivo CSB están ahí porque pedí que se escribiera ahí y puedo ver que tengo 506 elementos porque hay 506 filas en el conjunto de datos. Y si golpeo este pequeño aire por aquí, se abre y puedo ver que en realidad está roto en segmentos 100 100 subieron a la vez. la razón que sea, no sé por qué lo hace? Pero sí. Y luego si abro eso puedo ver cada fila individual de datos. Y así si reviso esto contra mis datos originales dijeron, Si vuelvo al archivo CSB mi primera fila, el índice de criminalidad es de 0.632 Y seguro, ese es el número que veo aquí. Y el óxido nitroso es de 0.0 punto 537999 lo que sea. Y eso coincide con lo que tengo aquí tan literalmente fila por fila, lo he escrito en la consola sólo para poder ver que los datos están ahí. No es lanzar un error ni nada más. Y por cierto, cada una de estas filas notarás que esto es Jason JavaScript. Las notaciones de objetos del C S V se convirtieron en Jason, que es un formato de datos que JavaScript simplemente ama realmente. D 3/10 para trabajar con ello. Mucha de la mayoría de JavaScript que trabajas en estos días estará trabajando con Jason cuando estés hablando de datos. Y el formato Jason es sólo nombre de campo de corsé rizado, coma de valor de campo de colon, otro nombre de campo, valor de colon, etcétera, etcétera, etcétera. Se puede ver por aquí vemos punto, punto punto. Pero puedo volver a abrir cada fila y ver cada uno de los campos en cada valor. Por lo que puedes especie de inspeccionar los datos de esta manera y asegurarte de que todo está sucediendo de la forma en que se supone que suceda solo haciendo el registro de puntos de la consola. Por lo que ahora tengo datos. No es anillo de época, está funcionando. Es hacer exactamente lo que quería hacer. Entonces ahora en realidad podemos empezar a hacer algunas cosas con estos datos, así que vamos a llegar a ello. Voy a comentar los espacios en blanco de registro de dudas cónsul. Ya no necesitamos eso. Y lo que voy a hacer es esto. Voy a empezar a escribir aquí. Voy a decir spg dot select all quote dot d o t Y entonces qué está pasando aquí? Te darás cuenta antes de que hiciéramos algo parecido. Dijimos d tres puntos seleccionar diagrama hash libra signo gráfico. Y yo decía: Oye, Oye, d tres, por favor selecciona el Div con el gráfico i d. Eso ya está en el dom el modelo de objeto de documento. Y estamos viendo este simp algo muy parecido aquí. Primero, digo, usa el objeto S V g que creamos podría haber dicho d tres puntos electiles o como Fiji Die Select Todo tipo de no importa. Pero estoy diciendo trabajar dentro de esta cosa que ya tenemos. Es como cada uno, no solo uno del 1er 1 que es lo que d tres puntos seleccionan como. Todos ellos como cada cosa que tiene el punto de clase Ahora estos aún no existen, lo que hablo en un segundo, pero selecciona todas esas cosas si existen y si no, está bien porque vamos a hacer cosas. De todos modos, hay una de esas cosas raras de D tres que se puede hacer esto a pesar que no existen, y todavía funciona. Entonces, solo toma mi palabra en esa. Entonces voy a decir dot select all dot Y entonces voy a empezar a hacer cosas con esos porque la forma en que funcionan estos selectores, que si estás familiarizado con Jake weary, ya estás acostumbrado a trabajar con selectores Idea muy similar. Seleccionas cosas y luego haces cosas con él y también tiene métodos encadenados. Entonces digo svg dot seleccionar todo. Y luego si hago otro punto algo u otro y otro punto algo más bien después de eso , todo se va a encadenar todo trabajando en la misma cosa hasta que le pegas un semi colon, en cuyo caso está una especie de hecho. Entonces, por ejemplo, aquí voy a decir eso rebanó todos los puntos y voy a decir con estas cosas, quiero que uses datos. Eso es lo que están haciendo los datos de punto. Y entonces estoy pasando ese parámetro que saqué antes. Por cierto, estos parámetros podrían ser nombrados cualquier cosa. Podría llamar a esta cosa Fred y si mientras me referí a ella como Fred más tarde eso va a funcionar no tiene que llamarse datos. Solo para que lo sepas, esto es tener que ser datos de punto, pero el nombre del parámetro podría ser cualquier cosa. Entonces solo voy a usar datos solo porque es simple. Entonces los datos de punto usaron esos datos y luego voy a decir entrar. Y este es otro tipo de cosa extraña específica sobre D tres, donde esencialmente hay este comando Enter. También hay una llamada salida. Y así el trato aquí es que estoy diciendo, Está bien, d tres. Te quiero como cualquier cosa que tenga un punto de clase quiero que trabajes con datos y específicamente estos datos que tengo y luego cuando quiero hacer es por cada objeto que entra a la pantalla, que va a ser uno por cada fila de datos. Yo quiero que hagas cosas con ella. Entonces eso es lo que está haciendo el punto enter. Si yo hubiera sido, digamos, actualizando los datos y alguna rosa había desaparecido de un conjunto de datos porque los filto o algo así, podría llamarlo punto salida y luego estaría diciendo que puede ser para quitar cualquier puntos en la pantalla que están saliendo porque están desapareciendo de los datos. Entonces realmente no vamos a entrar en la salida de punto en absoluto, pero dot Enter es por cada cosa que se agrega a la pantalla, quiero que hagas cosas. Entonces lo que yo quiero que hagas. Bueno, voy a decir, uh punto anexar un círculo porque quería un círculo para cada fila de datos. Y así, ya sabes, antes cuando estábamos probando agregar círculos, dijimos s v g punto upend círculo, que era un círculo uno pendiente, ¿ verdad? Eso es genial. Lo que es realmente poderoso y genial de D tres es que cuando digo seleccionar algo usado los datos y para cada una de estas cosas, introdúzcalo. Y luego para cada uno de esos digo anexar un círculo. Esencialmente, esto actúa como un bucle. Literalmente está buceando por los datos un camino del tiempo y para cada una de esas cosas, agregando un círculo al escenario, que es súper cool y potente. Y así ahora voy a decir por ese círculo, te quiero en un atributo. Así funcionan los métodos encadenados, ¿verdad? Y ahora estoy trabajando en ese círculo porque anexé algo. Y por cada uno de esos hacen cosas, y voy a decir que necesito decirle dónde debería estar el centro de la misma. Y sólo voy a poner eso principalmente a 100amables como lo hicimos antes. Necesito establecer el valor c y. Que ese 100. Además, voy a poner el radio a, digamos, cinco, y voy a tener unos nuevos atributos que voy a llamar. Bueno, no voy a llamar. Se trata de Phil. Y entonces lo que es esto es el color de relleno ahora un par de notas sobre eso. En primer lugar, hay que usar la palabra Phil. Ya sabes, si estás haciendo esto en CSS, que puedes hacer por cierto podría en lugar de decir, atributo, Phil, podría decir clase de atributo y darle un nombre de clase y luego poner una clase aquí arriba en mi CSS y estableció ese color de relleno ahí arriba, y tengo que agregar después de llamada Phil, no son de color porque esto es SPG. Y esta es la palabra que usa spg para Phil car. Pero cuento largo, puedo producir un CSS, pero en este caso, lo estoy haciendo intencionalmente como un color de relleno configurado manualmente en el JavaScript. Porque más adelante, voy a ah, estar ajustando. Siento el color basado en los datos. Por eso lo estoy haciendo de esta manera. Definitivamente podrías hacerlo de cualquier manera depende de lo que intentes hacer. Entonces si guardo esta cosa y me voy ahora y recargo la página en la que estamos trabajando antes, Pero ¿qué pasa? Tengo lo que parece un círculo. Y así estoy en mi inspector web. Además de la consola, tengo esta cosa llamada elementos y elementos. Debería mostrarte todos los elementos de la página, todo el modelo de objeto de documento. Entonces tengo mi div con idea de gráfico aquí. Si abro eso, tengo mi SPG. Y si abro eso, mira eso. Puedo ver mis círculos y no es sólo un círculo. Son muchos, muchos, muchos círculos. Pero claro que todos tienen el mismo c x y ver por qué. Entonces, esencialmente, tengo 500 círculos más sentados uno encima del otro justo ahí. Entonces en otras palabras. El código está haciendo exactamente lo que se supone que lo esté haciendo es hacer exactamente lo que quiero . Entonces lo estamos haciendo realmente genial. Nada que hacer antes de que nos vayamos aquí es que sólo voy a añadir una cosa que voy a decir círculos es igual a esta cosa. Estoy configurando una variable. Y la razón por la que estoy haciendo esto es porque si quiero referirme a estos círculos que más adelante he creado de forma rápida y sencilla, ahora los tengo esencialmente apegados a un objeto. Algo así como dije, ya sabes, s V G es igual a esto, y podría referirme a SPG más adelante y trabajar con ello. Por eso estoy haciendo círculos iguales para que yo solo tenga acceso a ella más adelante. Y a ese punto, voy a declarar que los círculos variable aquí arriba, lo que introduce otra idea realmente importante en la programación a la que se hace referencia como alcance . Y así no voy a estar aquí realmente para explicar alcance y profundidad. Pero la idea básica es que si digo ya sabes, círculos equivale a algo y no lo declaro fuera de esta función, entonces esa variable nombra círculos sólo está disponible para mí siempre y cuando esté dentro de estas llaves rizadas . Entonces, en otras palabras, si traté de hacer algo con círculos aquí afuera, ya sabes, más tarde y mi guión no va a funcionar, porque el guión no sabe que existe. Pero si lo declaro aquí arriba, digo que hay una variable. Se va a llamar a círculos y mantienes los ojos fuera para ello. Entonces cuando hago cosas con él y ya sabes, una especie de signo es un valor aquí adentro, entonces todavía está disponible para mí más adelante. Por eso tenemos estas variables globales, como dentro de la altura y los círculos. Y, uh, SPG también es variable global. Entonces estaremos trabajando con esos más adelante. Muy bien, Así que a continuación vamos a empezar a aplicar más atributos a los círculos que en realidad van a ser impulsados por los datos y empezar a hacer que esta cosa realmente cobre vida. 4. Cómo hacer gráficos impulsados en D3: bien, entonces podemos empezar a hacer cosas con estos círculos ahora, basándonos en los datos que tenemos cargando y trabajando la primera vez que realmente hacer es volver aquí. Y yo iba a añadir algo a estos círculos. Y cuando voy a agregar es esa clase porque, ya sabes, estoy haciendo esto selecto todas las cosas de clase de puntos aquí arriba y aún no existen. Yo estoy haciendo cosas con ellos de todos modos, pero ellos quieren eso. Adam, bien podría asegurarme de que tengan esa clase porque después, si alguna vez quise referirme a ellos usando un selecto todo, ya sabes cosas de punto clase, entonces las tendrán. Entonces esto no sirve ningún propósito en este momento excepto saber que está ahí para su uso más adelante . Yo también voy a hacer esto. Voy a añadir algo más. Además, atributos podemos agregar estilos directamente y se agregará un atributo de estilo al objeto directamente en la etiqueta, como verás en un segundo. Entonces el estilo que voy a añadir es la opacidad. Mensaje la opacidad a 0.5, y así la capacidad puede estar en cualquier lugar entre cero y un cero es invisible. Uno es 100% opaco, y así un 0.5 es 50% translúcido. Entonces voy a golpear, guardar. Voy a refrescar la página y verás que se ve exactamente igual porque todavía tengo 506 puntos corridos uno encima del otro. A pesar de que son medio trans escuchados, Parece que un solo punto todavía ser. Pero puedo ver aquí abajo en el inspector que tienen un estilo de pase. Es e 0.5 cada uno de ellos. Y por cierto tienen la clase igual a punto Así que todo se está agregando apropiadamente. El código está haciendo lo que se supone que está haciendo. Entonces, ya sabes, obviamente es un gran lugar para empezar. Entonces lo siguiente que voy a hacer, que es, ya sabes, realmente lo que estamos aquí para hacer, como lo más importante en D tres, también lo es. Cambiar la colocación de estos objetos en base a datos, derecho. Una gráfica de dispersión son puntos en un gráfico colocado en el eje X horizontalmente en una posición determinada, basado en el número, Por qué acceder a un sótano cierta posición, y en nuestro caso, vamos a usar Thea el tamaño DOT, también en base a datos. Entonces hagamos primero el valor X. Entonces aquí estoy colocando el centro en el eje horizontal manualmente. 200 píxeles de la izquierda. Eso es genial. Lo que sea. No es realmente una visualización fechada, sin embargo. En lugar de enviarlo manual y estáticamente, lo que puedo hacer es usar una función. Y así la función se ve así y ya sabes, así que es como la función anterior donde tenemos una función y luego parámetro. Entonces, ¿cuál es este parámetro D ahora, por cierto, una vez más, no tengo que llamar a esto d Podría llamar a este Fred Joe o X Y Z no importa, pero lo estoy llamando porque eso es una especie de norma en D tres. Y lo que es realmente poderoso y sorprendente de D tres es que cada círculo como se agrega al escenario porque dije, ya sabes, sabes, seleccionar cosas usadas datos, y para todos los que se están agregando en un círculo a ella, no sólo sumó los círculos. También vincula los datos de cada círculo a cada círculo, lo que significa que cada fila de datos que está impulsando esta existencia de círculos también está ligada a ese objeto. Por lo que D tres está al tanto de los datos asociados a cada uno de esos objetos. Entonces si digo vamos a usar la función en lugar de decir esto manualmente y solo digo que la consola se ve consola que log D golpeo, refrescar en la página, guardar y refrescar y ver lo que sucede. En primer lugar, todos los círculos se atascan aquí porque no le he dicho un valor que usar. Sí, sólo para que lo sepas. Pero si vuelvo a mi consola, mira lo que tengo aquí ahora, como vimos antes cada fila de datos. Si me alejo, hasta la parte superior ahora es visible en la consola porque pedí que se escribiera ahí. Y así esta es la primera fila de datos. Recuerda, crimen es de 0.63 a, uh, óxido nitroso dañino es de 0.5379 etcétera. Y para que los datos se vinculen a ella. Por lo que puedo usar esos datos en cualquier momento que me refiera a ese objeto. Entonces déjame simplemente deshacerme de eso. ¿ Y qué pasaría si yo hiciera esto? Entonces la función ahora, para establecer ese valor C X, tengo que usar return porque lo que esto está haciendo es que debo decir que 200 realmente lo es. Digo, dijeron los atributos el atributo C X a los resultados de esta función, y hay que usar la palabra retornos. Si solo digo este retorno 100 y doy clic en Refresh, mira lo que pasa. Es exactamente lo que teníamos antes donde tengo cientos de puntos, todos en la misma posición. El sexo es 100 c sabio 100. Entonces no es nada ha cambiado de lo que hice antes, excepto en lugar de decir establecer el c x 200 ustedes todos en un solo lugar. Digo Usa una función, pero sigo regresando. Uh, valores estáticos. Eso no es tan interesante si saco ese retorno, por cierto. Entonces yo solo aseguro 100 aquí y me pego. Refresca los círculos y arriba por aquí porque no hay C X que se está estableciendo D tres se confunde. Y así si golpeas un error como este, que probablemente harás nueve veces que esté en asistencia porque olvidaste usar la palabra volver aquí, así que asegúrate de que sea valor de retorno, pero no quiero establecer esto valor para ser estático. Ese no es el punto aquí. Yo quiero configurarlo para que sea impulsado por los datos. Entonces en cambio voy a decir Usa ese parámetro D y usa d dot pobre. Y así es como te refieres a los valores de Jason en JavaScript. Es D causa ese es el nombre del objeto que asignamos aquí nombre de campo punto y recuerda, tenemos un campo que se llama pobre ¿verdad? El porcentaje de pobres en ese distrito. Entonces cuando digo regresar d punto pobre, es decir, usó ese campo para este valor de círculos que ha estado ligado a él. Uno escribió un tiempo. Entonces si golpeo, refresco, mira lo que va a pasar? Ya no tengo 500 puntos alrededor uno encima del otro, pero están todos brillantes atrapados por aquí. Y entonces, ¿por qué es eso? Bueno, porque el porcentaje de pobres en este primer punto es de 4.98% lo que significa que le he pedido a d tres colocar ese punto 4.98 píxeles de la izquierda. A los siguientes nueve píxeles de la izquierda. Siguientes para los siguientes. Alrededor de tres, etcétera, etcétera, etcétera. Esos pobres valora unos números muy pequeños Así que están todos atascados por ahí y lado izquierdo . Entonces sólo para que pueda verlos a todos. Y si los multiplico todos por Digamos 50 ahora golpeo, refresco, y mira, Ahora los puedo ver. Y porque están extendidos, ahora puedo ver la translucidez. Sólo hay un punto Aquí hay un montón entero encima del otro aquí mismo, etcétera, etcétera. Ahora se están escapando de la pantalla. Entonces solo voy a cambiar principalmente a un 30 por ahora, solo para poder verlos. Esta no es la forma en que haces la visualización de datos causa asuntos de escala, ¿ verdad? Nunca lo harías manualmente solo multiplicar mi número. Um, pero sólo quiero ver dónde viven y ver cómo se siente. Y sí parece estar funcionando. Entonces ya es lo suficientemente bueno por ahora. Ahora, yo haría algo muy parecido. Donde, en lugar de usar ah, establecer valor ah, valor duro para el ver por qué voy a establecer eso usando una función. También, en lugar de usar el campo pobre, quiero usar el campo de habitaciones. Yo soy un nuevo dicen escobas veces 50 en este caso y soy un hit refresh y Wow. He aquí, mira que tenemos algo que parece una trama de dispersión. Y así una vez más, está configurando manualmente los parámetros, ya sabes, en términos de cómo, cuánto en multiplicar números por lo que es raro. Pero es lo suficientemente bueno para tener una sensación de cómo se ven estos datos. Y así tengo pobres. Eres más pobre a la derecha. Y tú lo tienes. No lo olvides, esto es otra cosa extraña. Cero en el eje Y está aquí arriba en la parte superior y un alto. Por qué el número está aquí abajo. Entonces, en otras palabras, cuanto más pobre seas, menos habitaciones tienes en tu vivienda, Lo cual tiene sentido. Pero claro, está subiendo verticalmente, lo cual se siente un poco raro. Nos ocuparemos de eso más adelante. Ahora, por fin, voy a agregar también por mi valor, correcto el tamaño de la burbuja, otra función, y voy a usar el campo de valor, cierto. El precio de cada vivienda golpeó, refrescar. Y tengo puntos gigantes y tengo puntos más pequeños. Pero el aire es realmente gigante. Están todos encima el uno del otro, y yo podría hacer las fáciles aún más pequeñas. Entonces sólo voy a dividirme por dos otra vez sólo para ver cómo se ve eso. Y eso es bueno. Entonces ahora tengo un poco bonitos puntos pequeñitos y tengo lindos grandes puntos agrupados. Y una vez más, sólo desde el punto de vista de los datos, todo tiene sentido. Menos pobre está por aquí, lo que significa más ricos, mucho más puntos más grandes, lo que significa mayor valor, más pobres, puntos más pequeños, casas de menor valor. Eso es solo que tiene sentido conceptualmente cuando pensamos en cómo funcionan este tipo de cosas desde el punto de vista de los datos. Entonces lo último que voy a hacer, porque solo voy a agregar un estilo a mi CSS aquí arriba porque quiero que mis puntos, mis cosas con punto de clase tengan dos atributos asociados a ellos. El 1er 1 es un trazo, y estoy configurando manualmente el color del trazo en negro encendido. Pero también voy a agregar un trazo con y esta es la sintaxis para eso y el trazo con voy a establecer a ah uno. Y creo que es Es uno. En realidad un minuto. Creo que tengo que hacer un PX um y así creo que hace un pixel por defecto en SPG. Y si digo esto y golpeo, refresco realmente no lo podemos ver porque los puntos ya son negros y la capacidad es del 50% del trazo es que realmente no se puede decir la diferencia, pero vamos a usar eso dinámicamente más adelante. Por eso lo dije de esta manera en el Azaz. Una clase con estilo. Muy bien, entonces a continuación vamos a empezar a trabajar con realmente establecer estas escalas de estas cosas correctamente, utilizando otra herramienta realmente poderosa incorporada en D tres. 5. Uso de escalas de D3: Está bien, esto va a ser grande. Esta va a ser una lección bastante complicada, Mucho código, pero mucho de su repetitiva. Por lo que una vez que consigas los conceptos, se unirá relativamente sencillo. Pero hay mucho que pasar por aquí. Simplemente di, ya sabes Así que la última lección que conoces, colocamos estos puntos en la pantalla solo multiplicando las cosas bien. Teníamos valores pequeños para los pobres, lo que es una especie de multiplicado por 30 sólo para conseguir que se extienda manualmente. Y esa no es la forma correcta de hacerlo. Um, lo que realmente necesitamos hacer es usar una herramienta construida en dos D tres para establecer nuestras escalas dinámicamente basadas en los datos y en base a la cantidad de espacio disponible para nosotros y D tres ha incorporado en ella estas increíbles herramientas para hacerlo. Y así estas son D tres escalas, y hay un montón de formas diferentes de hacer escalas y d tres. Yo sólo voy a hacer uno de ellos aquí, en realidad terminar haciendo una pareja durante esta lección. Pero voy a empezar usando uno que probablemente te encuentres usando bastante, que es una escala lineal. Entonces lo primero que voy a hacer es que solo voy a crear una variable llamada Escala X porque esta Gail va a usar para nuestro eje X son la colocación horizontal. Y vi Miss ocho X escala igual a d tres puntos escala lineal. Y eso se debe a que se trata de una escala lineal, lo que significa que va a tener esencialmente un punto de partida y un punto interminable. Y si pasas valores en cualquier lugar entre esos dos números, esencialmente pondrá algo en la pantalla basado en cualquier lugar entre esos dos números la misma proporción, que todos comenzaron a afeitarse un segundo. Por lo que una escala consiste en dos cosas. Ahí está el dominio, y luego también está el rango. Y así el dominio también se suele referir como los valores de entrada y los rangos se refieren como el valor de salida. Por lo que iba a establecer manualmente mi dominio y rango y simplemente explicar cuáles son. Entonces la idea básica aquí es que estoy diciendo que voy a usar una escala, y voy a pasar en valores y esos pasados en valores o los valores de entrada, y entonces esto va a convertir mágicamente esos en coordenadas X. en el eje X entre cero y 500. Es la forma en que realmente lo usas es en lugar de decir, regresa d punto pobres veces 30 como lo hicimos antes. En cambio, decimos retorno ex escala Didot pobre. Y ahora, cuando digo que está bien averiguar dónde poner las cosas en el valor X, usa esta función llamada escala X, usando este círculo de valor pobre. Y así ese es el valor de entrada. Entonces en algún lugar entre cero y 30 estoy adivinando. O tal vez los valores mínimos y máximos disponibles dentro de ese campo. Y así, en otras palabras, si lo fuera, si d punto pobre era 15 para este círculo estará justo en el medio. Entre estos dos lineales la escala, los valores lineales y por lo tanto va a volver y colocar sobre el eje X que exactamente un 250 otra vez una mitad de camino entre cero y 500. Por lo que el valor de entrada es el valor de datos y el rango el valor de salida es la colocación en las coordenadas X. Entonces vamos a ver qué pasa si solo algo así como golpeo guardar aquí y golpeo Refresh. Mira esto. Por lo que va todo el camino potencialmente desde su pequeño cero todo el camino hasta que debe ser 500 cuales deben estar a mitad de camino. ¿ Por qué va más allá de 500? A lo mejor debo tener valores que están por encima de los 30 y eso es una escala lineal. Hará en cualquier lugar entre estos dos valores, dejando números de mango que van más allá de esos dos valores. Entonces echemos un vistazo a nuestros datos aquí. Si voy por aquí y miro mi pobre campo y clasifico desde el más grande hasta el más pequeño. cierto, el valor más alto es en realidad alrededor de 38. Y por eso las cosas se están extendiendo más allá de los diestros. Entonces si nos cambio, eso es todo. Pensé que invitado el máximo era de 40 hit, guardar, golpear, refrescar, ver. Sucede. Todo se aplava ahora. Ahora no hay valores superiores a 500. De hecho, eso es un poco más pequeño que 500 porque un poco por debajo de 40 si eso tiene sentido. Algo que notarás es que tanto el dominio como el rango que pasas en una matriz después estos corchetes son así que es una matriz con el primer valor y un segundo valor. Si estás haciendo escalas y tienes errores, simplemente no está funcionando, ¿ verdad? O tal vez incluso está lanzando un error real. Las probabilidades son bastante buenas. Has olvidado los corchetes dentro de estos paréntesis eran la coma o algo así . Este es un error muy común, sobre todo cuando apenas estás empezando. Entonces todavía tenemos, ya sabes, algunos temas aquí, que es que estoy en primer lugar,ya sabes, ya sabes, sentando mi valor máximo en 500 desde que escribo mi rango, correcto. El valor de salida real, donde realmente va en la pantalla que realmente se miles. Permítanme que cambie eso por ahora. Nuevamente, solo te refrescas manualmente. Y bastante seguro mirando, se extiende. Este es el poder de las balanzas, ¿no? Hace que sea mucho más fácil hacer cosas como esta. Pero peor que eso es que estoy haciendo una conjetura. Supongo que el valor mínimo para ese campo podría ser cero. El valor máximo podría ser 40. De hecho, la primera conjetura que tuve fue equivocada, ¿verdad? Ejemplo perfecto de un error. Esta también es una mala manera de hacerlo. ¿ Y si tengo un conjunto de datos gigante y no supiera que los valores mínimo y máximo fueran aún peores. ¿ Y si estuviera trabajando con datos dinámicos y estos datos estuvieran cambiando. Y así pues, el máximo mínimo podría estar cambiando realmente con el tiempo, por lo que no puedo establecer manualmente esos números. Simplemente no tiene sentido hacer eso. Lo que me lleva a la siguiente herramienta realmente grande, poderosa , importante, , importante, útil que está integrada en D tres, donde en realidad puedo, ya sabes, calcular los valores mínimo y máximo . Entonces, una vez más, voy a crear una variable. Sólo voy a llamar a X hombres, Max, porque esto es dame el min Max para la colocación X otra vez, y voy a usar d tres puntos extensión y d tres puntos extensión hace exactamente lo que estoy diciendo. En realidad es sólo encuentra los valores mínimo y máximo. Esa es sólo la sintaxis. Es la forma en que lo hago. Al pasar los datos una vez más, tengo esta variable llamada datos. Entonces estoy pasando eso, y luego tengo que usar una función para salir de ella. De lo que quiero sacar. Es una buena función de uso del tiempo d solo causa que esa es una buena norma de usar. Pero podría llamar a eso d lo que quisiera y la razón por la que tengo para hacer una función es porque esos datos son esencialmente una colección de un montón de campos. Tengo que decirle d tres puntos extensión qué campo me importa. Entonces quiero decir volver d punto pobre Ahora si acabo de devolver d punto pobre se va a confundir mucho porque en un archivo C S V, todos esos datos se almacenan en realidad como texto. Y así d tres cosas. Todos esos valores, incluso los que estamos conocemos sus números porque lo miramos a él o a los humanos, podemos decir cuál es el número. D tres piensa que es texto algo. Piensa que la cadena 0.632 Así que en realidad para convertir esto en un número y voy a usar solo una función de JavaScript incorporada llamada monedero flotador. Y así parse float está literalmente usando JavaScript para decir, Toma esta cadena y devuelve el valor flotante. El número decimal real que esa cadena representa 0.632 Si uso parse en i nt, entonces estaremos redondeando los números hacia arriba o hacia abajo dos enteros que no queremos porque queremos los valores reales. Entonces flotador monedero solo hace eso. Está bien, así que ahora tengo el valor mínimo máximo. Y vamos, ya sabes, justo eso a la consola para que pueda ver cómo se ve. Y asegúrate de que no estoy viendo ningún error extraño. Algunos que decir consola dot log min Max, volver por aquí, ir a mi golpe de consola, refrescar, y mirar, no tengo arreglo. Ver los corchetes Y mi valor mínimo es un 1.73 lo que sea. Y mi valor máximo es ese 37.97 etcétera. Y así puedo ver cada valor individual. Está funcionando. Entonces tengo estos números. ¿ Qué hago con ellos? Bueno, podrías adivinar en lugar de establecer manualmente mi mínimo y máximo para mi dominio, voy a usar esa variable en su lugar. Algún ensayo utilizó la X hombres Max. Utilice el primer valor para la entrada el mínimo y utilice el segundo valor para el máximo. Y así notarás que el primer valor es esa posición de índice cero en una matriz y JavaScript Y el segundo valor está en la primera posición de índice. Un poco confuso si no eres programador, pero eso acaba de tener trabajos de script. Utiliza la indexación cero para acceder al primer elemento de una matriz. Y así ahora si golpeo, refresca una vez más ya verás que va todo el camino desde cero ahora porque mi si no tengo lo que sea mi mínimo, lo va a colocar en cero. Sea cual sea mi máximo, lo va a colocar en 1000 y cualquier cosa en el medio va a colocar cualquier cosa en el medio. Y así es cero. Pero no se olvide, este es el centro de los círculos a cero. Entonces, por lo tanto, está corriendo por el borde izquierdo o, en este caso, corriendo por el borde derecho. Pero se coloca exactamente en cero o 1000 para esos extremos más pequeños puntos más grandes. Por lo que mi ex báscula está funcionando maravillosamente. Entonces voy a hacer exactamente lo mismo por mi por qué. Y mi suma r llamaría a esto un Lyman de vuelta Simon Collison o Min Max. Y por mi por qué valores Min Max. No quiero el campo pobre. Quiero el campo de las habitaciones y para mi brazo y valor máximo otra vez. No quiero a los pobres. Yo quiero el valor porque esos los campos que están impulsando la posición Y en este caso y el tamaño de la burbuja en este caso. Y entonces una vez más, voy a usar algo similar. Voy a crear dos escalas más. Voy a crear una escala Y y en nuestra escala Y en lugar de los X Men, Max, voy a usar el Wyman Max. Entonces para mi Wyman Max, voy a decir 0 a 300. Tan solo veremos cómo se ve eso por ahora. Y ellos para mi nuestra escala. Voy a usar el brazo y Max en lugar de los X Men. Máx. Y solo voy a decir manualmente que quiero no quiero que mis círculos sean más pequeños que dos o digamos más grande que 10 radio de decenas de diámetro de 20. Y así una vez más, hago lo mismo que hice aquí abajo. Digo usar la escala y con este valor. Y usé la nuestra escala con este valor. Y ya no necesito ese divisor. Entonces si guardo, golpeo, refresco y miro lo que tenemos. Entonces vamos todo el camino desde arriba hasta que sólo lo dije a 300. Supongo que mi estatura es ¿Qué es? 500. Sólo es cambiar a 500 ver qué pasa. Sí, ahora va todo el camino a la parte inferior de todo el camino a la parte superior, siempre la inferior todo el camino a la izquierda todo el camino a la derecha, y así es consumiendo todo el espacio que tengo disponible para mí, que es un gran punto de partida. Pero, ya sabes, se está escapando del filo. Eso es raro. Por lo que también hay una manera fácil de arreglar eso . Ya sabes, yo le digo que empiece en cero y termine en 500 comenzó cero y entró 1000. Pero por qué en realidad no pongas eso para que maneje ese mawr elegantemente y la forma en que voy a hacer eso ya que tengo mi ancho y altura como variables aquí arriba, voy a agregar una nueva variable llamada Margin en mi set Eso a 30. Digamos que sí. Los 30 píxeles de margen en mi gráfico es lo que busco. Y así ahora no quiero poner eso mi valor mínimo en cero. Yo quiero ponerlo al margen. En otras palabras, 30 píxeles de la izquierda y luego mi valor máximo en lugar de 1000. Yo quiero sacar el con menos el margen, así que van a ser 970 píxeles. Pero la razón por la que estoy haciendo esto es que si quisiera duplicar el tamaño, solo podría cambiar este número y automáticamente resolvería cómo hacer todos mis ajustes aquí abajo. Y así de igual manera, voy a decir por mi por qué valores quiero que el valor mínimo en vez de estar en cero vuelva a ser el margen en este caso en lugar de con mi margen culo, voy a decir altura, mi margen más alto porque no estoy hablando de ir así con mi sabio. Está todo el camino de aquí a aquí. Por lo que había guardado hit, refrescar. Y ahora todo se mueve en 30 píxeles de todos los diferentes bordes. Pero esto trae a la luz un tipo importante de cosas interesantes. Y ya lo mencioné brevemente antes. Creo que donde, ya sabes, tenemos menos pobres, ricos, más pobres a la derecha, y los más pobres tienen menos habitaciones. Pero es que sube, y eso simplemente se siente raro para la gente. Incluso es un número menor porque el Y cero aquí arriba y alto sabio aquí abajo. Entonces, ¿cómo arreglamos eso? Ya sabes, usar escalas se vuelven tan fáciles de arreglarlo porque todo lo que tengo que hacer es decir, ¿ sabes qué? Para mis valores de entrada, en lugar de tener mi valor mínimo y eso está asociado con lo más lejano que conozcas, el más bajo. Por qué, que está en la parte superior y mi valor máximo con la Y. puedo simplemente intercambiar estos. Puedo decir, ponerte uno máximo en la parte superior y el mínimo en la parte inferior. Y yo podría haber dejado estos igual y dicho Swap estos dos. Pero cualquiera de las dos funciona. Ahora, si golpeo refresco, todo el asunto va a voltear verticalmente. Y ahora, sí, cuanto más pobre me dan menos habitaciones, cierto, cierto, causa usualmente leer la báscula para los sabios, pasando de un número bajo del dedo del pie, un número alto. Entonces simplemente lo hizo automáticamente muy fácilmente para mí. Entonces las escalas no son solo para la colocación, puedes hacer otras cosas con escalas, y voy a usar otro tipo de escala aquí, y voy a llamar a esta escala ver, porque voy a estar usando esta para los colores Así que en lugar de usar una escala lineal, voy a usarnos escala poco ordinaria. Por lo que esta es escala de puntos de escala orginal. Y esto también tiene un dominio y látigos un rango aún tiene valores de entrada y salida. En este caso, el dominio es esencialmente, um, valores únicos recubiertos duros. En mi caso, que de nuevo podría hacer esto dinámico. Yo quería, pero no hay necesidad de hacerlo, y los valores de salida están esencialmente asociados directamente con cada uno de estos. Por lo que una escala lineal va a cualquier parte de aquí a aquí. De hecho, como vio antes, incluso saldrá fuera de los límites de la demanda que proporcione. tanto que una escala ordinaria asocia literalmente el primer valor y luego el rango al primer valor en el dominio y el segundo valor con los segundos valores del directamente empatado. Eso es lo que voy a hacer aquí es que sólo voy a darle un valor decimal hexi de valor de color . Y tengo por mi valor máximo, el que voy a poner las cosas en naranja por el valor mínimo. Van a ser de este color gris. Y así la forma en que voy a usar este es para formar. Lleno color, y así voy a cambiar esto a una función, Andi, como te puedes imaginar, devolver escala C. Y en este caso, voy a usar el d dot Charles. Y entonces lo que está pasando aquí es que digo, si recuerdas que el Charles Field, si vuelvo a la hoja de cálculo aquí, es éste los setos, ceros y unos. vez en cuando se ve uno lo que significa que este distrito está cerca del río Charles. Y así digo literalmente, pasar un zur o uno de ese campo si cero me pasó un valor gris, si es uno, pásame un valor naranja. Y así ahora que alguna vez firmó que yo regrese, golpeo, refresco y boom. Ahí lo tenemos. Tenemos puntos anaranjados, tenemos puntos grises. Ahora los puntos anaranjados son un poco difíciles de ver por dos razones. Uno está ahí opacidad. Y eso es bastante fácil arreglar uno. Agrega algo más a esto en lugar de configurarlo manualmente. Una vez más, puedo usar una función. Y así voy a volver a usar los datos encuadernados. Y en lugar de sentarse en un cordero para decir retorno Dida, Charles es igual a uno. Si es así, devuelve uno si no regresa, digamos 0.3. Entonces si no estás familiarizado con la declaración taquigrafía if else en JavaScript esto es lo que parece. Esto dice literalmente si esto es cierto, Dita Charles es igual a uno. Esto es lo que te dice que es una declaración if. Entonces haz esto de lo contrario haz esto y así se va a devolver ese valor. ¿ En base a qué? Ya sabes lo que es cierto aquí? Así que ahora, una vez más, golpea, refresca y boom estos aire perfectamente opacos Considerando que estos son bonitos y se desvanecieron de nuevo Muy poco un pase pero como puedes ver, todavía tengo un problema porque estos naranja puntos están detrás de algunos de estos puntos negros y realmente quiero que destaquen los anaranjados. Y sobre todo si tuviéramos un punto naranja realmente pequeño detrás como múltiples puntos negros, tal vez ni siquiera podrías verlo en absoluto. Por lo que esto también es flexible y la forma en que es flexible es entender algo muy importante sobre svg. SPG se trata de la orden. Los elementos aparecen en el dom en la página. Por lo que la primera fila de datos dispuestas este primer dotnet lo dejó caer aquí el 2do 1 está aquí. El 3er 1 ya está aquí. Y así si los tres estuvieran uno encima del otro, este 3er 1 aquí estaría literalmente encima de éste de aquí. Éste no sería visible, mientras que éste sería visible. Y así todo se trata de la colocación en el orden. Entonces eso me dice que si ordenara los datos para que todos los datos fueran ordenados por el campo Charles River y todos los ceros vengan primero, todos los grises y todos los anaranjados vengan más tarde, Así que los anaranjados entonces estarán encima de esos grises. Por lo que ordenar y el script Java es un poco raro, la sintaxis. Pero no es difícil. Es sólo un poco raro y un poco confuso a veces. Por lo que la forma rápida y fácil de hacer la clasificación es simplemente usar los trabajos integrados, obtener la función. Simplemente voy a ellos a decir que los datos son iguales a data dot sort, y lo que haces aquí es una vez más, usas una función y son dos parámetros que se usan en la función. Y esencialmente, sólo se lee así y yo sólo lo explicaré. Charles, menos venció a Charles. Entonces, esencialmente, lo que la clasificación fechada hace y JavaScript es. Pasa por los datos una fila, un elemento de veces, realidad especie de dos elementos en el momento, el primer número de hits y luego el segundo o lo primero que golpea la primera fila de datos. Vamos a llamarlo en la segunda fila de datos y al decir regresar ocho fuera, Charles menos venció a Charles solo le estaba contando a Javascript. Si son los números bajos, hazlo primero. Si es el gran número puede llegar segundo. Si yo invierto esto venció a Charles menos ocho Charles, realidad revertiría ordenarlo. Por lo que puede parecer un poco confuso. Definitivamente. Busca clasificación y JavaScript en otro tutorial para aprender más al respecto. Pero por ahora, no te preocupes por ello. Esta es la sintaxis es justo como funciona. Entonces una vez más, ahora para estos, como, mira estos puntos por aquí que están una especie de detrás de estos otros puntos. Cuando golpeo Refresh. Ahora están en la cima porque van a venir más tarde, al ser empujados al, uh, campus al escenario por d tres e iba a hacer otra cosa en el código muy rápidamente. Um, ya sabes, hemos hablado un poco de alcance variable aquí, y tenemos nuestras variables globales aquí arriba. En realidad voy a añadir mi escala de ex. ¿ Y por qué escalar variables aquí? Porque necesito usar los que están fuera de esta función más adelante. Esto es sólo futura prueba ings. Sé que voy a querer una referencia thes en otra parte. Y así ahora si lo declaro aquí arriba, más bien aquí arriba, entonces estarán disponibles para mí más adelante. 6. Uso de ejes de D3: Está bien. Por lo que todavía tenemos algunas otras cosas que queremos retocar en este proyecto. Y, um, en realidad noté un error que cometí antes. Si recuerdas, cuando miramos el código, um, ya sabes, había añadido esta clase esta clase de punto, y había puesto el trazo a este color. Pero tengo citas alrededor del valor del color, y así te das cuenta que aquí no vemos el trazo. Y tan clásico ejemplo del tipo de error que cometo todo el tiempo. Ya sabes, si no lo hago, no necesitas citas alrededor de ese valor de color, así que necesito sacarlas. Ahora si toco Refrescar. Y ahora podemos ver este bonito contorno negro alrededor de nuestros puntos anaranjados. Y porque su opacidad al 100% los veo, estos otros que son, ya sabes, esencialmente menor rapacidad. Realmente no te das cuenta, pero en realidad está muy sutilmente ahí porque no te olvides, este es en realidad un color de sensación gris, creo. Cuento largo corto. Yo sólo quería arreglarlo realmente rápido. Entonces lo que vamos a hacer en esta lección es agregar la línea de acceso. Entonces aquí está la versión terminada y tenemos, ya sabes, nuestro valor máximo mínimo. Tenemos nuestras pequeñas líneas verticales y horizontales. Ya sabes, tenemos hachas. ¿ Y cómo se crea un acceso? Bueno, ya sabes, podríamos simplemente crearlo manualmente ¿verdad? Podría literalmente dibujar manualmente una línea horizontal que comienza aquí y termina aquí manualmente. Dibuja esta pequeña línea principalmente. Suelta esta pequeña línea, dibuja principalmente las etiquetas. Se lo dice uno por uno. Eso sería una especie de dolor en el trasero. ¿ Por qué lo harías así? Eso es una locura. Por suerte, claro, voy a decir que D tres tiene herramientas integradas para hacer esto muy fácilmente. Tan como la última lección. Este va a estar bastante involucrado. Va a llevar un tiempo. Los ejes son Es una gran herramienta. Construido en dos. D tres da unos pasos, pero de nuevo, copiar pegar. En realidad es un concepto bastante sencillo. Simplemente toma unos pasos diferentes en unas pocas líneas de código diferentes para hacerlo. Entonces déjame volver a nuestro documento de trabajo aquí y a nuestro código, y lo primero que tengo que hacer es crear una variable que solo voy a llamar eje X. Y así voy a decir X acceso igual a D tres puntos esperanzas acceso abajo y lo que no es Boston fondo. Y quería usar mi escala ex. Entonces, ¿qué está pasando aquí? Estoy creando un objeto, y estoy diciendo que quiero usar D threes incorporado en el método Bottom de acceso y un fondo de acceso es literalmente solo un acceso inferior. Ese es el tipo de acceso que vive en la parte inferior de los gráficos normalmente, que es lo que Es un eje X, verdad? Así es como nos referimos a ella. Y verás que en realidad no termina en la parte inferior de la página por defecto. Tenemos que moverlo. Pero también tenemos que decirle qué escala usar, porque entonces D tres automáticamente lo hará bien con el uso de ese dominio y rango que configuramos arriba en la escala. Por lo que de verdad ayuda a que sea fácil ajustar tus ejes por el camino a medida que cambien tus datos , y te lo mostraré en un momento. Lo siguiente que necesito hacer es crear otro objeto al que voy a llamar X X SG y lo que es el Eje X G y lo que esto va a contener es un elemento de grupo SPG. Tan spg dot upend G y elementos así agrupados. Los elementos G son cosas realmente buenas saben usar. Esencialmente, Si pones cosas dentro de un elemento de grupo en SPG, entonces puedes ordenar de actuar sobre ese solo elemento agrupado como un solo elemento. Y así, por ejemplo, si vuelvo aquí, este eje consiste esencialmente en dos etiquetas. Una de la parte superior de la inferior a las marcas de tick, una de la inferior de la parte superior y la línea vertical que las conecta. Es Eso son cinco objetos diferentes si quieres crearlos principalmente. E incluso si quisieras crear una manualmente, podrías. Pero querrías ponerlo en un elemento agrupado G one, para que luego puedas moverlos como un solo objeto. Más bien tener quitando todo individualmente. Eso sería una locura, ¿verdad? Tan larga historia corta, creo mi elemento agrupado. En realidad voy a darle a ese grupo un par de precisas, así que incluso dáselo en i d. E iba a llamar eje X para mi i d para poder referirme más tarde, y también voy a añadir una clase y la clase. Sólo voy a llamar a acceso. Y eso es porque no necesito tener clase de eje X. Eso es un diferente a mi clase de eje y, porque ambos comparten el mismo color y tratamiento visual etcétera, tanto para las etiquetas como para las líneas. Por lo que una clase de acciones hará el truco para esto. Y entonces lo último que necesito hacer es entonces esencialmente tomar ese elemento de grupo que creé ese objeto y llamar al acceso que también creé. Simplemente esta sintaxis es justo como funciona. No te pongas demasiado colgado en ella. ¿ Así es como lo hace ahora que he creado el Eje? Agregado que son, ya sabes, también se creó un elemento de grupo con un par de atributos y luego usar ese elemento de grupo para llamar al acceso. Si vuelvo aquí, hit refresh espera que lo nuevo en lo siento hit, refrescar y Boom. Tenemos una cotización unquote bottom access, a pesar de que está en la parte superior y notarás que un D tres hizo algunas cosas bastante cool, ya sabes. En primer lugar, utilizó automáticamente la báscula, por lo que comienza en lo que sea. Ese valor mínimo es 1.7 y va todo el camino hasta 38 ish en el que se puede decir bien Esto va de 30 a 35. Es así de ancho. Esto es menos por lo que esta es una mentira como tres, no cinco diferencia. También añadía automáticamente marcas de ticulación en algunos intervalos regulares e incluso sumó los valores correctos. Entonces es hacer cosas basadas en algoritmos que son muy inteligentes, muy potentes. No quiero usar los valores predeterminados construidos, que vamos a arreglar más adelante. Pero es bastante bueno, ¿verdad? Este es un comienzo realmente bueno, Así que lo siguiente que quiero hacer es mover el acceso a la parte inferior del gráfico donde pertenece. Simplemente no realmente, realmente quiere vivir en la cima. Es una norma que tu ex acceso viva en la parte inferior del gráfico y tu eje Y viva a la izquierda del gráfico. Entonces la forma de hacerlo es usar algo llamado Transformar porque esencialmente lo que queríamos es mover a todo este grupo, por lo que después de llamar al acceso, solo podemos agregar otro atributo, que es una transformación atributos y lo que voy a utilizar el método de traducción dentro de los atributos de transformación y el método de traducción se ve así. Ahora te darás cuenta. En primer lugar, se trata de una cuerda. Por lo que llamo atributos de transformación y lo traduzco y traduzco esencialmente se traduce a lo estoy moviendo cero píxeles en el eje X y 100 píxeles en el eje Y. Entonces digo, no lo muevas todo horizontalmente, sino muévalo hacia abajo 100 píxeles. Entonces si golpeo refresco ahora, todo este grupo de acceso, todo el asunto debería moverse hacia abajo 100 píxeles para por ahí. Entonces si golpeo refresco Boom ahi iss derecha hizo exactamente lo que quería hacer. Entonces, como se puede imaginar, realmente no quiero moverlo manualmente. 100 pixeles. Podría moverlo manualmente. 470 píxeles, altura derecha Miembro, 500 millas, 30 margen, y iría justo aquí. Pero ¿por qué usaría valores codificados duros cuando algunos de esos valores pueden cambiar por las carreteras y dijo, en realidad estoy cambiando este número codificado duro y uso las variables que ya han establecido en la forma en que voy a hacer eso es, si estás familiarizado con el script Java, debilita haz lo que se llama concatenación de cadenas, que es una palabra grande solo para significar que quiero tomar mi cadena y combinarla con variables y especie de ponerlo de nuevo junto como una cadena. Y la forma de hacerlo es esencialmente, ya sabes, tengo cotización de apertura y cotización interminable, y lo que quiero hacer es tener fin la cotización y volver a abrir la cotización y luego separar con signos más y luego en el en medio aquí, voy a añadir la variable. Entonces si recuerdas, la variable es que tenemos nuestra altura menos margen. Entonces notarás que pongo entre paréntesis porque si lo probé, ¿Cat puede hacer una cuerda y no ponerle los paréntesis a su alrededor? A veces hará cosas raras donde estará, ya sabes, altura menos margen. Y en realidad va a terminar. ¿ Esos dos números son una especie de armar, y terminará siendo un número grande en lugar de hacer realmente la resta primero en, luego poner esos 470 píxeles en esa cadena. Ya sabes, pruébalo, experimenta con él y verás de qué hablo. El cuento largo corto. Si hago esto ahora, si hubiera guardado y golpeado refresco, mi línea de acceso va justo al fondo, es exactamente donde la quiero. Ahora tengo un tema donde tengo un círculo que lo está cruzando, porque una vez más, esto también se está colocando exactamente centrado aquí mismo, y nos ocuparemos de eso más adelante. Entonces lo que quiero hacer ahora es que quiero arreglar este tema donde tengo,ya sabes, ya sabes, marcas de garrapatas interesantes. D tres solo me está haciendo automáticamente, lo cual es genial, pero aquí hay algunos temas. Una es que ya sabes, no hay razón para este mercado de garrapatas 15 Me gusta a quién le importa dónde está el 15 por defecto? Te recomiendo que cuando estés haciendo visualizaciones de datos que utilices como algunas marcas de tick, ya que posiblemente puedas salirte con la tuya. Por lo que mi posición predeterminada es siempre tener el número inferior y el número superior y nada más en el medio. Tienes que convencerme de que incluya marcas extra, valores extra, porque si no sirven a un propósito, entonces no deberían estar ahí porque realmente son una distracción visual. Te quitan el ojo de los datos, que es realmente donde quieres enfocar a tu audiencia. Entonces hay un montón de maneras diferentes de hacer esto. Una cosa está construida en dos D tres ejes, por supuesto, porque son tan geniales, puedo hacer cosas como, digamos, agregar a esto, ya sabes, eje X. Va d tres puntos en exceso fondos x escala. Yo sólo podría decir garrapatas cero. Y si guardo y golpeo, refresca Ahora mira lo que pasa. No tengo garrapatas, ni etiquetas, ni etiquetas, ni marcas extra, sólo la marca de inicio y final así y que podría colocar manualmente el número inferior y superior aquí. Pero esa no es la forma más útil de hacerlo. En cambio, puedo usar algo llamado valores de tic. Y así los valores de tic es una especie de porque puedo interesarme manualmente decir, quiero valores de boletos a, digamos, tres látigos tres y 12 y te darás cuenta de que estos aire en una matriz Vale, así que solo, tú saber, nuevo, si haces esto y pasa algo raro, probablemente estás olvidando los corchetes en la coma. Y así si digo poner, toma valores a las tres y a las 12 y golpeo Refresh Look, hay una garrapata que marca a las tres. Y luego hay 1 a 12 ya sabes, y Aiken, porque es una matriz tienen tantos de estos que quiero que yo quería 33. ¡ Boom! Ya hay 1 33. Por supuesto, no quiero valores de tick colocados aleatoriamente. Eso es un poco raro. En cambio, quiero sólo tener uno del número inferior y uno en el número superior. Y no olvides que ya tenemos una variable que contiene nuestros números inferior y superior. Derecha son valores mínimos y máximos, por lo que puedo copiar esa variable. En lugar de hacer esto manualmente, puedo decir Use my tent X Men Max, First Value y My X Men Max Valor máximo, second value save. Y ahora tengo uno en la parte inferior y uno de la parte superior, y notarás que está usando enteros por defecto. Eso es lo que sabes. El D D D D tres métodos de acceso utilizan. Hay una manera de cambiarlo para usar el valor de flotación en, pero no me voy a molestar en hacerlo ahora. Siempre podemos ajustar ese tipo de cosas más adelante, así que lo siguiente que quiero arreglar relacionado con reducir la distracción visual son los jugadores coloniales, porque también recomiendo encarecidamente que nunca uses negro contra un fondo blanco sus líneas de acceso o etiquetas de nuevo, desea reducir el contraste, reducir la distracción. No quieres que tu público esté enfocado en tus líneas de acceso y etiquetas. Tienen que poder leerlo, pero no necesitan estar llamando la atención sobre sí mismos. Por lo que me recomendaron usar una lluvia como ya creamos ah style. Agregamos una clase a esos objetos y así puedo crear una clase en mi CSS usando el acceso de puntos. Y cuando necesito hacer es decir línea de acceso de puntos y ruta de acceso de puntos. Y voy a establecer el ah stroke para que ambos sean un lindo como Ray. Entonces, ¿por qué hice la línea Don Access y obtuve la ruta de acceso? Bueno, si miramos el acceso real en el derecho inspector, los elementos aquí está el elemento de grupo, que contiene todas las cosas bien. Y si abro eso labios y puedes ver que tiene el eje de clase. Si abro eso hacia arriba, hay un camino, que es como D tres crea la línea horizontal y también hay cada tick y cada tick es un grupo que consiste en una línea, que es el conector vertical y el texto. Y así por la razón que sea, D tres crea caminos y líneas. Y así ambos necesitan tener eso, como, gracia, gracia, color de trazo. Y también está el texto que contiene la propia etiqueta real. Y así, mientras estoy en ello, bien podría decir texto de eje de puntos. Y quiero que eso use el color de relleno. Y recuerda, tengo que usar a Phil, no la palabra color aquí. Si uso color, no va a pasar nada. Entonces de nuevo, buen lugar para depurar tu código. Probablemente vas a usar el color por defecto si lo haces mucho HTML y CSS, no puedes. Tienes que usar a Phil. Así que llénalo con el mismo gris volver a golpear refresco. Y ahora son agradables, como tasas legibles, Pero no es distraer. Entonces ahora hagamos lo mismo para el eje y, ¿ verdad? Entonces voy a volver a bajar a mis hachas y voy a crear Oh, ¿por qué objeto Access? Y en lugar de una escala inferior, usó lo que se llama escala izquierda. Y en lugar de usar la escala x, voy a usar el objeto escala Y. ¿ Cuántos es mi por qué valores Min Max? Y voy a crear otro objeto llamado Why Access G. Y esto, claro, usa mi brazo en un hermano. Asignarle una idea de por qué el acceso y de nuevo tiene la misma clase. Y luego voy a usar eso. ¿ Por qué? ¿ Grupo de acceso? Voy a llamar al objeto del eje y. Y en lugar de traducir cero horizontalmente y 470 o lo que sea verticalmente en este caso, quiero tener esta cosa en lugar de estar justo aquí camino en el punto cero, que es donde estaría por defecto. No quiero moverme verticalmente en absoluto. Yo quiero moverlo horizontalmente. 30 píxeles. Entonces si vuelvo aquí en lugar de hacer la contaminación en ese valor y salmón para hacerlo en el primer valor, entonces ahora lo va a mover horizontalmente y no verticalmente. Pero claro, no quiero moverlo. Altura menos margen. Yo solo quiero moverlo 30 pixeles por encima de la izquierda. Y así solo voy a decir, muévalo por encima de la misma cantidad que la variable de margen. Podría Hagit código duro a las 2 30 si quisiera, pero solo lo voy a hacer como margen por ahora. Entonces ahora si golpeo, Refresca Ahí lo ISS. Ahora te darás cuenta de que ya sabes, tengo de nuevo círculos cruzando líneas porque de nuevo se colocan exactamente el mismo lugar que vamos a arreglar más adelante. Y los ejes mismos se cruzan entre sí, lo cual no necesariamente es un problema. Pero vamos a arreglar eso mientras arreglamos algunas de las otras cosas. Y este es otro caso en el que los ejes,ya sabes, ya sabes, hacen que sea mucho más fácil de hacer de lo que se podría pensar de otra manera. Y entonces lo que voy a hacer es que en realidad ya sabes, tenemos nuestras variables aquí arriba con margen de altura. Decía que voy a añadir otra variable que voy a llamar sólo a nuestros valores. Y sólo voy a asignar esto para que sea una matriz de una lista de dos cosas en este caso que va a ser de dos y 10. Si recuerdas, tenemos nuestro mínimo, y el tamaño máximo de burbuja se entiende. El más pequeño es de dos píxeles y radio. El más grande es de 10 píxeles. Y así quiero querer usar esos valores en unos cuantos puntos diferentes. El primer lugar que lo voy a usar es en establecer mi báscula. Entonces si recuerdas para nuestra gama derecha, nuestros valores de salida, dijimos, ponlo desde la izquierda. Ya sabes, el valor mínimo será exactamente 30 píxeles de la izquierda, y el valor máximo será el ancho completo de menos el 30. Entonces 1001 es un 30 que es 9 70 y eso está bien. Pero si sólo quiero meter todo bien, quiero que no quiero a este tipo aquí mismo. Yo quiero que lo empuje un poco. ¿ Y cuánto quiero que lo empuje? Por qué uno empujó sobre literalmente, exactamente la misma cantidad que el radio justo la mitad del ancho del círculo. Porque entonces estará justo por aquí, y el borde de la misma estará exactamente en el borde del acceso mismo. Entonces puedo hacer eso usando eso nuestros valores. Entonces puedo decir, poner el valor X mínimo en las coordenadas X en el margen, más nuestros valores, esa cosa que creé máximo. Entonces, en otras palabras, siempre va a lamentar. No 10 solo uno. Siempre va a ser en este caso porque hay valores se establece en 10. Va a ser un 30 más decenas de 40 píxeles sobre y lo mismo el ancho menos margen menos nuestros valores. Valor máximo. Y así ahora, si golpeo, refrescar todo va a mostrar un poquito, ¿ verdad? Entonces, literalmente, este tipo está ahora golpeando el filo y yo podría retocar eso. Puedo agregarle uno o dos píxeles si quisiera, Pero eso es algo que te puedes retocar más adelante. Entonces tengo mis valores. Yo lo estoy agregando a este año, y voy a hacer lo mismo abajo por el por qué no lo quiero desde arriba. Yo quería la parte superior más el radio máximo, y lo quiero de nuevo. El alto menos margen menos ese radio. Entonces otra vez, si doy refresco ahora, todo va a meter un poco verticalmente y te darás cuenta de que algunos iba a cerrar a este tipo. Entonces no sigue, uh, uh, destacando a medida que voy de ida y vuelta. Y bien podría cambiar estos porque por qué, dijo Thies, codificado duro cuando estos podrían configurarse manualmente o abusar de datos dinámicos también, así que voy a usar el valor mínimo y máximo que tengo viniendo de mis variables aquí abajo. Por lo que una vez más, guardar hit, refrescar. Nada visible. Cambia su causa. Ya vimos lo que habíamos hecho antes. Ahora, una de las cosas que notarás es que este círculo está, ya sabes, ni siquiera al borde porque este círculo es más pequeño. Estamos metiendo todo en por 10 en Este tiene un radio pequeño. Por eso este está al filo. Pero éste no lo es. Y ya sabes, mientras estoy metiendo con mis números aquí, voy a hacer que el círculo más grande sea un poco más grande. Voy a llamarlo 15. Ahora si digo que los círculos más grandes son un poco más grandes, las cosas todavía se meten automáticamente, se mueven, se colocan exactamente donde necesitan estar. Y ese es el valor de usar variables en lugar de establecer las cosas manualmente. Si tuviera un montón de lugares donde establecería los valores r manualmente, tendría que cambiar. Entonces, ¿cada lugar dónde está ahora? Simplemente lo cambio en un solo lugar y en actualizaciones en todas partes que necesitaba. Está bien. Las cosas se ven bastante bien. Creo que todo lo que queda por hacer ahora es animar esto y agregar un poco de interactividad , y estaremos bien para ir. 7. Animación en D3: Está bien. Por lo que nuestro diagrama de burbujas de diagrama de dispersión aquí se ve bastante bien. Estoy muy contenta con ello. Y, um, siguiente, lo que quiero hacer es animarlo, darle vida porque, ya sabes, estamos usando JavaScript. Estamos creando una cosa dinámica que vive en un navegador web, y tenemos a nuestra disposición las herramientas para al menos darle vida visualmente, un poco más, un poco más, lugar de simplemente cargar esta cosa y tener que ser un gráfico estático debilitar. Tan solo dale un poco de caramelo para los ojos, que en realidad es algo muy importante. Ya sabes, la estética importa en las comunicaciones, y eso es lo que es esto. Se trata de comunicaciones. Y así, si pudieras hacerlo hermoso y atrayendo una animación es una gran manera de hacerlo, bien podríamos hacerlo. Entonces solo voy a ir al código por aquí. Y lo primero que voy a hacer es que ya sabes, creamos estos círculos. Damos a los círculos atributos como su posición X e y ahí, radio, tamaño, relleno, color, rapacidad, etcétera. Y entonces lo que voy a hacer primero es cambiar el radio de estos círculos. Simplemente voy a borrar la función. En realidad lo voy a cortar usando, ya sabes, comando X en el control Mac Exxon PC para poder pegarlo más adelante. Y sólo voy a cambiarlo manualmente, Volver a cero. Algo golpeó, guardar y refrescar y cargarlo. ¿ Y qué vemos? ¿ Qué vemos? Nada, ¿verdad? Porque todos los círculos que, por cierto, siguen ahí. Entonces si entro en el CO, los elementos aquí y abro quizá el gráfico y el SPG, todavía tenemos círculos. Todavía tienen atributos X e y. Y todavía hay posicionado exactamente donde se supone que deben estar en la pantalla, como puedes ver mientras vuelvo sobre estos, pero todos tienen un radio de cero. Y así son objetos que no tienen anchura y altura, por lo que son esencialmente invisibles. Pero están ahí. Está bien, así que aún existen. Todavía están en pantalla, Simplemente no tienen visibilidad alguna. Y vamos a cambiar eso en animación. Entonces la forma de hacer eso son estas dos cosas rápidas Lo primero que voy a hacer es agregar una llamada de función aquí abajo. Entonces una vez que mi script está hecho, he ya sabes, creado mi objeto SPG Conjuntos de variables crean el objeto SPG. Leer los datos, ordenarlo configurar mis cosas de escala, agregó los círculos fuera de las líneas de eje. Y ahora voy a decir, Por favor, haz una actualización. Y esto Esta es una función que voy a crear llamada actualización. Podría llamar a esta cosa. Lo que quisiera, lo iba a llamar actualización y luego crear una nueva función aquí abajo y notarás que está fuera de esta función en la que hemos estado trabajando arriba. Recuerda estos estos tirantes rizados que terminaron con la función que comenzó con cuota de CS de tres puntos D , Lo que trae a la vanguardia aquí una idea muy similar al alcance variable. Esencialmente, las funciones tienen alcance para. Y así si fuera dedo escribir el código para ejecutar lo que quiera que pase en esta actualización, la animación dentro de esta función, como donde está el resto de estas cosas, entonces no tendría acceso a ella fuera de esa función. Ahora, en esta lección que estoy enseñando en d tres, no vamos a hacer nada con eso, Pero es una buena práctica poner tus actualizaciones, cosas fuera de esa función de llamada de datos porque luego más adelante como, digamos, tenía un botón en la página. Quiero hacer clic en ese botón que tal vez cargue nuevos datos o cambie cosas que quiero reanimar cosas. Si está fuera de esa función original, entonces tengo acceso a ella cuando hago cosas como hacer clic en botones. Por lo que es solo una buena práctica hacerlo de esta manera. Entonces voy a llamar a una función llamada Actualización, y luego tengo que crear esa función. Y esta es la sintaxis para hacer eso. Y ahora esa función va a consistir en el código para hacer que la animación suceda. Y así, como acabo de decir, ya sabes, tenemos su objeto llamado círculos, que sostiene nuestros círculos que creamos y atamos a los datos y agregamos atributos a lo que puedo hacer. Esta función de actualización se refiere a ese objeto. Por eso agregamos ese nombre de variable, ese nombre de objeto. Es una llamada de un minuto es voy a decir sólo círculos punto transición Y esto es sólo otro gran método. Construir en D tres que te permite crear animaciones suceden. Se quiere una transición cosas en el escenario y hacer que las cosas sucedan. Y entonces lo que quiero hacer que suceda es, ya sabes, cambié mi radio a cero. Y así quiero animar el radio a lo largo del tiempo. Y así la forma de hacer eso es decir, atributo de punto de transición en círculo Porque lo que quiero una transición son los atributos en sí . Y así quiero transitar los son atributo el radio volver aquí y pegar en esa función que copié antes, y así literalmente estoy diciendo tomar mis círculos animar los son atributos y animados a este valor que nosotros utilizado anteriormente. Está bien, así que voy a ahorrar y soy un hit refresco y ver lo que pasa. Todos se animaron sobre el escenario, y sucede muy rápidamente porque la velocidad predeterminada la animación es bastante rápida. Um y así lo iba a cargar de nuevo. Simplemente lo puedes ver una vez más. Es el animado encendido. Está bien. Es mejor que no animar, supongo. Pero es realmente rápido. Y así en lugar de simplemente animarlos a todos a la vez, lo que quiero hacer es que se retrasen y sólo voy a mostrar la sintaxis para retrasar las cosas y simplemente mostrarles una cosa rápida. Por lo que antes de hacer el cambio de atributos, quieres decirle que haga que ocurra el retraso. Y así digamos que entré aquí y dije: Sólo retrasar 1000 milisegundos y el retraso. El valor siempre está en milisegundos, por lo que 1000 milisegundos es de un segundo. Entonces si golpeo guardar, presiono Refresh. ¿ Qué va a pasar, verdad? Vamos a ver una pantalla en blanco de Bakes por un segundo, y luego sigo animando en muy, muy rápido, tan en blanco y luego animo. Entonces eso está bien. Eso es por lo menos puedo ver que están animando por separado de los ejes. Ya es un poco mejor de lo que era. Pero lo que realmente quiero hacer es que cada punto se anime individualmente uno por uno en el orden en que aparecen en el en el escenario de la pantalla. Entonces la forma de hacerlo como también puedo cambiar una vez más este retraso en una función. Y entonces lo que voy a hacer es decir función, tal vez algo un poco diferente aquí. Además de pasar el valor de datos en sí, lo que puedes hacer en cualquier función como lo hemos hecho muchas veces donde pasamos en los datos enlazados y luego podemos referirnos a los nombres de campo para hacer cosas con él. También se puede, en cualquiera de estas funciones, referirse también al número de índice de lo que sea que se esté pasando. Y entonces, ¿qué significa eso? Ya he hablado de índices antes donde, ya sabes, creé un rayo llamado X Men Max, y era un, ya sabes, un array con dos elementos en él. Entonces el primer ítem es esa posición de índice cero, y el segundo ítem es una posición de índice uno. Entonces sólo el orden en el que se almacenan estas cosas en estas funciones donde tienen datos enlazados , que tiene 506 elementos en él? Cuando digo hacer cosas y hacer cosas en base al valor del índice, que siempre es el segundo parámetro disponible para ti en estos rayos, esencialmente, significa que va a estar buceando a través de esos 506 valores. Y tengo acceso a ese número 12345 en todo después de 506. Entonces, de hecho, si consolo duda, log que ahora ahora que me he referido a ella. Sí, no me refería aquí abajo, pero podía hacer lo mismo en cualquiera de estas funciones. Pero me refiero aquí. Por lo tanto, puedo acceder a ella aquí. Cónsul, dialogar golpeó, refrescar y ver qué pasa? Se lo escribe. Mira, todos esos números acaban de escribirse porque tengo acceso a todos esos números todo el camino de 0 a 505 ¿verdad? Ni cinco ni seis. Buenos arranques en cero. Y entonces lo que voy a hacer ahora no es decir Ok. En lugar de retrasar 1000 milisegundos, quiero retrasar. Y de nuevo, tengo que usar esa palabra de retorno. Yo quiero retrasar exactamente ese número. Por lo que el primer círculo que aparece va a retrasar cero milisegundos. No va a retrasar en absoluto porque es índice cero, el 2do 1 que es que el índice uno va a retrasar un milisegundo. El tercero va a poner a milisegundos. Y una carrera de cinco en el 6º 1 va a poner 505 milisegundos poco más de medio segundo. Entonces si refresco mi pantalla, vas a ver animar en uno por uno bastante rápido. Se ve bastante dulce en este punto, pero es poco demasiado rápido. Sólo voy a ahora, solo manualmente, ya sabes, digamos multiplicarlo por 10 y ahora va a ir más despacio. Por lo que el punto 506º se va a retrasar 5000 y 60 milisegundos. Por lo que poco más de cinco segundos. Y así toda esta animaciones va a tomar cinco segundos. Y ahora se ve realmente elegante y agradable y limpio y sencillo. Y puedo ver como se construye a través de todo el conjunto de datos. Simplemente se ve hermoso. Es realmente una buena forma de ver las cosas. Entonces otra cosa que vale la pena señalar es que las transiciones, ya sabes, animaciones y D tres realmente pueden suceder en, ya sabes, casi cualquier cosa. ¿ Verdad? Entonces aquí estoy, ya sabes, provocando que se produzca una transición. Yo lo estoy retrasando. Y entonces lo que realmente estoy transicionando es los son atributos, correcto, El radio de los círculos. Si quisiera, podría cambiar, ya sabes, enemigo. Cualquiera de los otros atributos he establecido la exposición, la posición Y, el color de relleno, la capacidad, etcétera. Y así sabes, por ejemplo, ¿Qué pasa si cambio el valor X a cero por defecto y luego transición el valor X para que sea esta cosa? Lo que pasaría es que todos los puntos comenzarían de nuevo aquí y se deslizarían en su lugar, ¿ verdad? O si paso la opacidad y no el valor de PR En lugar de que los puntos sean diminutos y se hagan más grandes de radio invisible Teoh cero a un radio más grande, simplemente serían invisibles y se pondrían un poco más opacos. Aziz, la capacidad se siente para que puedas animar cualquier cosa. Es realmente genial. Y D tres hace que sea bastante fácil hacerlo. Entonces esta cosa realmente se está juntando muy bien. Todo lo que tengo que hacer ahora es agregar un poco de interactividad y lo que voy a hacer en la siguiente lección es mostrar cómo agregar un efecto de rollover muy simple. 8. Interactividad en D3: Está bien. Por lo que nuestra trama de dispersión se ve genial. Es animado. Todo lo que queremos hacer ahora es agregar algo de interactividad solo para mostrarte cómo funciona eso. Y entonces lo que voy a hacer, Simon y un evento flotante, un consejo de herramienta para mostrar los datos asociados a los puntos o algo realmente sencillo. Y lo primero que debes hacer es realmente crear un div, que esencialmente va a contener mis elementos de punta de herramienta. Y algunos iban a crear un div. Y voy a dar una idea de consejos de herramientas para poder referirme más adelante. Y mientras estoy en ello, bien podría agregar la clase de Tesis es s, que, que, porque quiero asegurarme de que la cosa se vea de la manera en que quería lucir bien. Entonces voy a crear un consejo, más bien una clase CSS. Sólo por eso d punta de herramienta para salmón hacer es voy a decir posición Absoluta. Entonces para aquellos de ustedes que conocen CSS, posicionamiento absoluto solo significa que dondequiera que decida decirle a Javascript que ponga este div, se va a colocar en una posición absoluta, es decir, relativo a la esquina superior izquierda de todo el navegador no una especie de dentro de los parámetros de algo de lo que se sienta dentro solo hace que sea más fácil administrar el posicionamiento exacto. Voy a darle un color de fondo de blanco, y voy a añadir un poco de relleno. Um, creo que todo el camino en realidad, sólo 20 píxeles de relleno. Esto sólo para que cuando agrego contenido a la punta de la herramienta , ya sabes, texto y cualquier otra cosa que ponga ahí, no se aplasta todo el camino hasta los bordes de ese Div. Voy a darle una frontera. Um, y creo que solo voy a hacer, como, un sólido borde negro de un píxel por ahora, no estamos realmente no estoy diseñando esto. Yo solo estoy haciéndolo visible para que podamos ver los bordes para que podamos especie de juzgarlo en términos de éxito que esté funcionando. Entonces déjame solo golpear save en esto. Voy a refrescar la página y qué va a pasar esto y dejarme cerrar a mi inspector aquí. Ahí está mi punta de herramienta, ¿verdad? Está atascado por aquí porque es un día de que viene después de este dispositivo, sólo una especie de sentarse aquí abajo en la parte inferior. No le he dicho que viva en ningún lado. Es visible, pesar de que no tiene contenido en él por el relleno encendido. Por supuesto, eso es genial. Existe. Pero ahora necesito hacer cosas con él. Y así la primera vez que hacer es en realidad soy un anuncio en la clase que tiene cero opacidad es suficiente. Refresco su invisible. Todavía está ahí. Pero es invisible porque sólo quiero que eso se haga visible. Cuando vuelvo sobre un punto y cuando le agrego contenido bien, ese tipo de sentido tiene. De acuerdo, así que quería cobrar vida cuando me dé la vuelta punto ¿Cómo voy a hacer eso? Bueno, vamos a nuestros círculos son puntos y, ya sabes, tenemos estos eventos encadenados. En primer lugar, seleccioné todas las cosas con la clase. Yo lo hice en acción, ya sabes, algo así sucedieron en base a datos. El material que hice para hacer era un bolígrafo círculos y los círculos tienen atributos alguna vez agregaron todos estos atributos. Hay otras cosas que puedo hacer, como agregar mouse sobre dot on mouse over event. Y así, si utilizas Jake cansado, estás familiarizado con este concepto punto en el ratón sobre punto en el ratón movido hacia fuera en el ratón es como se hace referencia en D tres. Entonces si digo punto sobre el ratón y uso una función, entonces lo que puedo hacer es que le estoy diciendo que haga cosas cuando pase el mouse sobre él, como cabría esperar. Entonces lo que voy a hacer aquí es que sólo iba a empezar bastante simple aquí y te darás cuenta de que estoy pasando los datos encuadernados, por cierto, bien. Entonces solo voy a decir esto, voy a crear una variable. Voy a llamar a html. Voy a decir que html es igual a d punto pobre. Entonces, literalmente, solo digo, pon ese pobre porcentaje de pobres de este distrito habitacional en esta variable y luego voy a decir que necesito una especie de decidir dónde quiero que esté la punta de la herramienta en la pantalla. En realidad, antes de que haga eso, solo hagamos este HTML igual a d que pobre. Y entonces todo lo que tengo que decir es, um d tres seleccionar esa herramienta punta div que creamos y darle HTML, que es dot html. En este caso, estoy pasando la edad del nombre variable a una vez más. Podría llamar a esto un nombre de variable? Cualquier cosa que quiera hizo info. Ahora mismo, siempre y cuando diga html sobre una información ella masculina, va a funcionar. Pero solo estoy usando una variable simple llamada HTML. Esperemos que eso no sea confuso. Por lo que he asignado la variable. Estoy seleccionando la punta de herramienta. Digo Ponga ese html en él como HTML. Y así ahora si vuelvo a refrescar la página, no es visible. Pero si vuelvo a subir a mi clase y comento esta línea ahora, va a ser visible ahora mismo puedes ver esos números cambiando a medida que vuelvo sobre diferentes puntos, ¿ verdad? Entonces déjame hacer ese pasaje más fácil otra vez porque lo siguiente que voy a dio es realmente colocar y hacer visible esta punta de herramienta después de que le agrego cosas. Por lo que he añadido mi ht macho. Es invisible porque lo he vuelto a hacer invisible. Entonces lo siguiente que quiero hacer es que quiero decir, Vamos a establecer los látigos de estilo para este div punta de herramienta. Y cuando quiero hacer es antes que nada, hacer la posición de la izquierda a, digamos, sólo 100 píxeles. ¿ De acuerdo? Desde el borde izquierdo, también voy a establecer este estilo. Yo digo, ponlo a 100 pixeles de arriba. Sólo una especie de establecer principalmente estos números para empezar, y tengo que hacerlo visible. Entonces tengo que añadir la opacidad estilo, y me voy a sentar eso a no voy a hacer uno. Voy a hacerlo algo así como un poco translúcido para que puedas ver los puntos detrás de él. Pero sobre todo, ya sabes, su mayoría más opaco de en translúcido guardar. Volver golpe, Refrescar. Por lo que mi punta de herramienta es invisible porque no me vuelco sobre nada. Tan pronto como soy masa sobre algo, se hace visible y está por ahí. Exactamente a 100 píxeles de esta esquina, 100 más y 100 maldita izquierda arriba, Derecha. A medida que vuelvo sobre los diferentes, se puede ver que el tamaño del mismo tipo de cambios en función de tener el número es cuántos puntos decimales hay etcétera. Entonces eso son bienes. Buen inicio. Pero lo siguiente que quiero hacer es que en realidad voy a hacer que esta colocación sea más dinámica. Um, no voy a hacer esto perfectamente, pero te voy a mostrar lo que estoy haciendo y entonces siempre puedes ajustarlo tú mismo. más adelante, en lugar de simplemente decir manualmente Colocarlo a 100 píxeles de la izquierda, lo cual es un poco extraño, como, ¿Por qué querría ponerlo ahí? En realidad no he seguido a mi ratón. De verdad quería estar exactamente donde quiera que vuelvo sobre el punto quiero que aparezca ahí la punta de la herramienta . Por lo que D tres ha incorporado en ella. D tres eventos punto página x. Así que permítanme decir que hit refrescar. Ahora lo que va a hacer es decir D tres dime dónde está el ratón ahora mismo en cuanto a su exposición y poner la punta de herramienta justo ahí. Y así ahí la ISS. Ahora notarás que está alineado con el borde izquierdo de la punta de la herramienta. No está centrado con mi punto de mi ratón, más bien, más bien, así que en realidad tengo que hacer eso manualmente para poder decir D evento de tres días fuera de la Página X. Sólo voy a decir principalmente Tal vez, tal vez eso tiene 200 píxeles de ancho. No sé algo. Restar 100 por lo que manualmente haciéndolo de nuevo. No es la mejor manera de hacerlo. Pero está bien por ahora. Y así ahora está un poco demasiado lejos a la izquierda. Pero como podría añadir, más contenido que Mayo centro mejor. Entonces no me voy a preocupar por eso ahora mismo. Yo solo quiero que se ordene generalmente en la posición correcta, ish por el momento. Entonces me preguntaba lo mismo por el por qué el posicionamiento. Y así voy a decir D tres puntos evento esa página, Por qué voy a ahorrar menos 100 ahora mismo. Una vez más, refresca. Y ahora está siguiendo mi lío arriba y abajo, justo todo el camino, no perfectamente posicionado, pero de nuevo, puedo tuitear eso más adelante. Entonces eso es genial. Estamos haciendo buenos progresos aquí. Lo único que notarás, sin embargo, es que aunque esto esté haciendo lo que yo quería hacer, lo único que no está haciendo es una vez que me muevo, no está desapareciendo. Entonces eso es raro. Eso no es bueno. Yo también tengo que arreglar eso . Entonces como te puedes imaginar, si has hecho alguna programación con Hickory antes, también tengo que añadir un punto en el mouse out evento pasado en función, y en este caso ni siquiera necesito enlazar los datos. Es decir, no necesito pasar esos datos ligados a la disfunción del Islam. Es solo para decir, Hey, Hey, selecciona esa punta de herramienta y escóndela para mí. Entonces d tres sí selecciona la punta de herramienta Div y vamos a establecer el estilo Y sólo voy a ir a algo realmente simple. Simplemente voy a decir, muévalo 1000 pixeles a la izquierda, Negativo 1000 justo fuera de la pantalla y mientras estoy en ello Pero realmente no necesito hacer ambas cosas, pero voy a no saber por qué. Volvamos a ajustar la capacidad a cero a Y así si solo hago eso había guardado hit refresh. Ahora sigue mi ratón y su activo tan pronto como los puntos disponibles en la pantalla, incluso mientras se anima a la derecha. Y una vez que me muevo , desaparece. Entonces ahora tengo una punta de herramienta funcional, realmente haciendo más o menos lo que quería hacer. Pero creo que quiero agregar más contenido a la punta de la herramienta. Esto es funcionalmente suficiente, pero solo quiero mostrar uno del concepto aquí. No tienes que solo pasar un valor que sabes que podemos hacer miembro de concatenación de cadenas. Hablamos de eso antes. Y si quisiera una especie de darle más información en la punta de herramienta. Bueno, una cosa que podría hacer es decir, OK, OK, HTML es igual al texto primero. Quiero que sepas, este es el valor X. Entonces iba a decir X, te voy a decir que este es el poro, um, campo. Y así que eso es genial. Entonces ahora si golpeo refresco Ahora puedes mirar, piensa que me rompí algo. Ah, me olvidó agregar la ciencia plus, Ver que me olvidé de puedo No puedo hacer esas cepas otra gran, uh, uh, cosa de depuración de código donde has hecho algo Todo lo que se rompe y las cosas como olvidar más signos en el medio es un ejemplo clásico de un error que cometerás. Entonces ahora veo esa cadena completa que ambas cosas contaminaron juntas especie de armar , y bien podría darles todos los valores de campo. ¿ Verdad? Tenemos a Ford. Todo está pasando aquí. Tengo la X, el por qué el radio del círculo y también el color, ¿no? Entonces déjame cambiar todas estas. Te estoy asegurando el por qué el son y el color y el por qué es el campo de los labios Crooms. Entonces pongamos eso aquí, la R es el valor mediano de cada propiedad, y luego el color se basa en ese campo de Charles River. Entonces si hago esto, sin embargo, si no hago un cambio rápido lo que notarás estoy diciendo que HTML es igual a esto. Y entonces digo que HTML es igual a eso. Entonces esencialmente estoy restableciendo la variable de milla extra cada vez aquí. Eso no es bueno. Lo que necesito hacer en realidad es hacer más iguales para estos subsecuentes. Y así si no estás familiarizado con esta taquigrafía, estoy diciendo que HTML es igual a algo para esta primera fila y estoy diciendo, Ahora agrega esto, luego agrega esto y luego agréguele esto. Por lo que sólo estoy sumando a ello en el camino. Entonces ahora si digo incluso golpear refresco ahora toda la información está ahí dentro, pero está todo en las mismas líneas. No he agregado saltos de línea ni hecho ningún otro estilo, no la mejor manera de hacerlo, sino una forma sencilla de hacerlo. Puedo literalmente simplemente agregar saltos de línea principalmente. Hay otras formas de hacer esto, pero yo iba a hacer la manera rápida y fácil aquí por ahora, así que voy a agregar saltos de línea al 1er 3 No lo necesito para el último hit Refresh, y ahora tengo toda mi información ahí dentro y es parpadeando y parpadeando porque está esencialmente detrás de mi ratón, que está sobre un punto. Pero en cuanto aparezca ahora, estoy ratón fuera en ese punto que he terminado. Por lo que necesito cambiar principalmente esa posición y. Sólo voy a decir, menos 150 por ahora y ver si eso lo saca del camino. Entonces eso es genial. Está, ya sabes, está bien por ahora codificar estos valores. Vale la pena señalar que la forma correcta de hacer esto de la manera que normalmente haría esto y usted debe hacer esto es, en lugar de decir manualmente, menos 100 menos 1 50 Para estas dos cosas, en su lugar puede detectar el con de ese Div después de que le hayas agregado el HTML y luego digas tipo de evento Ajax, menos que dibs con dividido por dos derecha, quieres restar la mitad del con porque quieres estar centrado en tu ratón y lo mismo para la altura . Detecta la altura una vez que le hayas agregado el extremo el y luego di Resta la altura y luego tal vez unos cuantos píxeles extra. Por lo que quieres que Esa especie cuadrada de deslizó el inclinado ligeramente por encima de tu ratón simplemente formas rápidas y fáciles de hacerlo. Ya sabes que hay otras formas, pero esa es una forma bastante rápida y efectiva y precisa de hacerlo. Esto es bueno. Por lo que tenemos tips de herramientas ahí siguiendo al ratón. Eso hacer, ya sabes, más o menos lo que quiero que haga es sin duda mucho trabajo por hacer en términos de estilo y hacer que se vea hermoso en hacer las cosas un poco más dinámicas. Pero funciona lo suficientemente bien para nuestros propósitos hoy, así que estamos prácticamente hechos, excepto como una cosa menor que me está molestando sobre este gráfico de burbujas en el que hemos estado trabajando, y voy a arreglarlo en nuestra próxima y lección final. 9. D3: una cosa más: Por lo que hemos hecho todo lo que nos propusimos hacer con nuestra trama de dispersión. Todo está funcionando muy bien. Está cobrando vida. Es animar todas esas cosas. Pero hay una cosa en esta trama de dispersión que me ha estado fastidiando desde el momento en que empezamos a crearla. Um, si recuerdas antes tuvimos un problema donde volteé todo verticalmente, ¿ verdad? Porque quería, um, estos tipos aquí arriba versus aquí abajo porque era raro tener, um, alto valor, alto valor, vivir en la parte inferior, justo en bajo valor, vivir en la cima. Lo volteamos verticalmente. Recuerden que tengo un tema similar con nuestra escala horizontal porque lo que tengo aquí es un número bajo que significa un bajo porcentaje de pobres en un número alto, un alto porcentaje de pobres. Pero pour nous se trata de una falta de algo. Y así si lo soy, si tengo más gente pobre en un distrito, tengo casas menos valiosas, puntos más pequeños y menos habitaciones justo donde estaban al fondo de esta escala en el eje Y, y para que solo se sienta mal. De hecho, es algo conocido. Las personas probadas de investigación esperan que los valores altos estén en la cima, que es lo que hicimos antes se reflejaron verticalmente pero también una especie de arriba hacia la derecha. Um, entonces a sí tenemos un alto valor, ah, alto porcentaje de gente pobre. Pero es gente con menos riqueza por aquí, y así simplemente se siente mal. Y entonces lo que quiero hacer es voltear nuestro eje X igual que volteamos el eje r y antes. Y así es exactamente el mismo proceso que seguimos antes, donde nosotros, donde nosotros, en lugar de tener nuestro valor máximo más bajo de Wyman, mayor valor, ya sabes, menor valor a un lado, asociado con el bajo por qué que está en la parte superior, literalmente solo sudamos con cambiarlos. Entonces el máximo está ahora aquí y el mínimo está por aquí. ¿ Dónde hacer exactamente lo mismo? Voy a decir, Usa el valor máximo de la izquierda y el valor mínimo de la derecha. Entonces ahora si acabo de golpear save hit, refrescar hueso ahora está volteado. Y así, como lector de gráficos, esto me parece más natural que la alta riqueza, lo que significa menos verter nous pero alta riqueza está aquí arriba en la esquina superior derecha. Ahora tengo un problema similar a relacionado donde tengo un número alto a la izquierda en un número bajo a la derecha. Ahora eso es técnicamente correcto, porque esos son los números. Estamos midiendo el porcentaje de gente pobre, pero sigue siendo sólo una especie de sentirse mal. Y entonces lo que quiero hacer es deshacerme de esos números y poner manualmente en diferentes etiquetas. Simplemente tendrá más sentido para el lector de gráficos. Y así, si recuerdas antes cuando creamos nuestros ejes, configuramos manualmente los valores de tick que dijimos usar el más bajo y el número más alto, más alto, y eso funciona muy bien. Esa es una manera realmente buena de hacerlo para muchas gráficas. Pero en lugar de hacer eso usando la función de valores de tic incorporado, voy a volver atrás y poner las garrapatas. Si te acuerdas de esto cuando te mostré por primera vez el Eje, iba a decir, ¿ Sabes qué? Tú cero garrapatas no te pones a ninguna garrapata ahí dentro. Y así si golpeo refresco mis etiquetas desaparecen, así que tengo que principalmente ahora ponerlas en mí mismo. Entonces la forma rápida y fácil de hacer eso es que solo voy a agregar texto manualmente. Lo voy a poner aquí después de haber creado mis ejes antes de llamar a mi actualización. Yo sólo voy a decir que sabes qué? Añadamos texto a nuestra SPG. No voy a usar un nombre de variable. No voy a hacer esto exactamente de la manera más perfecta que nunca. Pero sólo muy rápido, agreguemos algo de texto y necesito que ese texto viva en el eje X. Voy a usar esta báscula porque quería que me colocaran exactamente donde la quiero. Quiero que primero pongan este texto esta primera pieza de texto en la X um uh, expedición usando la escala x que configuramos antes. Y quiero usar esa variable X hombres Max y quiero poner el valor mínimo en su primera. Entonces la exposición está a esta escala para ese número mínimo, y luego voy a decir para la oposición blanca, usemos también, eh, digamos lo mismo. Voy a usar la escala y y estoy acostumbrado. El por qué Min Max y yo mezquita en uso el valor mínimo porque ahora no se olvide que somos nuestro más bajo sabio o en la parte inferior de nuestro gráfico, que es donde quiero que exista esta garrapata. Y luego te digo que tienes que decirle qué debe leer el texto. Y la forma en que haces eso está aquí. Ya sabes, si agregas un elemento de texto que arriba en texto, en realidad dices que el texto de punto es igual a lo que sea o texto de punto, paréntesis, lo que sea. Y así voy a decir que por el valor mínimo, que es el bajo porcentaje de pobres, voy a llamar a eso más rico porque eso es realmente lo que estamos viendo aquí. Entonces si vuelvo y golpeo refresco, ahora tengo las palabras más adineradas por aquí porque eso es lo que es esto. Es más riqueza, Les pour nous, y eso tiene más sentido solo para nuestro público. Pero claro que tengo un par de problemas. En primer lugar, el texto es un alineamiento perfectamente con esta posición por aquí, pero se está alineando con el borde izquierdo del texto y saliendo de la pantalla. Entonces lo que quiero hacer es centrarlo y también hacer que se vea más como etiqueta la forma en que recomendaría cuál es más pequeño gris Menos contraste e más simple, etcétera. Entonces voy a hacer eso de un par de maneras diferentes. Primero voy a arreglar es el posicionamiento. Por lo que quería estar centrado y D tres ha incorporado en él. Bueno, SPG realmente ha incorporado en ella. Entonces, por tanto, d tres también hace el texto ancla AC tributo. Y así puedo establecer el anclaje de ese texto para ya sea esto el inicio, el medio o el final. Y así si digo que eso es todo para empezar cual es por defecto, significa esa línea de izquierda en esa posición que he elegido. Si digo final ital bien mucho y diciendo medio, va a centrar línea. Entonces si refresco ahora, está alineado al centro, así que eso está bien. Ese es un buen comienzo. Pero ahora quiero cambiar el formato de este texto. Y después de eso, lo voy a mover verticalmente también, porque no sé por qué. Es lo que sí sé por qué. Pero está sentado aquí arriba, mientras que yo quería estar aquí abajo. Pero primero, hagamos el look y la sensación real, así que voy a añadir una clase y ya hemos hecho esto antes. Voy a decir atributo, clase y solo voy a llamar a esta etiqueta de acceso de clase. Y ahora, si vuelvo a subir y agrego la clase CSS para etiqueta de acceso en, pondré junto a estos tipos. Entonces es fácil de encontrar Más adelante, voy a hacer ese mismo color de relleno claro, gris. Y quiero usar una fuente de un bonito en Sarah Font. Voy a decir divertido tamaño de 10 píxeles. Yo quería ser agradable y pequeño, ya sabes, idealmente, quiero una especie de aspecto de este tipo de aquí, y así que eso es bastante bueno. Bastante cerca. Suficientemente bueno por ahora. No lo voy a retocar locamente para esta lección, pero sí quiero arreglar el hecho de que está atascado aquí arriba, ¿ verdad? Está perfectamente alineado con el fondo de nuestra báscula, que es donde está posicionado este tipo, ¿ verdad? El valor más bajo vive exactamente ahí, razón por la cual está aquí arriba. Entonces ya sabes, hay algunas formas diferentes de hacer eso. Una manera simple, rápida y fácil es, lugar de decirlo, ponerlo en la posición Y exactamente en la parte inferior, el valor mínimo Haz eso. Además, digamos nuestro margen derecho, porque eso lo va a empujar hacia abajo. Recuerda, metimos todo en 30 píxeles. Si lo vuelvo a empujar 30 pixeles, tal vez sea exactamente donde quería estar. Y he aquí y he aquí la ISS. Ahora, a veces hay que tuitear un poco eso. A veces no debe perfectamente exactamente donde lo quieres en un par de píxeles si es necesario . Pero ya sabes, eso funciona bien. Y yo quiero hacer lo mismo. Pero para la izquierda Most label. Entonces solo lo voy a duplicar, ¿verdad? Un texto de pluma. Ahora bien, el ex posicionamiento se va a basar en el valor máximo, que en este caso, es el menos rico, ¿ verdad? Yo quería estar en la misma posición. Todavía quería estar alineado en el centro y usar esa misma clase. Pero en este caso, la etiqueta es menos rica, segura, segura, refresca. Y ahora es exactamente como quería ser. Por lo que espero que este curso sobre D tres haya sido útil e interesante. De verdad. Acabamos de estar configurando algunas habilidades fundacionales, ya sabes, va a ser relativamente sencillo ahora para ti, ojalá entrar y buscar d tres sintaxis y agregar más habilidades y cuenta con dos proyectos que en lo que estás trabajando. Ya sabes, si trabajaste con Jake, Jake Weary u otros trabajos se quejan justo en el pasado, mucho de esto probablemente fue aún más fácil para ti aprender. Si no, ya sabes, has aprendido muchas cosas clave aquí, que podrás replicar y aplicar a nuevos aprendizajes a medida que avanzas con D tres. Lo que definitivamente recomiendo es echar un vistazo d tres Js dot org's el sitio web d tres. Acude a la página de ejemplos y encontrarás un sinfín de ejemplos de grandes proyectos de D tres donde podrás ver el código fuente y jugar con él. Algunos conceptos y el miedo más complejos y otros para estar seguros. Pero este debería ser un buen punto de partida para ti, Mike, dije, realmente espero que hayas disfrutado del curso. Por supuesto, espero que hayas aprendido mucho y te deseo feliz. D tres ng yendo hacia adelante