(Más fácil) Visualización interactiva de datos en React

Hola, amigos. ¿Cómo les va? Es muy bueno ver sus caras. Es muy bueno verlos a todos aquí. Dios mío. Hola. Soy Anjana Vakil, una defensora de los desarrolladores en Observable y estoy muy feliz de estar aquí con todos ustedes, ya sea en persona o en la transmisión en vivo.

¿Qué tal, todos? Estoy realmente emocionada de hablar con todos hoy sobre la visualización interactiva de data en React. Las diapositivas de esta presentación y todos los enlaces y todo están en esa URL en observableHQ.com y trataré de tuitear eso después de la charla también.

Así que soy relativamente nueva en el mundo de la visualización de data como desarrolladora de software, desarrolladora de JavaScript pero aquí hay algunas cosas que he estado aprendiendo sobre la visualization de data. Una cosa es que cuando tienes un montón de data, visualizarla, ponerla frente a los ojos de las personas de una manera efectiva puede ser la forma más impresionante de descubrir rápidamente el significado real de esa data, ver patterns en ella, obtener insights reales, poder tomar decisiones basadas en ella. Eso significa que la visualización de data es un componente extremadamente útil en muchos tipos diferentes de aplicaciones web.

Entonces, por supuesto, cualquier tipo de panel de control que puedas estar construyendo probablemente va a tener una visualización de data involucrada. Cualquier momento en que estés tratando de dar a tus usuarios insights sobre su propia data en tus plataformas. Levanta la mano si tuviste que construir algún tipo de visualización de data en alguna de tus aplicaciones. Muchas manos. Y estoy segura de que también hay muchas manos en el ciberespacio. Así que esto significa que también es una habilidad muy valiosa para tener en tu currículum o como parte de tu portafolio de desarrollador. Así que algo que vale la pena aprender un poco. Sin embargo, la visualización de data es un campo muy, muy amplio. Es algo en lo que podrías pasar toda tu vida y career profundizando y obteniendo una disertación, escribiendo una disertación y convirtiéndote en un experto y nunca llegar al fondo de. ¿Eso significa que para construir visualizaciones efectivas en mis aplicaciones, tengo que, además de todas las cosas regulares de la web y React y JavaScript que necesito saber, también tengo que aprender sobre análisis estadístico y teoría del color y percepción visual humana y todas estas cosas diferentes. Eso suena realmente abrumador y difícil. ¿Cómo puedo construir una buena visualization sin tener que rededicar mi vida a aprender todo lo que hay que saber sobre la visualización de data.

Así que puede parecer realmente desalentador, puede parecer realmente difícil. Lo que esperamos explorar hoy en el corto tiempo que tenemos juntos es cómo podemos hacer una aplicación de visualización de data interactiva reactiva en React sin tener que aprender todo lo que hay que saber sobre la visualización de data. ¿Cómo puedo apoyarme en los hombros de gigantes y poner en marcha esta visualización de data lo más rápido posible. Lo que tenemos aquí y esto es lo que vamos a construir hoy si los dioses de la demostración están con nosotros es una simple visualization de la frecuencia de diferentes letras en el idioma inglés y es algo que yo como usuario puedo ordenar de la manera que quiera verlo. Así que puedo ordenarlos por la frecuencia descendente y ver que está un poco cubierto aquí pero la E es la letra más frecuente. Así que esto es lo que vamos a intentar construir y esperamos ver cómo no necesitamos reinventar la rueda para hacerlo. La herramienta que vamos a usar para este trabajo es una nueva biblioteca de DataVis de código abierto relativamente nueva llamada Observable plot.

Entonces, Plot, al igual que Observable, fue creado por la misma persona que creó la biblioteca D3 si la gente ha oído hablar de eso o se ha encontrado con eso, viendo algunos asentimientos. Entonces, Mike Bostock, quien también es CTO en Observable y algunos de nuestros otros compañeros de equipo en Observable crearon esta increíble biblioteca de DataVis que se lanzó de código abierto a principios de este año.

Y Plot es una biblioteca de muy alto nivel. Por lo tanto, te permite obtener rápidamente un gráfico significativo en funcionamiento al mismo tiempo que te da la flexibilidad para poder personalizar y construir exactamente el tipo de visualization que necesitas para tus propósitos en lugar de elegir uno de un conjunto limitado de opciones listas para usar.

Entonces, cómo hace esto es gracias a una API muy simple y muy poderosa que se basa en la noción de algo llamado una gramática de gráficos. Entonces, esta es una forma de pensar en describir y sistematizar cómo podemos armar un gráfico, prácticamente cualquier tipo de gráfico que podamos imaginar, a partir de unos pocos conceptos básicos.

Y esto es algo que ha estado en el mundo de la data vis durante mucho tiempo, por lo que tenemos expertos y toneladas de décadas de investigación en data vis incorporadas en esta gramática de gráficos. Y luego, PLOT emplea esta gramática de gráficos, pero la implementa sobre D3. Entonces, también tenemos a Mike y al resto del equipo de D3, una década de experiencia construyendo visualizaciones basadas en SVG para la web, todo incorporado en esta biblioteca.

