Visualización de datos para desarrolladores web

Bienvenidos a todos. Espero que todos estén bien. Mi nombre es Anjana Vakil. Soy una Defensora del Desarrollador en Observable, que es una empresa que crea un entorno de cuaderno JavaScript para hacer visualización de datos rápida, fácil y esperemos que sencilla en el navegador, lo cual haremos hoy. Vamos a trabajar en el navegador para hacer algunas visualizaciones de datos. Así que aprenderán mucho más sobre eso.

Normalmente estoy basada en San Francisco, California, en los Estados Unidos. Pero en este momento, estoy hablando desde la ciudad de Nueva York. Puedo decir algunas palabras más sobre mí. Ahora trabajo como defensora del desarrollador. Tengo experiencia en humanidades, no en ciencias de la computación. Estudié filosofía y lingüística, y la ciencia social de la lingüística. Y así tuve algo de experiencia con Python y hice un poco de análisis de datos y visualización de datos en eso antes de convertirme en una desarrolladora de JavaScript de pila completa hace unos años atrás. trabajando en Observable y volviendo a pensar en datos y visualización de datos. Pero definitivamente no soy una experta en visualización. Trabajo con muchos expertos en visualización, así que me dicen en qué me equivoco, lo cual es genial. Pero lo que quiero transmitir hoy es que no tienes que ser un experto en JavaScript, en ciencia de datos, en visualización de datos para crear visualizaciones significativas. Así que lo que vamos a hacer hoy es hablar un poco sobre qué es DataVis. Y voy a usar DataVis mucho, porque decir visualización lleva mucho tiempo. Y luego vamos a ser muy prácticos, y vamos a pasar la mayor parte del masterclass trabajando en la construcción de nuestras propias visualizaciones. Así que hablaremos más sobre cómo vamos a hacer eso en un momento.

Probablemente vamos a alternar entre hablar como grupo y trabajar por nuestra cuenta. Así que siéntanse libres de tomar descansos o apagar su video o hacer lo que necesiten hacer. Todos estamos juntos en este mundo virtual. Así que no se preocupen si necesitan salir, volver, apagar el video, lo que sea. Y creo que con eso, eso cubre prácticamente nuestras bases. Definitivamente tomaremos descansos según sea necesario. Pero por favor, si necesitan un descanso o si tienen alguna pregunta, no duden en decirlo.

Muy bien. Espero que todos puedan ver mi pantalla. Lo que voy a hacer es intentar dejarles el enlace a estas diapositivas en caso de que alguien tenga dificultades para encontrarlas o verlas. Así que... Disculpen. Un segundo. Solo me aseguro de tener el enlace correcto aquí. Sí, creo que sí. Dios mío, la vida virtual es difícil. ¿No? Creo que sí. Sin embargo, sería mucho más fácil si todos pudiéramos estar juntos en persona. Pero, por otro lado, no podríamos estar dispersos por todo el mundo en este momento si estuviéramos en una conferencia en persona. Bien, presentación virtual, aquí vamos. Este enlace, avísenme si no les funciona, pero debería ser accesible y tiene la presentación que vamos a ver. Y si puedo organizar mis ventanas, bien. Entonces, visualización de datos, ¿qué es y por qué nos importa como desarrolladores web? Y cómo podemos empezar a utilizar la visualización de datos para mejorar nuestro trabajo y crecer como desarrolladores. Eso es lo que vamos a explorar hoy. Bien. Entonces, ¿qué es la visualización de datos? Esa es una pregunta complicada con muchas respuestas posibles. Una respuesta posiblemente aburrida, pero muy correcta, diría que la visualización de datos es el proceso de traducir datos, ya sea algunos valores en una hoja de cálculo o en un objeto JSON o algo así, en una representación visual o gráfica de esos datos. Mecánicamente, eso es lo que estamos haciendo cuando visualizamos datos. Tomamos algunos números o cadenas o cualquier valor que tengamos y los convertimos en algo que podemos ver. Pero eso es una forma aburrida de describirlo. Porque, ¿qué es eso? ¿Por qué es importante? Bueno, tal vez sea importante para nosotros porque la visualización de datos es un tema grande y sofisticado que muchas personas buscan, personas con habilidades en ese campo, por lo que es una habilidad sofisticada que podemos aprender y agregar a nuestros currículums y portafolios y obtener nuevas oportunidades emocionantes, lo cual es totalmente cierto. Aunque tal vez no sea la motivación principal de por qué nosotros, como desarrolladores web, deberíamos estar interesados en la visualización de datos, aunque definitivamente es una gran habilidad para tener y algo que los empleadores valoran. Así que eso es un extra. Pero en realidad, la visualización de datos es un medio para un fin. El objetivo que tenemos cuando tenemos datos es encontrar significado en esos datos, encontrar ideas sobre el mundo o, en nuestro caso, el desarrollo web que estamos haciendo a través de esos datos. Y la visualización, cuando realmente podemos ver esos datos, puede ser una forma realmente excelente de comprender rápidamente el significado y los patrones en esos datos y lo que esos datos significan para nosotros en el mundo real. Ahí es donde realmente entramos en el objetivo principal. Como dijimos, la razón por la que intentamos hacer eso es porque si podemos tomar rápidamente una gran tabla o un archivo JSON o lo que sea y comprender lo que significa para nuestra vida diaria como desarrolladores, podemos hacer nuestro trabajo mejor. Podemos tomar mejores decisiones. Podemos ser más productivos. Podemos obtener ideas sobre las cosas que estamos construyendo, los usuarios para los que las estamos construyendo. Esa es realmente la motivación aquí. Esa es la idea de lo que estamos tratando de hacer. Estamos tratando de usar visualizaciones para descubrir rápidamente el significado, los patrones y las ideas de los datos. Bien, así que mirar datos es bastante fácil, como podemos y avísenme si esto es demasiado pequeño, pero podemos tomar algunos datos en una tabla y visualizarlos en el sentido de simplemente mostrarlos en un formato tabular y ver todos los valores. Pero, ¿qué tan fácil es encontrar un significado real en los datos que se muestran en una tabla como esta? Creo que es bastante difícil, pero si convertimos eso en una representación visual, donde aquí estamos viendo algunos tiempos de compilación para trabajos de prueba de integración, de los que hablaremos mucho más en nuestro próximo proyecto, podemos ver como, ooh, este trabajo de lint se está ejecutando muy rápidamente. Pero algunas de estas pruebas en Mac OS a veces tardan una eternidad y, ya saben, las pruebas de Ubuntu son un poco más rápidas. Yo uso Ubuntu, así que me gusta ver que Ubuntu funciona bien. Pero de todos modos, eso no viene al caso. El punto es que, creo, y no sé si estás de acuerdo, pero creo que es mucho más fácil... Entonces, esa es la idea a la que apuntamos con la visualización de datos. Y, por supuesto, en nuestro caso, como desarrolladores web, estaremos particularmente interesados en los datos relevantes para nuestro trabajo de construcción de sitios web. Bien. Ahora, ¿por qué, como desarrolladores web o aspirantes a desarrolladores web, deberíamos estar interesados en hacer visualización de datos? ¿O cómo puede ayudarnos directamente? Una cosa en la que puede ayudarnos es en el desarrollo de funciones. Mientras intentamos descubrir nuevas funciones para nuestros sitios web, para las interfaces de usuario que construimos, para los productos. Podemos analizar los datos de uso para ver con qué están luchando realmente las personas, o qué les falta, o qué tienen otros sitios que nosotros no tenemos. Como, ¿qué deberíamos construir? ¿Cuáles son algunos de los puntos problemáticos en el comportamiento de nuestros usuarios, en los flujos de trabajo de nuestros usuarios? Como, ¿cuáles son los diferentes casos de uso que tienen las personas que visitan nuestros sitios web? Y cómo podemos priorizar entre ellos para realmente priorizar nuestro valioso tiempo de desarrollo. Entonces, podemos hacer visualización de datos antes de construir algo para comprender qué deberíamos construir y cómo debemos priorizar nuestras decisiones al respecto. Luego, una vez que hemos construido una función, podemos analizar los datos posteriormente para ver cómo se está adoptando. ¿Realmente está sirviendo a las personas a las que esperábamos servir con ella? ¿Les gusta? ¿La están utilizando de la manera que esperábamos? ¿O la están utilizando de formas nuevas e interesantes? Y cómo podemos seguir mejorándola. ¿Cómo podemos seguir iterando en estas funciones que estamos construyendo? Porque como desarrollador web, a menudo pasamos mucho tiempo haciendo mejoras graduales e intentando brindar a las personas una mejor experiencia de usuario, en muchos casos. Ya sea en el front-end, en la interfaz de usuario, o en el back-end, en términos de cómo las personas están utilizando nuestras APIs o cómo pueden obtener información de nuestro sitio. Entonces, el desarrollo de funciones y analizar cómo las personas realmente utilizan las cosas que construimos es un gran campo donde la visualización puede ser útil. Vamos a ver algunos ejemplos de eso en nuestros proyectos de hoy. Otra cosa en la que realmente puede ayudarnos, y tal vez hayas visto esto en el mundo web, es comprender el rendimiento. Comprender cómo se mueven nuestros sitios y nuestros servicios. ¿Se mueven lo suficientemente rápido? ¿Hacen lo que se supone que deben hacer, cuando se supone que deben hacerlo, en un plazo razonable? Entonces, ¿qué tan rápido somos? ¿Qué tan confiables somos? ¿Dan errores la mayor parte del tiempo o le dan a las personas lo que quieren cuando lo quieren? ¿Dónde están los pequeños puntos problemáticos, tal vez en nuestro rendimiento? ¿Dónde están los cuellos de botella en los que podríamos enfocar de manera más eficiente nuestras energías para brindar a las personas una experiencia más eficiente? Y una vez que hayamos intentado analizar uno de esos cuellos de botella y realizar algunos cambios para mejorar el rendimiento de nuestro sitio, podemos analizar los datos posteriormente para ver qué tan bien funcionó esa inversión, qué tan bien funcionaron nuestros esfuerzos. Entonces, el rendimiento es definitivamente otra área importante donde, como desarrolladores web, podemos beneficiarnos mucho al analizar visualmente nuestros datos. Otra forma en que nos beneficia como desarrolladores web, o cualquier tipo de desarrolladores de software que podamos ser, es analizar los datos relacionados con el código que escribimos, las bases de código en las que trabajamos y cómo colaboramos en esas bases de código. Y esto es especialmente cierto para cosas como datos de código abierto, donde tenemos grandes comunidades de colaboradores, pero incluso si trabajamos en código cerrado internamente para una empresa o incluso en proyectos de hobby, podemos utilizar datos sobre el código y nuestros commits de Git y nuestros cambios en el código para comprender cosas sobre cómo está funcionando el proceso de desarrollo para nosotros. Por ejemplo, podemos visualizar cómo se organiza una base de código o cómo se ejecuta el flujo de desarrollo, como si mis compañeros de equipo pueden revisar mis cambios de manera oportuna, si las compilaciones que necesitamos hacer para que nuestro día a día como desarrolladores sea fluido están funcionando bien, qué tan productivo soy, qué tan productivo es mi equipo, qué tan productiva es mi empresa, qué tan productiva es mi comunidad colaboradora en términos de si nos lleva mucho tiempo revisar las solicitudes de extracción de los demás, si estamos enviando mucho código con muchos errores que luego tenemos que volver a ejecutar, volver a enviar para corregir las pruebas de integración y cosas así. Y si trabajamos en código abierto, especialmente, podemos comprender cosas como cuántos colaboradores tenemos, qué tan comprometidos estamos, cómo podemos ayudarlos a tener una mejor experiencia si somos mantenedores de código abierto o si estamos tratando de aprender cómo contribuir a un nuevo proyecto. Podemos comprender la comunidad a la que estamos tratando de unirnos. Estos son solo algunos de los campos donde, creo, la visualización de datos puede ser realmente valiosa para los desarrolladores web en particular. Pero me encantaría saber y si las personas quieren compartir cualquier pensamiento, ya sea desactivando el silencio o en el chat, si las personas han visto otros casos de uso realmente útiles para la visualización de datos en la vida diaria de un desarrollador web. Así que si hay otras cosas. Estos son solo algunos ejemplos, pero si hay otras cosas que has visto que te han ayudado realmente en este caso, nos encantaría saber de ellos si quieres dejar una nota en el chat o desactivar el silencio y decir hola. Bien, voy a darles un segundo para pensarlo y voy a tomar un sorbo de agua. Sí, los usamos mucho en la empresa de seguridad para hacer gráficos de ataques a los productos de las personas. Siempre hay un historial como hoy, te etiquetaron una vez, ayer tres veces y cosas así, y siempre tenemos gráficos disponibles y pueden filtrar por el tiempo que desean mostrar en la pantalla y cosas así.

¡Genial! No, ese es un gran ejemplo. Sí, poder mostrar la concentración de dónde se encuentran estos puntos calientes de cosas que funcionan o no funcionan o ataques que ocurren, eso es realmente interesante. Sí, la seguridad es otro gran caso, poder ver rápidamente dónde puede haber zonas de peligro o cosas así definitivamente puede ahorrar mucho dolor. Excelente, excelente punto.

