Diseña visualizaciones de datos: introducción a Processing

1. Introducción: Hola, me llamo Nicholas Felton. Soy diseñadora de información con sede en la ciudad de Nueva York. El grueso de mi trabajo consiste en hacer visualización de datos basada en datos personales, o en otros conjuntos de datos que encuentro en el mundo. Empecé a trabajar con datos hace unos 10 años. Como diseñador gráfico en busca de historias, descubrí que a la que tenía mejor acceso era la mía, y fue más fácil recolectar esto en forma de datos. esto salen las visualizaciones de datos como una forma de representar estas historias de una manera compacta e interesante. Mi investigación de datos personales ha sido impulsada en gran medida por la curiosidad. Tengo este deseo de conocer lo incognoscible, es casi como ser explorador. Estoy influenciado por una especie de ciencia, y matemáticas, y geometría, minimalismo. Esta clase va a abordar una de las cosas que me parecen más interesantes, que es tomar un conjunto de datos realmente enorme, uno que nunca podrías manejar a mano, y colocar todos esos puntos en un mapa. En este caso, vamos a ver los ataques de meteoritos en todo el mundo. Tenemos un conjunto de datos de unos 34,000 puntos, y vamos a meter todos estos en un mapa, y etiquetar el sitio superior. Creo que esto es fundamentalmente una clase de diseño, pero también debería ser una muy buena introducción al procesamiento. Espero que baje un poco la cortina y le muestre a la gente lo fácil que es empezar, y cuánto poder tienes para manipular tus diseños usando el procesamiento. Hoy vamos a trabajar en tres áreas diferentes. Se va a tratar de mirar los datos, investigar un poco en una hoja de cálculo, y luego pasar al procesamiento. Aquí haremos la mayor parte del trabajo, donde estaremos configurando un programa que pueda analizar los datos, y proyectarlo en un mapa. Por último, en Illustrator, estaremos limpiándolo un poco, y mostrando algunas de las formas en que podemos ordenarlo y arreglarlo algunos de los problemas. No tienes que ser diseñador para tomar esta clase, simplemente tienes que tener alguna curiosidad o interés en empezar a convertir una tabla de números en algo que sea realmente consumible. He elegido el conjunto de datos y he escrito la app por la que te guiaré. Esto asegurará que todos puedan llegar hasta el final y tener los mismos resultados, y también tendremos una plantilla para trabajar en otros datos que podrían encontrar en el futuro. En los documentos para esta clase, hay un par de fuentes más donde puedes encontrar conjuntos de datos adicionales si quieres jugar con esos. Históricamente, los diseñadores han trabajado con texto e imagen, y creo que porque estamos viviendo en este mundo de datos en todas partes, se ha convertido en este nuevo elemento fundamental del diseño con el que tanto los diseñadores tienen que llegar a ser. 2. Tu proyecto: Tu tarea es visualizar un gran conjunto de datos de meteoritos como un mapa. He incluido el conjunto de datos aquí, por lo que puedes descargarlo de inmediato y empezar. Lo que me encantaría ver a la gente subir a Skillshare al final del curso es un PNG o un jpeg tomado de Illustrator de tu mapa trazado final de estos meteoritos huelgas. Hay un poco más de datos en un conjunto de golpes de meteorito que podrías usar para empujar esto más allá. Me imagino codificando por colores el meteorito golpea por el año en que suceden de más antiguos a más nuevos. También hay conjuntos de datos adicionales que podrías mirar y empezar a investigar otros mapas de diferentes fuentes. El modo de lograr el mayor éxito con esta clase va a ser volver a ejecutar las lecciones en procesamiento como las demostré. Tendrás la aplicación terminada y puedes asegurarte de que tengas un estado final de trabajo, pero en realidad trabajando a la altura de eso, y entendiendo las diferentes secciones por las que pasamos para que funcione correctamente te enseñará más, y te pondrá en el mejor estado para poder explorar otros datos o aplicarlo de nuevas maneras. 3. Cómo funciona Processing: Antes de empezar a hacer este mapa, me gustaría compartir algunos conceptos clave que serán útiles a medida que pasemos por las lecciones. El primero se trata de formatos de datos. Entonces, vamos a empezar con una hoja de cálculo. Una hoja de cálculo es una forma de mostrar datos en filas y columnas. Lo que vamos a necesitar hacer para llevar esto a procesamiento se convierte en un formato diferente llamado CSV. CSV significa valores separados por comas, y básicamente todo lo que estamos haciendo, es en lugar de tener divisores explícitos en la aplicación que separan estas filas, vamos a sustituir esas por una coma en un espacio, y luego lo será solo un archivo de texto, uno que podrías abrir en TextEdit. Tenemos que poner los datos en un formato CSV porque, esto es lo que el procesamiento espera ingerir. Elimina todo el formato extra que una hoja de cálculo puede tener adjunta, y simplemente lo tira hacia abajo a un formato de texto sin formato. Una vez que abramos el procesamiento, verás que hay tres componentes principales. Ahí hay un editor, una consola, y el lienzo. Empezaremos en el editor. Aquí es donde se escribe todo el código. Después se puede usar la consola para imprimir pequeños bits de datos para asegurarse de que todo se esté ejecutando sin problemas, o para encontrar problemas en nuestro código. Por último, el lienzo es el área en la que estaremos dibujando cosas. Esto es lo que en última instancia ahorraremos en un PDF. Estaremos escribiendo el código y procesando en el editor. Al igual que HTML, hay una jerarquía a la forma en que se escribe el código, y hay tres áreas principales con las que estaremos tratando. Por encima de todo es donde podemos definir variables que estaremos utilizando a lo largo de la aplicación. También podemos importar diferentes bibliotecas, si íbamos a usar las herramientas de otra persona que han construido para su procesamiento. Debajo de esa es una pequeña área llamada set up. Aquí, vamos a pegar todo el código que solo necesita ejecutarse una vez para definir cosas que estaremos usando en la app. Aquí, configuraremos el tamaño del lienzo por ejemplo. Debajo de eso se encuentra un área llamada sorteo. Se trata de un área que recorrerá una y otra vez a menos que le digamos lo contrario. En este caso sólo queremos que nuestro boceto se ejecute una vez, y así pondremos algún código ahí para decirle solo que termine en cuanto llegue al final de la sección de dibujo. Porque estaremos trabajando con los datos y el procesamiento, vamos a necesitar varias variables en las que sostenerlo. Las variables son solo contenedores. Esto es lo que vamos a definir para sostener ya sea nombres o números. En el procesamiento, necesitamos ser explícitos sobre lo que va a sostener una variable. Entonces, tenemos que decir que este contenedor sólo puede contener este tipo de información, o de lo contrario tendremos problemas para ejecutar el código. Algunos de los tipos básicos de variables que encontrarás en esta aplicación son un entero, y esto se define diciendo, int, y luego el nombre del entero, y luego estableciendo su valor. Con estas variables básicas. También puedes hacer que impriman sus valores en la consola introduciendo este código, la función println. Entonces, para este ejemplo inicial de un entero i con el valor de cero, si pones esta línea println debajo, y quieres eliminar estos dos guiones que estas dos barras inclinadas hacia adelante, estos lo están comentando. Entonces, cualquier código que no quieras ejecutar, puedes poner estas dos barras delante de él. Eso imprimirá el valor de i en la consola. Para números más detallados estos son números decimales, necesitamos usar un flotador. Entonces, esto tiene un nombre diferente porque se necesita más memoria. Entonces, si quisiéramos ahorrar 0.0 o 2.895, usaríamos un flotador. Entonces, por último, String se usa para sostener palabras. Entonces, en este caso, para la variable de bienvenida que estamos configurando para hello world, tendremos que definir eso como una cadena. Para conjuntos de datos más grandes, podemos usar una estructura llamada Array. Ahora, un Array es básicamente una lista de datos. Estos también tienen tipos. Estos pueden ser enteros, o flotadores, o cadenas, pero están configurados con esta sintaxis de raqueta. Un Array llamado números, en el que quiero almacenar cero, uno, dos, y tres, se define de esta manera con los corchetes por delante, y luego las llaves a números importantes. Básicamente, con lo que terminamos es con un contenedor de múltiples secciones. Este Array ahora tiene cero, uno, y dos, y entonces podemos o bien imprimir todos ellos, diciendo PrintIn i, que solo imprimirá toda la lista, o podemos usar este formato de corchetes para conseguirlo cualquiera de las posiciones en nuestro Array. Entonces, la gente el soporte cero sería el primero, este sería Mark en este caso, o la gente el soporte uno, sería cualquiera y así sucesivamente. La estructura de datos final que encontraremos es un Array 2D. Se trata de una lista de listas o una matriz. Entonces, si piensas en el Array que acabamos de discutir, este ahora va a ser uno que contiene varios otros Array. Entonces, en lugar de tener un corchete después del tipo de datos que sostiene como corchete entero, que es como se define un Array, éste requiere dos. Ahora estamos volviendo a esta idea de hoja de cálculo. Estamos hablando de columnas y filas. Como se puede ver en esta matriz, tenemos nuestra primera fila, eso se denota por cero porque así es como las computadoras cuentan desde cero hacia arriba. Tenemos la fila uno, y la fila dos. También tenemos las columnas cero una y dos. Ahora bien, si nos fijamos en cómo definimos esta matriz de datos, con tres funciones Array, puede entonces usar este código println para acceder a diferentes partes de la misma. He destacado en la matriz, qué se resaltará o cuál será seleccionado por cada una de estas líneas de código. Entonces, si intentamos imprimir números matriz cero, cero, obtendremos la primera posición. Si bien si hacemos números println matriz dos, dos, obtendremos la última posición. Ahora, aplicamos todos estos datos en el procesamiento, necesitaremos algo que sea capaz de recorrer por él y llamar a todos estos diferentes bits de datos fuera de memoria. Entonces, vamos a estar trayendo los nombres de estos meteoritos y su latitud y longitud, y así, usamos un bucle for para recorrer todos estos datos. A for loop es algo que puede parecer un poco intimidante por anticipado, pero es simplemente una estructura que se acostumbra y otra vez cuando estás haciendo algo en el procesamiento. Se ve un poco intimidante porque es una pieza de código realmente condensada. Lo que está pasando aquí, es que estamos diciendo que queremos un entero i, y vamos a ponerlo en cero. Entonces, siempre y cuando ese Integer sea menor a tres, queremos agregarle 1. Este i plus, es lo mismo que i igual a i más uno. Entonces, mientras esas condiciones son ciertas, entonces sigue haciendo todo lo que hay dentro de estos aparatos ortopédicos. Entonces, podemos jugar esto manualmente. Entonces, la primera vez que esto se ejecute, seré igual a cero. Entonces, para cada una de estas líneas de impresión podemos imaginar reemplazar el i por un cero. Entonces, la primera vez que corremos estaremos imprimiendo cero cero, cero uno, y cero dos. Cuando lleguemos al final, vamos a sumar uno a i Así que, ahora estará corriendo a través de él con yo igual a uno. Entonces, vamos a imprimir por un cero, uno uno, y uno dos. Por último, vamos a sumar otra, y ahora seré igual a dos. Volveremos a atravesarlo, e imprimiremos dos cero, dos uno, y dos dos dos. Entonces agregaremos uno, y serán tres, pero no cumplirá con esta condición de ser menos de tres. Entonces, el bucle for terminará. Esta es solo una estructura que verás en todas partes en el procesamiento, y la estaremos usando hoy. 4. Geometría de los mapas: Uno de los otros conceptos que necesitamos para agarrarnos es cómo medir la Tierra. La Tierra es una esfera, y la única manera realmente precisa de mostrar esto es con el globo. Pero tenemos que aplanarlo sobre una superficie 2D para ponerlo en nuestra pantalla. Entonces, la Tierra se mide en dos dimensiones, la latitud, que son las bandas horizontales alrededor de la Tierra, y la longitud, que son las bandas verticales. Son un poco complicado porque las balanzas no arrancan a cero. La latitud es de 90 grados en el polo norte, y 90 grados negativos en el polo sur con un ecuador de cero. Por lo que abarca 180 grados. En tanto que, la longitud, que necesita envolver alrededor del mundo entero tiene que cubrir una escala de 360. Entonces para esto, va de menos 180 a 180 con cero siendo definido en Greenwich en Inglaterra. Ahora para aplanar esto, hay muchas formas diferentes de proyectar una esfera sobre una superficie plana. Si vas a la búsqueda de imágenes de Google y miras las proyecciones de mapas, verás cualquier número de diferentes formas de hacerlo. hoy, vamos a utilizar lo que se llama la proyección equirectangular. Esta es, con mucho, la forma más sencilla de convertir una esfera en un rectángulo plano. También se pueden ver algunos de los problemas con el uso de este enfoque. En este diagrama, he mostrado cómo si tienes círculos de diferentes partes del globo, cuando lo aplanas, obtienes diferentes grados de distorsión usando esta proyección. Entonces, las áreas alrededor de la parte superior e inferior de nuestro globo se van a deformar realmente. Entonces, la Antártida aparecerá mucho, mucho más grande de lo que es en realidad. Pero las matemáticas para conseguir esto en la pantalla son mucho más simples que cualquier otro método, y esto nos será realmente útil. Por último, hay una función más en el procesamiento que será crucial para traducir este conjunto de datos a nuestro glorioso mapa. Esta es la función de mapa, y lo que esto hace es que dice que dado el valor que existe en una escala, traduce eso al valor en una escala diferente. Entonces, se puede ver que esta función toma cinco entradas diferentes. El primero es el valor que queremos traducir. En este caso, 127.55, y esto es de la escala de latitud, que va de 180 negativo a 180. Lo que queremos hacer es traducir eso a nuestra escala de pantalla, que va a empezar en cero y en este caso va a ir a 400. Entonces una vez que hagamos todo eso, la función de mapa generará un valor a lo largo de esa escala. En este caso, 341.7. Entonces, estaremos usando esto tanto para traducir nuestra latitud como la longitud a los valores de pantalla que necesitamos. Esta función de mapa va a ser invaluable para nosotros mientras tratamos convertir la latitud y longitud de la Tierra al lienzo que estamos utilizando. Entonces, un lienzo para este proyecto podría tener 400 píxeles de ancho. Entonces, tomaremos esa escala de latitud y la convertiremos de 127.55 en la escala de 180 negativo a 180, a 341.7 en la escala de cero a 400, el ancho de nuestro lienzo. También estaremos necesitando marcadores para mostrar el tamaño de estos meteoritos en relación entre sí. Una de las piezas cruciales en esta clase es compartir esta idea de que cuando conviertes cantidad a área, tienes que hacer un poco de Matemáticas. Entonces, sería muy bonito si pudiéramos dibujar rectángulos para los que queremos representar solo diciendo ambos lados, el ancho y la altura son cuatro. Desafortunadamente, esto se traduce un área que es tergiversante de lo que queremos mostrar. Entonces, la forma correcta de mostrar algo con un área de cuatro, es tomar la raíz cuadrada de esa zona, y eso nos da las dimensiones del cuadrado. Entonces, para mostrar cuatro, necesitamos lados que sean dos y dos, no en esta instancia los lados que son cuatro y cuatro. Entonces, la regla para generar un rectángulo que va a mostrar área es tomar la raíz cuadrada de esa área y usar eso para las dimensiones de la forma. Con los círculos, la matemática es un poco más compleja. Si recuerdas volver a clase de geometría, la forma de calcular el área de círculos es pi R al cuadrado. Porque queremos que el área represente nuestra cantidad, necesitamos retroceder desde eso. Entonces, para obtener el radio de nuestro círculo, tomaremos la cantidad que queremos representar, obtendremos su raíz cuadrada, y luego la dividiremos por pi para obtener el radio. 5. Cómo exportar datos a CSV: Ahora vamos a empezar con este proyecto. Bienvenido a su conjunto de datos, esto se llama meteoritos. Una vez que lo hayas abierto, puedes empezar a desplazarte un poco hacia abajo para tener una idea del tamaño aquí, esto es algo que ninguna persona racional querría poner en un mapa a mano. Si nos desplazamos hacia abajo hasta la parte inferior, verás que tenemos 34.066 filas a este conjunto de datos. Siempre me gusta empezar en una hoja de cálculo como dado un nuevo conjunto de datos porque aquí es donde podemos empezar a sentir los límites de lo que nos han dado. Se puede ver que aquí hay seis columnas diferentes, cada una nos está diciendo algo un poco diferente sobre nuestro conjunto de datos. Entonces, tenemos un nombre o un lugar para cada golpe de meteorito, tenemos el año, tenemos su masa en gramos, la longitud, latitud, y si fue yo creo visto cayendo o si se encontró. El grandioso de las hojas de cálculo es que podemos hacer un análisis simple real de los datos para tener un sentido para ello por adelantado. Entonces, una de las primeras cosas que quiero hacer es solo ver cuántos años abarcan este conjunto de datos? Entonces, en el momento, creo que está listo para estar ordenando en descendencia, voy a cambiar eso. Entonces, ya puedo ver algunas de estas al fondo no tienen un año y este conjunto de datos va al 2012. Si me desplaza hasta la parte superior, puedo ver que esto se remonta a menos 600. Entonces, hay algunos valores negativos aquí para estar al tanto y también te da una sensación de la duración de este conjunto de datos. Al volver a hacer clic aquí, puedo cambiar esta masa para que sea ascendente o descendente. Entonces, quiero tener una idea de cuáles son los tamaños de estos diferentes meteoritos y si todos tienen valores. Entonces, en lo más grande, tenemos este Hoba uno con 60 millones de gramos, y en el extremo más pequeño, tenemos unos que bajan a 0.01 de gramo. La latitud y la longitud solo van a variar dentro de los límites de la tierra y fell_found parece que es bastante sencillo, esto podría ser algo que vale la pena codificar para más adelante, pero creo que tenemos sentido para el conjunto de datos y vale la pena exportarlo ahora a un formato que pueda usar el procesamiento. Creo que voy a querer traer estos datos por su masa. Entonces, voy a querer tener los meteoritos más grandes en la parte superior de mi CSV. Para ello, voy a dar clic en la parte superior aquí y ordenar estas masas en orden descendente, tan grande arriba. Simplemente me desplazaré a la parte superior y me aseguraré de que ese sea el caso. Sí, el meteorito Hoba está apareciendo en la parte superior. Entonces, no tengo ninguna fila o columnas extra que se vayan a meter en el camino aquí cuando lo exporte, eso sólo llevaría a cosas vacías que no necesito. Entonces, me siento bien por el estado en el que se encuentra. En Exportar, voy a exportar esto a un CSV. Puedo dejar la codificación de texto tal como está, solo presiona Siguiente y voy a guardar esto en el escritorio como Meteors.csv. Ahora solo echemos un vistazo a eso, ábrelo en edición de texto y veamos en qué se convierte esto. Aquí lo tenemos, debe ser un archivo de texto de 34 mil líneas de largo. Se puede ver que todas estas columnas se han traducido ahora en valores separados por comas con nuestra primera apareciendo como la clave diciéndonos el lugar, el año, la masa, la longitud, la latitud, y la fell-found. Yo sólo voy a eliminar esta fila superior porque esto no son datos, es sólo una clave y la guardaré y estaremos listos para traerlo al procesamiento. He ordenado en los meteoritos por masa porque voy a querer etiquetar los meteoritos más grandes. Esto va a ser más fácil de hacer simplemente diciendo, quiero etiquetar los primeros 10 o 20, en lugar de analizar todos los valores y probarlos si están por encima de cierta escala. Estos datos también se pueden acceder en Google, hay un enlace en el sitio de Skillshare para este conjunto de tamaño y datos de meteorito. Esta es una hoja de cálculo de Google y aquí puedes ver alguna de la misma información, estas coordenadas, incluso hay enlaces a una entrada de base de datos para los meteoros. Pero si quieres descargarlo aquí o explorarlo, puedes volver a ordenar las cosas haciendo clic en la parte superior de la etiqueta de la columna o en Archivo seleccionando Descargar, puedes descargarlo como CSV. 6. Nueva carpeta de datos y sintaxis de archivos: Si no tienes procesamiento en tu computadora, puedes obtenerlo gratis visitando processing.org. Aquí arriba hay un gran botón de Procesamiento de descargas. Siéntase libre de hacer una donación si lo desea, porque se trata de software de código abierto. Después descarga la versión correcta que necesitarás. Entonces, ya tengo instalada la versión para Mac. Pero si no lo tienes, simplemente descárguelo aquí. Una vez que lo tengas instalado, abre Procesamiento y vamos a hacer un nuevo boceto. Aquí, deberías ver algunas de las porciones de la app que comenté anteriormente. Tenemos ese campo Editor vacío y la consola de abajo. Vamos a guardar esto en el escritorio. Vamos a llamarlo MeteorSketch, y verás que esto aparece en el escritorio. Lo que vamos a necesitar agregar a este boceto es una carpeta llamada datos. Ahora bien, no todos los bocetos de procesamiento tienen esto pero si vamos a estar trayendo archivos externos como vamos a estar, aquí es donde necesita vivir. Entonces, solo crea una nueva carpeta en este directorio y llámalo datos con una d minúscula Si también has descargado el ejemplo de trabajo de esta app que vamos a estar construyendo, verás que ahí hay una carpeta de datos, y tiene las dos piezas que necesitamos. Tiene el meteorite.csv y un archivo llamado WorldMap.spg. Simplemente puedes copiar estos archivos en tu carpeta de datos o puedes usar el archivo meteors.csv que generamos anteriormente. Entonces, en tu MeteorSketch, ya puedes golpear Run y verás aparecer el lienzo. Vamos a necesitar empezar configurando el sorteo y las secciones de configuración de nuestra salida. Por lo tanto, puede teclearlos indirectamente o puede abrir el boceto de referencia que se proporciona en el archivo Skillshare. Aquí verás la etiqueta poco comentada que utilizo para indicar el inicio de la sección de configuración, y debajo de eso solo necesitaremos decir configuración de vacío con algunos paréntesis y una tornillería abierta y una cerradura. Después también tendremos esta etiqueta comentada para indicar el inicio de la sección de sorteo. Aquí, podemos decir empate vacío, luego abre el corsé y cierra el corsé. Arriba, sólo voy a hacer una indicación más de lo que habrá ahí. Aquí es donde vamos a poner tanto la biblioteca que necesitaremos como las variables globales. Entonces, este es el esqueleto de nuestra app. Aquí es donde estarán viviendo las piezas que vamos a necesitar. Puedes volver a golpear Run, y verás que sucede esa misma casita. Entonces, cada vez que pulses Run, va a revisar tu código y asegurarte de que no haya errores. Entonces, estamos en buena forma. Guardemos esto y empecemos a traer algunos de los elementos básicos que necesitaremos. En la sección de configuración, vamos a encontrar cosas como el tamaño de nuestro proyecto, vamos a importar el mapa que vamos a utilizar, y estas son cosas que sólo queremos que sucedan una vez abajo en la sección de dibujo del vacío. Aquí es donde puedes tener código que corre una y otra vez. Entonces, si estuviéramos haciendo una animación o una interactiva, queremos que sigamos dibujando marcos en pantalla. Lo principal que vamos a querer que suceda en nuestra sección de sorteo es que vamos a querer que empiece a guardar un pdf al principio, y guardarlo al final. Entonces, solo queremos que eso se ejecute una vez o de lo contrario terminaremos con un pdf siendo guardado una y otra vez. 7. Cómo importar SVG: En este apartado, vamos a traer el mapa base. Estos van a ser los contornos del globo que formarán un contexto para entender dónde han ocurrido estos impactos de meteoros en todo el mundo. Uno de los elementos de la carpeta de datos es un gráfico llamado WorldMap.svg, y esta es una proyección rectangular Aqua del mundo. Se puede ver nuestra Antártida gigante en la parte inferior y cómo la cima de Estados Unidos, y Siberia, y Canadá, y Groenlandia, se han distorsionado realmente. Pero esto será fácil de importar y fácil de colocar nuestros marcadores. Esto vino de Wikipedia, siempre se puede buscar mapa vectorial rectangular Aqua en Google y encontrar otras fuentes. Entonces, lo que necesitamos hacer es hacer que nuestro lienzo sea lo suficientemente grande como para sostener este mapa, y usar un poco de código para colocarlo en segundo plano. Entonces, lo primero que vamos a hacer es establecer el tamaño de nuestro lienzo en uno que coincida con las proporciones de este mapa. La proyección de mapa rectangular aqua siempre va a ser dos veces más ancha que alta. Entonces, si decidimos que queremos que esto tenga 900 píxeles de altura, lo haremos 1.800 píxeles de ancho. Establece el tamaño del lienzo en procesamiento por con la función de tamaño. Entonces, digamos mil 800 para el ancho, y 900 para la altura. Estas funciones siempre se inician con un paréntesis abierto y se cierran con un paréntesis cerrado, y al final de cada línea necesitarás un punto y coma. Si pulsamos el botón de reproducción ahora, verás de repente nuestro boceto es de 900 por 1,800 lo cual es mucho más complaciente. Lo siguiente que haremos es traer este bit de código para cargar el BaseMap. Vamos a necesitar definir nuestra primera variable. Este es un tipo especial llamado PShape, y esto es lo que sostiene un SVG. Entonces, definimos primero su tipo, y luego le damos un nombre. Yo lo voy a llamar mapa base. Siempre puedes ver si estás ingresando código correctamente en el procesamiento, si estás usando estas funciones, destacarán. Entonces, PShape sabe que es un tipo variable y es naranja, mientras que estas funciones saben que son verdes o azules. En estos configurados, el código que sólo vamos a ejecutar una vez, vamos a definir en estos mapa base. Entonces, tecleamos el nombre de nuestra variable, y luego necesitamos otra función, loadshape, que verás si lo tecleo todo en minúscula no resalta si utilizo la S mayúscula ahí, resalta correctamente. Ahora solo quiero darle el nombre de nuestro SVG, así que copiaré eso desde la carpeta de datos, y necesito poner eso entre comillas aquí, WorldMap.svg. Esto no es suficiente, pero vamos a ejecutarlo sólo para estar seguros. De acuerdo, tenemos un problema con el mapa base. Eso se debe a que no puse una M mayúscula en el nombre de la variable. Entonces, me dijo en la consola, no puede encontrar nada llamado BaseMap. Una vez que haya cambiado el nombre de la variable pShape, esto debería ejecutarse correctamente. Ahora, en el modo sorteo, voy a agregar una pieza más de código y esto es lo que lo agregaremos al lienzo. Esta va a ser una función llamada forma, y le diré que ponga mi BaseMap en la posición cero, cero, que es el primer punto en el lienzo, y que quiero que sea tan ancho y tan alto como el lienzo. Ahora bien, podría o reescribir las dimensiones que pongo en el tamaño, o puedo usar estos pequeños métodos de conveniencia para simplemente preguntar al lienzo de qué tamaño es. Se trata de palabras reservadas como ancho y alto que representan estas cantidades. Entonces, en esta línea de código, digo que quiero una forma que esté llena con el BaseMap que es nuestro SVG, y empieza en cero cero, y va a ancho y alto. He cerrado esto con punto y coma, y si lo ejecuto tenemos el mapa. Entonces, estamos en buena forma para empezar a traer nuestros datos y empezar a poner eso en nuestro mapa. Para esta clase, te he proporcionado un mapa rectangular Aqua debidamente formateado que obtuve de Wikipedia. Pero también he encontrado que hay otros lugares para conseguir mapas. Este método sólo va a funcionar si usamos una proyección de mapa rectangular Aqua, pero puedes escribir este vector rectangular en Google y normalmente iré a la sección de imágenes para intentar encontrar otras fuentes. Aquí se puede ver, hay muchos ejemplos diferentes de mapas rectangulares Aqua con diferentes cantidades de detalle, o con separadores de país en ellos. Por lo tanto, siempre puedes intentar poner uno de estos en tu archivo también. 8. Cómo dibujar marcadores: El siguiente paso en esto va a ser conseguir que algunos marcadores dibujen en nuestro mapa. Enchuparemos los datos un poco más tarde, pero solo veamos cómo el procesamiento puede dibujar estas formas que necesitaremos. Hay un par de diferentes tipos de formas que el procesamiento nos puede proporcionar. Podemos utilizar rectángulos, rectángulos o elipses. Empecemos por mirar estos dos y algunos de los pasos que necesitaremos para que estos dibujen de una manera por la que estamos entusiasmados. Por lo que la primera función es un rect. Ya verás que con solo escribir rect y poner paréntesis el procesamiento reconoce esta pieza de código. Un rectángulo toma cuatro parámetros. Queremos la ubicación X e Y y luego el ancho y la altura. Entonces, si digo 100, 100 para la posición y quiero que tenga 200 píxeles de ancho, 100 píxeles de alto, si corro eso, ya verás que aquí tenemos este rectángulo. Por defecto, tiene un contorno negro y un relleno blanco. Realmente no quiero que tenga este contorno negro. Entonces, en la línea anterior, voy a usar esta pequeña pieza de código, sin trazo, y esto apagará el contorno si lo vuelvo a ejecutar. Entonces ahora solo tengo un rectángulo blanco, pero eso es bastante invisible. Entonces, lo que haré ahora es darle un relleno. Esto se puede hacer de varias maneras diferentes en el procesamiento. Reconocerá blanco y negro. Se puede especificar como blanco y negro con alfa, o RGB, o RGB con alfa, alfa que significa transparencia. Entonces, primero, digamos que sólo quiero llenarlo de negro. El balanza negra va de 0 a 100. Entonces si digo llenar 0, me va a dar un rectángulo negro. Va de 0 a 255. Entonces, un valor de 255 me dará un rectángulo blanco. Si vuelvo a decir llenarlo con 0 o negro, puedo agregar otro parámetro el cual será una transparencia. Entonces aquí, puedo poner en 50, y ahora puedes ver tengo un rectángulo semitransparente. Yo quiero usar algún color. Entonces, voy a ir a la escala de colores que toma tres parámetros todos de 0 a 255. Estos están en el orden de rojo, verde y azul. Entonces si digo 255, 0, 0, conseguiré un rectángulo rojo. Ahora, si le doy un parámetro más, como 50, obtendré un rectángulo rojo semitransparente. Todavía no hemos puesto la función no loop, por lo que este bucle de dibujo es simplemente dibujar, dibujar, dibujar constantemente. Una de las cosas interesantes que puedes hacer en el procesamiento es jugar con el color. Hay una función llamada aleatoria. Esto solo establecerá un valor aleatorio. Esto puede ser realmente útil para experimentar y explorar. En este caso, estamos diciendo que queremos un valor entre 0 y 255 en lugar de establecer 255. Ahora verás progresar esta animación. puedes ver que ahora tenemos una forma parpadeante y puedes soltar este código aleatorio donde quieras. Pero sólo queremos correr esta vez. Entonces, para que este código sea más sencillo en nuestra configuración, solo agregaremos una línea que diga no loop, y esto significa que una vez que se ejecute una vez que terminemos. Podemos probar que esto está funcionando porque ahora el aleatorio solo elegirá un valor y después será estático. Voy a restablecer esto a 255. Vamos a correr de nuevo. Tenemos un rectángulo rojo. Por último, sólo veremos cómo se dibujan las elipses en el procesamiento. Como se puede imaginar, esto toma una función llamada elipse. Voy a darle una posición diferente como 500, 500 y un ancho de 100, y una altura de 100, cerrar esos paréntesis y poner un semi colon. Una vez que ejecute esto, obtendré una nueva elipse y el siguiente paso será importar algunos de nuestros datos y poder empezar a dibujar estos marcadores programáticamente que nos muestren dónde ocurrieron todos estos impactos de meteoritos alrededor del mundo. 9. Cómo importar y analizar datos: Para esta siguiente sección, vamos a traer los datos CSV a una matriz 2D para que podamos procesarlos y colocar nuestros marcadores en la posición correcta en el mapa. Ahora, vamos a usar un poco de código repetitivo para analizar este CSV en nuestras matrices. Voy a hacer un poco de configuración, pero esta pieza de código que copiamos, es solo algo que vas a reutilizar en cualquier momento que quieras importar datos al procesamiento desde un archivo de texto. El primero que vamos a configurar es una variable para contener el contenido de nuestro archivo de texto. Esto va a ser una cuerda. Lo vamos a llamar CSV porque eso es lo que es, y va a ser una matriz automáticamente. Esto se debe a que cuando lo traigamos, va a interpretar cada uno de los retornos en ese archivo de texto como una nueva línea de datos. Entonces, la cuerda CSV va a ser una lista de todos los meteoritos. Para llenar ese CSV con los datos del archivo de texto, necesitaremos tener una línea en nuestra configuración donde definamos qué es CSV. Entonces, CSV ahora va a igualar el contenido de esta función que se llama LoadStrings. Esto es lo que usas para traer datos de un archivo de texto. Entonces, tengo la función ahí, y me limitaré a copiar en este nombre de MeteorStrikes. Nuevamente, esto necesita vivir entre cotizaciones. Solo ejecutemos esto para asegurarnos de que todo funcione correctamente. De acuerdo, entonces las cuerdas están cargadas. Voy a deshacerme de este rectángulo que teníamos en la instancia anterior, y voy a usar la consola por primera vez. Yo solo quiero asegurarme de que todo sea accesible, así que voy a teclear esta línea println. Esto significa imprimir algo en la consola, y le diré que imprima CSV, nuestra variable que está sosteniendo el contenido de nuestro archivo de texto. Vuelvo a ejecutar esto. Ahí vamos, tenemos 34 mil líneas de jugosos datos de meteoritos en nuestra consola. Entonces, todo está funcionando bien hasta ahora. Voy a borrar esto. Voy a configurar la matriz 2D. Esta es la lista de listas donde en lugar de tener todo en filas, ahora vamos a dividir todo en filas y columnas para que podamos acceder a cualquier pieza de datos que queramos. En el CSV, podríamos acceder a una línea de datos diciendo println CSV, y luego en uno de los paréntesis, solo dando un número como 23 porque sé que se trata de un archivo de texto excesiblemente largo. Sé que 23 estarán en límites. Vuelvo a ejecutar esto, solo verás la línea 24 del archivo de texto. Lo que queremos hacer ahora es dividirlo en todas estas comas, para que pueda acceder a cualquier pieza de esto. Para ello, necesitaremos definir la matriz 2D que vamos a usar. Esto va a ser una cuerda otra vez. Para este, llamaré a MyData, y le diremos que sea una matriz 2D al tener dos conjuntos de corchetes. Entonces, he definido esa variable. Ahora, voy a explicar el procesamiento, lo grande que quiero que sea este contenedor. Quiero que se ajuste adecuadamente a los datos para que sea eficiente, así que lo que voy a hacer es decir, “El tamaño de mis datos es una cadena nueva, y quiero que tenga tantas filas como el archivo MeteorStrike.csv. Entonces, sabemos que esto es como 34,000 algo, pero en realidad podemos obtenerlo directamente usando este pequeño método de conveniencia de decir csv.length. Entonces, eso sólo lo llenará automáticamente con la longitud del archivo CSV. Creo que tenemos, aquí dentro podemos contar el número de columnas que tenemos, una, dos, tres, cuatro, cinco, seis. Hay seis columnas, así que especifico eso como seis, y acaba de presionar Run para comprobarlo de nuevo, todo va bien. El siguiente paso será este bit de código reutilizable para dividir esas líneas CSV en nuestra matriz 2D. Entonces, voy a copiar esto del archivo de referencia. En realidad, lo volveré a escribir. Vamos a usar nuestro primer cuatro bucle así, solo configuraré el esqueleto básico del bucle for que empieza con para abrir paren y cerrar paren, y luego un corsé abierto, y una cerradura. Ahora, voy a configurar las condiciones para el bucle for. Esto será, para un Integer i, eso es cero, mientras que es menor que la longitud del CSV así que csv.length lo incremente, eso es i plus, plus o i igual i más uno. Entonces lo que vamos a decir es que esta matriz 2D MyData para cada una de las posiciones i en este contenedor, queremos dividir ese CSV en la cadena que es carácter de una coma. Entonces, csv i.split, esta es una función de cadena que le dirá el carácter en el que quieres dividirlo, y he hecho todo correctamente aquí, y pegado Run. Se hace eso todo en segundo plano. Ahora, solo imprimamos un poco aleatorio de MyData para asegurarnos de que funciona correctamente. Entonces, voy a añadir otro println. Quiero volver a acceder a MyData en la posición 23, pero esta vez, quiero la cuarta fila o la cuarta columna de la fila 23, cerrar eso y ejecutarlo, y ahí vamos. Tengo un poco de datos de localización que se están extendiendo. Entonces, creo que ahora todo está en el sistema donde deberíamos poder recorrer en ciclo por él, y empezar a hacer nuestros marcadores. Siéntase libre de copiar sobre este for loop o incluso la sección de configuración completada. Ahora que hemos terminado, esta división en la pieza de código de la coma es algo que normalmente solo copio de un proyecto a otro, y no me preocupo por memorizarlo. 10. Cómo convertir lat/long en coordenadas en la pantalla: Entonces, en este punto tienes este CSV importado en procesamiento, y has copiado ese código. Entonces, tenemos un análisis en una matriz 2D y ahora podemos entrar en nuestra sección de dibujo, y empezar a convertirla en coordenadas de pantalla para que podamos colocarla en nuestro mapa. Entrémonos a la sección de sorteo, y lo que vamos a hacer, es que vamos a configurar otro for loop aquí para recorrer todos nuestros datos. Esperemos que esto se esté volviendo un poco más familiar para ti. Como dije antes, esta es la misma estructura que usamos una y otra vez durante todo el procesamiento. Empezaremos escribiendo para, abriremos y cerraremos estos paréntesis, le daremos un soporte para lo que queremos que haga durante el bucle for y cierre ese corsé. Nuevamente, podemos usar esta estructura int i. No va a entrar en conflicto con el i que usamos arriba porque estos están en contextos diferentes. Si quieres que una variable sea accesible a lo largo de todo el proyecto, tenemos que establecerla aquí en la sección de variables globales. Entonces, voy a usar i de nuevo, voy a decir para int i es igual a cero, i es menor que la longitud de mis datos, entonces ese es mi data.length. Agrega uno a i, i plus. Entonces, voy a correr esto, asegurarme de que todo esté bien. Se ve bien todavía. Voy a mover esta elipse que dibujé antes al bucle for. Pero solo déjalo así y lo ejecuto, voy a conseguir 34 mil elipses apilados uno encima del otro. Ya se puede ver, que el código se ha ralentizado un poco, pero ahora el rojo de la elipse es totalmente opaco, porque todas esas elipses transparentes encima una de otra se han convertido ahora en una masa sólida. Vamos a detenernos en dibujar esta elipse. Entonces, démosle sólo dos barras inclinadas hacia adelante para comentarlo por un minuto. Ahora, lo que necesitamos hacer es computar la latitud y la longitud. Podemos utilizar la función de mapa para hacer esto. En primer lugar, solo imprimamos partes de nuestro conjunto de datos para asegurarnos de que las tenemos en los lugares correctos. Para ello, voy a usar el PrintIn, y lo que quiero hacer, es acceder a mis datos para cada fila que será i, y creo que aquí vamos a trabajar con el archivo CSV. Vamos a usar una, dos, tres, la cuarta, y quinta posiciones, porque estamos hablando con una computadora necesitamos restar una, porque cuentan desde cero. Entonces, eso serán tres y cuatro. Podemos hacer esto en realidad todo en una línea poniendo aquí un plus, y comillas abiertas, y, solo hacer otro plus ahí dentro, y un plus y luego el otro bit de mis datos. Entonces, lo que está pasando aquí, es que digo, quiero una impresión dos variables, y solo quiero meter un poco de texto en el medio para que sea legible. Esto va a ser un espacio, y un plus, y un espacio. Entonces, si ejecuto esto debería ver que todos los datos pasan por aquí. Como se puede ver en la consola, tengo la latitud y luego la longitud separada por un plus. Puedo hacer de esto una coma o una barra inclinada hacia adelante si quiero. Entonces, tengo los datos en un bucle donde puedo acceder a todo ahora. Voy a usar la función de mapa para convertir todo esto en coordenadas de pantalla. Entonces, para hacer esto, voy a configurar una nueva variable. Entonces, voy a llamar a GraphLong. Esto va a ser un flotador, porque quiero tener mucha precisión a ella. Va a ser un número decimal en lugar de un número entero, y el valor del mismo va a ser la salida de una función de mapa. También voy a necesitar una gráfica de eso. Entonces, configuraré eso también con una nueva variable y la salida de esta función de mapa. Entonces, si recuerdas de antes, una función de mapa va a tomar cinco entradas. Primero tomaremos el número que queremos un mapa, y luego las dos escalas que estamos usando. Entonces, vamos a armar. Accedamos a la pieza de datos que queremos inicialmente. El primero va a ser este MyData [i] [3]. Entonces, podemos copiar eso y ponerlo en el primer mapa, y luego este dato va a estar en la escala de menos 180 a 180. Entonces, primer número aquí menos 180, 180, y queremos que esto sea mapeado al ancho de nuestro lienzo. Sabemos que el lienzo comienza con cero y va a un ancho al que se puede acceder con sólo escribir la palabra ancho. Entonces, empezamos con cero y luego escribiremos ancho. El proceso para la latitud es muy similar pero necesitamos ajustar un poco los valores. Para esto, usaremos MyData [i] [4], y esto va a ser en la escala de menos 90 a 90, y para los datos de tierra, y luego estará en la escala de cero a altura cuatro para nuestra posición de pantalla. Vamos a alterar este printaEn un poco, vamos a cortarlo y pegarlo debajo de estas ecuaciones, y en lugar de enchufar MyData [i] [3], vamos a enchufar la salida de estas funciones de mapa. Entonces, podemos acceder a eso copiando sobre un GraphLong y poniéndolo en la función de impresión, y copiando GraphLat, y poniendo en la función de impresión. Entonces, ahora si todo está funcionando correctamente, podemos esperar que esto for loop recorra todos los valores para latitud y longitud en nuestro CSV y los guarde en las variables, GraphLong y GraphLat. Cada vez que va al bucle for, va a reinicializar la variable y usar el siguiente valor. Entonces, lo que debemos esperar en la consola es que este GraphLong y GraphLat impriman todos los valores de pantalla que vamos a necesitar. Pero he hecho algo mal. Sí. Este es el único paso que falta. Nuestros datos están en formatos de cadena. Entonces, piensa que todo lo que está encontrando es una palabra. Desafortunadamente, sabemos que es un número, y tenemos que ponerlo en un formato que esta función de mapa pueda utilizar. Sólo puede funcionar con números como enteros o flotadores. Entonces, la forma de decirle al procesamiento que use este MyData, que piense es una palabra porque viene de un conjunto de variables de cadena. Tenemos que echarlo a un número. Esto significa simplemente traducirlo, y la forma en que hacemos eso es con una pequeña función llamada float. Entonces, si envolvemos MyData en un flotador y en la línea de abajo, lo envolveremos. En un flotador esto ahora debería ser posible por la función, y nuestra consola debería escupir todos los valores de pantalla que necesitaremos. Ya puedes ver, ahora este conjunto de números está en la escala de nuestro lienzo. Todos deben estar en menos de 1800 en el primer número y menos de 900 en el segundo número. Ahora bien, si tienes este código funcionando, puedes copiarlo desde el otro archivo o esperemos modificarlo hasta que sea exitoso para ti. Vamos a llegar a nuestra elipse para dibujar todos estos marcadores en pantalla. Entonces, en lugar de darle dimensiones explícitas como 500 y 500, ahora podemos decirle que en realidad solo queremos poner todos nuestros puntos en GraphLong y GraphLat y 100-100 va a ser bastante grande, hagámoslos 10 por 10. Si ejecutamos esto deberíamos ver nuestro primer vislumbre de todos estos datos apareciendo en el mapa. Hemos cometido un error en alguna parte. Como se puede ver, este mapa está al revés. Estos meteoritos no están aterrizando en nuestros continentes. Entonces, creo que lo que necesito hacer, necesito cambiar este mapeo de escala. En lugar de ir de menos 90 a 90, quiero que pase de 90 a menos 90. Ojalá que ese cambio seamos el correcto. Ahí vamos. Eso se ve mucho mejor. Tenemos ahora todos los meteoritos que aterrizan en la Tierra, y en el siguiente paso podemos enchufar la escala del tamaño del meteorito al tamaño del marcador que vemos en pantalla. 11. Cómo conectar marcadores a los datos: Está bien. En esa última sección, ojalá tuvieras la emoción de meter todos los marcadores de meteorito en el mapa. Ahora, vamos a hacer un poco de matemáticas para escalarlos adecuadamente, y acceder a la masa del Meteorito. Vamos a hacer un poco de limpieza en este For Loop, deshacernos del espacio aquí, y estoy bastante contento con el resto de este código. Entonces, lo dejaré en su lugar. Lo que voy a querer hacer, es definir una variable para el diámetro de cada uno de estos meteoritos. Entonces, necesito usar mi cálculo de área correcto, y acceder a la pieza de datos correcta de nuestro CSV para conectarlo a esta ecuación. De nuevo, voy a querer un flotador, y llamemos a esto MarkerSize. Este va a ser el contenedor para el diámetro de nuestros MeteMarcadores. Entonces, volvamos a revisar dónde se encuentra retenida la escala de nuestro Meteorito. Entonces, se está llevando a cabo en la tercera columna de nuestro archivo de texto. Entonces, accederemos a eso con la matriz mis datos 2D. Podemos seguir usando (i) para iterar a través de todos ellos, pero usamos la segunda posición ahora. Entonces, ahora necesito enchufar el MarkerSize al tamaño de la elipse. Entonces, en lugar de usar uno estático, solo diré pegar MarkerSize donde estaba diciendo 10 antes. Podemos probar esto, pero creo que dos cosas. Uno, estos marcadores van a ser enormes. No podremos ver nuestro mapa, y además tenemos que convertir la cadena que mis datos están regresando en un flotador. Tenemos que hacerlo algo que el código de dibujo de la elipse pueda reconocer. Entonces, ahora estamos diciendo “Toma esa palabra que está definiendo un número y trátalo como un número”. Deberías apagar el println, fundir ahora, creo que va a tomar demasiado tiempo y ralentizar este proceso. Entonces, eliminemos eso y ejecutemos esto de nuevo. Entonces, un montón de rojo, eso se debe a que algunos de estos marcadores eran de 60 millones de gramos. Entonces, realmente vamos a necesitar reducir estos marcadores. Desafortunadamente, una de las cosas que vamos a hacer, es que vamos a implementar este cálculo de área. Entonces, como les mostré en los conceptos iniciales, necesitamos tomar una raíz cuadrada del tamaño del meteorito y dividirla por pi y eso nos dará el radio. Entonces, veamos. Tenemos una función para hacer raíz cuadrada en el procesamiento es SQRT, y tal vez tiene minúsculas. sqrt, abrir un parenth, y cerrar parenth. Entonces eso bajará un montón el tamaño del marcador, también tenemos que dividirlo por pi. Entonces, usamos una barra y Pi como método de conveniencia en el procesamiento así solo PI, y solo lo voy a multiplicar por 0.5. A ver. Entonces, sea lo que sea, sólo voy a dividirlo para reducirlo un poco. Intentemos ejecutar esto de nuevo. Está bien, se está volviendo un poco más racional, pero sigue fuera de los límites de la aceptabilidad. Entonces, vamos a sumar otro decimal al factor de escala. Entonces, ahora multiplícalo por 0.05, y eso se ve bastante bien. Puedo distinguir áreas de densidad, y áreas donde no hay tantos meteoritos. Hasta voy a intentar impulsar un poco esto. Diga, 0.1, y vuelva a ejecutarlo. Te dejaré esto escalando a ti. Creo que voy a volver a 0.05. Eso me pareció mostrarme una buena cantidad de detalle aquí, mientras también comunicaba un montón de la densidad de estos golpes de meteorito. Entonces, no creo que haya una respuesta correcta o incorrecta para encontrar la escala correcta aquí, pero podemos ir a pequeña con bastante facilidad, si vamos a 0.01, creo que solo vamos a empezar a faltar esta densidad, muchos de los meteoritos más pequeños son ahora invisible, mientras que si vamos a 0.1, creo que muchas de estas áreas simplemente se ponen demasiado abarrotadas. Entonces, estoy empezando a perder detalle en el medio oeste de Estados Unidos y creo que quiero bajarlo un poco, que pueda ver algo más de eso. Entonces, voy a probar la mitad de esto, 0.05. Que a mis ojos parece equilibrar la cantidad correcta de detalle en las zonas más pequeñas con algo de la densidad que creo comunica la intensidad de los ataques de meteoritos mexicanos. Esta es decisión ilegibilidad de asegurar que pueda ver el conjunto de datos completo en su visualización. 12. Cómo etiquetar marcadores: De acuerdo, entonces, tenemos todos los meteoritos dibujando en nuestro mapa, todos están escalados correctamente, hemos convertido nuestras cantidades a área con la metodología adecuada, y ahora solo quiero etiquetar algunas de estas. Y la palabra clave aquí es, algunos de ellos, porque con 34 mil meteoritos en nuestro mapa, realmente se hundiría tanto el procesamiento como el ilustrador para tratar de etiquetarlos a todos. Entonces, quiero etiquetar un subconjunto, y si recuerdas sacamos el CSV con los meteoritos más grandes en la parte superior. Entonces, sólo podemos decir: "Para los primeros 20, pongámosle una etiqueta, o incluso los primeros 10”. Y sabremos que estos son los 10 mejores meteoritos de nuestra selección. Entonces, para hacer eso, vamos a usar una pequeña función más aquí que es una función if, esto básicamente solo va a probar algún resultado y ver si deberíamos estar haciendo algo. Esto es similar a un bucle hacia adelante, diremos si, y parens abiertos cerrar parens, y abrir corchetes cerrar corchetes, y simplemente quiero decir si yo es menor de 11, eso me va a dar el, en realidad si yo es menor de 10, eso me debería dar los 10 mejores tamaños de meteoritos, y aquí es donde pondré el código de etiquetado. Entonces, primero voy a querer sólo poner el texto en la pantalla. Y no es tan difícil agregar texto al procesamiento, predeciblemente usamos una función llamada, Texto, eso va a definir lo que queremos poner en pantalla, y sólo tenemos que decirle qué escribir, y dónde ponerlo. Ya tenemos esta información en nuestro sistema. Entonces el CSV tiene un nombre, entonces y eso está en nuestra matriz mydata dos D, y eso está en la primera posición. Entonces, será mydata i en posición cero, y entonces el siguiente parámetro solo va a ser nuestro GraphLong, y el siguiente será GraphLat. Ahora, voy a ejecutar esto, pero sólo va a poner el texto justo encima de nuestro marcador, así que, probablemente querremos compensarlo. También puedes ver que lo está dibujando en el mismo color que el meteorito, por lo que queremos cambiar eso. Voy a querer dibujar estos en negro. Entonces, cómo hacemos esto, es que solo necesitas agregar otra línea para el relleno, y yo diré llenarlo con cero. El problema es que, este relleno ahora está dentro del bucle cuatro, así que, me sacaré un meteorito en rojo si hago esto, y todos los demás serán dibujados en negro. A lo mejor podremos ver esto. No, no puedo ver el rojo. Pero ahora todo está dibujado de negro. Entonces lo que necesito hacer es mover esta descripción de relleno al bucle de cuatro, así que cada vez que empiece de nuevo, establecerá mis meteoritos para que se establezcan con el rojo semitransparente, y luego cuando llegue a la sección de texto, se lo pondrá a llenarse de negro. Si vuelvo a ejecutar esto, ojalá lleguen los resultados, genial. Tenemos etiquetas negras en nuestros meteoritos rojos semitransparentes. Ahora quiero mover todas estas etiquetas fuera de los círculos, para que pueda usar una línea para adjuntarlas al correcto golpe de meteorito. Simplemente podemos hacer eso especificando algún offset, y una de las cosas bonitas es que ya sabemos el tamaño de cada uno de estos círculos en esta iteración. Entonces, voy a decir que quiero compensarlo por GraphLong más el tamaño del marcador, más 100, ver si es suficiente. De acuerdo, eso parece demasiado, así que, tal vez solo lo haga a los 30, lo probaremos por talla. Realmente micro-tamaño. Está bien. Parece razonable. Ahora dibujemos una línea que conecte la pieza de texto con el meteorito. No quiero llenar mi línea de cero, en realidad quiero darle un trazo, entonces, diré, no relleno, y quiero que mi trazo sea negro. Entonces, este será trazo de cero. Y cuando vuelva a empezar este bucle, no quiero estar usando ese trazo. Entonces, arriba arriba tendré que decir que no hay derrame cerebral. Dibujar una línea es casi tan simple como dibujar algunas de estas otras formas, solo vamos a decir que quiero una línea, y esto tomará dos medidas, la posición x e y inicial, y la posición final x e y. En este caso, sabemos que queremos iniciarlo en GraphLong más el tamaño del marcador, y GraphLat. Entonces estamos agregando el tamaño del marcador aquí para que empiece en el borde del círculo, puedo quitármelo por ahora para que podamos ver cómo eso apuntará al centro del círculo si no lo usamos. Entonces, el punto final de esto va a ser de nuevo GraphLong, más el tamaño del marcador y GraphLat. Veamos qué hace esto, y cómo tenemos que ajustarlo. Seguramente va a hacerlo. Entonces se está encontrando un poco con nuestro texto, y está corriendo hacia el centro del marcador. Entonces, quiero que esta línea solo se conecte al borde mismo de nuestro marcador, de esa manera, en algunas de estas áreas más densas se puede ver qué círculo se está describiendo. Entonces para hacer eso, agregaré el tamaño del marcador más de dos para que eso funcione. Entonces necesito dividirlo por dos, lo contrario será el diámetro del círculo. Eso es genial, tenemos una conexión al borde ahora. Y solo quiero mover el texto un poco hacia la derecha, y un poco hacia abajo, eso debería hacer que nuestra conexión sea completa. Entonces, el texto le voy a dar un poco de relleno, como cinco píxeles, y la latitud del gráfico, y darle otro decir cinco píxeles, y se puede ajustar estos valores para llegar a donde piensan que se está alineando cómodamente, se ve un poco bajo a mis ojos, así que cambiaré ese cinco a uno cuatro, y ahora eso se ve bastante bien. La línea y el texto están todos conectando a nuestros meteoritos, y vamos a añadir un poco de código para que podamos sacar esto como PDF. 13. Hacer un PDF: Está bien. Estamos todos listos. todos nuestros círculos siendo dibujados a la escala correcta en el procesamiento, tenemos etiquetas de texto que están conectadas a nuestros marcadores de una gran manera. El siguiente paso es, ¿cómo metemos esto en un PDF, para que podamos llevarlo a Illustrator, y hacer un par de ajustes finales al mismo, o llevarlo más allá, llevarlo a InDesign o Photoshop. Vamos a necesitar una biblioteca para hacer esto, y esto viene automáticamente con el procesamiento. Solo tienes que agregar un poco de código bajo las bibliotecas. De hecho, solo puedes hacerlo bajo el menú de boceto en procesamiento. Si dices importar biblioteca, aquí hay un PDF, y se plop en la pieza de código correcta. O simplemente puede copiarlo desde el archivo de referencia. Decimos importar, processing.pdf, y ahora tenemos acceso a las herramientas requeridas para guardarnos un PDF. El resto del código para esto, girará alrededor de nuestra zona de sorteo. Entonces, todo lo que necesitamos hacer es decir, empezar a grabar al inicio del sorteo, y luego grabar al final. En el código de inicio de grabación, sólo le diremos cómo queremos que se nombre nuestro PDF. Entonces, digamos comenzar a grabar o comenzar a grabar, y abrir corchetes, poner ese punto y coma y queríamos guardar esto como PDF así, ese es el primer parámetro, y el segundo es justo lo que quieres llamarlo. Voy a llamarlo meteorStrikes.pdf. Asegúrate de que eso esté entre comillas, y al final de nuestro bucle de sorteo, solo diremos, terminar registro, es tan simple como esa función, y solo voy a agregar una pequeña salida de consola aquí, que Sé que el PDF se hace guardando, y eso sólo será algo que diga PDF guardado. Entonces, printlin y PDF guardados. Esto es solo una cosa poco útil para mí saber que puedo comprobar, y es seguro abrir el PDF. Entonces, se corre. Veo en la consola, dice PDF guardado. Voy a cerrar este boceto, y si voy a su carpeta padre, ya verás que tengo un PDF de 1.1 megabyte llamado meteoro golpea ahí. Puedo abrirlo en vista previa, y se ve bastante bien. Voy a tratar de abrir esto en Illustrator ahora, y ver qué necesito cambiar si algo, y cómo puedo hacer que esto se vea un poco mejor. Me encantaría darle algunas tipografías más bonitas que la predeterminada que consigo en procesamiento, y podría agregar un título o cambiar los colores. Ya lo tengo abierto en procesamiento. Va a haber una cosita que creo que voy a querer cambiar. Por defecto, el procesamiento delinea todos los textos cuando lo trae. Entonces, si vas al modo de esquema en Illustrator presionando Comando Y, puedes ver que esto ya no es texto en vivo, todo ha sido esbozado. Entonces, si quiero cambiar algún aspecto del mismo, voy a necesitar agregar un par de líneas más de código en el procesamiento para que sea texto en vivo. Ojalá puedas ver parte del detalle que tenemos en este PDF, es simplemente bastante fenomenal, la densidad que se puede crear. Aquí en Arabia Saudita, acabamos de recibir muchos golpes de meteoritos. Lo que eso significa, está para que decidas explorar con más profundidad. ¿ Son buenos encontrarlos ahí, o simplemente tienden a tener muchos meteoritos? procesamiento puede guardar cosas como un PDF o un JPEG con diferentes bits de código, pero como estamos interesados en traer esto a Illustrator y hacer un poco de limpieza en él, hemos importado ese código PDF y lo configuramos para exportar eso manera. Esta es una de las cosas que me gusta mucho del procesamiento, es que para un diseñador gráfico empapado en trabajar en impresión, quiero vectores, no quiero JPEG ni PNG. Ahora, para que este tipo esté en vivo, hay un par de pedacitos más que vamos a necesitar agregar. Tendremos que añadir un nuevo contenedor que se llama fuente P. Simplemente lo llamaré F, y aquí es donde va a vivir la tipografía que definimos, y podrá emitir tipo vivo en nuestro PDF. En nuestra configuración, el código que acabamos de ejecutar una vez, ahora definiré F. Esta va a ser una función llamada CreateFont, y puedes usar cualquier tipo de letra que se cargue en tu máquina. Voy a usar Avenir porque creo que Mac's lo consigue por defecto. Entonces, esto debería funcionar para todos, y se ve un poco mejor que la tipografía predeterminada que estábamos usando antes. Entonces, la forma de referenciar es en este caso, al decir entonces el nombre de la fuente y el peso que queremos. Yo quiero Avenir mediano, y quiero que sea talla 12. Entonces, debería tener esta configuración de tipografía. Ahora, solo necesito especificar que quiero usarlo en mi gráfico. Tengo que usar un modo de texto diferente para que no delinee todo. Esta es esta una línea llamada modo texto, y el código por la forma en que queremos que se trate, como modelo. Creo que esto debería hacerlo. Una línea más arriba donde especificamos el texto que se está escribiendo, vamos a decir que queremos usar esta tipografía que he definido. Entonces, sólo una línea bastante simple aquí, fuente de texto F. Esperemos, eso lo hará. Vamos a darle una carrera. Entonces, esto va a volver a ejecutar el boceto, volver a guardar el PDF sobre nuestro anterior, y luego lo llevaremos a Illustrator y nos aseguraremos de que todo funcione correctamente. Ya puedo ver mi boceto, que se está utilizando la tipografía Avenir. Entonces, las cosas se ven un poco más de diseño, y voy a abrir este PDF que me ha dado en ilustrador. Después vuelve a ir al modo de vista previa. Puedo ver ahora que el tipo está lleno, y si cambio a la herramienta de texto, puedo seleccionarlo y puedo cambiar las cosas. Entonces, eso se ve bien. Está bien. Ahora tenemos todo en Illustrator, nuestro texto es editable, y podemos seguir adelante y jugar con retocar algunos del tipo, eliminando algunos temas que podrían estar apareciendo en nuestro boceto y ajustando algunos de los colores. 14. Limpieza: Está bien. Estamos aquí en Illustrator ahora. Tenemos este bonito PDF que hemos ahorrado con todos nuestros golpes de meteorito. Tenemos un montón de etiquetas. Al mirarlo ahora, creo que probablemente podríamos agregar un par más. Entonces, si solo quieres ir a Procesamiento, puedes cambiar ese número de etiquetas de 10 aquí a 20. Creo que conseguiremos algo que le tenga un poco más de riqueza que acabará de reventar en Illustrator. Sí. Genial. Entonces, reabre nuestro PDF en Illustrator. Entonces, tengo 20 etiquetas en este mapa. Lo primero que podrías notar en Illustrator cuando estás mirando este PDF es, si haces clic en este gráfico, solo obtienes los límites de este rectángulo externo, y una de las cosas que hace Processing es que pone una máscara de mapa sobre el toda la salida. Entonces, lo primero que hago cada vez que entro en Illustrator es que solo necesito quitar esta máscara. Entonces, bajo Máscara de recorte, bajo Objeto, solo voy a decir suelta la máscara, y ahora si vuelvo a seleccionar mis límites y la elimino. A ver. Parece que he lanzado una máscara, pero eso estaba justo en el mapa. Ahora, solo voy a seleccionar todo y, de nuevo, decir Máscara de recorte, Liberar. Entonces, esto debería permitirme seleccionar cualquier cosa ahora. Sí, tengo mi texto. Tengo mis etiquetas. Entonces, al seleccionar todo y bajo el menú Objeto diciendo liberación de máscara de recorte, soy capaz de acceder a todas las diversas piezas de este mapa a las que quiero llegar. Entonces, todo es convenientemente un color diferente ahora en Illustrator, y esto me parece realmente útil porque ahora podemos agrupar las cosas de nuevo. Tenemos nuestro fondo en color gris. Tenemos el mapa que está en blanco pero está fragmentado. Entonces, vamos a seleccionar una pieza del mapa, y debajo del menú Seleccionar, sólo diremos seleccionar el mismo relleno de color. Ahora, agruparemos estos golpeando al Comando G. Así que, tengo mis antecedentes, es accesible. El mapa es accesible. Voy a hacer el mismo proceso para los meteoritos, las etiquetas, y las líneas. Entonces, seleccionaré un meteorito. Say Select, Same, Fill and Stroke, y los agarro todos, y puedo agruparlos. Voy a agarrar un trozo de texto. Seleccionar, Mismo, Rellenar y Golpear, agruparlos y agarra las líneas y haz lo mismo. Genial. Por lo que ahora, mis cinco componentes diferentes son todos realmente fácilmente seleccionables y editables. Lo siguiente que podrías notar es que este archivo es un RGB. Esto va a estar bien si te diriges a la salida de pantalla, pero generalmente pienso en los colores más en una CMYK o una impresión enviada. Entonces, voy a cambiar todo a CMYK ahora mismo para hacer las cosas un poco más sencillas. Se puede ver que de inmediato hay un poco de cambio de color del rojo RGB a un rojo CMYK. Pero en realidad ni siquiera quiero que estos meteoritos sean de color rojo. Prefiero hacerles algo que esté más en la línea de mi estética. A mí me gusta un bluegreen. Entonces, voy a ir por cian, digamos 80 y sumar 30 amarillo y ahí vamos. Estamos en un lugar más agradable. Podríamos incluso editar la transparencia si quisiéramos. Si no estuviéramos satisfechos con lo que Processing nos había dado. Si vas a Ventana, Transparencia en Illustrator, verás que por el momento, todo está establecido en 100. Eso es para todo el grupo. Si lo desagrupamos, entonces obtendremos acceso a los componentes individuales, y todos están fijados en un 20 por ciento de opacidad. Entonces, tal vez cambiaré eso a 30. Podrías incluso mirarlo al 100 por ciento de opacidad, pero creo que lo que encontrarás es que mucho del detalle que antes estábamos disfrutando desaparece ahora. Obtenemos este mapa sólido donde no se pueden ver algunos de los aspectos subyacentes. Entonces, probablemente, cualquier cosa menor del 50 por ciento es mejor para esta tarea. Sí, 50 es un poco oscuro para mi gusto. Voy a bajarlo y volveré a agrupar estos en una gran selección ahora. El texto está ahora en Avenir. Puedo ver que en realidad está cayendo un poco detrás de algunos de estos ataques de meteoritos. Si acercas aquí, verás que algunos de ellos están cayendo encima. Entonces, quiero mover esa selección al primer plano. A ver, Objeto Organizar, Traer al frente. Está bien. Por lo que ahora, nuestro texto está al frente. También tengo un par de colisiones ocurriendo en el texto, así que voy a ambos querer cambiar la tipografía a algo que me gusta un poco más que Avenir y voy a querer moverme por algunas de las etiquetas que están empezando a chocan entre sí. Entonces, primero, vamos a seleccionar este tipo de grupo. He sido fan de esta nueva tipografía llamada Input recientemente. Se trata de una tipografía gratuita que ofrece Font Bureau. Es realmente bueno para la edición de textos y tiene una flexión informativa que me gusta. que estos pesos estrechos que también funcionan mejor en la visualización de datos porque puedes obtener más altura de tus tipos de letra cuando están un poco más comprimidos. Entonces, voy a cambiar esto a Input Sans Compressed, en el peso regular. Es un negro bastante negro ahora mismo. Si nos fijamos en el CMYK, es bastante pesado. Entonces, eso es de la conversión de RGB, así que solo lo voy a establecer en 100 por ciento K o 100 por ciento negro sin ninguno de los demás componentes CM e Y a ella. Eso se ve bien. Estas líneas también son un poco gruesas y están configuradas a este negro realmente, realmente rico que es demasiado denso para nuestras necesidades, así que pon eso a un negro adecuado y cambia el trazo de 1.2 a medio punto, y le daré un poco más ligereza y no va ser tan distraer de parte de la información que estamos tratando de representar aquí. 15. Tipografía: El último problema que tengo aquí son, dos lugares donde estas etiquetas chocan entre sí. Entonces, lo que voy a querer hacer es darle la vuelta a todo esto. Debido a que todas estas líneas están agrupadas, voy a tener que ir al selector de flecha abierta, la herramienta de selección de grupos, eso me dejará agarrar una de estas líneas, también ver que estas líneas están sentadas detrás de los meteoritos. Entonces, quiero hacer lo mismo que hice con el texto, y llevar todo este grupo al frente. Entonces, lo haré con el objeto, arreglaré y llevaré al frente. Entonces, volviendo a la herramienta de selección de grupos, voy a agarrar esta línea única, y al sostener turno, voy a agarrar un pedazo de tipo, y voy a sacar eso hacia el borde derecho de la meteorito con el que estoy lidiando. Entonces solo necesito cambiar la orientación de esta pieza de tipo de izquierda alineada a derecha alineada con la herramienta de párrafo, y recortarla hasta el borde de la línea. Una de las cosas bonitas del procesamiento es que mediciones se mantienen igual cuando entras en Illustrator. Entonces, si bien se trata de píxeles en nuestras mediciones ahí, realidad se traducen a puntos en Illustrator. Entonces, creo que la distancia que tuve para el desplazamiento de la línea al tipo fue de cinco puntos, y se puede ver que si paso por encima de una de las etiquetas a las líneas, su desplazamiento es de cinco. Entonces, si acabo de recoger mi sello, cinco puntos a la izquierda, estará En exactamente la posición correcta como todas las demás, y sólo voy a pasar por encima de esta otra etiqueta de aquí. En realidad tengo, parece que he ido dos a mudarme aquí. Todos están chocando entre sí. Usando la herramienta de selección de grupos, escogeré esta pieza de texto, y la línea asociada a ella, y la moveré al borde derecho del meteorito. Es este más exterior, vamos a ver si lo tenemos bien, porque la línea se conectará al borde más izquierdo del círculo y cambiará el texto para alinear a la derecha, moverlo hasta el borde de la línea, y luego recortarlo sobre cinco píxeles, 1-2-3-4-5. Ahora podemos ver que nuestras opciones para ajustar un etiquetado se han quedado sin iteraciones de izquierda y derecha, por lo que necesitaremos un pequeño retoque más a esto para que funcione correctamente para el golpe de meteorito Morito. Entonces, si agarro esa línea y la etiqueta, voy a mover hacia abajo. Tiene que ir de la mano con este círculo más pequeño aquí. Entonces solo voy a agregar una iteración más a nuestras opciones de etiquetado, donde roto esta línea y pongo la etiqueta justo al lado. Entonces, esto va por aquí, y la etiqueta Morito puede o ir junto a ella, o por debajo de ella. Creo que lo cambiaré al centro alineado y lo recorreré cinco píxeles por debajo de esa línea. Creo que eso ha limpiado toda nuestra salida del procesamiento, y lo último que quiero hacer es solo darle un título a mi gráfico. Creo que una de las cosas más impresionantes de este conjunto de datos es el tamaño puro del mismo. Entonces, este es un buen lugar para llamarlo, para hablar de toda la amplitud de este gráfico, y es que contiene 34 mil golpes de meteorito. Entonces, solo voy a volver a donde empezamos este conjunto de datos original para obtener un recuento preciso de cuantos representamos. Puedo ver que tiene 34.066 filas, lo que significa que hay 34.065 meteoritos representados, y sólo necesitaré una nueva pieza de tipo para exponer eso, 34.065 golpes de meteorito. Pondré esto en una esquina donde no hay mucho que vaya a oscurecer, y le daré un tamaño más grande, para que sea inmediatamente aparente y ojalá te dibuje en este mapa muy detallado del globo. 40 puntos deben hacerlo. Sí. Dale un poco de relleno, y creo que estamos en buena forma. Ahora puedes guardar esto como un archivo de Illustrator, puedes traerlo a Photoshop, puedes exportarlo como PDF, o PNG, o un jpeg, y publicarlo donde quieras, y ojalá compartir el resultado final en la página de Skillshare. 16. Conclusión: Entonces, en este ejemplo, creo que sería difícil ir mal con el color. Se quiere algo que sin duda va a tener visibilidad, pero aquí sólo estamos codificando para un tipo de evento. Probablemente usar amarillo no va a tener suficiente contraste o impacto y queremos mantenernos alejados de usar grises porque estamos usando eso para definir el mapa base. Entonces, creo que algo que es brillante y funciona bien con transparencia, por lo que se acumula hasta algo sólido e impactante es bueno. Entonces cuando estamos usando el tipo, hay que pensar en la escala en la que se va a ver esto y en qué distraer va a ser de la información que realmente quieres comunicar. El corazón y el alma de esta página son todos los golpes de meteorito. Entonces, si el tipo es demasiado grande o demasiado quisquilloso, realmente va a dominar los datos que estamos tratando de expresar. Entonces, me gusta usar algo que tenga una textura uniforme, que se pueda condensar porque esto nos puede dar mucho más impacto en una pequeña cantidad de espacio. Sí, y generalmente se adhieren a apuntar a la legibilidad. Entonces, a menos que esté codificando para algo así que probablemente solo sea texto negro. Si estoy tratando de expresar qué etiqueta o una clave, entonces podría cambiar los colores. Este es un enfoque que es realmente fiel a los datos. Si miras esa hoja de cálculo y miras este mapa, creo que ciertamente hemos representado la mayor parte de la información que allí se muestra. Tenemos la latitud y longitud de cada uno de esos impactos de meteorito y también estamos representando sus escalas relativas. Además, incluso hemos etiquetado algunas de ellas y puedes ir más allá y podrías codificarlas por encontradas o caídas. Esto es algo que realmente hay que emparejar la estética para poder comunicar esta densidad de información, razón por la cual no hay realmente elementos decorativos aquí. Creo que sólo estaría distrayendo del núcleo de lo que estamos tratando de comunicar aquí. Que es algo que alguien podría pasar mucho tiempo analizando los matices de dónde suceden estos eventos. Creo que este conjunto de datos es realmente convincente para explorar como mapa porque ves estos eventos realmente grandes, algunos de ellos cerca de donde vivimos, otros que podrían estar realmente, muy distantes y creo que lo interesante aquí es que también se convierte en algo de un mapa para la densidad poblacional. Sí empieza a mostrar dónde vive la gente. Si miras a Siberia o miras a la selva tropical, no ves ningún meteorito golpeando allí. Pero, creo que probablemente sea evidente que esto no es porque no sucedan ahí, es sólo porque no se han recuperado o no se les ha visto ahí. Entonces, esto para mí es casi como si fuera una prueba de lo que realmente está sucediendo. Tenemos 34 mil huelgas de meteoritos conocidos, pero piensa en todos los que ocurren en el océano o suceden en Siberia de los que simplemente ni siquiera sabemos. Eso es lo que me resulta bastante convincente de ver este mapa.