Entonces, es esencialmente como tener un pequeño amigo experto en data vis en tu bolsillo que puede ayudarte a descubrir el mejor gráfico para construir. Y cómo hace eso es por medio de algunos conceptos clave. No vamos a entrar en detalle en todos ellos. Podrías leer todo sobre ello. Pero hay cosas como marcas, que son los elementos visuales que vemos en la página. Esto podría ser una barra. Podría ser una línea. Podría ser puntos en un gráfico de dispersión. Hay escalas, que son esencialmente funciones que transforman los valores que tengo en mi conjunto de data, por lo que en mi espacio de data, en valores en la representación visual real.

Entonces, esto podría ser tomar esos números de frecuencia y convertirlos en píxeles de cuán alta será la barra en la pantalla. Un par de características de las que no vamos a hablar mucho, pero son súper útiles para crear visualizaciones más personalizadas, cosas como transformaciones, por lo que podemos hacer agregaciones, como suma, media, ese tipo de cosas, y facetas, que te permiten tomar una data vis y dividirla en subvisualizaciones más pequeñas que se centran en un subconjunto de la data.

Entonces, con estos pocos conceptos, que no tardan mucho en entender, puedes crear gráficos realmente poderosos y realmente complejos que se ajusten completamente a lo que sea que necesites. Pero al mismo tiempo, puedes permitir que los valores predeterminados incorporados en Plot tomen muchas de las decisiones por ti, para que no necesites aprender todo lo que hay que saber sobre cómo organizar perfectamente las cosas en la pantalla.

Entonces, echemos un vistazo a cómo se siente realmente escribir algo de Plot. Espero que la gente pueda leer esto bien en la parte de atrás. Voy a tomar eso como un sí. Vale. Entonces, lo que tengo aquí es algo de data sobre estas letras y su frecuencia relativa. Entonces, tengo una matriz de pequeños objetos de data, datos, que tienen una propiedad de letra y frecuencia. Para crear un Plot, es una simple llamada al método Plot en este objeto Plot con P mayúscula que va a crear un SVG. Y este SVG es súper aburrido.

Es solo un SVG en blanco que no hace nada. Así que vamos a solucionar eso. Vamos a visualizar algunos data aquí.

Mencioné muy brevemente que Plot tiene una noción de marcas, los elementos visuales que vemos en la página. Aquí quiero hacer un gráfico de barras. Puedo hacer eso llamando al método bar Y en Plot, que es porque vamos a estar haciendo estas barras verticales. También hay un bar X para horizontal. Eso va a tomar los data que quiero visualizar, en este caso mi pequeña matriz de data. Y luego voy a pasar un objeto que le dice a Plot cómo mapear las propiedades de los data a las propiedades del SVG real en la pantalla. En este caso, le vamos a decir, oye, toma el eje X y úsalo para mostrar la propiedad de la letra en mis data. Y luego en el eje Y, quiero que pongas la propiedad de frecuencia.

Y una vez que evalúo eso, boom, ya tengo un gráfico significativo. Y Plot hizo un montón de trabajo pesado aquí que de otra manera habría tenido que pensar y construir yo mismo. Así que, por ejemplo, averiguar cómo organizar todo en ambos ejes, averiguar cómo será la barra más alta en mi visualization y configurar el eje Y de manera adecuada, añadir etiquetas, añadir las marcas en los lugares correctos, etcétera, etcétera. Así que Plot está tomando muchas decisiones realmente bien informadas por mí detrás de escena. Y sin embargo, puedo personalizarlo como quiera.

Así que, por ejemplo, por defecto, simplemente está organizando todas estas letras en el orden que aparecieron, así que en orden alfabético en este caso. Pero si quiero cambiar eso, en mi marca bar Y, puedo pasar una propiedad de ordenación, y decir, oye, Plot, ordena las cosas en el eje X por su valor en el eje Y. Boom. Lo hace por mí. No tengo que preocuparme por los valores en los data. Plot lo averiguará por mí. Y de la misma manera, si digo que en realidad quiero verlo en el otro orden, el orden descendente, puedo simplemente añadir un reverse true. Y ahí vamos.

Así que ya estamos empezando a tener un gráfico no tan trivial aquí construido a partir de, de nuevo, una API super declarativa. Y hay otras configuraciones que puedo poner en el gráfico en sí. Como, si quiero añadir una cuadrícula en el eje Y, puedo hacerlo para que sea un poco más fácil ver cuáles son los valores de esas barras a lo largo de la dimensión horizontal. Y puedo combinar diferentes tipos de marcas. Aquí es donde, de nuevo, no estamos limitados por un cierto conjunto de visualizaciones dadas de fábrica. Puedo añadir marcas adicionales.