¿Alguien más quiere compartir algo? Acabo de darme cuenta de que no puedo escuchar a nadie. ¿Me pueden escuchar? Sí, um, sí. De acuerdo. Entonces, Juan dice que utiliza la visualización de datos principalmente para productos finales, es decir, crear herramientas o aplicaciones donde podemos verificar los datos. Sí, y esa es la parte interesante de ser desarrolladores web y trabajar con la visualización de datos, podemos utilizar nuestras habilidades de desarrollo web junto con nuestras habilidades de visualización de datos para construir paneles realmente geniales, herramientas internas o incluso herramientas de cara al público para mostrar datos en la web, mostrar datos a través de páginas para crear paneles personalizados y cosas así. Así que definitivamente es un caso de uso excelente. Y sí, he estado hablando mucho sobre el proceso de desarrollo, pero creo que también es muy útil, como dices, para descubrir cómo construir los mejores productos para los usuarios. Entonces, en términos del desarrollo de funciones, realmente comprender a nuestros usuarios y lo que necesitan, cómo utilizan nuestros sitios y cuáles son los puntos problemáticos que pueden tener. Creo que esa es otra área realmente importante, pero esta lista no es exhaustiva. Estos son solo algunos casos de uso realmente sólidos de cómo la visualización de datos puede ayudarnos en nuestro trabajo. De acuerdo, genial. Si tienen más pensamientos para compartir, siéntanse libres de hacerlo. Mientras tanto, vamos a profundizar. Estamos aquí para tener una masterclass práctica. Entonces, la siguiente pregunta es, si ya estamos convencidos de la visualización de datos y queremos probarla, si es algo en lo que queremos adquirir más experiencia. Veamos cómo podemos hacerlo. Por supuesto, lo primero que vamos a necesitar es algunos datos para visualizar. Ahora, por lo general, si estamos hablando de datos relacionados con nuestros productos, nuestros sitios, nuestra seguridad o nuestras bases de código, vamos a tener nuestros propios datos. Pero a medida que aprendemos visualización de datos, es posible que no estemos utilizando datos de producción de nuestra empresa o algo así. Así que hay algunos conjuntos de datos de muestra realmente buenos que se pueden encontrar públicamente en la web para practicar habilidades de visualización de datos o aprender cómo trabajar con diferentes dominios de datos. O simplemente por diversión en proyectos personales para crear una visualización de datos realmente genial de, no sé, cualquier deporte que te guste o las estadísticas de tu equipo favorito o eventos actuales, como la pandemia de coronavirus que ha sido un tema importante en el último año o dos. Esos tipos de cosas se pueden encontrar muchos datos interesantes en la web. Entonces, en las diapositivas, en estos enlaces, hay algunos lugares donde puedes buscar algunos datos si necesitas algo para comenzar o alguna inspiración para construir una visualización de datos. Pero, por supuesto, también puedes utilizar datos de tu vida como desarrollador. Si tienes registros de datos de los servicios que utilizas o tal vez tienes datos de la API de GitHub u otras API de servicios de alojamiento que pueden brindarte información sobre lo que está sucediendo, vamos a ver un par de ejemplos del tipo de datos que podrías tener. Pero solo quería mencionar algunos conjuntos de datos públicos para que si realmente quieres algo con qué trabajar y comenzar un proyecto de fin de semana o lo que sea, aquí tienes algunos lugares que puedes consultar. Todos estos son enlaces activos en las diapositivas que pegué anteriormente.

Ahora, supongamos que tenemos algunos data, ya sea que sean datos de juguete con los que estamos jugando o datos reales que nuestro jefe nos ha asignado y ahora tenemos que descubrir qué hacer con ellos.

Suponiendo que tenemos algunos data, nuestra próxima tarea es manipularlos. Cuando hablamos de manipulación de datos, nos referimos a remodelar los datos. A menudo, los datos vienen con muchas cosas que no nos interesan y en un formato que no es muy conveniente para crear una visualización de datos, o dificulta ver esos patrones y obtener las ideas que buscamos. Por lo tanto, queremos comenzar manipulando esos datos en una forma que nos permita responder las preguntas que nos interesan. Y la gran noticia es que una vez que tenemos nuestros datos en JavaScript, generalmente como matrices de objetos o matrices de matrices, podemos usar las funciones incorporadas de JavaScript para remodelar esos datos.

Por ejemplo, me encanta esta gráfica que muestra cómo funcionan los métodos de matriz filter, map y reduce. Si al final del día quiero un sándwich, pero comienzo con un montón de verduras enteras, tengo trabajo que hacer para pasar de tener un montón de verduras y un pan a tener mi sándwich bien empaquetado que puedo comer fácilmente. Filter nos permite excluir elementos de los datos que no nos interesan. Por ejemplo, si no me gustan los pepinos, puedo filtrar todos los pepinos de los ingredientes de mi sándwich. Map nos permite transformar los datos de un formato a otro mediante una función que se aplica a cada elemento de los datos. Por lo tanto, si tengo un conjunto de datos con un pan, un pimiento, un tomate, una lechuga y uso la operación de map con una función que dice, `corta cada uno de ellos`. Entonces obtengo pan en rodajas, pimientos en rodajas, tomates en rodajas, etc. Y ahora puedo trabajar más fácilmente con eso porque lo que quiero son rodajas que puedo colocar fácilmente en un sándwich. Y luego, en la manipulación de datos, a menudo terminamos haciendo algún tipo de agregación o uniendo elementos dispares de los datos en un valor unificado. Por ejemplo, reduce es una operación que nos permite tomar estas diferentes rodajas de verduras que hemos obtenido de nuestra función de map y pasarlas a reduce con algo como una pila, una capa, una función de capa. Y eso va a combinar todos esos valores diferentes en un solo valor. En este caso, en el caso de esta gráfica muy tonta, un sándwich que luego puedo darle un buen mordisco jugoso. Pero estos son los tipos de operaciones que, si has estado trabajando en JavaScript, probablemente hayas tenido que hacer este tipo de manipulación en una matriz aquí y allá. Definitivamente vamos a usar ese tipo de operaciones hoy, especialmente filter y map, paso mucho tiempo escribiendo filtros y mapas. Y, por supuesto, hay herramientas o bibliotecas más sofisticadas para realizar operaciones más complejas en los datos. Hoy vamos a hacer una manipulación de datos bastante simple, pero cuanto más te adentras en la visualización de datos, más evidente se vuelve que una gran parte de la visualización de datos es hacer la manipulación de datos adecuada para obtener los datos en el formato correcto para hacer tu visualización. Otra cosa a tener en cuenta sobre la manipulación de datos es que los datos ordenados son realmente los más fáciles de trabajar. Entonces, ¿qué son los datos ordenados? Permíteme ver si puedo hacer esto un poco... Oops, un poco más grande. Spoilers. Vale, no sé si esto es demasiado pequeño para ver. Oh, vale. Aquí vamos. Bien. Espero que esto sea un poco legible, pero los datos ordenados son datos donde esencialmente tenemos una observación por cada fila en nuestro conjunto de datos y cada columna corresponde a una característica única de esos datos o una propiedad única de esos datos, y cada celda o cada valor en nuestra tabla aquí, si lo vemos como una vista tabular, pero podríamos imaginar esto como una matriz de matrices o una matriz de objetos, cada celda corresponde a un valor individual. Entonces, en el lado izquierdo aquí, tenemos algunos datos que no están ordenados, donde tenemos algunos recuentos de casos de diferentes países y cada fila tiene una columna aquí con el tipo que muestra, por ejemplo, esta fila tiene los casos en Afganistán, esta fila tiene la población en Afganistán para un determinado año, y así sucesivamente. Si queremos, eso es un poco complicado de trabajar porque esta columna de tipo nos proporciona información sobre cómo debemos interpretar la columna de recuento y eso se vuelve confuso. Es mucho más fácil trabajar si separamos todo para que tengamos columnas separadas para los casos y la población, y cada observación, cada combinación de año y país que hemos visto, tenga su propia fila. Por lo tanto, no vamos a hablar mucho sobre cómo transformar las cosas en datos ordenados. Vamos a trabajar principalmente con datos que ya están ordenados hoy, solo por cuestión de tiempo, porque solo tenemos unas pocas horas juntos, pero hay un enlace aquí en esta presentación que te lleva a un gran recurso sobre cómo trabajar con datos ordenados y por qué es beneficioso.

De acuerdo, déjenme hacer una pausa y tomar un sorbo de agua y ver si alguien tiene alguna pregunta. Dice que se siente como el comienzo del aprendizaje automático. Es una pendiente muy resbaladiza desde hacer una especie de visualización liviana de datos como la que haremos hoy hasta llegar a datos realmente grandes y tener que procesar realmente esos datos con modelos estadísticos muy sofisticados que en última instancia terminan en el ámbito del aprendizaje automático y la IA. Entonces sí, cuanto más grandes sean tus datos y más compleja sea la manipulación, eventualmente terminarás con cosas como el aprendizaje automático siendo relevante para tus intereses. Así que sí, podríamos decir que es una pendiente resbaladiza comenzar a hacer este tipo de análisis de datos y adentrarse en el aprendizaje automático. También es un gran camino, creo. Genial, de acuerdo. Bien, eso es todo, ahora hemos hablado de visualización. Hemos hablado de manipulación de datos. Una vez que hemos manipulado las cosas en un formato que se puede trabajar, entonces podemos comenzar a visualizarlo realmente. Y como dijimos antes, de manera aburrida podríamos hablar de la visualización de datos como la traducción o el mapeo de datos en lo visual. Eso significa que tenemos que tomar algunos valores abstractos como números de casos, lo que sea, y convertirlos en valores concretos que correspondan a píxeles en una pantalla. Tal vez sea el ancho en píxeles de una barra en un gráfico de barras o tal vez sea un color o un valor de opacidad. Así que a menudo hablamos en visualización de datos sobre escalas y una escala es algo que nos permite transformar un espacio en el mundo de los datos abstractos. Entonces los datos que tenemos en nuestra hoja de cálculo o archivo CSV o JSON, que a menudo se denomina dominio de una escala, y convertir eso en valores que existen en el ámbito visual. Nuevamente, tal vez sean píxeles de ancho aquí, o tal vez sean colores y eso es lo que a menudo se llama rango. Así que si piensas en la clase de matemáticas y las funciones que mapean de un dominio a un rango, las escalas son esencialmente funciones que toman nuestros valores de datos y los convierten en valores visuales. Y eso es con lo que vamos a trabajar mucho, básicamente mapear ciertas propiedades en nuestros datos a ciertos valores visuales de los que a menudo hablamos como canales de codificación de datos de una cierta propiedad en un cierto canal. Como la posición X y cuántos píxeles a lo largo va a estar en un eje X o el tamaño de un círculo o de una barra o algo así. Así que vamos a profundizar en eso en términos concretos en nuestro proyecto práctico de hoy, pero siento que esto es lo clave, lo clave de la visualización de datos es pasar de este espacio de datos a este espacio visual. Así que realmente me encanta esta gráfica que hizo mi colega Mike para esta transformación.

Muy bien, eso es lo que haremos hoy. Mapearemos valores de data que tal vez hayamos tenido que manipular un poco en el espacio visual y también, si tenemos tiempo, agregaremos un poco de interactividad para aprovechar al máximo la web y tener una experiencia interactiva al jugar con nuestros data. Más adelante profundizaremos en cómo se siente eso.

Pero antes de comenzar, quiero decir que si eres un desarrollador de JavaScript o tal vez eres nuevo en JavaScript, si eres un desarrollador de Python, definitivamente tienes muchas opciones también, JavaScript tiene muchas herramientas excelentes para la visualización de datos. Hay algunas bibliotecas realmente poderosas pero tal vez también un poco más complejas y de bajo nivel como D3. JIS es una muy popular que tal vez hayas escuchado antes. D3 es genial. Es realmente bueno para construir visualizaciones muy personalizadas y sorprendentes como la que acabamos de ver en la diapositiva anterior. Wow, muy elegante. Entonces, D3 es una biblioteca muy potente para JavaScript. También hay bibliotecas más ligeras que están más orientadas a crear visualizaciones rápidamente cuando solo estás explorando tus data. Y no necesariamente necesitas algo tan único como las visualizaciones que ves en el New York Times o en otras publicaciones que tienen visualizaciones muy personalizadas y sofisticadas. A veces solo quieres ver un gráfico de barras o a veces solo quieres ver un gráfico de dispersión de tus valores X e Y. Veremos algunos de esos más adelante. Entonces, Vega-Lite es otra gran biblioteca para eso. También hay algunas herramientas excelentes para manipulación de datos. Hay un par de bibliotecas enlazadas aquí, que puedes revisar más tarde, TidyJS. Hablamos de TidyData antes. TidyJS es una gran biblioteca que se basa en el lenguaje y entorno estadístico R, si has trabajado con R, es una herramienta útil para pasar de R a JavaScript. También hay otra gran biblioteca llamada Arquero, que fue desarrollada por el equipo de visualización de datos de la Universidad de Washington. Y hay muchas bibliotecas de gráficos diferentes disponibles. Así que hay algunos enlaces aquí y puedes buscar por tu cuenta y encontrar todo tipo de bibliotecas de gráficos diferentes.

Hoy. Lo que vamos a utilizar es una biblioteca llamada observable plot. Observable, la empresa fue fundada por Mike Bostock, no sé si has oído hablar de Mike Bostock, quien fue el creador de la biblioteca d3 que mencionamos antes y Mike ha estado construyendo bibliotecas y herramientas de visualización de datos durante más de 10 años y recientemente ha liderado el desarrollo de observable. Hemos creado una nueva herramienta de visualización llamada plot, que está diseñada para ser nuevamente, una herramienta de nivel más alto, más ligera y más rápida y fácil de usar para comenzar con la visualización de datos, que facilita mucho la exploración de datos y pasar rápidamente de cero a una visualización significativa. Así que eso es con lo que vamos a trabajar hoy. Vamos a asumir que no tienes ninguna familiaridad con observable plot porque es completamente nuevo. Así que nadie está familiarizado con él. Y también, como es nuevo, puede tener errores. Todavía está en una etapa temprana. Así que todos vamos a aprender juntos. También soy nuevo en el trabajo con observable plot. Así que solo compartiré algunas cosas que he aprendido sobre cómo hacer gráficos útiles y hay muchos más recursos de aprendizaje y documentación completa en el sitio de observable HQ, que es observablehq.com/observablehq/plot, donde encontrarás mucha más información. Así que si después del taller o durante los ejercicios quieres consultar más documentación, siéntete libre de explorar allí.

