| Vocero |
Transcripción |
| Jopowe |
Hola, bienvenidos a mi charla. |
| |
La motivación para esta charla surgió de una conversación en la comunidad de usuarios de JMP. El Dr. Anderson Mayfield es biólogo marino en la NOAA y la Universidad de Miami. |
| |
Estudia la salud de los corales de arrecife. Participó en nuestro episodio especial del Día de la Tierra de JMP On Air. Y también participará como ponente en esta conferencia. |
| |
En esta publicación de la comunidad de usuarios de JMP, publicó esta imagen. Y si la observan, tiene todos estos gráficos que representan corales o arrecifes de coral. |
| |
y representan múltiples datos, todo en un pequeño gráfico, que es algo parecido a un videojuego cuando tienes estadísticas de jugadores. |
| |
y están rondando al jugador mientras corre por la escena. Así que ahora probablemente entiendan por qué titulé mi charla: ¿Qué se obtiene al combinar un videojuego, un biólogo marino y JMP? Así que sigamos. |
| |
De lo que voy a hablar es de estas soluciones basadas en juegos o inspiradas en juegos que son posibles en JMP, incluyendo el uso de scripts gráficos personalizados, |
| |
Mapas personalizados. Y luego voy a hablar sobre una aplicación web de diagramas de dispersión en 3D que desarrollé y cómo integré conjuntos de datos JMP en esa aplicación. |
| |
Aquí tenéis un ejemplo del guion gráfico. |
| |
Y aquí tenéis un ejemplo de cómo usar mapas personalizados. Y aquí está mi aplicación de diagrama de dispersión 3D. |
| |
Así que comencemos. Para que veas cómo se utilizan los scripts gráficos personalizados, aquí tienes un pequeño ejemplo. |
| |
Y cuando abro JMP y ejecuto |
| |
este pequeño gráfico, y de hecho, hablaré de esto. |
| |
Utilizo este conjunto de datos ficticios que creé desde cero. Básicamente, trata sobre una especie de pez que viaja desde la Gran Barrera de Coral hasta Sídney. |
| |
Para acceder a los scripts gráficos, lo que puedes hacer es ir a personalizar. |
| |
Y este pequeño botón con el signo más te permite añadir un nuevo script. Al principio está vacío, pero tenemos algunos ejemplos en JMP. |
| |
Me gusta el script de polígono. Es muy sencillo. Simplemente dibuja un triángulo. Si lo aplico a mi gráfico, se puede ver un triángulo. |
| |
Y solo nos hicieron falta tres líneas: configurar la transparencia, establecer un color de relleno y dibujar el polígono. |
| |
Pero lo que nos interesa es saber cómo integrar esto en un script. La forma más sencilla de averiguarlo es pulsando el botón de respuesta. |
| |
y guardas el script en la ventana de scripts. Y aquí está el script. Comienza con mi pequeña plataforma bivariada que se lanza con latitud y longitud. Y más abajo, hay un despacho que tiene un script para agregar gráficos. |
| |
Y luego las tres líneas de la muestra. |
| |
Este es un ejemplo muy sencillo de cómo usar un guion gráfico. |
| |
Ahora voy a insertar un script gráfico. Dibuja estas barras flotando sobre cada punto. |
| |
Y lo primero que hago en esta aplicación es ajustar la transparencia y luego dibujar un fondo para mi pequeño gráfico. |
| |
una para el hambre, una para la fuerza y una para la velocidad. |
| |
Ahora les voy a mostrar el script completo, porque depende de otras cosas. Depende de estas constantes que configuré principalmente para hacer colores y en el fondo y algunas cosas como el fondo como. |
| |
Esta es mi función para dibujar barras. Toma una posición, una longitud y un color. Así que se puede usar para cada barra. Entonces, si ejecuto ese script. |
| |
Ahí está, tienes el gráfico con el pequeño |
| |
Una especie de monitores de salud inspirados en videojuegos flotan sobre cada pez mientras nadan y compiten a toda velocidad contra la corriente del este de Australia hacia Sídney. |
| |
Esto les dará una idea, básicamente un paso a paso de cómo funciona esa función. Comenzamos con un simple marcador en la pantalla y, para cada marcador, establecimos el origen del píxel. |
| |
Y luego empezamos a dibujar el fondo, pero eso lleva algunos pasos. La primera vez que ajustamos el grosor de la línea, en realidad no se ve nada. |
| |
Luego establecemos el color, que va a ser negro. Y luego hacemos un movimiento y una línea que dibuja el fondo y una línea muy gruesa. |
| |
Para cada barra, vamos a definir su color, posicionarla y trazar una línea. Luego dibujamos el fondo, le asignamos su color y la barra continúa. Por supuesto, repetimos el proceso con las otras dos líneas. |
| |
Ahora puedes usar muchas funciones gráficas diferentes. Aquí tienes la sección de funciones gráficas de la referencia de sintaxis JSL, donde puedes crear lo que quieras. ¡Adelante! |
| |
A continuación, voy a hablar sobre el uso de mapas personalizados. |
| |
Disculpe. |
| |
Para usar mapas personalizados, básicamente debes proporcionar dos tablas. La primera define todas las formas que deseas usar, y la segunda nombra las formas que aparecen en la tabla. |
| |
Y para esta columna de nombre, básicamente lo que necesitas agregar es una propiedad de columna de rol de mapa, y debe ser del tipo definición de nombre de forma. Te lo mostraré en un minuto. |
| |
Entonces, para hacer un ejemplo muy simple, por supuesto, lo que necesitamos es Big Class. Y voy a tener un ejemplo muy simple. |
| |
También hay un mapa para eso que solo tiene dos rectángulos. Déjame abrir esos archivos. |
| |
Así que es un mapa muy pequeño, como dije. Y solo para mostrarles estas coordenadas, tengo un pequeño |
| |
Aquí hay un guion que básicamente muestra los puntos. |
| |
Si resalto estos cuatro primeros, ese es el rectángulo superior y los siguientes cuatro son el rectángulo inferior. |
| |
El de arriba es el peso, el de abajo es la altura. Y si miras la propiedad de la columna, |
| |
es la definición del rol del mapa, nombre de la forma. |
| |
Una vez que tengamos este mapa listo, podremos abrir Big Class. |
| |
No podemos reutilizarlo directamente. Lo primero que debemos hacer es tomar las columnas de altura y peso y apilarlas. Así que vamos a tablas. Déjame apilarlas. |
| |
Y ahora tengo una tabla con estas columnas apiladas. |
| |
Como puedes ver, la etiqueta tiene altura y peso alternados, y lo que necesitamos hacer para conectarla al archivo de mapa es agregar otra propiedad de columna. |
| |
Este está aquí abajo, nuevamente el rol del mapa. Pero no diremos definición de nombre con forma, diremos uso de nombre con forma y necesitamos elegir el |
| |
archivo de mapa, el archivo de mapa de nombres. |
| |
Y también configure la columna con el nombre. |
| |
Y listo. Ahora que tenemos eso, puedo usarlo en un gráfico. |
| |
El gráfico que buscamos básicamente utiliza la columna de etiquetas para la forma del mapa, que establece las formas superior e inferior, y luego podemos arrastrar esa columna de datos que contiene todos los datos. |
| |
en el rol de color. Y ahí lo tenemos, este es un resumen de todos los estudiantes en la Clase Grande, pero realmente queremos obtener |
| |
uno por estudiante. Si lo arrastro al rol de envoltura, queda un poco ajustado, pero lo voy a distribuir haciendo niveles por fila y estableciéndolo en 10. |
| |
Ahí lo tenemos. Y eso es prácticamente lo que buscaba. Y este gráfico puede ser útil. |
| |
por sí solo. |
| |
Así que ahora hagamos algo un poco más complicado. |
| |
Bueno, en realidad, si estás haciendo algo más complicado, quizás te convenga usar el complemento de creación de mapas personalizados. |
| |
Y esta es una excelente función adicional. Te permite arrastrar una imagen y luego calcarla. |
| |
Y cuando hayas terminado de trazar todas las formas, haz clic en Finalizar con datos aleatorios y se generará |
| |
Necesitas los dos archivos shapefile, así como un conjunto de datos aleatorios que te permita probar tu mapa personalizado. Aquí tienes uno donde solo usé cuatro variables y una en el centro. Es básicamente una versión cuadrada de lo que viste en la diapositiva original. |
| |
Eso no era exactamente lo que buscábamos. Queríamos algo redondo, y creo que fue el Dr. Mayfield quien lo llamó pastel complejo. |
| |
No sé si ese es un término oficial, pero decidí que iba a construir estas cosas con scripts. |
| |
Lo que quería hacer era crear archivos shapefile y asegurarme de obtener lo que necesitaba. Y eso eran cuatro formas con algo en el centro. |
| |
Y entonces pensé: Bueno, soy programador. Me gusta hacer un poco más y ser un poco más flexible. |
| |
Así que pensé que tal vez algunas personas querrían hacer lo mismo, pero con solo dos variables más una variable promedio o central, o más. |
| |
Y pensé que tal vez sería bueno poder hacer también otras formas, como un diamante o un cuadrado. Bueno, no soy ningún genio. Tuve suerte. Y Xan Gregg respondió a una publicación que decía: ¿Cómo puedo hacer este gráfico polar en JMP? |
| |
Y aquí viene. |
| |
Ahí vamos y |
| |
Buscaban una forma como esta, que se parecía muchísimo a lo que yo necesitaba. |
| |
Lo que hizo Xan fue realmente genial. Es un script flexible que hace esto y genera estas cuñas alrededor de un círculo, pero lo único que faltaba era el centro y también la forma particular en que yo quería nombrar los archivos. |
| |
Pero no fue demasiado difícil. Y eso es lo que hace mi script. Y cuando ejecutas un pastel complejo, está la receta para este pastel, abres el creador de pasteles complejos. Luego agregas algunos ingredientes. En primer lugar, necesitas decir la cantidad de formas. |
| |
Y luego, si lo vas a centrar, ya sea en la parte superior o un poco hacia un lado. |
| |
Luego hay una variable para la suavidad. |
| |
Y luego también querrías especificar el radio interior, es decir, si quieres más o menos relleno, y el radio exterior. |
| |
Por supuesto, el siguiente paso es ejecutar el script y generará |
| |
estos |
| |
Archivos shape para ti y también haz una prueba de ejemplo, al igual que el creador de pasteles personalizado o el complemento de mapa personalizado. Así que aquí tienes un ejemplo de pastel complejo para cinco y las formas son cinco |
| |
y la suavidad para ajustarla a siete. Podrías usar cinco o seis y probablemente seguiría estando bien si van a ser |
| |
Dibujado muy pequeño. El tamaño no importa realmente. Lo que importa es el radio interior y el radio exterior relativos. Y esto es aproximadamente lo que el Dr. Mayfield tenía en mente, así que me quedé con cuatro para el radio interior y nueve para el radio exterior. |
| |
Veamos entonces cómo podemos usar estas cosas. Al igual que hicimos con la demostración de Big Class, vamos a tener que... vamos a tener que apilar las columnas. Pero una diferencia es que no tengo las variables de fuerza y salud en mi archivo shapefile. En realidad, están ahí. |
| |
en el archivo shape, se llaman cuña 1, 2 3 y |
| |
centro. |
| |
Así que voy a necesitar construir un |
| |
archivo que será |
| |
vincular ambos. |
| |
Primero, tengo este ejemplo de escuela pequeña apilada, |
| |
Lo cual hice apilando esas columnas de salud, fuerza y velocidad. |
| |
Y aquí está el archivo shape que... el nombre del archivo shape que voy a usar. |
| |
Observe que tiene una propiedad de columna. |
| |
del rol del mapa, |
| |
Correcto, definición de rol del mapa. |
| |
Y eso es necesario cuando creas tus propias formas personalizadas. |
| |
Entonces, el archivo vinculado, las columnas de mapas a la forma, lo construí básicamente enumerando las etiquetas dentro de mi |
| |
archivo apilado. |
| |
Y luego, en otra columna, nombre de la forma, enumeré las formas y sus nombres. |
| |
Ahora, es importante que el nombre de la forma aquí |
| |
tiene una propiedad que es rol de mapa, pero esta es uso de nombre de forma. |
| |
Y esta columna de etiquetas de datos tendrá un ID de enlace para que pueda unirse virtualmente a mi tabla apilada. |
| |
Ahora que ya tengo todas estas tablas configuradas, |
| |
El siguiente paso es construir un gráfico. |
| |
Ahora, será similar a lo que hice antes. La única diferencia es que, en lugar de simplemente arrastrar la etiqueta hacia abajo hasta la forma del mapa, ahora uso esta columna de unión virtual, la arrastro hacia abajo hasta la forma del mapa y ahí está la forma que quiero. Lo siguiente que debo hacer es agregar los datos a la columna de color. |
| |
Y luego agregar nombre al envoltorio. Y ahí están todos mis peces con |
| |
un gráfico para cada uno. Para intentar conseguir el degradado correcto, voy a degradado aquí y es este de aquí. |
| |
Quiero asegurarme de que el verde sea bueno, así que voy a invertir los colores. |
| |
Y ahí lo tenemos. Este es el |
| |
Es un mapa útil en sí mismo, porque puedes ver cada pez y cómo está. Pero, por supuesto, quiero sacarle más partido. |
| |
Lo que quiero hacer es poder insertar esas imágenes en una información emergente. |
| |
Para ello, vamos a convertirlo en una tabla de datos. |
| |
Devuélveme el archivo que tenía y ese gráfico. |
| |
Entonces, lo que hará aquí es que, debajo de los triángulos rojos, hay una creación de tabla de datos. Y lo que hará esto producirá una nueva tabla de datos. |
| |
Con todas estas imágenes, y eso es realmente útil, especialmente si lo vinculamos. Y lo convertiría en un ID de enlace para poder apuntar a él desde mi pequeño archivo escolar, de modo que pueda tener cada marcador, encontrar el gráfico para cada personaje. |
| |
Bien, tengo esto guardado en otro archivo y voy a abrirlo. Lo llamé imágenes de salud. |
| |
Así que ya no necesitamos esto. |
| |
Y ya no necesitamos el archivo apilado. |
| |
Pero lo que sí necesitamos es el ejemplo de la escuela pequeña con el que empecé. |
| |
Ahora, lo primero que debes hacer para que estos aparezcan en el |
| |
El gráfico consiste en establecer esa columna de imagen, esa columna virtual, |
| |
como se indica. |
| |
También puedes hacerlo con un gráfico sencillo. |
| |
Así que ya tenemos un ejemplo... bueno, voy a abrir esto de nuevo. ¿Por qué no? Mi script de carrera, solo para mostrarles que estoy empezando desde cero. Pero como he etiquetado esta columna, ahora cuando paso el cursor sobre uno de estos gráficos, aparece un... los tres |
| |
piezas de información para este gráfico y puedes hacer eso y fijar cualquier número de estos caracteres. |
| |
Esa es una forma de utilizar estos gráficos. |
| |
Otra forma es usar como marcador. |
| |
Y los gráficos que van a aparecer flotarán sobre los puntos y se usarán en lugar de las formas de diamante que tenía antes. |
| |
Recuperaré esas imágenes de salud, de la escuela pequeña, e incluso recuperaré ese gráfico. |
| |
Así que ahora mismo tenemos esos diamantes. Para convertirlos en estas formas de aquí, |
| |
Tuvimos que añadir otro más |
| |
insignia para esta columna de unión virtual. Realmente se está volviendo popular, así que úsela como marcador. Y entonces aparece una nueva insignia. Y detrás de mí, |
| |
Verás que estas imágenes se insertaron en la escena. Un último detalle: no me gusta mucho el espacio en blanco alrededor de la imagen. De hecho, está integrado en la imagen del gráfico. |
| |
Y una forma de solucionar eso es que tiene un script que encontrará esa área blanca y ajustará el canal alfa para que se vuelva transparente. Así que ahora tenemos gráficos con un aspecto agradable. |
| |
Forma redonda, no fondo cuadrado. Otra cosa que podrías hacer es aumentar el tamaño del marcador. |
| |
Y podemos llegar hasta 11. |
| |
¿Cómo se ve eso? Se parece bastante a lo que tenía; probablemente 10 hubiera sido mejor. Pero me gusta llegar a 11. Bien, entonces eso es |
| |
usar desde marcador. Queremos hacer un gráfico un poco más complejo. Y esto es lo que el Dr. Anderson Mayfield buscaba: un mapa de calor detrás de los marcadores. Y eso es bastante complejo, pero JMP puede manejarlo. En realidad, es un contorno. |
| |
Así que aquí tengo otra versión de escuela pequeña. Pero esta vez, tengo temperaturas del océano. |
| |
abajo del todo |
| |
y están ocultos para que no aparezcan como puntos reales. |
| |
Así que ya he creado las imágenes para esta. |
| |
En realidad, son las mismas imágenes que creé anteriormente. |
| |
Y empezaré con |
| |
Aquí termina para que podamos ver lo que quiero lograr. Básicamente quiero tener estos gráficos. |
| |
flotando sobre el contorno y un par de leyendas aquí que muestran qué son las cosas. |
| |
Eso no debería ser demasiado difícil. Empezaré con un mapa ya colocado y las coordenadas de latitud y longitud ya en los ejes x e y. |
| |
Lo primero que quiero hacer es añadir un contorno. |
| |
Y necesitamos darle ese toque de color, así que estoy arrastrando el rol de temperatura sobre el rol de color y voy a ajustar el número de niveles en este contorno. |
| |
Cambia un poco el valor alfa y añade algo de suavidad. |
| |
Lo siguiente que quiero hacer es hacerlo un poco transparente. |
| |
Vamos a ponerle un 0,6. |
| |
Es prácticamente lo mismo que tenía antes. Y ahora, para añadir los marcadores, hay dos maneras de hacerlo. Puedes hacer clic con la tecla Shift presionada en los puntos o simplemente arrastrarlos. Para arrastrarlos, |
| |
Luego puedes volver a configurar el tamaño del marcador. |
| |
hacerlo de la siguiente manera |
| |
Vamos a ir aquí y hacer otra cosa y usemos 10 esta vez. Creo que 11 era un poco demasiado grande. Bien, eso se ve bien. Ya casi está. Queremos trabajar en esta leyenda. ¿Cómo ponemos estos colores ahí? Bueno, ya tenemos el rol de salud. |
| |
Y puedes arrastrarlo justo aquí a la esquina, solo agrega un segundo color. Al principio, esto desorganiza un poco el gráfico. |
| |
Podemos solucionar eso. El problema es que el contorno no necesita usar la función de salud. Así que si la desactivamos, volveremos a lo que queremos. |
| |
Lo siguiente que debes hacer es añadir el color a la leyenda. Y podemos personalizarla de nuevo, como hicimos antes. |
| |
Vamos a hacer un poco más esta vez. Quiero tener cuatro etiquetas. |
| |
Quiero que empiece en cinco y suba hasta |
| |
20. |
| |
Oh, yo también quería invertir los colores. |
| |
Ahí lo tenemos, se ve prácticamente así, casi terminado. Solo quiero darle un toque más estético. Hay un par de cosas en la leyenda que me gustaría corregir. |
| |
Así que ve a la configuración de la leyenda y quita estas cosas que no parecen aportar mucho y mueve la leyenda de salud a la parte superior. |
| |
Ahí lo tenemos. Creo que estoy logrando lo que me propuse, lo mejor que puedo. |
| |
Así que puedo deshacerme de ese. No creo que todos lo necesiten ya. |
| |
Pero sí quiero añadir algo más. |
| |
¿Qué tal si añadimos esta leyenda, porque realmente no había manera de saber qué área de este gráfico hacía qué, ya sabes, hambre, velocidad, fuerza y salud? Por suerte tenemos eso. |
| |
Archivo de mapeo. Va desde el nombre de la columna hasta la forma. |
| |
Y voy a abrir ese tema por un segundo. |
| |
Así que aquí pueden ver que he etiquetado todas las filas y también he etiquetado la columna de etiquetas de datos. Eso significa que cuando creas un gráfico, |
| |
Todo estará etiquetado. Así que este es muy sencillo. Solo tienes que tomar el nombre de la forma y arrastrarla al rol del mapa, y listo, ya hemos terminado con ese gráfico. |
| |
Entonces, si quiero agregar eso a mi escena, la mejor manera de hacerlo es simplemente seleccionarlo, hacer clic en el signo más y luego copiarlo. |
| |
Luego abres alguna aplicación de edición de imágenes y la guardas en el disco. Y por supuesto, ya lo he hecho. Así que voy a... |
| |
muestra una vez que tengas eso, y necesito traer de vuelta mi gráfico de nuevo, |
| |
Vaya, puedo arrastrar esto. |
| |
Y ahí está. Oh, no está. Bueno, hay una manera de encontrarlo. Ve a personalizar, lo soltó en el fondo porque normalmente cuando arrastras una imagen, arrastras una imagen de fondo. |
| |
Así que todo lo que tenemos que hacer ahora... quitemos esto de en medio para que puedan ver lo que está pasando... es movernos hacia adelante. Aquí viene. |
| |
Y ahí está. Está al frente. Me gustaría añadirle un poco de transparencia porque es demasiado brillante para mi gusto. |
| |
Entonces pongamos 0.8. |
| |
Y ahora solo tenemos que arrastrarlo a la esquina y prácticamente habremos terminado con eso. |
| |
Bien, entonces había mucho y se utilizaron muchos archivos. Así que vamos a resumir todos los archivos que se utilizaron. Usé mi creador de pasteles complejo para generar los dos archivos de mapa que se necesitan, archivos shapefile. Tomé una escuela pequeña y la apilé. |
| |
Creé esta columna para dar forma al archivo de mapeo que necesitaba apuntar al archivo de nombre con el rol de mapeo. Usé una referencia de enlace para hacer una unión virtual de vuelta a la pila de la escuela pequeña. |
| |
Luego hice un gráfico que quería convertir en una tabla de datos y guardarla en mi archivo healthimages.jmp. |
| |
Por supuesto, eso tuvo que ser vinculado virtualmente de nuevo a la pequeña escuela original para que yo pudiera hacer el gráfico con eso. |
| |
Y luego hice lo mismo con las temperaturas del océano de la escuela pequeña, mi referencia de enlace a imágenes de salud. |
| |
Yo solo... tomé mi columna a un archivo shapefile y dibujé la leyenda para el gráfico que intenté hacer con las temperaturas del océano y usé... simplemente lo uso arrastrándolo básicamente. |
| |
Eso es todo por las demostraciones en 2D que quería hacer. Tomemos un pequeño respiro y ahora vamos a adentrarnos en el mundo del 3D, e incluso en la web. |
| |
solicitud. |
| |
Bueno. |
| |
Esta es mi aplicación web para crear gráficos de dispersión en 3D. |
| |
Y lo que les voy a mostrar es cómo introduje los datos de JMP en él. |
| |
Mi aplicación se basaba en el diagrama de dispersión 3D de JMP. Esto es solo para recordarles cómo se ve. |
| |
Y ahora tengo una pequeña demostración de eso. |
| |
Básicamente, tenía... Voy a mostrarles algunas de las características, comienza con la capacidad de seleccionar diferentes conjuntos de datos. Aquí está el conjunto de datos de diamantes. |
| |
Y por supuesto, este dibujo tiene puntos. Esa es la idea principal. Se dibujan con esta pequeña forma de bola, que explicaré cómo se hace en un minuto. |
| |
Pero también puedes rotarlo, igual que en JMP, hacer zoom y moverlo hacia adelante y hacia atrás. |
| |
Y también tiene etiquetas emergentes. Como puedes ver en la esquina inferior derecha, dibujé ejes y una cuadrícula, y añadí un poco de personalización. Nada demasiado. |
| |
Puedes cambiar el fondo, configurar el color de las paredes. Veamos si podemos darle un poco de color azul. |
| |
Sí, puede que no sea de tu agrado. Pero esto es solo una demostración. Luego puedes cambiar el tamaño de los marcadores. |
| |
Eso está publicado en la web. |
| |
Bien, cuando empecé con esta aplicación, lo primero que quería saber era si funcionaría en la web. ¿Funcionaría bien en mi iPhone o en mi iPad? |
| |
Porque esas máquinas no son tan potentes como mi ordenador de sobremesa. Así que creé un modelo 3D integrado o tres conjuntos de datos aleatorios con un número creciente de puntos. Fui y utilicé un... |
| |
Pensé que 25.000 era una cantidad que valía la pena probar en dispositivos de baja potencia, pero en realidad se puede llegar a valores mucho más altos con dispositivos de alta potencia. |
| |
Entonces pensé: bueno, debería intentar traer algunos datos reales, y encontré el famoso conjunto de datos Iris, que estaba en formato CSV (valores separados por comas). |
| |
Y lo importé. Pero tuve que escribir algo de código solo para convertirlo a mis estructuras internas. |
| |
Y pensé, bueno, JMP tiene muchos conjuntos de datos. Prefiero simplemente importar esos. Así que importé coches, diamantes y citometría. La única diferencia era la citometría, que realmente no tenía una buena |
| |
categoría para usar color y de hecho tuvieron que cambiar mi aplicación para aceptar un gráfico que no tenía ningún color. |
| |
La aplicación es bastante sencilla. Solo hay una página web. Es un archivo HTML. Tengo un par de archivos JavaScript, uso algunas bibliotecas de terceros, una fuente y una textura. La textura es la esfera que se usa para las formas. |
| |
La técnica que utilizo, proveniente de la industria de los videojuegos, consiste en partículas o sistemas de partículas. Se usan con mucha frecuencia en juegos de simulación y visualización 3D. Permiten crear efectos geniales como fuego, humo, fuegos artificiales y nubes. |
| |
Y en el pasado había trabajado durante un tiempo en un motor de juego comercial, y mi responsabilidad consistía precisamente en tomar el sistema de partículas y mejorarlo. |
| |
Así que ya tenía algo de experiencia con esto. Eh, eso fue en el mundo de C++, no en JavaScript. Pero como trabajé en HTML5 interactivo y JMP durante bastante tiempo, pensé que era hora de ver si podía tomar |
| |
Combiné dos de mis pasiones y creé una versión web para usar sistemas de partículas. Tuve suerte. Encontré esta biblioteca, Three.js. |
| |
Permite el dibujo 3D acelerado por hardware, cuenta con una excelente documentación y numerosos ejemplos de código, incluidos sistemas de partículas, lo que facilitó bastante la creación de mi aplicación. |
| |
Y la verdad es que lo más difícil para mí fue averiguar cómo introducir los datos desde JMP. |
| |
Pero lo haré... compartiré el script para eso. Lo único que hice fue asegurarme de que estos objetos fueran fáciles de usar. |
| |
En mi aplicación, una de las cosas que hice fue crear un array de objetos JavaScript y, para las columnas numéricas, añadir un mínimo y un máximo, para no tener que calcularlos en JavaScript. Y, por supuesto, JMP es muy bueno calculando ese tipo de cosas. |
| |
Para la categoría, en la columna de color, necesitaba usar un diccionario de categorías. Básicamente, se trata de tener los nombres de las categorías en una lista y luego acceder a esos valores mediante un índice basado en cero. Así es como funciona esa estructura. |
| |
Pensé que sería buena idea crear una interfaz de usuario. Y la verdad es que fue muy fácil. Se lo mostraré enseguida. Básicamente, solo necesito limitarla a columnas numéricas para los ejes x, y y z. |
| |
Y luego limitarlo a una columna categórica para la función de color. |
| |
Así que echemos un vistazo a ese código. |
| |
Bien, primero voy a dar un ejemplo con un conjunto de datos muy simple. |
| |
Y entonces el diálogo fue realmente fácil de realizar. Utilicé el diálogo de columnas y especifiqué lo que quería para las columnas numéricas y lo que quería para la columna de color, y me aseguré de que el tipo de modelado fuera categórico, por lo que es ordinal y nominal. |
| |
A continuación, tomo los datos de las columnas y creo los objetos JavaScript que necesito. Aquí están las cadenas de texto con los valores mínimo y máximo. Y esto es simplemente la creación de una cadena con estos objetos. |
| |
Y si hay una columna de color, haré lo mismo. Es un poco más complicado porque necesito extraer esas cadenas de caracteres e insertarlas en el objeto JavaScript. |
| |
Y finalmente, lo único que tiene que hacer es guardar esto en un archivo de texto. |
| |
Así que vamos a intentarlo. |
| |
Por supuesto, voy a usar Big Class, así que será un archivo pequeño y práctico. |
| |
Y |
| |
Entonces ejecuto el script. |
| |
Y me preguntó: ¿Qué quiero para mi XYZ? Ya tengo seleccionada la altura y el peso, y la edad es una columna numérica, así que también la usaré, y el sexo es una buena opción para el color. |
| |
Y con esto terminamos. De hecho, la salida me indica dónde está el archivo. |
| |
Eso lo tengo en la siguiente diapositiva. Así que pasemos a ella. |
| |
Así que apuesto a que siempre te has preguntado cómo se vería Big Class en JavaScript. Y aquí está. Y así puedes ver los tres |
| |
Columnas numéricas con el mínimo y el máximo, y luego la columna de color tiene este diccionario de F y M para las categorías, donde el cero significa femenino y el uno significa masculino. Bueno, este es el emocionante final de esta charla, espero que la hayan disfrutado. |
| |
Gracias por ver el vídeo, y si tienen alguna pregunta, no duden en hacerla. |