Quizás quiero mostrar, está bien, imagina que todas las letras en inglés se usaran exactamente de la misma cantidad. ¿Cuál sería esa frecuencia? Entonces, pongamos una regla, una línea recta, en un cierto valor en el eje Y para que vaya recta a través para que podamos comparar cuánto más frecuentes o menos frecuentes son diferentes letras a esa frecuencia uniforme. Entonces puedo llamar al método rule Y aquí. En este caso, voy a pasar solo un valor, que va a ser lo que esperaría que fuera esa frecuencia si todas las letras fueran las mismas, que es uno sobre el número de letras que tengo. En este caso son 26. Y si recuerdo una coma aquí, Plot dibujará esa línea para mí. Y, por supuesto, ahora mismo no es el gráfico más visualmente emocionante. No tenemos ningún color, pero también puedo cambiar eso agregando opciones de configuración que se basan en gran medida en propiedades que podríamos conocer de los SVGs. Entonces puedo establecer, por ejemplo, el color del trazo a naranja. O tal vez quiero hacerlo un poco más ancho, así que estableceré un ancho de trazo de quizás tres. Entonces ahora puedo ver que, oh, como L está a punto de romper incluso, y C es mucho menos frecuente que lo normal, y E está muy por ahí, gran outlier. Entonces ahora tenemos un ejemplo trivial, estas frecuencias de letras, a menos que seas un lingüista de fondo, como yo, en cuyo caso es muy emocionante. Pero podemos ver que, en solo unas pocas líneas de code y probablemente más minutos de los que debería haber tomado porque he estado hablando, pero en solo unos minutos y unas pocas líneas de code, tenemos un gráfico significativo, y sin embargo, no es nada fuera de lo común que simplemente tuve que tomar los valores predeterminados de. Puedo configurarlos como lo vea conveniente.

Bueno. Entonces, probablemente estés diciendo, está bien, pensé que estábamos en una conferencia de React. ¿Dónde está sucediendo el React? ¿Cómo hacemos esto con React? Entonces, lo que Plot está haciendo, como dijimos, es crear un SVG con todas estas barras, ticks y líneas, etc. No quiero tener que codificar eso manualmente en mi aplicación de React. Así que lo que voy a hacer es dejar que Plot manipule su pequeño elemento SVG y lo llene con todo el contenido del gráfico que quiere dibujar. Y para permitir que React delegue esa manipulación del DOM a Plot, vamos a usar un par de hooks útiles. Use ref, que nos va a permitir conectarnos a un nodo del DOM en el que Plot puede hacer su trabajo. Y use effect, que es donde realmente vamos a dejar que Plot haga el renderizado de ese SVG y cualquier actualización cuando cambie el estado. Luego, por supuesto, tenemos que recordar limpiar después de nosotros mismos.

Bien. Entonces, si los dioses de la demostración están con nosotros, vamos a code sandbox e intentemos hacer una aplicación de gráficos rápidamente. Lo que tengo aquí, y, de nuevo, espero que la gente pueda ver en la parte de atrás, lo que tengo aquí es, básicamente, una aplicación estándar de crear React. Todo lo que he hecho es cambiar el título, y tengo un par de cosas listas para importar solo para ayudarnos aquí.

Lo primero que quiero hacer es traer Observable Plot a mi proyecto como una dependencia para que pueda añadirlo como Observable HQ slash Plot. Oh, gracias, Code Sandbox, por hacer eso tan fácil. Increíble. OK, así que ahora tenemos, ahora podemos importar este Plot con P mayúscula de Observable HQ Plot. OK, así que un par de otras cosas que tengo aquí, tengo mis data. Estos mismos datos de letras que acabamos de ver, y más tarde vamos a añadir un pequeño desplegable para explorar esa Reactivity. Así que déjame traer mis data también aquí. Ahora dijimos que queremos permitir que Plot haga su propia cosa en un div en nuestra aplicación. Así que voy a empezar a crear un componente aquí. Podemos llamarlo, no sé, lo llamaremos LetterVis por ahora. Va a ser la cosa más aburrida de todas, va a devolver un div vacío. OK, aún no es emocionante. Y luego podremos insertar esto en nuestra aplicación aquí. Y luego probablemente vamos a querer visualizar algunos data, así que ¿por qué no paso esos data como una prop aquí, y puedo pasarla aquí. Así que ahora mismo estamos cargando estos datos de letras codificados desde este archivo, pero probablemente estarías trayendo tus data de donde sea, tu API, lo que sea, no vamos a cubrir esa parte.

OK, así que ahora necesito conectar Plot a este div aquí. Y para eso, nuestro amigo useref entra en juego. Así que déjame agarrar useref, y también vamos a usar un par de otros hooks, useEffect y más tarde usestate. Y vamos a crear una nueva referencia donde Plot puede hacer su cosa. Así que puedo llamar a esto plotRef y simplemente llamar a useref. Esto va a empezar como un pequeño objeto que tiene una propiedad actual, que va a ser establecida en null al principio, pero si lo conecto a este div, plotRef aquí, ahora cuando React renderiza este div, plotRef.current va a ser el nodo real, este nodo div en el DOM, al que luego puedo decirle a Plot que haga su cosa. Dentro de un useEffect es donde voy a hacer que eso suceda. Así que vamos a poner nuestro useEffect en marcha aquí. Oop. Y lo que vamos a hacer es agarrar nuestro gráfico de barras de aquí. ¡Doop doop da do!