Hoy vamos a hacer nuestros ejercicios en observable. Es un entorno de JavaScript totalmente en el navegador. Vamos a ver algunos cuadernos y ver qué significa eso. Puedes registrarte en una cuenta gratuita de observable si quieres o tal vez ya tienes una que te permite tomar los cuadernos que vamos a trabajar y crear tu propia copia. Tu propia bifurcación para que puedas guardar tu trabajo fácilmente y volver a él más tarde. Sin embargo, no necesitas una cuenta de observable para hacer el trabajo que vamos a hacer hoy porque todo se ejecuta en vivo en tu navegador. Todo lo que necesitas para hacer los ejercicios es un navegador web abierto en una de estas páginas. No necesitas registrarte en una cuenta si no quieres, sin embargo, eso hará que sea un poco más complicado guardar tu trabajo porque tendrás que copiarlo y pegarlo en un archivo o descargar un archivo y luego editarlo localmente y volver a cargarlo, lo que implicará algunos pasos adicionales si no tienes una cuenta. Pero no te preocupes, absolutamente no hay problema. Y si no te importa guardar tu trabajo al final del día, entonces ni siquiera tienes que preocuparte por eso. Bien, entonces empecemos. Vamos a hacer algunos gráficos hoy. Esperemos que, si no he estado hablando durante demasiado tiempo, lo cual probablemente lo he hecho, vamos a intentar hacer algunos proyectos diferentes. Vamos a repasar algunas habilidades básicas de visualización de datos mientras hacemos estos proyectos prácticos. Lo primero que vamos a ver es cómo están nuestras pruebas de integración. ¿Nuestras pruebas de extremo a extremo están pasando? ¿Están pasando o no? ¿Se tardan mucho en ejecutarse? ¿Cómo están? Vamos a ver algunos datos de pruebas de integración. Esto es algo a lo que tal vez estés acostumbrado. Si trabajas con GitHub y cada vez que haces un push, se ejecutan pruebas en tu código y ves si pasaron o fallaron. Así que vamos a ver eso. Y eso nos enseñará sobre la escala. Cómo tomar características y usar canales y escalas para llevarlas del mundo de los datos al mundo visual. Luego, después de eso, vamos a intentar ver algunos datos de uso del navegador para ver cómo las personas utilizan diferentes dispositivos y tamaños de pantalla para ver un sitio web, qué nos puede decir eso, eso nos enseñará básicamente cómo hacer las preguntas que nos interesan sobre nuestros datos. ¿Necesitamos agregar los datos para obtener un solo valor? Perdón, ¿necesitamos dividirlos? Para poder ver los detalles mejor. Vamos a profundizar en eso. Y finalmente, si tenemos tiempo, esperamos ver algunos datos de respuesta de API para comprender más sobre qué tan rápido o qué tan rápido responden nuestros servidores a las solicitudes de las personas. Y eso nos enseñará cómo hacer gráficos interactivos donde podemos tener widgets de entrada y realmente dar a las personas la capacidad de jugar con los datos de manera práctica. Eso es lo que vamos a hacer y sí, tal vez algunos de ustedes noten que algunos de estos enlaces no funcionan. Permítanme verificar si tenemos estos enlaces abiertos. Dame un momento, vamos a comenzar con el, okay, sí. No, por eso no funciona. Okay, arreglado. Ahora vamos a comenzar con este primer proyecto, pruebas pasando. Así que ahora, si haces clic, deberías poder acceder a ese cuaderno. Veamos. Creo que es porque estoy en pantalla completa que no está bien, okay. Okay, ¿todavía pueden ver mi pantalla aquí? Avísenme si no pueden.

Y hagamos esto un poco más grande. Entonces, lo que estamos viendo ahora, lo que hemos estado viendo, es un cuaderno observable. Pero es un poco especial porque lo estoy usando para las diapositivas. Así que es un poco diferente a lo habitual. Lo que estamos viendo ahora es un cuaderno observable. Donde tenemos una mezcla de código JavaScript. Por ejemplo, este es un código JavaScript. Este es un código JavaScript. Este es un código JavaScript. Este es un código que utiliza plot. Y encima de cada fragmento de código, que llamamos celda aquí, encima del código fuente de una celda, veremos algún tipo de salida. Y luego eso se intercala con algo de texto y algunos otros pequeños widgets que son útiles para entender lo que está sucediendo aquí.

La forma en que funciona Observable es que todo se ejecuta en tu navegador. Puedes editar cualquier código haciendo clic en el margen izquierdo de una celda que abrirá el código fuente. En este caso, es markdown. Esta es una pequeña celda de markdown. Así que puedo editar eso. Y aunque yo sea la dueña de este cuaderno, tú puedes editar cualquier cosa en este cuaderno. No puedes romperlo porque todas esas ediciones serán locales para ti. Sin embargo, si tienes una cuenta de Observable, puedes hacer clic en este menú aquí arriba. Puedes hacer clic en la opción de bifurcación y hacer una copia nueva de este cuaderno, que luego será tuya. Y puedes editar y guardar tu trabajo después de la masterclass.

Ahora, no vamos a profundizar mucho en cómo funciona Observable. Esperemos que sea autoexplicativo la forma en que están estructurados estos ejercicios. Pero lo bueno de Observable es que es un entorno reactivo. Así que cuando actualizo algo en el cuaderno, todo lo demás también se actualizará. Por ejemplo, en la parte superior aquí, tengo algunos data. Tengo una matriz de datos de pruebas. Tiene 338 pequeños objetos JavaScript. Si, por ejemplo, lo cortara, oops, no, tengo que hacer un await aquí. Si dijera que lo cortara, porque tengo algo asíncrono, esto es solo para decir que ahora tengo 238 elementos en esta tabla de aquí abajo. Estos data se actualizarán a medida que haga cambios. Así que este es solo un ejemplo tonto. Ignora lo que estoy haciendo aquí. Vamos a volver a ponerlo. Oh, no. Voy a volver a ponerlo, pero como puedes ver, cuando meto la pata, todo lo demás en el cuaderno también cambia. Así que esto es algo un poco extraño de Observable. Si estás acostumbrado a trabajar en JavaScript puro o en Node.js, o algo así, notarás que Observable actualiza todo el cuaderno cada vez que cambias algo. Y eso va a funcionar a nuestro favor hoy. Así que los ejercicios aquí son bastante autoexplicativos, espero. Pero por supuesto, las preguntas siempre son bienvenidas. Pero déjame preparar el escenario para ti aquí.

En este proyecto, estamos viendo algunos data de GitHub Actions. Si no has utilizado GitHub Actions, hay algunos enlaces que puedes leer al respecto. Pero básicamente, lo que hace es que si tienes un repositorio de código en GitHub, puedes configurar este tipo de trabajos de integración continua, que son algún tipo de código que se ejecuta cada vez que, digamos, haces un nuevo conjunto de confirmaciones en una determinada rama o cada vez que fusionas una solicitud de extracción, cosas así. Entonces, lo que tenemos aquí es algún data sobre pruebas de integración. Estas son pruebas para asegurarse de que el código funcione correctamente en diferentes entornos. Y esto proviene del data público de GitHub de la biblioteca Felt JS, si alguien ha trabajado con eso. No importa lo que sea Felt. Es un marco de trabajo de front-end. Pero incluso si no has trabajado con él, eso no importa tanto ya que es un gran repositorio de código abierto y están ejecutando muchas pruebas cuando envían código a GitHub. Así que lo que estamos viendo son algunos data sobre diferentes ejecuciones. Por ejemplo, esto podría ser en una confirmación específica o en un envío específico al repositorio, los diferentes nombres de las pruebas, los diferentes estados de conclusión. Así que si tuvieron éxito, si se cancelaron o si fallaron, y luego el número de minutos que tardó el trabajo en ejecutarse. Entonces, lo que vamos a hacer, y hay una serie de tareas pendientes en este cuaderno, lo que vamos a hacer es recorrer una serie de ejercicios para modificar progresivamente una visualización de estos data. Así que vamos a empezar con esta cuadrícula bastante inútil de cuadrados negros aquí, de la que puedes leer todos los comentarios de código para tener una idea de un gráfico muy básico, un gráfico, un gráfico, como quieras llamarlo. Y lo que vamos a hacer es, en una serie de tareas pendientes, vas a recibir algunos ejercicios, algunas solicitudes para hacer cambios en esa visualización, y vamos a hacerla cada vez más emocionante. Así que en este punto creo que podemos hacer una pausa en nuestra configuración grupal y pasar un tiempo trabajando en esta hoja de trabajo. Si te quedas atascado, por supuesto, estoy aquí para hablar de ello. Al final, podemos hablar de las soluciones, pero también hay algunas pistas y algunos fragmentos de código. Si haces clic en estos botones de pista y solución, si te quedas atascado puedes copiar y pegar algún código útil allí. Hay algunas pautas y algunos tips sobre cómo hacer cada ejercicio. Así que espero que sea autoexplicativo y tenga sentido. Si no es así, por favor avísame. Y luego volveremos y trabajaremos o hablaremos sobre las soluciones juntos. Entonces. ¿Alguien tiene alguna pregunta en este punto? OK, tenemos una pregunta sobre, sí, plot versus Vega-Lite. ¿Por qué Observable creó una nueva gramática de visualización similar a Vega-Lite? Si no has trabajado con Vega-Lite, es posible que no reconozcas eso, pero plot está muy influenciado por otra biblioteca llamada Vega-Lite. ¿Había algo mal con ella?

Estamos trabajando en el primer cuaderno del proyecto, que voy a dejar aquí de nuevo. Espero que sea bastante autoexplicativo. Todo lo que estaba explicando era que en Observable, puedes registrarte para obtener una cuenta gratuita. Si quieres bifurcar el cuaderno, hacer tu propia copia y luego puedes guardar tu trabajo. De lo contrario, puedes editar el código directamente en tu navegador. No se guardará si actualizas la página o algo así. Pero puedes experimentar con todo. Todo se ejecuta en tu navegador. Así que no vas a arruinar nada ni nada por el estilo. No tengas miedo. Pero siéntete libre de registrarte para obtener una cuenta y bifurcarlo si quieres hacer tu propia copia. Espero que las descripciones e instrucciones sean autoexplicativas, pero si tienes alguna pregunta, solo avísame.

Pregunta. ¿Cómo se muestra esto? Supongo que plot crea el gráfico, pero ¿cómo lo mostramos? ¿Te refieres a cómo, cómo internamente plot convierte el código en las visualizaciones que estás viendo o no se muestra de la forma en que crees que debería mostrarse?

No, me refiero. Me refiero, cuando quieres mostrar algo en la pantalla, tienes que, por ejemplo, usar HTML, una tabla, una imagen, etc. Entonces, ¿cómo se hace eso... Cómo se hace internamente?

Sí, entiendo. Sí. Si inspeccionamos esto, podríamos tener una idea de lo que está sucediendo. Plot está creando SVG para crear estos gráficos. Entonces, lo que está haciendo es esencialmente... y puedes explorar en el HTML aquí. Si inspeccionas, puedes ver que está creando un SVG con... Oh, vaya, lo siento. Diferentes líneas para las marcas de ticks y elementos de texto para las etiquetas. Y luego, una vez que entramos en... En este caso, es un gráfico rectangular. Estas marcas de celda están creando rectángulos SVG. Entonces, lo que está haciendo es realizar un montón de trabajo en segundo plano para tomar tu especificación y luego convertirla en elementos SVG concretos. ¿Tiene sentido?

Eso tiene mucho sentido. Y ¿cómo mostramos este SVG? ¿Cómo obtenemos este elemento de vuelta? Por ejemplo, si fuera React, ¿llamamos a una función que genera un componente de este componente SVG o...

Sí, exactamente. De acuerdo, sí. Sí. Pero fuera de Observable, fuera del ejercicio que estamos haciendo aquí. Sí. Estoy tratando de ver cómo lo usaría en mi día a día. Sí, sí, por supuesto. No, definitivamente. Y esto es algo de lo que vamos a hablar, o podemos hablar rápidamente más tarde. Si tienes un buen día, dime. Pero si esencialmente en los enlaces... ¿Dónde se fue? De acuerdo. Si encontramos... Desplázate hacia abajo, ¿dónde está nuestro enlace de plot? Si abrimos la documentación de plot. Eso tiene un enlace al repositorio de GitHub, que mostrará... Entonces, es github.hq.plot, que tiene muchos más detalles sobre cómo usar plot como una especie de herramienta independiente. Cómo puedes instalarlo. Cómo puedes llamarlo en tu, ya sea en HTML básico o lo que sea, esencialmente cómo puedes incorporarlo a tu JavaScript. Y luego, esencialmente lo que vas a hacer es importarlo como un módulo ES. Y básicamente lo que vas a hacer es agregarlo en algún lugar de tu documento o crear un nodo HTML donde puedas insertar el gráfico de plot. ¿Tiene sentido? Entonces, dependiendo del framework que estés utilizando, eso cambiará cómo estás, cómo estás insertándolo. En este caso, simplemente lo estamos haciendo en un pequeño script y agregando un hijo. Um, sí. Definitivamente puedo ver, esto realmente responde mi pregunta. Cuando veo el plot y eso se envía al append child, lo que significa que esto crea el hijo con el HTML, tendría que verificar si ya hay un envoltorio de react que, significa que algunas personas inteligentes están trabajando en ello y lo están manteniendo, si no, supongo que no es tan complicado. Parece sencillo también. Entonces, um, no estoy seguro si hay un envoltorio específico de react, como dices, porque es algo tan ligero que debería poder funcionar de forma independiente. Sin embargo, hay una función útil en Observable donde si vas al menú en la parte superior derecha y vas a exportar aquí, hay una opción para incrustar celdas. Y cuando lo haces, si eliges una, um, si eliges una, lo siento, déjame salir de aquí. Si eliges una celda que tiene un nombre. Entonces, si le doy a esta, una celda, como un gráfico básico, si asigno esto a, um, un nombre y un observable, así es como lo hacemos. No necesitamos una, no necesitamos una barra o una, o una letra de const. Si.

Disculpa la interrupción. ¿Observable es un lenguaje? Observable es, uh, podrías decir, un entorno. Entonces, lo que estamos ejecutando en este entorno de cuaderno aquí es, uh, es un entorno basado en JavaScript, pero hay algunas diferencias entre observable y, um, lo siento, déjame salir de aquí y JavaScript básico. Y puedo enviarte un enlace sobre cómo funciona eso en un momento. algo está yendo un poco mal aquí, pero, uh, déjame intentar. Intentemos. De acuerdo. Déjame intentar este otro cuaderno aquí. No estoy seguro de qué está pasando con ese, pero si, por ejemplo, la forma en que he hecho esta incrustación aquí, permíteme usar este ejemplo. si, si, si tengo algún gráfico que quiero incrustar, en este caso, esto se llama gráfico. Voy a exportar. Hola? Está, está pensando en ello. Y creo que mi computadora está un poco molesta conmigo. De acuerdo. Exportar incrustar. Y selecciono las celdas que quiero. Hay una opción para obtener un fragmento de código que puedes insertar fácilmente en react. Entonces, si haces algún trabajo en observable y quieres llevarlo a react, puedes usar esa opción de exportación.

