Vocero | Transcripción |
| jopowe | Hola bienvenidos a mi charla. |
| La motivación de esta charla se basó en una discusión en la Comunidad de Usuarios de JMP. El Dr. Anderson Mayfield es biólogo marino de la NOAA y la Universidad de Miami. |
| Estudia la salud de los corales de arrecife. Presentó en nuestro episodio especial del Día de la Tierra de JMP On Air. Y también presentará en esta conferencia. |
| Entonces, en esta publicación de la comunidad de usuarios de JMP, publicó esta imagen aquí. Y si pudieras ver, 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 como un videojuego cuando tienes estadísticas de jugadores. |
| y están flotando alrededor del jugador mientras corren por la escena. Así que ahora probablemente tengas una idea de por qué llamé a mi charla, ya sabes, ¿Qué obtienes cuando combinas un videojuego, un biólogo marino y JMP? Así que sigamos adelante. |
| De lo que voy a hablar es de estas soluciones basadas o inspiradas en juegos que son posibles en JMP, incluido el uso de scripts de gráficos personalizados, |
| mapas personalizados. Y luego voy a hablar sobre una aplicación de diagrama de dispersión basada en web 3D que construí y cómo integré conjuntos de datos JMP en esa aplicación. |
| A continuación se muestra un ejemplo del guión gráfico. |
| Y aquí hay un ejemplo del uso de mapas personalizados. Y aquí está mi aplicación de diagrama de dispersión 3D. |
| Entonces empecemos. Para ver cómo se utilizan los scripts de gráficos personalizados, tengo una pequeña muestra aquí. |
| Y cuando abro JMP y ejecuto |
| este pequeño gráfico, y de hecho, hablaré de esto. |
| Utilizo este conjunto de datos ficticio que creé desde cero. Y se trata básicamente de una raza de peces que va desde la Gran Barrera de Coral hasta Sydney. |
| Entonces, para llegar a los scripts gráficos, lo que puede hacer es ir a personalizar. |
| Y luego este pequeño botón más le permite agregar un nuevo script. Comienza vacío, pero tenemos algunas muestras en JMP. |
| Por eso me gusta la escritura poligonal. Es muy sencillo. Todo lo que es, es que dibuja un triángulo. Entonces, si aplico eso a mi gráfica, puedes ver un triángulo allí. |
| Y todo nos tomó tres líneas, establecer la transparencia, establecer un color de relleno y luego dibujar el polígono. |
| Pero lo que buscamos es, ¿cómo se integra esto en un guión? Entonces, la forma más fácil de verlo es presionar el botón de respuesta. |
| y guarda el script en la ventana del script. Y aquí está el guión. Para empezar, se lanza mi pequeña plataforma bivariada con latitud y longitud. Y abajo, hay un despacho que tiene un script gráfico adicional. |
| Y luego las tres líneas de la muestra. |
| Aquí tenemos un ejemplo muy sencillo del uso de un script gráfico. |
| Ahora este es un script gráfico que voy a incrustar. Dibuja estas barras flotando sobre cada punto. |
| Y lo que hago primero en esta aplicación es configurar también la transparencia y luego dibujar el fondo de mi pequeño gráfico. |
| uno por el hambre, otro por la fuerza y otro por la velocidad. |
| Ahora les voy a mostrar el guión completo, porque depende de otras cosas. Se basa en estas constantes que configuré principalmente para hacer colores y en el fondo y algunas cosas como el fondo. |
| Esta es mi barra de dibujo de funciones. Se necesita una posición, una longitud y un color. Entonces eso 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 un juego que se ciernen sobre cada pez mientras nadan y corren por la corriente del este de Australia hasta Sydney. |
| Esto te va a dar una idea, básicamente un paso a paso de cómo funciona esa función. Comenzamos con solo un marcador en la pantalla y para cada marcador configuramos el origen del píxel. |
| Y luego comenzamos a dibujar el fondo, pero eso requiere algunos pasos. La primera vez que configuramos el grosor de la línea, en realidad no ves nada. |
| Luego configuramos el color, que será negro. Y luego hacemos un movimiento hacia una línea que dibuja el fondo y una línea muy gruesa. |
| Y para cada barra, vamos a establecer el color de la barra, movernos a la posición y luego hacer una línea. Luego dibujamos el fondo, le ponemos color y continúa la barra. Y, por supuesto, también hacemos lo mismo con las otras dos líneas. |
| Ahora puedes utilizar muchas funciones gráficas diferentes. Y aquí está la sección de funciones gráficas de la referencia de sintaxis JSL y puedes construir lo que quieras. Así que hazlo. |
| A continuación, hablaré sobre el uso de mapas personalizados. |
| Disculpe. |
| Y para usar mapas personalizados, básicamente proporcionas dos tablas. La primera tabla es una definición de todas las formas que desea utilizar. Y el segundo nombra las formas en la tabla. |
| Y para esta columna de nombre, básicamente lo que necesita agregar es una propiedad de columna de función de mapa, y debe ser del tipo definición de nombre de forma. Te lo mostraré en un minuto. |
| Entonces, para hacer un ejemplo realmente simple, por supuesto, lo que necesitamos es Big Class. Y voy a tener uno realmente simple. |
| mapa para ello también que solo tiene dos rectángulos. Déjame abrir esos archivos. |
| Entonces es un mapa muy pequeño, como dije. Y sólo para mostrarles estas coordenadas, tengo un poco |
| script aquí que básicamente muestra los puntos. |
| Si resalto estos cuatro primeros, ese es el rectángulo superior y los cuatro siguientes son el rectángulo inferior. |
| el de arriba es el peso, el de abajo es la altura. Y si nos fijamos en la propiedad de la columna, |
| es la función del mapa, la definición del nombre de la forma. |
| Entonces, una vez que tengamos este mapa listo, podemos abrir Big Class. |
| No podemos reutilizarlo directamente. Lo primero que debemos hacer es tomar las columnas de altura y peso y apilarlas. Entonces vamos a las mesas. Déjame apilarlos. |
| Y ahora tengo una tabla que tiene estas columnas apiladas. |
| Verá que la etiqueta tiene altura y peso alternados, y lo que debemos hacer para conectarlo al archivo de mapa es agregar otra propiedad de columna. |
| Este está hasta aquí abajo, rol de mapa nuevamente. Pero no diremos definición de nombre con forma, diremos uso de nombre con forma y debemos elegir el |
| archivo de mapa, el nombre del archivo de mapa. |
| Y también configure la columna para nombrar. |
| Y luego terminamos. Ahora que tenemos eso, puedo usarlo en un gráfico. |
| El gráfico que buscamos básicamente usa la columna de etiqueta para la forma del mapa, que configura las formas superior e inferior, y luego podemos arrastrar esa columna de datos que tiene todos los datos. |
| en el papel del color. Y ahí lo tenemos, este es un resumen de todos los estudiantes de Big Class, pero realmente queremos lograrlo. |
| uno por estudiante. Si lo arrastro a la función de ajuste, queda un poco apretado, pero lo extenderé haciendo niveles por fila y lo estableceré en 10. |
| Aquí vamos. Y eso es más o menos lo que buscaba. Y este puede ser un gráfico útil. |
| por sí mismo. |
| Así que hagamos algo un poco más complicado ahora. |
| Bueno, en realidad, si estás haciendo algo más complicado, es posible que desees utilizar el complemento de creación de mapas personalizado. |
| Y este es un gran complemento. Le permite arrastrar una imagen y luego trazarla. |
| Y cuando haya terminado de trazar todas las formas, haga clic en Finalizar con datos aleatorios y se generará |
| los dos archivos de formas que necesita, así como un conjunto de datos aleatorios que le permite probar su mapa personalizado. Y aquí hay uno en el que acabo de hacer cuatro variables y una en el centro. Básicamente es una versión cuadrada de lo que vieron en la diapositiva original que tenía. |
| Ahora bien, eso no era exactamente lo que estábamos buscando. Queríamos algo redondo y creo que fue el Dr. Mayfield quien lo llamó pastel complejo. |
| No sé si es un término oficial, pero decidí que iba a construir estas cosas con script. |
| Entonces, lo que quería hacer es crear archivos de formas y asegurarme de obtener lo que recetó el médico. Y eran cuatro formas con algo en el centro. |
| Y luego pensé: Bueno, soy programador. Me gusta hacer un poco más y ser un poco más flexible. |
| Entonces pensé que tal vez algunas personas querrían hacer lo mismo, pero solo tener dos variables más una variable promedio o central o más. |
| Y pensé que tal vez sería bueno poder hacer también diferentes formas, como un diamante o un cuadrado. Entonces no soy un genio. Tuve suerte. Y Xan Gregg respondió a una publicación sobre cómo puedo hacer este diagrama polar en JMP. |
| Y aquí viene. |
| Ahí vamos y |
| Estaban buscando una forma como esta, que se parecía muchísimo a lo que 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 el nombre de los archivos de la manera particular que quería hacer. |
| Pero no fue demasiado difícil. Y eso es lo que hace mi guión. Y cuando ejecutas un pastel complejo, ahí está la receta para este pastel, abres el fabricante de pasteles complejos. Luego agregas algunos ingredientes. En primer lugar, debes decir el número 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 querrás proporcionar también el radio interior, ya sea que quieras más relleno o menos, y el radio exterior. |
| Por supuesto, el siguiente paso es ejecutar el script y generará |
| estos |
| archivos de formas para usted y también haga una prueba de ejemplo, al igual que el creador de pasteles personalizado o el complemento de mapa personalizado. Así que aquí hay un ejemplo de pastel complejo para cinco y formas que son cinco. |
| y la suavidad para establecer en siete. Podrías usar cinco o seis y eso probablemente estaría bien si van a ser |
| dibujado muy pequeño. El tamaño realmente no importa. Lo que importa más es el radio interior relativo y el radio exterior. Y esto es aproximadamente lo que el Dr. Mayfield estaba usando, así que me quedé con cuatro para el radio interior y nueve para el radio exterior. |
| Entonces, veamos cómo podemos usar estas cosas. Tal como hicimos con la demostración de Big Class, vamos a tener que... vamos a tener que apilar las columnas. Pero una cosa diferente es que realmente no tengo las variables de fuerza y salud en mi archivo de forma. en realidad son |
| en el archivo de forma, se denominan cuña 1, 2 3 y |
| centro. |
| Entonces voy a necesitar construir un |
| archivo que |
| vincular los dos juntos. |
| Primero, tengo este ejemplo de escuela pequeña apilada, |
| lo cual hice apilando esas columnas de salud, fortalezas y velocidad. |
| Y aquí está el archivo de forma que... el nombre del archivo de forma que voy a usar. |
| Observe que tiene una propiedad de columna. |
| del papel del mapa, |
| Derecha, 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 las que dar 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 que los nombres de las formas. |
| Ahora, es importante que el nombre de la forma aquí |
| tiene una propiedad que es la función del mapa, pero esta es el uso del nombre de la forma. |
| Y esta columna de etiqueta de datos tendrá un ID de enlace para que pueda volver a unirse virtualmente a mi tabla apilada. |
| Ahora que tengo todas estas mesas configuradas, |
| Lo siguiente que debe hacer 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 que debo hacer a continuación es agregar los datos a la columna de color. |
| Y luego agregue el nombre para envolver. Y ahí están todos mis peces con |
| un gráfico para cada uno. Para intentar obtener el gradiente correcto, voy al gradiente aquí y ese 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 |
| mapa útil en sí mismo, porque puedes mirar cada pez y ver cómo les está yendo. Pero quiero hacer un poco más con eso, por supuesto. |
| Lo que quiero hacer es poder poner esas imágenes en una información sobre herramientas. |
| Para hacer eso, vamos a convertirlo en una tabla de datos. |
| Trae de vuelta el archivo que tenía y ese gráfico. |
| Entonces, lo que hará aquí es que debajo del triángulo rojo hay una tabla de creación de datos. Y lo que esto hará producirá una nueva tabla de datos. |
| con todas estas imágenes, y eso es realmente útil, especialmente si lo vinculamos nuevamente. Y cambiaría esto y lo configuraría como ID de enlace para poder señalarlo desde mi pequeño y sencillo archivo escolar para poder tener cada marcador y encontrar el gráfico para cada carácter. |
| Muy bien, tengo esto almacenado en otro archivo y voy a abrir ese. Lo llamé imágenes de salud. |
| Entonces ya no necesitamos esto. |
| Y ya no necesitamos el archivo apilado. |
| Pero lo que sí necesitamos es el ejemplo de escuela pequeña con el que comencé. |
| Ahora, lo primero que debe hacer para que aparezcan en el |
| gráfico es establecer esa columna de imagen, esa columna virtual, |
| como está etiquetado. |
| También puedes hacer esto en un gráfico simple. |
| Así que ya tenemos un ejemplo... bueno, voy a abrir esto de nuevo. ¿Por qué no? Mi guión 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... los tres |
| piezas de información para este gráfico y puedes hacerlo y fijar cualquier número de estos personajes. |
| Esa es una forma en que puedes usar estos gráficos. |
| Otra forma es utilizar el uso como marcador. |
| Y los gráficos que obtendrás flotarán sobre los puntos y se usarán en lugar de las formas de diamantes que tenía antes. |
| Traeré de vuelta esas imágenes de salud, escuela pequeña e incluso traeré de vuelta ese gráfico. |
| Ahora mismo tenemos esos diamantes. Para convertirlos en estas formas de aquí, |
| tuvimos que agregar otro |
| insignia a esta columna de unión virtual. Se está volviendo muy popular, así que úsalo como marcador. Y entonces aparece una nueva insignia. Y detrás de mí, |
| Verás que estas imágenes fueron puestas en escena. Un último detalle es que no me gusta mucho este blanco alrededor de la imagen. Y eso en realidad está integrado en la imagen del gráfico. |
| Y una forma en que puedo encargarme de eso es que tiene un script que encontrará esa área blanca y configurará el canal alfa para que las haga transparentes. Ahora tenemos gráficos con una bonita |
| forma redonda, no el fondo cuadrado. Otra cosa que quizás quieras hacer es aumentar el tamaño del marcador. |
| Y podemos llegar hasta 11. |
| ¿Cómo se ve eso? Eso se parece mucho a lo que tenía; 10 probablemente hubieran sido mejores. Pero me gusta ir al 11. Bien, entonces eso es |
| utilizar desde el marcador. Queremos hacer un gráfico un poco más complicado. Y esto es lo que buscaba el Dr. Anderson Mayfield: un mapa de calor detrás de los marcadores. Y eso es bastante complicado, pero JMP puede manejarlo. En realidad, eso es un contorno. |
| Una cosa que tengo aquí es otra versión de escuela pequeña. Pero esta vez tengo la temperatura del océano. |
| abajo en el fondo |
| y están ocultos para que no aparezcan como puntos reales. |
| Así que ya he creado imágenes para este. |
| En realidad, las mismas imágenes que construí antes. |
| Y empezaré con |
| El final aquí para que podamos ver lo que estoy buscando. Básicamente quiero tener estos gráficos. |
| flotando sobre el contorno y un par de leyendas aquí que muestran cómo son las cosas. |
| Eso no debería ser demasiado difícil. Comenzaré parte del camino con un mapa ya colocado y con latitudes largas en x e y. |
| Entonces, lo primero que quiero hacer es agregar un contorno. |
| Y necesitamos darle un poco de color, así que estoy arrastrando el rol temporal sobre el rol de color y voy a ajustar el número de niveles en este contorno. |
| Cambia un poco el alfa y agrega un poco de suavidad. |
| Lo siguiente que quiero hacer es hacerlo un poco transparente. |
| Pongámosle un .6 a eso. |
| Es más o menos lo mismo que tenía antes. Y ahora, para agregar los marcadores, hay dos formas de hacerlo. Puede hacer clic con la tecla Mayús en los puntos o simplemente arrastrarlos. Para arrastrarlo, |
| luego puedes configurar el tamaño del marcador nuevamente, |
| haciendo eso por |
| Voy a aquí y hago otro y usemos 10 esta vez. Creo que 11 era demasiado grande. Muy bien, eso se ve bien. Ya casi está ahí. Queremos trabajar en esta leyenda. ¿Cómo conseguimos estos colores allí? Bueno, ya tenemos el rol sanitario. |
| Y eso lo puedes arrastrar aquí hasta la esquina, solo agrega un segundo rol de color. Inicialmente estropea tu gráfico. |
| Podemos encargarnos de eso. El problema es que el contorno realmente no necesita utilizar el papel de salud. Entonces, si lo desactivamos, volveremos a lo que queremos. |
| Entonces, lo siguiente que debes hacer es agregar el color a la leyenda real aquí. Y podemos personalizarlo nuevamente como lo hicimos antes. |
| Esta vez vamos a hacer un poquito más. Quiero tener cuatro etiquetas. |
| Quiero que empiece a las cinco y suba hasta |
| 20. |
| Oh, también quería invertir los colores. |
| Ahí lo tenemos, se parece mucho a eso, casi terminado. Sólo quiero embellecerlo un poco más. Hay un par de cosas en la leyenda que me gustaría arreglar. |
| Así que vaya a la configuración de la leyenda y elimine estas cosas que no parecen agregar demasiado y mueva la leyenda de salud a la parte superior. |
| Ahí lo tenemos. Así que creo que estoy coincidiendo con lo que buscaba, lo mejor que puedo. |
| Entonces puedo deshacerme de ese. Ya no creo que todos necesiten esto. |
| Pero quiero agregar un poquito más. |
| ¿Qué tal si agregamos esta leyenda? Porque en realidad no era una 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. Pasa del nombre de la columna a la forma. |
| Y voy a abrir eso por un segundo. |
| Como pueden ver aquí, etiqueté todas las filas y también etiqueté la columna de etiqueta de datos. Eso significa que cuando creas un gráfico, |
| todo estará etiquetado. Entonces este es realmente simple. Simplemente toma el nombre de la forma y arrástralo a la función del mapa y realmente terminamos con ese gráfico. |
| Entonces, si quiero incluir eso en mi escena, la mejor manera de hacerlo es simplemente seleccionarlo, el signo más y luego copiarlo. |
| Luego abre alguna aplicación de edición de imágenes y la guarda en el disco. Y por supuesto, ya lo he hecho. Así que voy a |
| muestra una vez que tengas eso, y necesito recuperar mi gráfico nuevamente, |
| Vaya, puedo arrastrar esto. |
| Y ahí está. Ah, no está ahí. Bueno, entonces hay una manera de encontrarlo. Vaya a personalizar, lo colocó en el fondo porque normalmente cuando arrastra una imagen, está arrastrando una imagen de fondo. |
| Así que todo lo que tenemos que hacer ahora... quitemos esto del camino para que puedan ver lo que está sucediendo... es pasar al frente. Aquí viene |
| y ahí vamos. Está al frente. Y me gustaría agregar un poco de transparencia a esto porque es demasiado brillante para mi gusto. |
| Entonces pongamos .8. |
| Y ahora sólo tenemos que arrastrarlo a la esquina y ya casi terminamos con eso. |
| Bien, había mucho e involucraba muchos archivos. Así que resumamos todos los archivos que se utilizaron. Utilicé mi complejo creador de pasteles para generar los dos archivos de mapas que se necesitan, archivos de formas. 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 la función del mapa. Utilicé una referencia de enlace para hacer una unión virtual de regreso a la escuela pequeña apilada. |
| Luego hice un gráfico que quería convertir en una tabla de datos y guardarlo en mi archivo de imágenes de salud.jmp. |
| Por supuesto, eso tuvo que unirse virtualmente a la pequeña escuela original para poder hacer el gráfico con eso. |
| Y luego hice lo mismo con las temperaturas del océano en escuelas pequeñas, mi enlace hace referencia a imágenes de salud. |
| Yo solo... tomé mi columna para darle forma al archivo y dibujé la leyenda para el gráfico que intenté hacer con las temperaturas del océano y usé... simplemente lo uso arrastrándolo hacia adentro. |
| Eso es todo por las demostraciones 2D que quería hacer. Tomemos un pequeño respiro aquí y ahora nos adentramos en el mundo del 3D, e incluso de la web. |
| solicitud. |
| Bueno. |
| Esta es mi aplicación web de diagrama de dispersión 3D. |
| Y lo que les voy a mostrar es cómo ingresé datos de JMP. |
| Mi aplicación se basó en el diagrama de dispersión 3D de JMP. Esto es sólo 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, comenzando con la capacidad de seleccionar diferentes conjuntos de datos. Aquí está el conjunto de datos de diamantes. |
| Y por supuesto este dibujo apunta. Esa es toda la idea. Y están dibujados con esta forma de bolita, que explicaré cómo se hace en un minuto. |
| Pero las otras cosas que puedes hacer es rotarlo, al igual que en JMP, puedes hacer zoom, moverlo hacia adelante y hacia atrás. |
| Y luego también tiene etiquetas flotantes. Puedes ver que en la esquina inferior derecha dibujo ejes y una cuadrícula y agrego un poco de personalización. No demasiado. |
| Puedes cambiar el fondo, establecer el color de las paredes. A ver si podemos darle un poco de color azul. |
| Sí, tal vez eso no sea de tu agrado. Pero esto es sólo una demostración. Y luego puedes cambiar el tamaño de los marcadores. |
| Eso está en la web. |
| Bien, cuando inicié esta aplicación, lo primero que quería hacer es: ¿podría funcionar en la web? ¿Funcionaría bien en mi iPhone o mi iPad? |
| Porque esas máquinas no son tan poderosas como mi escritorio. Así que creé tres conjuntos de datos aleatorios o 3D integrados de un número creciente de puntos. Fui y usé un... |
| 25.000 fue lo que pensé que valía la pena probar en dispositivos de menor potencia, pero en realidad puedes llegar mucho más alto con dispositivos de alta potencia. |
| Entonces pensé, bueno, debería intentar traer algunos datos reales y encontré el famoso conjunto de datos del iris, y estaba en un formato CSV, variable separada por comas. |
| Y lo traje. Pero tuve que escribir algo de código sólo para convertirlo a mis estructuras internas. |
| Y pensé, bueno, JMP tiene muchos conjuntos de datos. Prefiero traerlos. Entonces traje autos, diamantes y citometría. La única diferencia fue la citometría, realmente no tuvo una buena |
| categoría por usar color y de hecho tuvieron que cambiar mi aplicación para aceptar un gráfico que no tenía ningún color. |
| Entonces la aplicación es bastante simple. Sólo hay una... es una aplicación web de una página. Entonces hay un archivo HTML. Tengo un par de archivos JavaScript y uso algunas bibliotecas de terceros, una fuente y una textura, y la textura es la bola que se usa para las formas. |
| Entonces, la técnica que utilizo en la industria de los juegos son las partículas o sistemas de partículas. Se utilizan con mucha frecuencia para juegos de simulación y visualización 3D. Puedes crear algunos efectos interesantes como fuego, humo, fuegos artificiales y nubes. |
| Y había pasado algún tiempo trabajando en un motor de juego comercial en el pasado y mi responsabilidad era tomar el sistema de partículas y mejorarlo. |
| Entonces ya tenía algo de experiencia con esto. Um, eso fue en el mundo C++, no en JavaScript. Pero como trabajé en HTML5 interactivo y JMP durante bastante tiempo, pensé que era hora de ver si podía aprovechar |
| dos de mis pasiones, casarme con ellas y crear una versión web del uso de sistemas de partículas. Tuve suerte. Encontré esta biblioteca, Three.js. |
| Realiza dibujos 3D acelerados por hardware, tiene una documentación excelente y hay muchos ejemplos de código que incluyen sistemas de partículas, lo que facilitó bastante la creación de mi aplicación. |
| Y, de hecho, la parte difícil para mí fue descubrir cómo obtener datos desde JMP. |
| Pero tendré... compartiré el guión para eso. Lo único que hice fue asegurarme de facilitar el uso de estos objetos. |
| en mi solicitud. Entonces, una cosa que hice fue crear una matriz de objetos JavaScript y, para las columnas numéricas, agregar un mínimo y un máximo, para no tener que calcular eso en JavaScript. Y, por supuesto, JMP es realmente bueno calculando ese tipo de cosas. |
| Um, para la categoría, para la columna de color, lo que tenía que hacer es usar como un diccionario de categorías. Y básicamente, todo eso es, los nombres de las categorías en una lista y luego simplemente apuntan a esos valores mediante un índice de base cero. Así es como funciona esa estructura. |
| Pensé que sería bueno hacer una interfaz de usuario. Y en realidad eso fue algo fácil de hacer. Y te lo mostraré en un segundo. Pero básicamente todo lo que necesito hacer es limitarlo a columnas numéricas para x, y y z. |
| Y luego limítelo a una columna categórica para el rol del color. |
| Así que echemos un vistazo a ese código. |
| Muy bien, primero que nada doy un ejemplo de un conjunto de datos muy simple. |
| Y luego el diálogo fue realmente fácil de realizar. Utilizo el diálogo de columnas y especificé 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 era ordinal y nominal. |
| A continuación, tomo los datos de las columnas y construyo los objetos JavaScript que necesito. Aquí están las cadenas mínima y máxima. Y esto es simplemente construir una serie de estos objetos. |
| Y luego, si hay una columna de color, haré lo mismo. Es un poco más complicado porque necesito sacar esas cadenas de caracteres e introducirlas en el objeto JavaScript. |
| Y finalmente, todo lo que necesita hacer es guardar esto en un archivo de texto. |
| Así que intentémoslo. |
| Por supuesto, voy a usar Big Class, por lo que es un archivo pequeño y agradable. |
| Y |
| entonces ejecuto el script. |
| Y me preguntó: ¿Qué quiero para mi XYZ? Ya seleccioné la altura y el peso y la edad es una columna numérica, así que la usaré también y el sexo es una buena opción para el color. |
| Y luego terminamos. Y, de hecho, el resultado aquí me dice dónde está el archivo. |
| Resulta que tengo eso en la siguiente diapositiva. Así que vayamos a eso. |
| Así que apuesto a que siempre te preguntaste cómo se vería Big Class en JavaScript. Y esto es todo. Y así puedes ver los tres. |
| columnas numéricas con su mínimo y máximo, y luego la columna de color tiene este diccionario de F y M para las categorías, y el cero, significa mujer y el uno significa hombre. Bueno, ese es mi emocionante final para esta charla, espero que lo hayan disfrutado. |
| Así que gracias por mirar y si hay alguna pregunta, por favor hágala. |