Bien, así que exactamente lo que hice antes, ahora vamos a capturar ese elemento SVG y, oh sí, data está involucrado aquí. Así que voy a añadir data a las dependencias de este useEffect aquí. Vale, ahora, nada está en la pantalla porque aún no he dejado que plot haga su trabajo, así que vamos a hacer que eso suceda. Como dijimos antes, una vez que React ha renderizado el div allí y eso es después de eso es cuando este useEffect va a ejecutarse, voy a tener una referencia a plot ref.current es ese div. Lo que puedo hacer es dejar que plot bar chart se siente justo dentro de eso. Ahora, estamos obteniendo algunas cosas en la pantalla excepto demasiadas cosas. Uh-oh, porque no estoy limpiando después de mí mismo. Esta es la trampa. Si estoy usando use ref, estoy, para citar a Rachel ayer, escapando, usando la escotilla de escape de React. No obtengo todas las cosas bonitas que React normalmente hace por mí como limpiar después de mí como si fuera mi criada. En cambio, tengo que limpiar después de mí mismo. Oh, no, qué desgracia es para mí. No es tan malo, sin embargo, porque puedo devolver una devolución de llamada, que esencialmente hace la operación opuesta de este append. Podemos tomar nuestro gráfico de barras y eliminarlo del DOM. Este es el compromiso con si quiero que plot haga el trabajo pesado de juntar todo este gráfico para mí para que no tenga que codificar a mano los pequeños elementos rect y lo que sea dentro de un SVG, esto es todo lo que tengo que hacer. Tengo que use ref. Pero recuerda que como estoy escapando de React, también tengo que limpiar después de mí mismo y ser un buen vecino. Bien. Así que ahora, si refresco mi aplicación aquí, esperemos, solo tenemos un gráfico en marcha. Bien. Excelente. Ahora, tenemos algunos problemas con el diseño aquí. Añadamos algunos márgenes, lo que puedo hacer en plot muy rápido solo para arreglar eso un poco. Y esto esperemos que lo haga más legible.

Bien. Así que, aquí lo tenemos. Déjame ocultar esto. Estamos llegando allí.

Tenemos un gráfico. Lo hicimos. Y de nuevo, el patrón que estamos utilizando es tomar este use ref, conectarlo a nuestro activo, y luego en el use effect, dejar que plot o cualquier biblioteca de manipulación del DOM que podrías estar utilizando haga su cosa, añada su SVG y luego lo elimine cuando queramos actualizar la próxima vez.

Muy bien. Entonces, ahora, para la parte de reactivity. ¿Estás conmigo? Vamos a hacer ahora este pequeño selector de orden para que mi usuario pueda decidir cómo le gustaría ver mejor su información, lo cual es realmente poderoso. Cuando puedes tener tus manos en los data y jugar con ellos, y cambiar la visualization de ciertas maneras para que puedas explorar un conjunto de datos, eso hace que sea aún más fácil encontrar esos insights y esos patterns.

Así que en este simple ejemplo, vamos a añadir ese pequeño desplegable, para el cual tengo un pequeño componente en este otro archivo. Voy a importarlo, y luego crear un desplegable dentro de mi gráfico de letras. Para hacer eso, simplemente voy a traer mi componente desplegable. Puedo darle un título, llamarlo ordenar por. Puedo darle algunas opciones, un array de valores para elegir. El predeterminado era alfabético, así que mantengamos eso ahí. Y luego tendremos frecuencia descendente y frecuencia ascendente, en caso de que mis usuarios quieran usar cualquiera de esas. Si recuerdo cerrar todas mis cosas y hacer esto simétrico... Esperemos... Vale.

Así que ahora tenemos una pequeña cosa en la pantalla que permite a la gente usar este widget de selección para elegir una opción. Simplemente no está haciendo nada todavía, porque no lo hemos conectado al gráfico de trama. Así que arreglemos eso. Así que antes había traído un hook de estado usado, nuestro buen viejo amigo. Así que lo que podemos hacer es crear una propiedad de orden y un set sort usando nuestro hook de estado usado. Podemos darle el valor predeterminado de alfabético solo para empezar con algo. Y luego lo que puedo hacer en mi desplegable es pasar un pequeño controlador onchange, que va a tomar el evento de cambio donde alguien eligió una opción diferente en el desplegable y va a establecer el orden a lo que sea que hayan elegido. Así que ahora esperemos que esto esté actualizando nuestro estado, pero no hay ningún efecto visual de eso porque aún no hemos llevado el estado a nuestro use effect. Así que hagamos eso. Así que lo primero que quiero hacer es traer mi variable de orden aquí a las dependencias de el use effect. Y luego, por ejemplo, aquí añadimos esa propiedad de orden con este pequeño objeto de configuración. Ahora podemos tomar decisiones sobre cómo queremos que se vea esta propiedad en función del valor de el orden. Así que si el orden es alfabético, puedo decidir no hacer nada.