Sí, no hay razón por la cual alguien crearía un marco de trabajo si se genera literalmente. Sin embargo, ¿de dónde proviene la información en este fragmento? ¿De dónde proviene la información en este fragmento? ¿De dónde proviene la información? Entonces, data, porque la información es lo que creamos después de procesar los data. ¿Correcto? Sí. Entonces, integrando como, si tienes data que tienes en alguna parte de tu aplicación react y estás tratando de llevarlo a una visualización que has creado en Observable y ahora lo estás incrustando, ¿es esa la pregunta? ¿Cómo conectas los dos? Sí. Bueno, déjame dejarte algunos enlaces, pero básicamente, react es un entorno reactivo. Sí, React es un entorno reactivo, y tu modelo también es un entorno reactivo. Y se necesita un poco de ajuste para que sus reactividades funcionen bien juntas. Así que déjame, en un momento, tomar un cuaderno que explique cómo hacer eso. Déjame tomar, tomaré un par de enlaces para ti sobre cómo incrustar y sobre React. Y, uh, eso debería ayudar. Genial. Espero leerlos. ¿Con el nodo en el que están actualmente? Porque no quiero retroceder, y tampoco quiero ser como todos los demás. Pero sí, por favor comparte esos enlaces y haré más preguntas después. Claro, seguro, seguro. Sí, sí, sí. Bueno, esto es una especie de resumen de la incrustación. Este es sobre la incrustación en React. Gracias de nuevo. Espero que eso te ayude a empezar. Y luego, si tienes algún problema específico o preguntas, podemos seguir después fuera de línea, si eso suena bien. Eso es muy amable. Gracias de nuevo. ¿Cómo funcionan las sugerencias de herramientas? Esa es una gran pregunta. Ok, parece que tal vez necesiten un par de minutos más. Eso está totalmente bien. ¿Por qué no seguimos hasta la hora entonces? Y si las personas quieren, si terminan temprano y quieren tomar un pequeño descanso, pueden hacerlo totalmente. Ok, preguntas sobre las sugerencias de herramientas. Permítanme cerrar esto. Ok. Sí, hay algunas pistas. Creo que la pregunta era, ¿cómo se llena el contenido de la sugerencia de herramienta? Y sí, espero que esas pistas estén funcionando para nosotros. Si no es así, sugeriría, y podemos revisar la solución en un momento, pero sugeriría echar un vistazo a la solución y comparar para ver si hay alguna diferencia en cómo estás insertando, implementando esa propiedad de título, y asegurarte de que esté en ese objeto de opciones que pasamos como segundo argumento a la función cel. Entonces, si está ahí y devuelve una cadena y aún no funciona, entonces tal vez podamos revisar el código y debug. Desearía poder ir a tu computadora y echar un vistazo. Hay una forma de enviarme un mensaje directo en Slack, lo siento, en Zoom. O sí, así que vamos a repasar en un momento. Creo que todos van a tomar otros cinco minutos si eso aún suena bien para trabajar por su cuenta, y luego podemos repasar la solución juntos, si eso está bien, Pavel. Genial. Mientras tanto, déjame intentar encontrar alguna documentación que también podría ser útil, desde ese enlace de Observable Plot... La pregunta sobre las sugerencias de herramientas realmente me hizo pensar, ¿qué tan bien funciona Observable o la biblioteca Plot con la accesibilidad? Dado que la mayoría de las cosas se generan automáticamente. Esa es una gran pregunta, y me encanta que sea algo en lo que estemos pensando. No creo que pueda decir que cumple con las pautas de accesibilidad. Tendría que verificarlo con mi equipo. Pero en términos de cosas como los colores que estás usando, el contraste entre diferentes colores, no puedo decir que los valores predeterminados sean necesariamente siempre las mejores prácticas en términos de accesibilidad. Como vamos a ver, o tal vez has tenido un vistazo en el ejercicio intermedio aquí donde estamos cambiando los colores, tienes control sobre las escalas como la escala de color o los tamaños de fuente y cosas así, tienes control sobre eso. En cuanto a los roles ARIA, creo que han hecho esfuerzos para que esté bien. Pero no estoy seguro de poder hacer ninguna garantía absoluta al respecto. Esa es una gran pregunta y definitivamente algo en lo que me gustaría hablar con mi equipo. Acabo de verificar, por ejemplo, cualquier rectángulo no tiene elementos accesibles. Solo tienes un relleno, no tienes ninguna forma de hacerlo directamente. Hasta donde sé, puedes hacer que un SVG sea accesible con algunas etiquetas específicas de SVG. Y eso me lleva a la siguiente pregunta. ¿Observable o el plot en este caso, supongo que estamos hablando de plot, es de código abierto? ¿Podemos contribuir? Sí, y voy a abordar ambos puntos dejando este enlace. Plot es una biblioteca de código abierto en GitHub. Y esto es muy nuevo. Acaba de ser lanzado, no sé, quiero decir, tal vez hace unas seis semanas o algo así. Todavía hay mucho trabajo por hacer. Una de esas cosas, por ejemplo, es el rol ARIA. Las personas han creado problemas. Puedes buscar los problemas allí para ver otros problemas o informes de errores. Definitivamente sube o comenta para dar esa retroalimentación. Si sabes si te gustaría que eso suceda, eso nos ayudará a mostrar cuán importante es para la comunidad que trabajemos en estas cosas. Esa es una excelente manera de contribuir. Si es una carga, un pulgar arriba en el problema, eso sería genial. Por supuesto, si encuentras errores, ese tipo de cosas son totalmente posibles, así que puedes verificar los problemas allí para ver si alguien ya ha señalado un problema similar al que estás encontrando. Si no es así, siéntete libre de abrir un informe de error o una solicitud de función o lo que sea. Eso es bastante genial. Gracias por compartir. Gracias por mencionarlo. Es una pregunta muy importante y definitivamente algo en lo que espero que trabajemos pronto.

Es un equipo muy pequeño el que trabaja en esto. Es una batalla contra el hecho de que solo hay 24 horas en un día. Pero espero que podamos avanzar rápidamente en esto. Gracias por mencionarlo. ¿Cómo están todos? ¿Cómo nos sentimos? Desearía poder ver a todos, pero no puedo, pero espero que todos hayan tenido un poco más de tiempo para jugar con los ejercicios aquí, y experimentar con algunas tramas.

¿Por qué no repasamos para recapitular lo que hicimos en este ejercicio? Por favor, a medida que surjan preguntas, por favor, por favor, por favor, escríbanlas en el chat o desactiven el silencio y pregunten. Creo que ahora puedo escuchar a todos, así que podré escuchar eso. Comenzamos con algunos data que ya estaba preparado para nosotros, lo cual es agradable, y básicamente tenía una serie de trabajos, una serie de nombres de trabajos y luego una serie de ejecuciones de esos trabajos. Comenzamos con esta trama básica que no es muy útil, no nos brinda mucha información y luego la desglosamos.

Lo que vemos aquí es una forma de crear una trama. En el próximo ejercicio veremos una sintaxis ligeramente diferente que también podemos usar. Pero en esencia, como espero que hayamos descubierto a través de este ejercicio, Plot opera de manera muy declarativa, similar a Vega, Vega-Lite si lo has usado, donde simplemente decimos cómo queremos que se vea nuestro gráfico, y luego Plot se encarga de hacerlo realidad. Lo más importante es tener al menos una marca, así que tenemos este array de marcas donde también podemos crear diferentes tipos de marcas y superponerlas, y así sucesivamente, y puedes leer más en la documentación de Plot sobre los diferentes tipos de marcas. Pero lo que tenemos aquí es una marca de celda, que son estos pequeños rectángulos, donde obtenemos un rectángulo para cada elemento en los data, o para cada valor en los data, debería decir.

Aquí estamos pasando primero los data, así que ese es nuestro data de pruebas de trabajos. Luego pasamos un objeto de opciones a la marca que le dice qué canales queremos expresar qué propiedades de los data. Aquí estamos expresando el número de ejecución, que es básicamente como la acción de GitHub que se ejecutó en el eje x, por lo tanto, horizontalmente, y luego los nombres en el eje y. Tenemos algunas opciones de configuración que son básicamente solo para el formato y cosas así. Espero que hayas tenido la oportunidad de jugar con eso y ver cómo si reduces los márgenes, se cortan las etiquetas y cosas así. Si no, siéntete libre de jugar con eso después. Nada muy emocionante allí. Vamos a pasar rápidamente por eso. Vamos a pasar rápidamente por eso. Pero estos canales son realmente lo importante para trabajar con Plot.

Para cualquier marca que estemos tratando de hacer, tenemos una variedad de canales que podemos usar con eso. Para estas marcas de celda, tenemos los canales X e Y, pero también tenemos canales como el relleno, el color, el sombreado de la celda, y luego la opacidad de ese relleno o el trazo, así que la línea alrededor de él, la opacidad. Luego tenemos ese canal de título, que es un canal de texto especial que nos permite poner valores de texto en tooltips. Pasamos a modificar este gráfico para asignar más data, a más propiedades de los data a más de estos canales para desarrollar un gráfico más interesante. Comenzamos agregando un relleno o tal vez jugaste con algunas de las otras cosas que podrías hacer aquí, pero si agregamos un relleno de conclusión a las opciones de nuestra marca aquí, y si agrego una coma para que rompa el JavaScript, eso ahora va a expresar lo que sea que esté en la columna de conclusión de los data o esa propiedad de conclusión, ya que estos son pequeños objetos JSON, se va a expresar a través del canal de relleno, que utiliza el color para expresar diferentes valores. Y luego, en el próximo ejercicio, veremos cómo los canales utilizan escalas.

Entonces, en este caso, el relleno utiliza la escala de color para configurar cómo se asignan esos valores de data abstractos a esos valores visuales. Y aquí, si tomamos el código de la solución, solo voy a pegarlo aquí. Deberíamos poder ver que con esta escala de color, podemos establecer las propiedades para tomar el dominio de los tres valores diferentes que sabemos que tenemos en nuestros data, éxito, falla y cancelado. Y espero que puedas explorar eso mirando la tabla en la parte superior y viendo cuáles son los diferentes estados de conclusión que ves allí. Y esos van a ser nuestros valores de entrada. Entonces, volviendo a nuestra visualización de escala, ese es el dominio aquí. Entonces, estos son nuestros valores de data, los valores reales en nuestros data. En este caso, no son números, son valores categóricos. Entonces, ahí, es como, solo hay tantas opciones. Solo hay tantas categorías de finalización o estado de conclusión que podemos tener. Entonces, configuramos nuestro dominio con esos valores de data y luego establecemos un rango correspondiente para un valor de color semánticamente significativo para... Eso va a corresponder a cada uno de los valores en nuestro dominio. Entonces, esto va a ser como el borde inferior de nuestro... Esto va a ser el espacio visual al que estamos asignando en nuestra escala aquí. Entonces, configurar esa configuración de escala le dirá a Plot cómo puede asignar esas categorías a los diferentes colores. Y una vez que hagamos eso, veremos colores más significativos, y así sucesivamente. Luego usamos la opacidad para expresar la cantidad de minutos que le llevó a cada trabajo completarse. Entonces, esa es nuestra duración. Nuestra duración aquí se llama minutos y eso nos mostrará... Entonces, la escala de opacidad está convirtiendo una duración más larga en minutos en un rectángulo más oscuro, un valor de opacidad más alto entre cero y uno. Y, Zona? Sí. Sí, perdón por interrumpir. Solo quería preguntarte sobre el color. Supongo que esto puede no ser algo conocido, así que está bien. Entendería si ya estuviera allí. Pero, ¿por qué son dos matrices en lugar de una matriz de objetos que tienen dominio y rango? ¿Por qué la API es como dominio, matriz, y luego rango, matriz? Correcto. Porque hace que sea más difícil asignar, hace que sea más difícil editar, ¿verdad? Bueno, escucho totalmente ese comentario. Creo que en algunos casos eso podría ser una cuestión de intentar, esto va a funcionar. Entonces, estamos viendo esto para una variable categórica aquí, básicamente algo que solo tiene tres valores. Y en ese caso, entiendo perfectamente a qué te refieres. Como tal vez tendría más sentido decir que el éxito se asigna al verde, el fracaso se asigna al rojo. Pero imagina que también podemos hacer esto para un valor numérico donde tenemos algún número que no sabemos exactamente todos los números que tenemos en nuestro conjunto de data pero van a estar entre cero y 1000, digamos. Y en ese caso, es mucho más fácil especificar estos rangos como un tipo de el dominio y el rango como un valor de inicio y de parada o como un valor entre aquí y aquí tanto para el espacio de data como para el espacio visual en lugar de enumerar cada posible valor que podríamos tener y cómo se va a traducir a otro valor. Sí. Lo siento, lo siento, me perdí un poco en el hecho de que dijiste que puedes simplemente decir como valor mínimo para especificar un rango. ¿Puedes mostrarnos eso? Sí, ese será un ejemplo en nuestro próximo ejercicio. Entonces, si tal vez podemos volver a eso en un momento, vamos a ver, vas a tener la oportunidad de jugar con variables numéricas y el dominio y rango allí si eso tiene sentido. En este caso, es más bien un data categórico, por lo que no tenemos un ejemplo muy sólido en este conjunto de data para eso, pero sí, eso se aclarará cuando comencemos a ver como gráficos de dispersión, puntos en un eje X e Y. Esa es una buena pregunta.

De acuerdo, y algunas personas están teniendo problemas con los atajos de teclado. Lo siento por escuchar eso. Si alguno de ustedes tiene alguna pregunta sobre los atajos de teclado en Observable, hay un pequeño ícono de ayuda en el lado derecho de la pantalla que abre un panel lateral con más información sobre qué atajos de teclado presta atención Observable. Así que los entiendo, entiendo que están prestando atención. Me he encontrado con esto yo mismo. Hay casos en los que tal vez, especialmente si tienes ciertos atajos mapeados para ti, pueden entrar en conflicto, pero espero que al menos tener esta referencia allí ayude a entender qué está sucediendo. Así que lamento cualquier problema que esto esté causando.

De acuerdo, continuando aquí. Creo que, sí, hemos mapeado la opacidad, y también hemos agregado otro canal de trazo que es opcional, pero, por ejemplo, cuando los valores son muy cortos, se vuelve difícil ver de qué color son los cuadrados. Así que podemos agregar ese valor de trazo, ese canal de trazo para darles un pequeño borde para que podamos ver, oh, es, está bien, es gris. Y espero que eso, para empezar, estemos empezando a sentir como este músculo de, okay, elijo un canal y elijo los data que van en él, y luego puedo configurar cómo opera ese canal configurando la escala que utiliza. Así que espero que eso empiece a sentirse bien.

Y luego nuestra última tarea fue agregar consejos utilizando este canal de título. Así que sé que algunos tenían preguntas al respecto. Así que asegurémonos de entenderlo, profundicemos en ello. Si vamos al gráfico, y el ReadMe de GitHub, tiene muchos detalles sobre cómo funciona Plot. Así que si, hablando de Control F, solo voy a buscar `título` aquí. Bien. Los títulos son uno de estos canales que nos dan un consejo, que espera una especie de texto de cadena. Entonces, un problema que podríamos encontrar con los títulos es si, digamos que estamos devolviendo undefined, o una cadena vacía. Porque si vemos en la letra pequeña aquí, los títulos solo se agregarán si no están vacíos. Entonces, lo que queremos con este canal de título es pasarle una cadena. Entonces, una cosa que podríamos hacer, es agregar un canal de título muy simple, como tal vez solo quiero pasar los minutos al canal de título. Así que podría configurarlo agregando otro canal aquí, título y mapeando el valor de minutos en él, y ahora estoy obteniendo solo números cuando me coloco sobre una de estas celdas. Así que esa es una forma sencilla en la que podemos pasar un nombre de campo de cadena a este canal de título, o podemos ser un poco más sofisticados, y podemos escribir una función que combine algunos campos diferentes en una cadena. Entonces, esta es una forma de hacerlo, definitivamente no es la única forma, pero una forma en la que podemos hacerlo es usando una plantilla literal de JavaScript, así que estas comillas invertidas aquí, definen una especie de plantilla de cadena en la que luego podemos usar estas llaves con signo de dólar para insertar valores. Entonces, lo que estamos haciendo es crear una plantilla para una cadena y dentro de esta función para cada punto de data que obtenemos, esa cadena se construirá a partir del campo de conclusión de los puntos de data y luego el campo de minutos, que también vamos a usar este número para fijar para asegurarnos de que solo veamos dos dígitos. Como antes veíamos muchos dígitos y eso es un poco molesto. Así que vamos a truncarlo. Esta es solo una forma de hacerlo, ciertamente no es la única forma en que podrías hacer esto. También podrías concatenar cadenas con el operador más o hacer algunas cosas diferentes aquí. Pero si pasamos esa función y esa devuelve una cadena para cada punto de data, entonces deberíamos comenzar a ver estos consejos más sofisticados aparecer.

Tengo una pregunta. ¿Podemos usar funciones así en todos los demás parámetros? Sí. Perdón. ¿Podemos usar funciones en todos los demás campos, canales? Sí, definitivamente puedes. Por ejemplo, en el eje Y aquí, tengo algunas cadenas que muestran los nombres, ¿verdad? Lo que podría hacer es pasar una función que, para cada punto de data, tome el nombre y luego lo convierta a mayúsculas, por ejemplo. Entonces, eso sigue devolviendo una cadena. Y ahora estoy obteniendo estos valores transformados. Y puedes imaginar que con valores numéricos, puedes hacer operaciones, puedes multiplicarlo por un escalar, o puedes hacer... Veremos más ejemplos de eso en nuestros proyectos posteriores. Pero sí, puedes pasar funciones para manipular los data. Otra forma en que podrías hacer eso. Sin embargo, también es, antes de pasar el data a plot, podrías manipularlo y modificarlo, perdón. Perdón, en la matriz de data misma. Entonces también podría, por ejemplo, hacer cualquier transformación que desee hacer en mis data en la matriz que obtengo y tal vez hacer un map de la matriz o algo así para cambiar el valor. Así que esa es otra opción. Pero en muchos casos, es más fácil simplemente agregar una función a uno de estos canales para hacer una transformación simple. Buena pregunta.

De acuerdo, genial. Entonces, con suerte, al final de todo esto, tenemos un gráfico bastante informativo. Entonces, ¿qué podemos ver ahora que no podíamos ver cuando solo estábamos viendo un montón de cuadrados negros? Bueno, podemos ver qué trabajos están fallando o tal vez se cancelan mucho. Por ejemplo, esta prueba unitaria para Mac OS latest, parece que algo está pasando allí porque en muchas ejecuciones diferentes, este trabajo termina siendo cancelado después de varios minutos. Entonces, si estoy trabajando en mejorar la salud de mi proyecto aquí, es posible que desee investigar qué está sucediendo en estas pruebas de Mac OS. ¿Tengo algún tipo de error en Mac OS que debería investigar? ¿O tal vez es un problema con las propias pruebas? Algo mal allí que solo necesito solucionar para facilitar mi vida como desarrollador para no tener que esperar cinco minutos solo para cancelar mi prueba todo el tiempo. Y luego, de manera similar, podemos ver que algunas de estas están teniendo éxito, pero están tardando mucho tiempo. Como nuevamente, es Mac, por eso estoy en Linux, no es cierto. Pero hay algunas de estas pruebas de Mac que están, están pasando, pero están tardando mucho tiempo. Entonces, nuevamente, podría querer investigar tal vez hay algo ineficiente en mi código aquí o tal vez hay algo que está sucediendo nuevamente en ese código de prueba en sí que está haciendo más trabajo de lo que realmente debería hacer. Y está haciendo que mi sitio se ejecute lentamente o está haciendo que mis flujos de trabajo de desarrollador se ejecuten lentamente o ambos. Entonces, probablemente quiera dedicar algo de energía o valga la pena si estoy buscando formas de hacer que las cosas vayan más rápido enfocarme en esas pruebas. Y si estás... Si esta es un área interesante para ti en términos de trabajar con pruebas de integración, tenemos, si vas a cualquier página en Observable, verás que hay un menú desplegable. Hay una página llamada plantillas donde tenemos una serie de visualizaciones de data preconfiguradas para diferentes objetivos. Entonces, algunas de ellas están relacionadas con análisis empresariales y cosas así, pero en realidad tenemos un par relacionadas con pruebas de integración, como duración e inestabilidad. Entonces, puedes profundizar en muchos más detalles allí si vas a estas plantillas y revisas algunas de las visualizaciones allí. Y esto está destinado a ser una especie de visualización preconfigurada que puedes agregar a tus propias credenciales de GitHub y luego apuntar a tu propio repositorio o al repositorio en el que estés interesado. Así que hay esta, esta de duración, y luego otra para inestabilidad para ver qué pruebas están fallando. Entonces, si quieres profundizar en este tipo de data de prueba de integración más, puedes revisarlo después del masterclass. Muy bien, ¿alguien tiene alguna pregunta sobre este ejercicio antes de continuar? Oh, veo que me perdí algo en el chat aquí. Algunas preguntas sobre los títulos. Oh, okay, y nuevamente, ya que todo esto es de código abierto, si quieres ver cómo Plot hace algo, puedes profundizar en el código fuente en GitHub. El Readme tiene mucha documentación pero todo el código fuente también está ahí en GitHub. Entonces, si tienes curiosidad, ¿cómo procesan las marcas los diferentes consejos y cosas así? Puedes profundizar en algunos de estos diferentes archivos fuente y realmente ver qué está sucediendo bajo el capó con las escalas y todo también. Así que si estás interesado en lo que está sucediendo bajo el capó, siéntete libre de profundizar si tienes curiosidad sobre lo que está sucediendo bajo el capó.

Y eso nuevamente está en GitHub slash ObservableHQ slash Plot. De acuerdo, ¿cómo nos sentimos? Hicimos algunas visualizaciones de datos. Visualizamos algunas duraciones de prueba. Tuvimos una idea, lo más importante, tuvimos una idea de cómo funcionan estos canales y cómo toman propiedades de los datos y cómo podemos manipular sus escalas configurando los dominios y rangos de escala. Veo algunos pulgares arriba. Increíble, increíble. Genial. Felices, hurra. Muy bien. ¿Alguien... Hemos estado trabajando un poco aquí. Quiero darles tiempo a todos para tomar un descanso, pero estoy pensando que tal vez, como todos estamos trabajando a nuestro propio ritmo, lo que podría tener sentido es presentar el siguiente ejercicio y luego podemos tomar un período más largo donde todos puedan tomar un descanso si lo desean y luego volver a trabajar o trabajar si estás concentrado y luego tomar un descanso o lo que sea. ¿Les parece bien a todos? Veo un par de asentimientos y pulgares arriba. Excelente. Lo siento, todavía no puedo ver a todos al mismo tiempo. Entonces echemos un vistazo a nuestro próximo proyecto y asegurémonos de que todos puedan ver esto también, lo cual, de acuerdo. Veamos aquí. Lo siento. Creo que ahora todos deberían poder ver este cuaderno. Esto, ¿con qué tamaño de dispositivos están navegando los usuarios? Vamos a abrirlo. Cierro este para que mi computadora no se bloquee. Cruzando los dedos. De acuerdo, para nuestro próximo proyecto, vamos a profundizar en un tipo diferente de datos. Lo que tenemos aquí es un poco de datos orientados al comportamiento del usuario. Así que esto es inventado. Estos datos son solo datos de prueba. No son reales, pero es el tipo de datos que a menudo se obtiene de una plataforma de análisis, como Google Analytics. Y si lo usas, o varios otros tipos de servicios de alojamiento ofrecen datos similares, te dirán quién visita tu sitio y qué tipo de dispositivos, por ejemplo, están utilizando para acceder a tu página web. Entonces, lo que vemos aquí son algunos datos sobre diferentes tipos de dispositivos. Hay algunos dispositivos de escritorio, hay móviles, hay un par de tabletas. Y luego las diferentes resoluciones, las resoluciones de pantalla que la gente está usando cuando acceden al sitio. Y luego, para cada combinación de un tipo de dispositivo en particular y una resolución en particular, tenemos el recuento de usuarios que hemos visto con eso y el número total de sesiones que esos usuarios han estado navegando en el sitio con ese dispositivo o esa resolución de pantalla en ese dispositivo. Entonces puedes echar un vistazo a estos objetos en la tabla aquí. Puedes ver el primero para ver qué tipo de datos son. Entonces, todos estos parecen ser cadenas. Tenemos cadenas para la resolución con esta pequeña X en el medio. Tenemos cadenas para los números de o lo que deberían ser tal vez números de usuarios y sesiones. Entonces, para este, tenemos un poco de trabajo por hacer. Este es el tipo de datos que tal vez se obtiene como un CSV o alguien me lo dio de mi equipo de análisis en una hoja de cálculo o algo así. Lo descargué como un CSV. Y ahora lo hemos analizado. Estamos usando estos archivos adjuntos de archivo observable para analizar estos archivos CSV y obtener pequeños objetos JSON. Ahora lo tenemos en el mundo de JavaScript. Ahora podemos usar JavaScript para hacer un poco de manipulación de datos para obtener los datos en el formato correcto y con la información correcta que necesitamos. Entonces, esa es nuestra primera tarea, hacer un poco de manipulación de datos simple. Y no olvides que tienes algunos consejos y la solución aquí, si te quedas atascado. Hay algunas solicitudes aquí sobre lo que necesitamos, cómo queremos que se vean los datos. Y definitivamente hay algunos consejos ahí si te quedas atascado en eso. Una vez que hayamos hecho esa manipulación, luego podemos comenzar a visualizar. Y vamos a intentar hacer un nuevo tipo de gráfico aquí. Vamos a hacer, en este caso, vamos a hacer un gráfico de barras. Y luego más adelante vamos a hacer un gráfico de dispersión, del cual aún no tenemos datos, pero va a mapear las resoluciones de ancho y alto en los ejes X e Y. Y luego vamos a usar otros canales para profundizar en la verdadera esencia de estos datos. Esa es nuestra tarea aquí. Y lo que vamos a ver además de esa manipulación de datos es cómo a veces podemos agregar o agrupar los datos para obtener información sobre categorías específicas. Y más adelante, cómo podemos separar los datos cuando realmente queremos profundizar en más detalles y la agregación no es necesariamente lo que estamos buscando. Así que espero que los ejercicios, las tareas aquí sean autoexplicativos como antes. Si alguien tiene alguna pregunta en este momento, no dudes en preguntar o siéntete libre de unirte cuando quieras. Pero si suena bien, lo que podemos hacer tal vez es tomar el próximo tiempo, hasta la hora para trabajar en estos ejercicios y tomar un descanso durante el tiempo que desees, cómo quieres distribuir tu tiempo de descanso y tiempo de codificación. Eso depende de ti, todos somos adultos aquí. Entonces, hagamos eso si necesitas tomar un descanso ahora mismo como yo, puedes tomar un descanso ahora mismo y luego volver a ello y de lo contrario, siéntete libre de avanzar a tu propio ritmo. También estaba mirando el anterior y tengo una pregunta rápida. Al final, hay un apéndice que dice que las celdas a continuación alimentan el ejercicio anterior y dice importar estilos de QA desde, ¿qué es exactamente esto? Lo siento, siempre es difícil encontrar el botón de silencio. Eso es, por lo que ves esa declaración de importación está importando celdas de otro cuaderno observable. Y si haces clic en ese nombre del cuaderno allí después del final de la declaración de importación, te llevará al original, si quieres ver es otro cuaderno de trazado, pero básicamente ese QA y estilos, son algunas pequeñas funciones de utilidad que hacen que esos pequeños botones de consejos y soluciones y que facilitan copiar y pegar esos pequeños fragmentos de consejos y soluciones. Así que son solo algunas especies de ayudantes del profesor para hacer la hoja de trabajo. Solo la referencia de la hoja de trabajo, como dijiste, en el cuaderno, no se refiere al ejercicio. ¿Lo siento? No se refiere a los ejercicios... No, no. Sí, es solo, es un código un poco más estructural. Es un código más pequeño, sí, estructural, pero esencialmente muestra que todos los cuadernos observables se pueden importar entre sí.

Y así puedes escribir una función, digamos, o tener un valor o tener algunos datos en un cuaderno y luego usarlos en otro cuaderno para reutilizarlos fácilmente. Así que no tienes que estar redefiniendo las mismas cosas todo el tiempo.

Sí, y este cuaderno, ¿es como algo que ya existe? ¿Puedes usarlo o ustedes crearon todo el sistema de cuadernos?