Y luego, si tengo un orden no alfabético, puedo elegir el orden, si esto será invertido o no, en función de si ese valor es descendente. Si lo es, entonces invierte las cosas. Y si no, entonces no. Así que ahora, si no me he equivocado, que es un gran si, tengo un gráfico que se actualiza de manera reactiva, pero está escrito de manera declarativa en mi aplicación. Así que espero que todos ustedes sientan, como yo, que debido a esta API declarativa que ofrece Plot, porque no estoy manipulando manualmente el gráfico de manera imperativa, simplemente estoy declarando, esto es lo que quiero que parezca el gráfico. Plot, tú averigua cómo dibujarlo. No voy a preocuparme por eso. Debido a eso, se siente bien con esta aplicación reactiva. Porque puedo tomar decisiones igual que lo haría en otro componente para decidir qué elemento renderizar en función del estado de mi aplicación.

Lo hicimos. Creamos en no mucho tiempo una aplicación reactiva de dataviz. Es... No sé con qué frecuencia vamos a querer mirar la frecuencia relativa de las letras en el idioma inglés. De nuevo, a menos que seas un nerd del lenguaje, nerds como yo. Pero espero que esto te dé una idea del tipo de aplicaciones reactivas y responsivas personalizadas que puedes construir con una biblioteca como Plot. Y su API declarativa. Genial.

Muy bien. Gracias, dioses de la demostración. Vale... Así que casi nos quedamos sin tiempo aquí. Pero solo un par de palabras más. Así que espero que esto haya parecido bastante fácil. ¿Qué piensan todos ustedes? Quiero decir, no tuvimos que pensar en las escalas. No tuvimos que pensar en los mapeos entre los valores de mis data reales y el diseño de las barras en la pantalla. Plot se encargó de todo eso por nosotros. Y sin embargo, pude sobrescribir los valores según lo necesitaba. ¿Podría ser aún más fácil insertar un gráfico en mi aplicación? Bueno, Observable, ObservableHQ es un entorno de prototipado y visualización de data reactiva basado en JavaScript en el navegador.

Puedes explorar el sitio y encontrarás toneladas de ejemplos porque también es una increíble community de muchos creadores que construyen las visualizaciones más impresionantes. No sé cómo lo hacen. Así que hay ejemplos asombrosos, no sólo con la biblioteca plot, sino con otras bibliotecas como D3.

Y de cualquier cuaderno Observable, puedes obtener un fragmento de código incrustado para insertar un pequeño elemento iFrame autónomo, plunk, hecho, o para generar el código del componente React que necesitarías si quieres pegarlo en tu aplicación y manipularlo como quieras para integrarlo con el resto de tu aplicación. Así que eso es bastante fácil. Súper emocionante, hace apenas una semana, como hace cinco minutos, lanzamos algunas funciones reutilizables de código abierto que puedes llamar para generar un gráfico completo basado en D3. Así que esto es una especie de nuevo desarrollo en los ejemplos de D3 donde no tienes que averiguar cómo replicar de manera imperativa estos geniales gráficos de D3 que ves por ahí. Hay un montón de diferentes funciones como histogramas, diagramas de arena, diagramas de árboles, todo tipo de cosas diferentes. Puedes encontrar todos los ejemplos en observablehq.com.

Y utilizando exactamente el mismo patrón que acabamos de ver, puedes insertar esto en una aplicación React. Así que teniendo un patrón useRef y useEffect que acabamos de ver, puedes llamar a una función de histograma y obtener un histograma instantáneo, personalizarlo como quieras, hacerlo rojo, hacerlo lo que sea, y de nuevo, utilizando ese mismo patrón useUseRef, useUseEffect, limpiar después de ti mismo que acabamos de ver. Y de nuevo, estas son ambas formas muy fáciles de aprovechar todos los increíbles años y décadas de experiencia que estos impresionantes desarrolladores de data viz tienen y que han sido incorporados en estos ejemplos y estas APIs, estas bibliotecas, para no tener que aprender todo eso nosotros mismos. Así que podemos obtener un gráfico genial que hace lo que ayuda a nuestros usuarios a entender los data que queremos que entiendan. Vale.

Así que un resumen súper rápido, porque creo que me he pasado un par de minutos, lo siento, es que plot lo que hemos visto es una biblioteca de alto nivel suficiente para que puedas obtener un gráfico realmente conveniente en funcionamiento con un par de líneas de código y sin embargo no te encasilla en ejemplos específicos. Puedes personalizarlo basándote en la combinación de estos pocos conceptos diferentes. Como tiene una API declarativa, se siente muy bien en una aplicación Reactiva. Fue diseñado para ser utilizado en un contexto Reactivo en Observable pero React es otra aplicación perfectamente buena. Así que Useref y UseEffect son nuestros amigos si queremos delegar la manipulación del DOM a otra biblioteca para no tener que codificar todo a mano. Y los ejemplos que vimos con los gráficos D3 y otros ejemplos que puedes encontrar en Observable, puedes incorporarlos también en tus aplicaciones. Así que muchas gracias, hay un montón de lecturas adicionales enlazadas en las diapositivas. Si quieres profundizar más en plot, si quieres profundizar más en D3 también, hay muchos buenos recursos disponibles. Y te agradezco mucho que estés aquí conmigo. Ha sido genial hablar con todos ustedes. Muchas gracias. Mis compañeros de equipo en Observable, gracias. Gracias. Gracias. Gracias. Gracias. Por favor, toma asiento.