Entonces, quiero decir, observable, eso es, esto es lo que hacemos, creamos ese tipo de plataforma, pero todo tipo de personas tenemos una gran comunidad de personas que están creando contenido. Y siempre y cuando el contenido esté publicado, es decir, sea público y visible para todos en Observable, cualquiera puede tomar código de él. Así que tenemos algunas herramientas útiles incorporadas en la plataforma. Como Plot en sí mismo, por ejemplo, no tienes que importarlo. Ya está listo para usar. Pero si ves, digamos, una utilidad realmente útil que alguien más escribió en Observable y quieres usarla en tus propios proyectos, puedes importarla desde su cuaderno. Así que está en toda la plataforma. Sí. Sí. Porque lo que pasa es que esto me recuerda y espero no estar excediéndome aquí, me recuerda a Jupyter y me preguntaba, básicamente eres como un Jupyter para JS porque Jupyter es para Python, creo.

Sí. Jupyter fue desarrollado originalmente para Python y en realidad te permite ejecutar muchos lenguajes diferentes porque Jupyter, la diferencia principal entre Jupyter y Observable no es exactamente el lenguaje porque Jupyter te permite ejecutar núcleos arbitrarios en diferentes lenguajes en el backend porque la forma en que funciona Jupyter es que tienes el frontend para el cuaderno, pero está hablando con un servidor en el backend, ya sea que se esté ejecutando localmente o que se esté alojando en algún lugar como Jupyter Hub. Así que puedes tener un backend en JavaScript o en Ruby o en diferentes lenguajes, pero en Observable, todo se ejecuta en el navegador. Así que no hay un servidor con el que esté hablando excepto los servidores de Observable donde se guarda tu trabajo en tu cuenta si estás usando una cuenta de Observable. Así que esa es una gran diferencia, todo es JavaScript, todo se ejecuta en tu navegador. La otra diferencia principal es que Jupyter se ejecuta de arriba a abajo. Jupyter se ejecuta como ejecutas una celda y luego ejecutas la siguiente celda y así sucesivamente. Observable se ejecuta de forma reactiva. Básicamente, está utilizando principios de programación reactiva funcional para que cuando actualizas algo, todo lo demás que depende de ese valor en tu cuaderno, cada otra celda que usa los datos que acabas de actualizar, o cada otra celda que usa la función que acabas de cambiar, se actualizará automáticamente para que no tengas que volver a ejecutar todo manualmente cada vez que cambies algo. Así que la idea es que sea mucho más rápido y más receptivo para prototipar e iterar y trabajar en cosas poco a poco para que se actualice rápidamente cada vez que hagas un pequeño cambio. Puedo compartir algo de documentación sobre cómo se ejecuta Observable que podría aclarar eso, pero también tenemos una serie que explica algunas de las diferencias entre Observable y Jupyter también. Así que puedo obtener algunos enlaces para todos ustedes.

Gracias. Gracias por la explicación detallada.

De nada. Sí. Y también hay otra pregunta que veo en el chat sobre cómo usar el tipo de registro para el canal R. Esa es una gran pregunta. Me alegra que te hayas encontrado con eso. Podemos hablar de eso a medida que revisamos las respuestas aquí, pero básicamente, el tipo de registro no funciona para el canal R porque el canal R va desde 0 porque está tratando de mostrar una codificación aérea precisa, por lo que básicamente es un área proporcional a donde están tus valores. Y el hecho de que el logaritmo de 0 no funcione realmente significa que no funciona bien tener una escala logarítmica en el canal R. Sin embargo, como vimos en la pregunta anterior, puedes escribir funciones arbitrarias en los datos que estás pasando al canal. Por lo tanto, podrías hacer una transformación logarítmica simplemente llamando a math.log en el valor que estás tratando de pasar al canal R para sortear ese problema de que la escala no pueda tomar el logaritmo de cero. Así que dejaré eso como un desafío para el lector. Y creo que veremos en parte del código de la solución una solución alternativa para por qué no podemos usar ese valor R en una escala de tipo logarítmico. Las palabras son difíciles, pero sí, es porque estamos tratando de preservar una codificación de área precisa que tiene un significado para el canal R.

Genial, como prometí aquí hay un poco de documentación sobre Jupyter y otra pequeña explicación sobre la reactividad en los cuadernos de Observable y cómo se ejecuta, cómo actualiza las cosas a medida que trabajas. Así que espero que eso sea útil para esa pregunta anterior.

De acuerdo, sí, adelante, lo siento.

Oh sí, no te preocupes. Sí, ¿cómo fue? ¿Cómo resultaron nuestros ejercicios de tamaño de dispositivo? Eso es difícil de decir. Espero que todos hayan podido completar al menos algunos de estos pendientes aquí. Nos estamos quedando un poco cortos de tiempo. Así que creo que en lugar de trabajar en esto paso a paso juntos, simplemente sugeriría que las soluciones están aquí. Si haces clic en estos botones de solución, puedes ver, y nuevamente, hay varias formas diferentes de hacer esto, pero puedes ver una posible forma de hacer esta manipulación, por ejemplo. Si alguien tiene alguna pregunta, especialmente sobre este paso de manipulación, definitivamente estoy aquí para responder cualquier pregunta, pero lo principal que estamos tratando de mostrar aquí es que en este paso de manipulación de datos, puedes usar cosas como la función o método map para crear los nuevos datos que necesitas, tal vez en este caso, como estamos dividiendo la cadena de resolución en dos valores separados que podemos poner en sus propiedades para que podamos acceder fácilmente a ellos en el gráfico más adelante. Y luego puedes hacer cosas como convertir los tipos de diferentes valores. Y aquí, estamos usando el operador de suma para convertir cadenas en números y así sucesivamente. Entonces, este es el tipo de cosas que terminas haciendo mucho en la visualización de datos antes de llegar a la parte de visualización, es decir, masajear tus datos para intentar obtener algo que sea fácil de alimentar en el tipo de visualización que estás tratando de crear.

De acuerdo, también vimos algunas transformaciones de grupo aquí y estamos comenzando a entender esta noción de que a veces no queremos ver los datos punto por punto. A veces queremos agregarlos y ver algunos totales para toda la categoría. Como en este caso, tenemos muchas resoluciones diferentes para escritorio. Tenemos muchas para móviles y algunas menos, pero aún muchas para tabletas. Queremos juntarlos todos y obtener una comprensión real de cuántos usuarios totales o sesiones hay. Si copiamos esta solución aquí en nuestro, solo voy a hacer el atajo aquí, lo que estamos haciendo es crear este gráfico de barras y aquí estamos usando una sintaxis ligeramente diferente para crear gráficos que en el caso anterior. Entonces, antes llamábamos a plot.plot y luego pasábamos una matriz de marcas. Esa es una forma de trabajar con plot. Otra forma es si sabes que solo tienes una marca, como en este caso, solo tenemos una marca de barra, puedes llamar directamente a la marca y luego llamar a plot como un método en ella y pasar cualquier tipo de márgenes u otras configuraciones de escala, etc., que desees. Estos son equivalentes. Estas son dos formas diferentes de escribir tus gráficos si estás usando el estilo de preferencia de plot observable. Así que puedes tener una idea de cuál te gusta más. En cualquier caso, una vez que llamamos a esa función bar y dentro de ese método, va a ser prácticamente lo mismo que antes, pasamos nuestros datos. Y luego aquí, en lugar de pasar directamente este objeto que configura qué canales queremos, vamos a envolverlo en esta llamada a la función group X de plot, que toma un primer objeto que dice, estos son los resultados que quiero de mi transformación de grupo. Quiero una suma de lo que está en el canal Y y una suma en el canal de título. Y luego lo segundo que pasamos va a ser lo que originalmente habríamos pasado a la barra. Así que esta es nuestra asignación de canales a nombres de campos.

Entonces, tengo un dispositivo en el eje X, un usuario en el eje Y, y cuando paso los campos de ese usuario a Y, la transformación de grupo va a tomar ese usuario y sumarlo para los diferentes dispositivos que estoy pasando en el canal X. Entonces, group X básicamente está diciendo, toma las categorías que has pasado en el canal X y crea grupos para los canales que estoy solicitando en mi, como, por favor, dame estos objetos de salida aquí. En este caso, será el canal Y y el título se convertirá del número individual de usuarios para esta resolución en particular a la suma de todos los usuarios para ese grupo en el canal X. Así que esto es un poco, al menos para mí, se siente un poco más complicado que hacer una simple asignación de canal a propiedad. ¿Alguien tiene alguna pregunta sobre esa transformación de grupo y cómo podemos usarla para hacer cosas como sumar? También hay otras operaciones, como promedio, media, mediana, etc., que puedes leer en la documentación de plot. Transformación, vale, estas son transformaciones de escala. Oh, lo siento, estoy buscando group. Puedes ver... Oh, lo pasé. Aquí hay algunas otras transformaciones de... Sí, hicimos la suma. Puedes hacer cosas como contar o proporciones, etc. Así que eso es todo en el grupo. Y hay otra similar llamada bin, que funciona bien para variables categóricas. Como tenemos el dispositivo, solo hay tres opciones, móvil, tableta y... Uh... Escritorio, correcto. En el que estoy ahora mismo. Y luego... Y así, group funciona bien para estas variables categóricas. Y luego bin es el equivalente si tienes una variable continua, dividiéndola en pequeñas categorías. Y Dagas tiene un comentario, tener esa configuración de color de salida en la sección de entrada es un poco confuso. Veamos. Oh, el relleno. Sí, básicamente el relleno no pasa por esta transformación de grupo, se mantiene igual que siempre habría sido. No estamos haciendo ninguna agregación en el campo de relleno. Así que podrías pensar en esto como, estos son los valores de entrada para los diferentes canales. Y luego estos son los valores de salida a los que quiero aplicar esta transformación de grupo. Por lo tanto, estos aún se pasan, este aún se pasa, si eso tiene sentido. Pero como siempre, lleva un poco de tiempo acostumbrarse. Así que sí, espero que esta haya sido una forma útil de familiarizarnos con estas transformaciones de grupo. ¿Alguien tiene alguna pregunta antes de continuar? De acuerdo, sigamos adelante.

De acuerdo. Bien. Entonces, comenzamos, miramos en la otra dirección. En lugar de tratar de agregar nuestros datos juntos, intentemos ver cada punto de datos pequeño que podamos ver. Y así creamos un gráfico de puntos. En este caso, lo llamamos esta sintaxis de trama de puntos de nuestros diferentes dispositivos. Nuevamente, solo por el bien del tiempo, porque nos acercamos al final de nuestra masterclass, lamentablemente. Permítanme copiar este código de ejemplo y pegarlo aquí o el código de solución. Y nuevamente, esta es solo una forma posible de hacer esto.

Veamos, ¿qué ha salido mal aquí? Me falta algún dato o algo así. Hmm. Veamos, tienes el ancho en el eje X. Permíteme simplificar esto un poco. Veamos si podemos hacer que funcione. Hmm, espero que a ustedes les esté funcionando mejor que a mí. ¿Alguien tuvo problemas con este ejercicio? Tal vez haya un error en el código de solución. Permítanme intentar actualizar, ver si algo se quedó atascado aquí. De acuerdo, no sé, ¿esto funcionaba para otras personas? ¿Solo a mí me está fallando? El resultado final debería verse como este. Así que, simplemente desplacémonos hacia abajo aquí y veamos esto en su lugar. ¿Funcionaba para las personas? No estoy seguro. Debo haber cambiado algo en otro lugar por accidente.

De acuerdo, entonces lo que estamos haciendo aquí, tenemos el ancho en el eje X, la altura en el eje Y. Y luego hay muchas formas diferentes en las que podríamos haber codificado el resto de la información. ¿Verdad? Así que esta es solo una forma. Estoy usando el atributo fill aquí para colorear los diferentes dispositivos. Entonces tenemos amarillo para los dispositivos móviles, azul para los de escritorio. Y también usando la opacidad y R para mostrar los diferentes números de sesiones. Ahora, hubo una pregunta sobre el uso de la escala logarítmica para R. Así que para la escala de opacidad, para el atributo fill-opacity, ese canal utiliza la escala de opacidad. Y aquí he especificado que sea una escala logarítmica porque sin eso, si intentas jugar con esto, perdemos, es muy difícil ver muchos de los datos porque hay algunos valores muy, muy altos y luego hay algunos valores muy, muy bajos. Así que a veces cambiar el tipo de escala puede ayudar a mostrar los datos de una manera más visualmente útil. Y de eso se trata, ¿verdad? Se trata de poder ver rápidamente qué está sucediendo con los datos. En este caso, creo que la transformación logarítmica funciona bien, como la escala logarítmica funciona bien. Pero como dijimos, las escalas logarítmicas no funcionan para R porque tener, sí, tener un logaritmo de cero. R depende de tener cero como la base, el valor mínimo, y eso no funciona bien cuando intentas tomar el logaritmo de cero. Entonces, en su lugar, lo que podemos hacer es pasar una función al canal R para aplicar la función math.log al número de sesiones antes de pasarlo al canal. Y eso nos da básicamente algo similar. Entonces puedes ver que sin eso, es un poco más difícil ver la diferencia en el número de sesiones. Y si no usamos esa transformación y simplemente pasamos las sesiones como de costumbre, no obtenemos ninguna información aquí, es todo, es demasiado grande. Los números son demasiado grandes para que esto funcione de manera efectiva con el radio. Así que este tipo de ajuste, de probar cosas y ver qué funciona y qué es útil y qué es completamente inútil como esto, es parte de la diversión de desarrollar una visualización de datos. Y luego volviendo a esa pregunta sobre Observable, con suerte, es útil para realizar rápidamente esos cambios y probar cosas y ver qué funciona. Y luego aquí también podemos agregar un título. Vimos cómo funcionaba en el último. Y también en este, si lo viste, si no tenemos un dominio establecido en estos ejes, alguien, en algún lugar tiene un monitor realmente, realmente, realmente, realmente gigante. Está lanzando el cálculo automático. Es como este valor atípico salvaje aquí. Entonces, si queremos limitar el gráfico para que se ajuste a un cierto subconjunto del dominio general de valores que tenemos en nuestros datos, podemos especificar ese rango de dominio aquí. Bueno, esa es una forma confusa de decirlo, pero los valores mínimo y máximo para el dominio en una matriz aquí. Y eso vuelve a esa pregunta que tuvimos antes sobre el uso de la configuración de dominio y rango para variables continuas como el número de anchos aquí. Entonces, podemos cortarlo para ayudar a acercarnos a la zona más informativa del gráfico, por así decirlo. ¿Alguien tiene alguna pregunta al respecto?