Por favor, toma asiento. Así que tenemos un poco de una situación incómoda con la programación donde la transmisión en vivo se interpondrá en un conjunto diferente de programación en un par de minutos. Pero también has roto el récord de preguntas, creo que tienes las preguntas más de cualquier charla hasta ahora. No sé si es una buena señal o una mala señal. Yo tampoco lo sé. Pero vamos a responder algunas de esas preguntas para las personas que están aquí en la sala Así que siéntete libre, en un par de minutos, de ir a tomar un café durante el medio hora de descanso que vamos a tener, o quedarte aquí y vamos a pasar por las preguntas durante unos 10 minutos. ¿Te parece bien? Seguro. Genial.

Así que la pregunta número uno que tenemos aquí es, ¿se ha sometido a Plot a pruebas de estrés con muchos puntos de data, y si es así, encontraste algún problema de performance con SVG? Esa es una gran pregunta. Así que si estás redibujando un SVG cada vez, probablemente tendrás un poco más de dificultad que con 26 letras como nosotros. Sin embargo, Plot se basa en D3. Y como la gente puede saber, D3 definitivamente ha pasado 10 años optimizando cosas como la actualización de data cuando cambia para que sólo necesites actualizar las partes que importan. Y así tienes esencialmente todas esas ventajas de D3 subyacentes a Plot. Así que no estoy seguro, ya que Plot es tan nuevo, no estoy seguro de cuál es el límite superior de cuál es el Plot más grande que se ha hecho. Esa es una buena pregunta que le haré a mi equipo. Pero espero que el hecho de que D3 haya estado trabajando en ese problema durante mucho tiempo se preste bien para intentar hacerlo, no de la manera más lenta posible, digamos. Bien. Y tal vez como seguimiento a eso, ¿hay algo en Plot que lo vincule a la renderización SVG o podría usarse con un renderizador basado en canvas también? Así que Plot se basa en SVG. No creo que lo haría. Creo que tendrías que volver a la tabla de dibujo para conseguir que las cosas se rendericen en canvas. Sin embargo, sabes, esto es, de nuevo, un tipo de enfoque para implementar esta idea de un gramática de gráficos. Así que eso es una especie de sistema formal de nivel superior para representar los diferentes tipos de gráficos que podemos hacer a partir de estos conceptos clave. Así que podría imaginar totalmente y tal vez hay algunos por ahí, una biblioteca basada en canvas que toma los mismos principios y los traduce en un canvas en lugar de elementos SVG. Bien. Solía trabajar en Victory en su día, así que tuvimos que luchar mucho con los mismos problemas. Soy muy simpatizante con tu causa. Creo que la transmisión en vivo puede estar cortándose ahora, así que si todavía estás ahí, adiós. Continuaremos aquí en la sala un poco más.

Así que Andy H pregunta, ¿las visualizaciones de Plot pueden cumplir fácilmente las guidelines de accessibility? Esa es una gran pregunta. Definitivamente es algo en lo que todavía tenemos trabajo por hacer.

Afortunadamente, es todo código abierto, como mencioné, así que si te encuentras con obstáculos particulares de accessibility o cosas que aún no están en la biblioteca, porque se lanzó por última vez en primavera, por lo que todavía está en una fase beta de su vida. Todavía estamos resolviendo algunos de los problemas. Si tienes preguntas particulares o dolores de cabeza o obstáculos allí que te preocupan, te recomendaría saltar a GitHub.com y entrar en los problemas y ver qué es lo que ya ha sido señalado, tal vez hay cosas adicionales para las que te gustaría presentar un nuevo error, y ver cuáles son las posibilidades allí. Se agradecen las contribuciones. Sí, esa es la forma más amable de decir que se agradece el PR. Si no te gusta, puedes arreglarlo. Y se agradecen los comentarios, ya sabes, los problemas y plantear esas preocupaciones, eso es definitivamente algo que queremos escuchar. Definitivamente hay mucho impulso por parte del equipo para asegurarse de que Plot se está moviendo en una dirección de visualization más accesible. La Accessibility en Dataviz es, como, en sí misma un campo que, o un área que creo que el todo el campo de la web basada en el borde de Dataviz necesita abordar un poco mejor, así que es un trabajo en progreso, pero llegaremos allí.