Entonces, ¿cómo sabe que es un rango? ¿Qué sucede si tienes un tercer número en ese dominio? Un número como... Un tercer número en esto, bueno, vamos a probarlo. Me lo estaba preguntando. Oh, sí, veamos si es bueno porque si vuelve a bajar. De acuerdo, digamos que teníamos uno más grande. Sí, entonces creo que lo que está sucediendo aquí es que está, supongo, está tomando... Puedes eliminar un cero para mantenerlo en el mismo rango. Solo será 800 después. Lo siento, ¿dices eso de nuevo? Puedes eliminar un cero del valor 50,000 y se acercará al mismo rango. Sí, solo por si acaso. Sí. Entonces, como vimos antes, podemos pasar tres valores al dominio. Como antes, teníamos los valores categóricos de los diferentes estados de finalización de los trabajos de prueba. Entonces teníamos, ya sabes, teníamos tres categorías diferentes. Entonces queríamos pasar los rangos de dominio, estos tres valores categóricos diferentes. Creo, y tendría que verificar la implementación para saber qué está haciendo esto, pero creo que en este caso está ignorando el valor intermedio. No, no lo está ignorando.

No, no lo está ignorando. Creo que simplemente se está confundiendo porque probablemente... Sí. No estoy del todo seguro, pero es como, va a depender de qué tipo de variable estés trabajando, qué tipo de propiedad sea, si puedes tener un mínimo y un máximo o si puedes tener una matriz más larga. Entonces creo que donde deberíamos buscar para obtener más información sobre eso es en la documentación de estas escalas. Por ejemplo, para la escala X, creo que siempre esperará un valor mínimo y máximo. Así que podemos buscar en la documentación de la escala para ver qué se espera aquí. Así que vamos... Mínimo a la izquierda, máximo a la derecha, lo veo en la documentación. Exactamente aquí. Entonces sí, estos pueden ser tanto mínimos y máximos, mínimo a la izquierda y máximo a la derecha, o una matriz de valores categóricos, también conocidos como valores ordinales, como tuvimos en las categorías de éxito, fracaso, omitido o éxito, fracaso, cancelado en la última visualización. ¿Considerarían cambiar la API según el feedback o lo consideran definitivo? Sí, definitivamente se agradece el feedback. La retroalimentación siempre es bienvenida. Como dijimos antes, puedes buscar en los problemas del repositorio de GitHub para ver si otras personas están de acuerdo o ya han planteado los puntos, ya sea un informe de error o una solicitud de función o una solicitud de cambio en la API y cosas así. Y si no, puedes enviar un problema y hacernos saber lo que piensas. Pero esperamos que, en general, lo importante que queremos que todos se lleven hoy es este concepto de que, al mapear en estas escalas, estamos mapeando desde un dominio a un rango. Incluso si no usas Plot después de esto, incluso si pasas a usar Vega-Lite o D3 u otra biblioteca, esa idea principal de que necesitamos definir, ok, aquí está el dominio de los datos que estamos tomando y aquí está el rango de valores de píxeles o colores, opacidades, niveles, o lo que sea que estamos generando. Esa transformación es la idea principal que me gustaría que todos se lleven, pero definitivamente estamos abiertos a recibir comentarios sobre cómo esta API podría ser más útil para ustedes.

No, pero para ser completamente honesto, por ejemplo, en mi caso, nunca he tenido esta experiencia de visualización. Creo que definitivamente has planteado ese punto, lo que estabas tratando de explicar ahora mismo. Y realmente tengo curiosidad por esto y ver más. Genial. Sí, gracias de nuevo. Para seguir con una pregunta, aunque creo que no está relacionada, ¿ves el 1400 en el eje Y? ¿El 1400 en el eje Y, por aquí? Sí, hasta el final, hay un punto. Oh, sí, uh-huh. ¿Sabes por qué? ¿Es por el 5000 un poco y está llegando o algo así? Bueno, en este caso, podría ser que simplemente está llegando. Así que esto va a ser como, esto podría ser una de esas cosas en las que si Plot fuera una biblioteca un poco más antigua y hubiera pasado por algunos casos más extremos y cosas que podrían, podríamos estar, podría haber diferentes valores predeterminados para, por ejemplo, no mostrar nada más allá de cierto nivel. Pero en general, esto es, y puedes verlo quizás aún más pronunciado en el próximo ejercicio cuando veamos las facetas, cómo aparece en la siguiente faceta. Así que podría haber algunos errores aquí. Pero también es algo a considerar, como, cuando hablamos de la asignación del dominio al rango, estamos diciéndole a Plot cómo hacer esa transformación en esa animación que vimos antes, no necesariamente le estamos diciendo a Plot, oye, te garantizo que no te daré ningún valor fuera de ese dominio. Así que eso es otra cosa a considerar, cómo se corresponde el dominio que estamos especificando realmente con lo que hay en nuestros datos. Y ahí es donde entran cosas como el filtrado y tal vez hacer, como hacer esa manipulación de datos por adelantado para asegurarnos de que solo tengamos los tipos de valores que esperamos. Tal vez quieras descartar puntos de datos por encima de cierto nivel o con cierta característica o algo así. Eso es otra cosa a considerar en términos de la correspondencia entre lo que le estás diciendo a Plot que espere y lo que realmente le estás proporcionando, si tiene sentido. Sí. Gracias por la respuesta. Y para entrar en más detalles, para adentrarnos más en el tema de la visualización de datos, como mencionaste, para tener una idea más amplia y entender cómo puedo usar esto a mi favor o según mis necesidades. Mencionaste D3 dos veces al principio ahora mismo con otra biblioteca, que en realidad no he escuchado, por eso me estoy enfocando en D3. Y mi pregunta es, ¿cómo se relaciona esto con Plot, verdad? ¿Cómo se relacionan, uno se basa en el otro, uno resuelve problemas diferentes o algo así? Sí, diría que están resolviendo problemas diferentes. Plot y D3 son creados por Mike Bostock. Así que, literalmente, la misma persona creó ambos. Y D3 es una biblioteca de nivel inferior. Es muy potente y muy personalizable, pero también puede ser un poco más complicada o requerir más trabajo o simplemente más pensamiento que debes hacer para incluso llegar a una visualización muy simple. O por ejemplo, hacer este tipo de separación, ¿verdad? Es como requiere bastante pensamiento y trabajo y carga cognitiva en D3. Y por eso Plot no está destinado a ser tan personalizable, no ser tan flexible o tal vez tan potente, y tal vez no tiene todas las campanas y silbatos y capacidades súper potentes de D3, pero está destinado a permitirte llegar a una visualización significativa lo más rápido posible. Así que ahí es donde, como podemos ver, en las facetas, agregamos una línea básicamente a nuestro gráfico y eso convirtió un gráfico en tres, ¿verdad? Así que cuando agregamos esa línea de faceta, pasamos de tener nuestro gráfico de dispersión regular a tener tres diferentes que se dividen según una categoría de los datos o una característica de los datos. Y la idea con Plot es que está más orientado hacia la exploración de datos. Así que aquí estamos tratando rápidamente de ponernos al día, entender este conjunto de datos y ver qué está sucediendo. Y de lo que vamos a hablar antes de terminar este ejercicio es ver, como, ¿qué podemos ver aquí? Bueno, surgen ciertos patrones, ¿verdad? Como podemos ver, podemos ver rápidamente algunas relaciones de aspecto populares. Podemos ver que, por ejemplo, las personas en dispositivos móviles parecen estar mucho en modo vertical y no tanto en modo horizontal. Y eso tal vez sea un poco más fácil de ver una vez que los dividimos, podemos ver la misma historia o en realidad en la tableta parece que están más divididos entre las dos orientaciones diferentes. Esos tipos de cosas, como tratar de ir rápidamente de, no tengo código frente a mí en este momento a escribí cinco líneas de código y ahora entiendo mejor mis datos, esa exploración de datos es realmente para lo que se pretende Plot. Y por eso creo que es genial para personas como nosotros que tal vez somos desarrolladores web. No somos desarrolladores de visualización de datos a tiempo completo que trabajan en visualizaciones de datos realmente complejas. Tal vez, tal vez lo seamos, tal vez vayamos a serlo. Pero queremos entender nuestros datos lo más rápido posible. Y eso es realmente para lo que se pretende Plot. Mientras que D3 está destinado a poder, como puedes construir tu propia nave espacial de Lego, versus, como con pequeñas piezas, versus como un kit de Lego que viene con unidades más grandes. Y puedes simplemente juntarlas rápidamente y obtener un caza X-Wing realmente genial o algo así. Así que si eso ayuda, esa es una de las formas en que puedes pensar en sus diferentes casos de uso. Y creo que tenemos más documentación que puedo enviarles a todos sobre Plot y D3 también para responder a esa pregunta. Así que sí, ok. Oh sí. Nuestra masterclass va hasta dos minutos a partir de ahora. Así que tengo un poco de miedo de que estemos un poco retrasados y tal vez no podamos completar el próximo ejercicio. Pero echemos un vistazo juntos. Y sí, lo compartiré con todos ustedes ahora mismo. Ok.

Hemos analizado algunos casos más extremos de escalas y transformaciones y cosas así. Pero espero que lo que estemos viendo es que este es el tipo de visualización de datos donde puedo ponerlo en práctica ahora mismo. Y creo, sabes, si estamos trabajando en, si estamos diseñando interfaces de usuario, por ejemplo, puedo poner esto en práctica ahora mismo. Por ejemplo, hace un tiempo, estaba diseñando, estaba implementando un diseño para una interfaz móvil y había este ancho de pantalla realmente molesto donde simplemente no funcionaba con el diseño de la tableta y el diseño móvil. Y cuando estoy frustrado en una situación así, puedo mirar uno de estos gráficos y ver, ok, en realidad hay bastantes usuarios en ese grupo extraño, así que vale la pena mi frustración en este momento, tratando de hacer que este ancho de píxel funcione. O tal vez, no, sabes qué, nadie está usando esto, lo voy a depriorizar y no estresarme. Así que realmente intentar tomar decisiones basadas en los patrones que vemos en nuestros datos y si podemos pasar rápidamente de números en los datos a algo como, oh, entiendo, esto es, todos están en esta relación de aspecto, mira eso. Entonces esperamos poder tomar decisiones más informadas más rápidamente. Esa es la idea de lo que estamos tratando de lograr aquí. Y ya sea que uses plot u otra cosa como una solución sin código como Tableau o Power BI u otras herramientas disponibles o si te adentras en detalles más técnicos y construyes visualizaciones personalizadas con D3, de cualquier manera, esta es la idea. Cómo puedo hacer mi trabajo mejor si puedo entender mejor los datos? Ok, lo siento, eso fue mucho hablar.