Genial. Otra pregunta, quizás respuesta similar. ¿Plot soporta SSR? Buena pregunta. Me gustaría pasar eso a mi equipo, si es posible. Creo que, ya sabes, dado que esencialmente, Plot está usando D3 para crear los elementos DOM reales en la página. Creo que probablemente se puede hacer, pero no estoy completamente seguro de cuáles podrían ser los obstáculos o implicaciones de eso, así que diría que es una gran pregunta para plantear en la documentación de Plot o en conversaciones con el equipo observable en el foro. Así que tenemos un foro en talk.observablehq.com. Antes de decir algo incorrecto, investiguemos allí.

Bien. Muy bien. Entonces la siguiente pregunta es un poco complicada y puedes tomarla como quieras, pero se ha hecho tantas veces que tenemos que hacerla. ¿Cómo compararías Plot con otras bibliotecas de gráficos de código abierto como Chart.js o Victory o lo que sea? Claro. Entonces, como dije, siendo nuevo en datavism, no estoy íntimamente familiarizado con estas otras bibliotecas. Sin embargo, diría que las principales distinciones de Plot son, de nuevo, que se construye sobre D3 y por lo tanto se basa en todo el pensamiento que se ha puesto en D3 durante los últimos 10 años. Así que D3 es esta poderosa biblioteca de data visualization de bajo nivel que tiene toneladas de capacidades. Así que el hecho de que Plot se base en eso lo convierte en parte de la familia de pensamiento de D3, por así decirlo. Así que si estás familiarizado con D3 pero a veces lo encuentras un poco demasiado de bajo nivel para tus necesidades y deseas que hubiera una forma más rápida de ponerse en marcha, Plot es el camino a seguir. Sin embargo, hay algunas otras bibliotecas de dataviz por ahí, por ejemplo, Vega-Lite es una para JavaScript basada en Vega que también emplea esta idea similar de una gramática de gráficos. Así que si has trabajado con cosas como el ggplot de R o Vega-Lite, podrías encontrar que venir a Plot se siente ergonómicamente similar porque emplea muchos de los mismos conceptos y marcos conceptuales frameworks. De nuevo, muchas bibliotecas de gráficos que he visto te dan algunas opciones de caja que tienen algunas propiedades configurables pero realmente no te permiten crear las tuyas propias o combinar diferentes tipos de marcas o combinar, ya sabes, combinar fácilmente líneas con barras o gráficos de puntos o cosas así. Pero la parte agradable de Plot es que no necesariamente te da gráficos de caja pero porque es tan rápido, esperamos que hayamos visto, y simple para agregar diferentes tipos de marcas a tus gráficos, te permite construir tu propio set de Lego, por así decirlo, con estas piezas recomponibles. Así que creo que eso es algo agradable. Y la otra gran cosa sobre Plot es que fue construido para vivir en un entorno reactivo. Así que los cuadernos observables son este tipo de entorno reactivo funcional en el navegador JavaScript Y Plot fue diseñado para funcionar muy bien con eso. Fue diseñado con su API declarativa para funcionar muy bien con la actualización de valores basada en entradas de usuario e interactividad. Así que creo que funciona muy bien en esos casos, también. Y hay alguna documentation en el sitio observable sobre comparaciones entre Plot y algunas otras bibliotecas como D3, como Vega Lite. Así que eso podría ser de interés para las personas que se preguntan sobre esas comparaciones.

Sí. Genial. ¿Crees que puedes manejar un par de preguntas más? Estoy con cafeína y listo para continuar. Hagámoslo. No parece que estés listo en absoluto. Entonces, aquí hay una pregunta. Voy a elegir una que no es la primera en este momento, pero iré a la siguiente aquí, porque es una pregunta real sobre data visualization y no necesariamente sobre plot, pero me interesaría escuchar tus pensamientos al respecto. Entonces, ¿cómo resolverías el problema de tener una mayoría de puntos de data agrupados juntos sin mentirosos en el extremo extremo de scale? Entonces, por ejemplo, ¿el 99% de los valores entre 0 y 1, y luego el 1% de los valores en el primer percentil?

Sí, este va a ser uno de esos casos en los que puedes confiar en los valores predeterminados de el gráfico. Lo que plot podría hacer es mirar todos los puntos en tus data y decir, OK, aquí está el más pequeño, aquí está el más grande. Ese es esencialmente el dominio de mi problema aquí. Ese es el espacio de entrada. Y voy a mapear eso a mi rango, mi espacio de salida, que es el número de píxeles que tengo disponibles en la pantalla. Sin embargo, si para tu aplicación tal vez esos valores atípicos no son tan relevantes, o quieres que las personas tengan la opción de cambiar eso, lo que puedes hacer en plot es anular ese dominio predeterminado y rango a lo que se adapte a tus propósitos. Entonces, si quieres, digamos, restringir el dominio para excluir esos valores atípicos, puedes pasar una propiedad de dominio a plot y decirle los valores mínimos y máximos que realmente quieres que se visualicen, y luego hará todo el mapeo que necesita hacer para distribuir eso de manera adecuada en la pantalla. También puedes conectar eso a la interactividad en tu aplicación para, digamos, permitir a las personas elegir qué límites están mirando y acercar, por así decirlo, o alejar. Eso es probablemente a lo que terminarías cavando desde esa perspectiva. Creo que eso plantea un punto realmente bueno que mucha gente... Hay muchas preguntas aquí que son sobre el rendimiento en tiempo de ejecución, sobre la capacidad de sacudir el árbol, sobre cosas que tienen que ver con la naturaleza JavaScript de esta biblioteca. Pero fundamentalmente, los problemas de data visualization son problemas porque algunos data son simplemente más difíciles de visualizar. Y es por eso que realmente me gustan los Observables como herramienta, porque los cuadernos simplemente te permiten jugar con data y verlo de diferentes maneras, y encontrar formas intuitivas de ver algo en un conjunto caótico de data.