¿Alguien tiene alguna pregunta sobre este ejercicio antes de que compartamos rápidamente el tercero? Lo tomaré como un no. Por supuesto, las preguntas siempre son bienvenidas. Bien, espero que todos puedan ver esto. Si no pueden verlo, por favor avísenme, pero debería estar disponible ahora. Este va a ser más como una tarea, supongo. Pero, si alguien tiene que irse, siéntanse libres de hacerlo. Tengo algunos minutos más, así que voy a guiarlos y podemos hablar de algunas cosas aquí. El tema de este ejercicio es las respuestas de la API. ¿Qué tan rápido responde el servidor a las solicitudes de las personas y qué código de estado devuelve después de cuánto tiempo? Tenemos información sobre las rutas que las personas han solicitado, cuándo las solicitaron, los códigos de estado que el servidor devolvió y la duración en milisegundos que tomó dar esa respuesta. Así que esto va a ser tarea, pero espero que ahora tengamos suficientes herramientas. Sabemos cómo funcionan los canales. Sabemos cómo funcionan las escalas. Sabemos cómo hacer manipulaciones en los datos si queremos ajustarlos un poco o si sentimos que es necesario. Así que pueden crear un gráfico para esto. Hay una posible solución, pero las posibilidades son enormes aquí. Pueden echarle un vistazo. Pero lo que realmente quiero mostrarles, y voy a ir directo al final aquí, hay algunas tareas pendientes para agregar interactividad a estos gráficos. Hay algunas cosas útiles llamadas entradas observables. Hay un enlace aquí. Déjenme abrirlo, que son básicamente pequeños widgets de entrada HTML preconstruidos, como entradas de formulario, que te brindan algunos controles de interfaz de usuario diferentes, como casillas de verificación, botones de opción, deslizadores, menús desplegables, etc. Y también hay algunas cosas, así que hemos estado viendo estas entradas de tabla todo el tiempo. También hay un cuadro de búsqueda, que es muy conveniente. Y Observable te permite capturar el valor de un widget HTML como este, donde si marco algunas de estas casillas, a las que les he dado algunas opciones, les he dado tal vez una etiqueta. Si precedo una de mis pequeñas asignaciones aquí con la palabra clave `view of`, Observable captura una referencia reactiva a los valores actualmente seleccionados de esta casilla de verificación. Así que puedo ver esa matriz que devuelve actualizándose a medida que el usuario, en este caso, yo, interactúa, esto se va actualizando. Esto muestra el tipo de reactividad. Y luego puedo usar ese valor en el resto de mi código. Entonces, lo que podemos hacer entonces, espero que vean hacia dónde va esto, es conectar algunas de estas entradas a nuestro gráfico para que pueda tener formas muy rápidas de cambiar lo que se muestra en el gráfico. Por ejemplo, digamos que quiero ocultar algunos de estos estados de API o tal vez solo quiero reducirlo a uno solo, como, no sé, estos 302. No hay muchos. Puedo filtrar esencialmente mis datos en función de los resultados de los códigos de estado que he marcado aquí para modificar rápidamente lo que se ve en el gráfico. Y luego, de manera similar, hay un widget de búsqueda que nos permite buscar por una ruta específica. Tal vez quiero ver cómo están funcionando las solicitudes de usuario o de autenticación. Así que temo que no tenemos mucho tiempo para hablar de cómo funciona esto, pero todo se explica en esta hoja de trabajo. La idea es que cuando comencemos a aprovechar realmente el poder de la visualización de datos en la web y en una página web en vivo donde tenemos widgets HTML y tenemos JavaScript, por lo que podemos tener las actualizaciones reactivas, eso comienza a ser realmente poderoso porque luego podemos adentrarnos aún más rápidamente en las cosas particulares que nos interesan. Y no es como, por ejemplo, cuando alguien en tu trabajo, tal vez crea un gráfico y luego lo coloca en una presentación de PowerPoint y luego solo puedes ver ese único gráfico que diseñaron. No puedes modificarlo fácilmente. Entonces, ahora sabemos cómo modificar el código para cambiar las cosas y ver lo que queremos. Pero a veces quieres que otra persona, tal vez estás creando una visualización para tu jefe o para alguien que no sabe cómo programar. O tal vez simplemente no tienes tiempo y solo quieres poder cambiar rápidamente qué códigos de estado estás viendo en un momento dado, conectarlos, conectar nuestra trama a estos pequeños widgets HTML como este nos da la posibilidad de cambiar rápidamente cómo se muestra el gráfico. Y nuevamente, llegar a la información que realmente nos importa porque no nos importan los puntos. Nos importa si las personas están teniendo un mal momento porque nuestras solicitudes tardan 24 segundos en devolver algo así. Así que los dejaré trabajar en esto como un ejercicio para el lector, si eso está bien. Si todo es autoexplicativo, algunos de nosotros nos importan los puntos, es cierto. A mí también me importan los puntos, es un buen punto, Brian. Pero los puntos son lo que representan los puntos. De todos modos, buen punto. Los ejercicios son espero autoexplicativos y las soluciones están ahí junto con las pistas. Y luego pueden ver el proyecto terminado de lo que estamos tratando de lograr. Pero lo que realmente espero es que luego puedan tomar esto, tomar estas ideas aquí y tal vez volver y tomar algunos de sus gráficos de los ejercicios uno y dos y agregar algo de interactividad. Tal vez puedan agregar algunas casillas de verificación para ver si están viendo dispositivos móviles o tabletas o lo que sea, o tal vez puedan agregar algunos filtros basados en la búsqueda de palabras específicas en los datos. Así que espero que puedan tomar esto y correr con ello y pueden ver las entradas, esta documentación aquí sobre las entradas observables para ver todas las diferentes que hay. Y también pueden escribir sus propios widgets HTML arbitrarios si desean escribir un formulario más complicado. Así que hay algunos enlaces en la parte inferior de esto de algunas otras cosas geniales que la gente ha hecho que pueden probar. Algunas de estas son muy elegantes y tienen interacciones muy complejas. Así que espero que esto solo dé algo de inspiración y algunas ideas de cómo pueden volver a poner sus habilidades de desarrollo web en la visualización de datos. Y luego es como un caracol que se come su propia cola de cómo el desarrollo web hace que la visualización sea mejor y la visualización hace que el desarrollo web sea mejor y todos mejoran cada vez más y es como un ciclo virtuoso de mejora. Así que sí, esa es la esperanza con este tercer ejercicio. ¿Alguien tiene alguna pregunta? Sé que realmente no hemos tenido tiempo para profundizar en esto y ya estamos muy pasados de tiempo. ¿Alguien tiene alguna pregunta al respecto o sobre algo de esto? Les dejaré algunas referencias aquí. Sí, ya hemos hablado de nuestras conclusiones sobre el manejo y los diferentes tipos de filtrado y agregación que necesitamos hacer. Hay algunos recursos aquí, algunas lecturas adicionales que pueden hacer y algunas otras charlas de conferencias y tutoriales y ejemplos y videos y cursos en los que pueden trabajar. Pueden consultarlos en las diapositivas que enviamos al principio. Y sí, eso es todo lo que realmente quería compartir con ustedes y simplemente muchas gracias a todos por estar aquí hoy. Pero estoy aquí. Voy a quedarme unos minutos más si alguien tiene preguntas o quiere hablar de algo o sí. Gracias por la charla, estuvo genial. Gracias, gracias por estar aquí y por todo el trabajo duro detrás de escena. Muy rápido, solo por curiosidad, ¿Observable puede representar tres ejes, tres ejes, eje de visualización de datos? Como XYZ.

Muy rápido, solo por curiosidad, ¿Observable puede representar tres ejes en la visualización de datos, tres ejes, eje de visualización de datos? Como XYZ. Como una base de datos 3D. Entonces, sí, el gráfico no está configurado realmente para eso. Sin embargo, si usas algo como 3JS, una biblioteca que está configurada para trabajos en 3D, definitivamente puedes hacerlo. Y hay algunos ejemplos geniales, si buscas 3JS, por ejemplo, en el cuadro de búsqueda en la parte superior de cualquier página, puedes ver algunos ejemplos. Sí, bueno, este está en español, pero puedes ver algunos ejemplos de visualizaciones que las personas han creado. Estoy pensando en una, creo que fue, bueno, aquí, puedo ver este. No necesitamos leer todas las palabras, aunque estoy seguro de que algunos de nosotros definitivamente podemos, pero puedes ver algunos ejemplos, este es una especie de gráfico de barras en 3D. Creo que alguien hizo una especie de gráfico de pastel en 3D. Déjame ver, de todos modos, sí, esa es la respuesta corta. Y es un poco más trabajo en el sentido de que no es tan fácil como hacer una visualización con el gráfico, pero bueno, no puedo encontrar su visualización en 3D. Pero lo buscaré después de esto. En cierto sentido, 3JS también requiere mucho trabajo. Sí, es como sí, pero no tan rápido como hemos estado haciendo visualizaciones aquí hoy. Sí, oh, muchas gracias, Louisa. Gracias por venir. Y también, por ejemplo, hay otras bibliotecas de terceros como Mapbox, que también se integran con capas en 3D y cosas así. Eso es otra cosa que puedes buscar, por ejemplo, si estás tratando de crear mapas topográficos, por ejemplo, cosas así, puedes encontrar varios cuadernos inspiradores buscando en Observable. No estoy seguro de dónde está este. Oh, está tardando un minuto. Espero que no haga que mi computadora se bloquee. Voy a cerrar esto por si acaso. Pero sí, wow, eso es muy impresionante. Gran pregunta, sin embargo. Oh, gracias Patricia. Espero que haya sido muy útil. ¿Alguien tiene algún otro pensamiento o pregunta? Sí, espero que puedas echar un vistazo. Sí, lo siento. Entonces, primero que nada, escuché que estabas abriendo cuadernos y cosas así. Y mi pregunta es, ¿vamos a tener acceso a esos cuadernos más adelante, o son privados y podemos acceder a ellos o no? No, no, estos son, por ahora, no son públicos. Porque ustedes vinieron a esta masterclass y no todo el mundo lo hizo. Son como no listados, como los videos en este momento. Probablemente los haré más públicos más adelante después de un tiempo porque ustedes tienen prioridad. Pero como tienen las URL, pueden acceder a ellos, estarán ahí. No puedo garantizar que estén ahí en 100 años, pero estarán ahí en el futuro previsible. Y sí, si tienes una cuenta de Observable, siempre puedes hacer una copia del cuaderno y eso creará una copia en tu propia cuenta y será tuya para siempre hasta el fin de los tiempos. O el fin de Internet. ¿Perdón? Cuando hacemos una copia, ¿podemos mantenerla sin publicar, verdad? Absolutamente, sí. Cuando haces una copia, por defecto es privada. Será como un cuaderno privado en tu propia cuenta. Y luego, si quieres publicarlo en algún momento, puedes usar las opciones de publicación aquí. Pero si es como un espacio de trabajo personal, puedes hacerlo totalmente. También puedes crear nuevos cuadernos e importar elementos o celdas de los que tienes de forma privada. Mientras trabajes en tu propia cuenta, incluso puedes mover cosas entre cuadernos privados. Simplemente que otras personas no podrán verlos. Mencionaste que si tienes una cuenta, puedes guardar tu progreso y todo. ¿Eso significa que si actualizo la página, pierdo todo mi progreso? Si no tienes una cuenta, esencialmente sí, si actualizas la página, porque todo lo que ha estado sucediendo está en tu cliente. Eso no se guardará. Sin embargo, deberías ver un pequeño banner en la parte superior que dice `haz una copia para guardar tus cambios` o algo similar a eso. Entonces, si quieres guardarlos, puedes hacerlo totalmente. De lo contrario, puedes copiar el código fuente y ponerlo en tu propio módulo o algo así, para que no lo pierdas si el navegador se bloquea o algo así. Pero dicho esto, como lo que verías al actualizar es lo que viste la primera vez que viste esto, que tiene las soluciones y todo, con suerte la mayoría de las cosas que hemos visto y es posible que tengas un poco de trabajo por hacer si pierdes accidentalmente tu trabajo. Pero sí, puedes copiar y pegarlo, si eso ayuda. Sí, claro. Gracias por responder la pregunta. Además, en cuanto a algo un poco fuera de tema, principalmente fuera de tema, mencionaste mucho análisis de registros y compilaciones, lo cual nos ayuda a obtener un mejor producto, digámoslo de esta manera. Me preguntaba, en base a tu experiencia personal, ¿cómo me recomendarías hacer un seguimiento, por ejemplo, de los visitantes en un sitio? Sé que hay soluciones, como por ejemplo, olvidé el nombre de la cosa de Google. Google Analytics, sí. Eso es algo similar a eso, el análisis de dispositivos y navegadores, como Google Analytics o sitios similares que te brindarían ese tipo de información. Sí. Y si quieres algo más interno, ¿tienes alguna alternativa de código abierto, solo por curiosidad, diferentes alternativas? No hay muchas. Probablemente no soy la mejor persona para preguntar. Hay algunos enlaces en esas diapositivas sobre personas que hacen mucho trabajo de análisis personalizado. Creo que Netflix es un equipo realmente increíble para esto. Han sido pioneros en mucho trabajo de análisis interesante, así que podría referirte a personas que saben más al respecto que yo para que puedas conocer cómo procesan esos datos. Pero básicamente, se convierte en un tipo de dominio propio para procesar métricas y asegurarse de que todo se ingiera correctamente, se transforme correctamente y se almacene correctamente en algún tipo de almacén de datos. Entonces, dependiendo de la escala de tu operación, eso puede ser un agujero de conejo muy profundo en el que sumergirse, si me entiendes.

Pero temo que de memoria, no tengo realmente, creo que cosas como Google Analytics o si estás alojado en servicios como Netlify o si tienes algo como CloudFlare que sirve tu tráfico en el borde, ese tipo de cosas, todos tienen sus propias formas de proporcionarte esa información y análisis. Así que creo que depende de en qué estás alojado. Y no conozco una biblioteca fácil de usar que se ajuste a todos los casos, de memoria, lo siento.

No, eso probablemente no sea, en realidad, me diste una muy buena idea, así que gracias de nuevo. ¿Sí? Sí, así que fue una última cosa sobre todo esto... Oh sí, pero esto, por ejemplo, los pipelines, los pipelines que fallan y cuánto tiempo tarda el pipeline, todo lo que mencionaste que, por ejemplo, obtienes de GitHub, ¿esto, quiero decir, puedo simplemente buscarlo en Google y eso, pero ¿esto está realmente disponible en GitHub? GitHub guarda esto y está disponible por repositorio o por usuario, etc.?

Sí, absolutamente. Entonces, creo que en el ejercicio, hay un pequeño enlace allí y sé que hemos estado avanzando muy rápido en esto, pero hay un pequeño enlace a la API de acciones de GitHub aquí. Así que esto es como, GitHub tiene esto muy, este es un cuaderno que muestra cómo puedes obtener estos datos de la API. Es un poco, está destinado a centrarse en estas tareas de integración. Pero si haces clic en los documentos de GitHub de su API, puedes ver todo lo que está disponible. Como para esto, y esto es solo para su punto final de acciones o serie de puntos finales. No sé, su API de acciones, también puedes obtener todo tipo de otros datos sobre cosas como interacciones en el sitio, los diferentes paquetes que se publican, los usuarios que visitan, las contribuciones a un repositorio, toda clase de información. Entonces, la API de GitHub es una fuente enorme, enorme, enorme de datos realmente interesantes porque puedes obtenerlos para muchos repositorios públicos y obtener algunos de esos conjuntos de datos que podrían ser divertidos de manipular y jugar. Así que definitivamente recomendaría consultar la documentación de GitHub. Permíteme dejar ese enlace aquí. Así puedes incluso tener ganchos web que te informen de alguna manera, `oye, esta acción es rápida o falló`, etc.

Sí, no soy un gran experto en acciones. Pero si revisas las acciones, puedes crear las tuyas propias. No estoy seguro de cómo funciona si es gratuito o de pago o lo que sea, pero básicamente puedes crear tus propios trabajos que hacen, según entiendo, prácticamente lo que quieras. Por ejemplo, podría ser escribir cosas en registros en algún lugar, podría ser escribir, o enviar una notificación de mensaje de texto Twilio, ese tipo de cosas, muchas posibilidades diferentes allí. Así que definitivamente recomendaría echar un vistazo a su documentación.

Eso es genial. Gracias por compartir. Y solo quería decir gracias por esta increíble masterclass. Fue realmente interesante. Espero ver más de tu contenido. Es muy bueno cómo explicas las cosas y cómo te emocionas. Es contagioso. Fue genial. Bueno, muchas gracias. Es muy agradable escuchar eso. Y gracias a todos. Gracias a todos por estar aquí y por hacer estas grandes preguntas y crear estos gráficos geniales y compartir tus comentarios sobre Plot y todo. Por favor, abre problemas y vota por problemas y cosas así en el repositorio de Plot. Y mi información de contacto está en estas diapositivas aquí. Así que puedes encontrarme en Twitter. Puedes encontrarme en Observable. También tenemos un foro de usuarios. Si sigues usando Observable, lo cual no es obligatorio pero si lo haces, o sigues usando Plot y tienes preguntas, tenemos un foro para que puedas, puedes publicar, no sé por qué esto no está funcionando, ayúdame. Y es una comunidad muy amigable. La gente te ayudará. Así que sí, espero que todos puedan comunicarse. Si tienes algún problema con los ejercicios o necesitas apoyo mientras avanzas en tu viaje de visualización de datos, no dudes en participar en los foros y ya sabes dónde encontrarme ahora. Así que sí. Muchas gracias. Ha sido muy divertido. Gracias. Gracias.