Sí, definitivamente. Y creo que también, de nuevo, en términos de no tratar de reinventar la rueda y tener que aprender todo sobre la teoría de data viz, husmeando en Observable y los diferentes cuadernos que la gente ha creado para ver algunos ejemplos de cómo las personas han manejado exactamente ese problema, cómo... De nuevo, también hay ejemplos en D3 de usar cosas como animation para ayudar a las personas a ver la forma en que el dominio está cambiando, o expandiéndose o contrayéndose, basado en acercar o alejar un gráfico. Entonces, esos tipos de ejemplos pueden ser realmente útiles para apuntarte en la dirección correcta, o en el caso ideal, puedes simplemente agarrarlo, incluyendo crédito donde corresponda, por supuesto, y pegarlo en tu aplicación, como dijimos antes. Entonces sí, espero que eso apunte a la gente en algunas buenas direcciones. Sí, quiero decir, no tengo ningún caballo en esta carrera, pero me encanta Observable como herramienta. He jugado mucho con él. Y me encanta simplemente navegar por las visualizaciones que otras personas han creado. Ya sabes, los conjuntos de data son simplemente increíbles. Lo sé.

Realmente a veces es alucinante, las cosas que la gente crea. Y lo bueno de Obs, creo que una de las cosas buenas de Observable es que también puedes incluir texto explicativo, puedes vincular una visualization y su interactividad a otras partes de una especie de página completa que describe los data, etc., por lo que es realmente agradable para las aplicaciones de narración de data. Y debido a esa funcionalidad de incrustación o exportación, puedes prototipar rápidamente en React porque todo es, como, retroalimentación instantánea, lo siento, puedes prototipar rápidamente en el entorno Reactivo de Observable que está construido con React. Puedes ponerlo en marcha rápidamente y luego cuando funciona, cuando te gusta cómo es, puedes exportarlo, incrustarlo en tu propia aplicación. Incluso puedes simplemente tomar la URL para enviar a la gente a ella como una especie de aplicación independiente, así que sí, es una forma bastante rápida de ponerse en marcha y también puedes bifurcar los ejemplos de otras personas para que no tengas que hacer todo el trabajo que ya hicieron. Simplemente ajústalo, para tu caso. Genial. Voy a hacer una última pregunta y luego tendremos que dejar a estas buenas personas para que tomen un café porque no creo que todos hayan tomado tanto como nosotros. Hay un montón de preguntas que son básicamente las mismas preguntas. Voy a parafrasear todas ellas aquí. ¿Qué tan personalizable es el design de la visualization de plot? ¿Puedes pasar tus propios componentes o elementos SVG en lugar de los existentes, como los componentes que tienes, por ejemplo barras? De hecho, puedes, creo. De nuevo, todos los enlaces a la documentation de plot están en las diapositivas, pero puedes pasar tus propias funciones y de nuevo, también debido a estas marcas y cosas componibles como esa, creo que es posible extenderlo con tu propio tipo de marca, por ejemplo, si hay algo más que quieras usar. Sin embargo, las marcas incorporadas pueden ser realmente útiles, como hay una marca de texto, por ejemplo, que puede ser realmente útil para hacer cosas como, oh, quiero que mi gráfico de puntos no sea puntos, pero quiero que sea emoji, o lo que sea, ¿verdad? Así que también puedes obtener mucho provecho de los incorporados tal como están. Genial. Y hay una pregunta realmente divertida aquí que simplemente tengo que hacer. ¿Cuál es tu secreto para una precisión de escritura impecable durante la codificación en vivo? Porque es bastante impresionante. No hay ninguno. Me equivoco todo el tiempo, solo, ya sabes, mucha práctica frenética antes de la charla. Pero yo, yo soy, yo estaba, yo estaba preocupado por los dioses del Wi-Fi estando con nosotros, pero llegamos, así que. Genial. Hemos pasado por muchas preguntas, y aquellos que están viendo esto más tarde y, ya sabes, la regrabación de la transmisión en vivo, no has estado viendo esto accidentalmente a doble velocidad. Estamos hablando muy rápido. Y, sí. Gente aquí en Londres, disfruten del descanso para el café. Vamos a volver en unos 20 minutos, así que habrá charlas relámpago. Se llevarán a cabo en el escenario principal, pero también se transmitirán por aquí, así que si quieres venir aquí en preparación para las charlas después, bienvenido. Gracias. Gracias.