Efficient Data Visualisation with React and SVG

Gracias. Hola a todos. Espero que lo estén pasando bien. Mi nombre es Ido. Y como ya dijo la introducción, soy un desarrollador full stack con más de una década de experiencia trabajando principalmente en start-ups. Estos días estoy trabajando en agigrid donde estoy trabajando en nuestras herramientas de gráficos, agicharts, paquetes completos de visualización y comunidad. Pero hoy no estoy aquí para hablar sobre agicharts, estoy aquí para hablar sobre la simplicidad. Y por qué en realidad hay algunos casos en los que no necesitas recurrir a una biblioteca de inmediato, hay un beneficio en construir todos estos componentes de visualización de datos por ti mismo.

Así que en esta charla de hoy, quiero mostrarte lo que exactamente podemos lograr usando solo React y SVG. Vamos a usar un toque de D3 al que llegaremos en un momento. Pero no bibliotecas pesadas, no bibliotecas de visualización de datos, como vamos a usar D3 como una biblioteca de utilidades en realidad, y voy a dejar que él haga el trabajo duro, pero dejar que React haga el trabajo duro por nosotros. Así que, en primer lugar, ¿por qué no usar una biblioteca? Obtienes muchos beneficios al construir cosas por ti mismo. En primer lugar, obtienes control total sobre la estructura, el estilo y el comportamiento de tu biblioteca, y se adapta perfectamente a tu modelo de datos, como puedes asegurarte de que funcione precisamente con lo que es importante para ti y no soportar ningún otro mapeo o características innecesarias para tu caso de uso específico, y además de eso, no hay dolores de cabeza de integración que generalmente vienen con la adopción de una nueva biblioteca.

Y eso ni siquiera menciona los inconvenientes tradicionales de una biblioteca que obtienes cada vez que adoptas ninguna biblioteca. Obtienes muchos beneficios de la base de datos, como el peso innecesario del paquete, que es especialmente importante cuando hablamos de herramientas de visualización de datos, que tienden a ser muy pesadas, y no muchas de ellas soportan tree shaking, e incluso aquellas que lo hacen no lo soportan muy bien. Y la sobrecarga cognitiva que viene de aprender una nueva API o adaptar nuevas abstracciones a tus propias abstracciones en tu código, todas las suposiciones predefinidas que vienen con elegir una biblioteca, que en algún momento, vas a tener que empezar a pasar por aros solo para intentar hacer que las cosas funcionen a tu manera. Y en general, es un exceso para la mayoría de los casos de uso básicos.

A menos que realmente necesites una biblioteca completa de visualización de datos porque necesitas múltiples tipos de gráficos o múltiples formas de configurarlo, soporte de temas y cosas así, probablemente sea un exceso para tu caso de uso. Así que hoy lo que vamos a hacer es construir una biblioteca que repelerá componentes de datos en React y SVG, como dije, con un poco de D3, del cual hablaré en un minuto.

Así que primero, desmitifiquemos un poco SVG, especialmente si es nuevo para ti, para que puedas entender los ejemplos de código que revisaremos. SVG son gráficos vectoriales escalables, en caso de que no lo sepas, que es básicamente un lenguaje basado en marcado para describir gráficos 2D. Lo bueno de SVG es que es un lenguaje muy, muy minimalista. Básicamente, solo soporta un puñado de formas. Todas ellas están en la pantalla ahora mismo. Así que básicamente, ahora mismo, ya sabes, como, más del 50% de SVG. Ya está en tus manos.

Tenemos una línea, un rectángulo, un círculo y una elipse. También tenemos una polilínea, que es una línea compuesta de múltiples puntos, un polígono, que es básicamente lo mismo. Solo que los primeros y últimos puntos se conectarán para crear una forma cerrada. Y tenemos nuestra ruta SVG, que es la más versátil de todas. No vamos a entrar en la sintaxis en sí, pero básicamente, te permite describir cualquier forma que desees usando líneas y curvas. También tenemos en este ejemplo, puedes ver un elemento de grupo que nos permite estilizar múltiples formas al mismo tiempo. También puedes ver el estilo en sí, que es principalmente trazos y rellenos, el equivalente a bordes y fondos que obtenemos de HTML. Y en la parte superior, tomaré un minuto para hablar sobre el cuadro de vista que puedes ver en el elemento SVG que básicamente, el valor en sí es X, Y, ancho y alto de lo que es la posición de la cámara de nuestro sistema de coordenadas.

Ahora, vale la pena mencionar que estoy asumiendo que la mayoría de ustedes conocen el sistema de coordenadas cartesianas de clases de matemáticas, universidad, lo que sea. Y generalmente se presenta de una manera donde el eje Y va hacia arriba. Pero en informática, en realidad, el punto de origen suele estar en la esquina superior izquierda de la pantalla con los valores de Y aumentando a medida que bajamos. Solo tenlo en cuenta mientras revisamos los ejemplos, solo para no causar confusión.

Básicamente, vamos a usar el cuadro de vista para establecer la región visible del canvas, como dije. Y la razón para hacer eso es si queremos crear una imagen SVG escalable o si queremos reposicionar el punto de origen, lo cual, nuevamente, veremos en un minuto. ¿Por qué no usar canvas de todos modos? Bueno, canvas es una API programática de bajo nivel que te permite mucho control sobre cómo se renderizan las cosas, pero también significa que estás perdiendo muchos de los beneficios que vienen con el uso de un navegador.

Por ejemplo, si quieres hacer accesibilidad, entonces tienes que escribirlo completamente por ti mismo. Si quieres tener una cola de renderizado para decidir cuándo es el momento adecuado para renderizar, entonces es tu responsabilidad. Así que básicamente, lo bueno de SVG es que en realidad es declarativo, lo cual funciona muy bien con React y está basado en DOM. Así que la mayoría de las cosas a las que estamos acostumbrados existen en SVG. Es más fácil integrarse tanto con CSS como con eventos DOM. Y en general, simplemente aprovecha todo lo que el navegador puede ofrecernos. Así que la mayoría de la API con la que estás familiarizado de un DOM regular, como un DOM basado en HTML, también será compatible con SVG.

Ahora hablemos un minuto sobre D3. Como la mayoría de ustedes probablemente saben, D3 es como esta biblioteca de gráficos que todos usan o al menos como la base de la mayoría de las bibliotecas, pero en realidad D3 hoy en día es una colección de utilidades para trabajar con datos. Básicamente te ayuda a mapear valores en geometría y ofrece mucho más que eso, lo cual probablemente no necesites realmente. Y si quieres tomar eso, entonces depende de ti. Pero eso no es de lo que vamos a hablar en esta charla.

Así que básicamente, el error más común que veo casi en todas partes al intentar integrar entre D3 y React, generalmente comienza con un ref en la parte superior. Y ya puedes adivinar cómo se verá la línea final del componente. Va a ser un elemento SVG vacío con solo el ref en él. Y básicamente, le dimos toda la responsabilidad de renderizado a D3. Pero si eso es lo que estamos haciendo, entonces ¿cuál es el punto de usar React? Básicamente estamos pasando por alto React aquí solo para asegurarnos de que D3 pueda actuar como quiera, pretendiendo que React no está allí. Ahora, no es lo único que D3 hace aquí, porque sí tenemos como el mapeo de datos en sí, la parte de utilidades de la que estaba hablando.

Pero este patrón, lo consideraría un anti-patrón. Porque básicamente, el momento en que dejas que D3 se apodere de tu DOM, significa que React está básicamente no haciendo realmente nada. Solo se convirtió en un envoltorio y técnicamente una responsabilidad porque hace que el código sea más difícil de probar. Y crea efectos secundarios muy, muy desagradables cuando los dos sistemas actúan bajo la suposición de que están controlando el DOM, y cada uno de ellos tiene abstracciones muy diferentes para hacer eso. La forma correcta, desde mi perspectiva, de hacer eso, de hacer la integración de D3 y React, sería separar entre la parte de utilidades que transforma nuestros datos para el renderizado, y dejar que React haga el renderizado en sí, que es para lo que React está destinado a hacer.

Estos dos ejemplos, el que vimos anteriormente y este, ambos generan el mismo gráfico exacto, y son completamente equivalentes, excepto que uno está usando D3 para hacer el renderizado y el otro usa React. Entonces, ¿de qué está hecho realmente D3? Si puedes ver, este es el archivo de índice de D3, y básicamente son como 30 pequeños paquetes trabajando juntos, lo que significa que realmente es una biblioteca de utilidades y es muy manejable y muy funcional, lo cual es agradable para trabajar. Pero de todas estas bibliotecas, solo seis realmente dependen del DOM, realmente hacen algo que necesita el DOM para funcionar. La mayoría de las bibliotecas son ya sea para gestionar formas o tipos específicos de gráficos y diagramas, o simplemente utilidades simples. Como si notas aquí, puedes ver que tenemos una biblioteca para hacer fetching. Tenemos una biblioteca para hacer números aleatorios, que puedes simplemente usar math random. Muchas de estas cosas, como la razón por la que están ahí, porque D3 quería ser como el jQuery de los datos, que puedes usar eso y nada más para representar tus datos. Pero cuando estamos usando React, realmente no se alinea con eso, y realmente no necesitas hablar de todo eso para llevar con nosotros todas estas bibliotecas. Así que en esta charla, solo vamos a usar tres de las bibliotecas de D3. Vamos a usar D3 array para un método que nos ayudará a obtener los valores mínimos y máximos de nuestro dominio. Vamos a usar D3 scale para funciones que nos ayudarán a convertir nuestros valores de datos en valores visuales. Y vamos a usar D3 shape, que nos va a ayudar a crear esas rutas SVG para arcos y pasteles. Así que comencemos con los ejemplos reales.

La parte interesante. Lo que tenemos aquí es un componente Sparkline. Puedes ver solo 25 líneas de código. Así que es muy simple. No hay mucho pasando aquí. ¿Y qué está pasando aquí? Básicamente estamos creando una escala lineal. Le estamos dando el dominio, que en este caso son todos nuestros años. Nota que estamos usando la función extent. Así que básicamente le estamos dando un array con nuestro año mínimo y año máximo. Y como rango, lo que va a convertir nuestro valor en, le estamos dando la posición X, como el ancho de nuestro SVG en este caso. Hacemos lo mismo exactamente con nuestros valores Y. Esta vez mapeamos las ventas en nuestra posición de altura. Nota que la dirección es diferente entre el ancho y la altura, porque como dijimos, como cuanto más alto es el valor Y, significa que más bajo debería ser nuestro valor, porque queremos que esté en la parte inferior de la pantalla y no en la parte superior. Ahora tomamos esas dos funciones de escala, las usamos juntas para mapear todos nuestros puntos de datos a posiciones X e Y, y simplemente tomamos eso, lo pegamos en nuestro polilínea que vimos antes, y básicamente eso es todo. Tenemos un Sparkline. Un poco de estilo, pero nada más que eso. Ahora hagamos algo más con él.

Agreguemos marcadores, por ejemplo, ya tenemos los puntos. Todo lo que tenemos que hacer es recorrer nuestro array de puntos nuevamente y esta vez dibujar un círculo en cada lugar donde tengamos, en cada lugar donde queramos representar el marcador, y eso es todo. Añadimos otra característica a nuestro Sparkline. Continuemos.

En este ejemplo, como puedes ver, primero que nada, estamos usando style components, porque SVG soporta CSS, como dijimos, puedes simplemente darle un nombre de clase. En este ejemplo, estoy usando style component, pero puedes usar lo que quieras. Puedes escribir CSS simple, puedes usar modelos CSS, lo que prefieras.

Nota que style component no tiene absolutamente ningún problema trabajando con elementos SVG. Puedes simplemente decirles que estás trabajando con un círculo y luego simplemente darle un CSS. Más que eso, puedo estilizar cualquier cosa con CSS, incluyendo cosas como el radio o si fuera una línea, como valores X, valores Y, cosas como esas, porque técnicamente esos son valores visuales. Todo en una forma es un valor visual.

Y también podemos añadir transiciones a ello, incluyendo añadir transiciones al radio en sí mismo. Y te mostraré un ejemplo, y puedes ver que así de simple, añadimos un poco de interactividad a nuestro gráfico. Y todo esto no es nada nuevo. Cosas a las que ya estás acostumbrado a trabajar cuando trabajas con HTML. Así que realmente se trata de poder leer esta sintaxis SVG que, como dijimos, es muy minimalista, así que no es demasiado, y podrás hacer este tipo de cosas tú mismo.

Matt, veamos que el ratón no se suponía que estuviera aquí, pero el punto principal de este ejemplo es básicamente que funciona con eventos y todo lo que tenemos en el DOM bastante bien. Como, podemos simplemente tomar una biblioteca de tooltips como Teepee. Lo único que tuve que hacer para que funcionara es incluir los archivos CSS, así que tendremos algo de estilo para los tooltips. Y luego simplemente funciona automáticamente porque se conecta a los eventos regulares del DOM a los que estamos acostumbrados. Aún más que eso, en este ejemplo específico, simplemente al poner Teepee, en realidad obtuve su soporte de accesibilidad de inmediato. No tuve que hacer nada. Ellos automáticamente ponen las etiquetas ARIA por mí y obtengo accesibilidad para mi gráfico SVG sin mover un dedo.

Así que como puedes ver, lo siento. Así que como puedes ver, es muy fácil usar SVG y es muy fácil integrarlo con todo lo demás, así que realmente no necesitas aprender cosas nuevas. No es realmente un nuevo stack que necesitas adoptar. Realmente se trata de estar familiarizado con estos elementos específicos y entender los pequeños trucos que necesitas. Pero como puedes ver, no hay mucho trabajo pesado aquí. Ahora, veamos el ejemplo del gráfico de pastel. Sí, quité el tooltip. Sí. Ahora, veamos el ejemplo del gráfico de pastel.

Así que veamos la parte lógica. Primero, determinamos cuál es nuestro radio simplemente observando el mínimo del ancho y la altura y dividiéndolo por la mitad para llenar tanto espacio como sea posible. Ahora, creamos una escala ordinal esta vez. Entonces, lo que sucede aquí es que básicamente estamos mapeando nuestras categorías en los colores. A diferencia de la escala lineal, estamos mapeando cada categoría en un color específico y el punto principal de esta función es que se asegurará de que obtengan el mismo color cada vez para una categoría. Nuevamente, todas estas herramientas específicas de D3 que he usado, podrías haberlas implementado tú mismo. Es un poco más fácil aquí en el ejemplo simplemente mostrar algo que está funcionando. Pero esas son funciones que no deberían tomar más de 10 líneas de código.

Luego vamos a usar del paquete D3 shape la función pie. Eso básicamente va a crear un mapeador. En este caso específico, estamos definiendo que no queremos tener ordenamiento porque ordena los valores por defecto. Es por eso que puedes ver que el gráfico de pastel es agradable, como, y no está igualmente dividido como cada valor está en su propio lugar. Y le decimos qué valor realmente mirar para dividir nuestros datos en arcos, básicamente. Y luego necesitamos crear nuestra función de arco para realmente generar la ruta para el arco. Le damos el radio interno de cero y el radio externo de nuestro gráfico de pastel. Y básicamente, eso es todo. Terminamos con nuestro gráfico de pastel. Puedes ver que estamos poniendo nuestros datos en esa función pie, luego simplemente mapeándolos y tomando el objeto de datos que la función de mapeo nos proporcionó y simplemente pasándolo a la función de arco. Y básicamente, terminamos. Tenemos nuestro gráfico de pastel.

Una cosa que voy a decir aquí sobre el transform. Vamos a ver ejemplos. En ejemplos futuros, vamos a ver dónde usamos el view box, como dijimos, para reposicionar nuestro punto de origen. Aquí, usamos otro truco para hacer básicamente lo mismo porque, como has visto aquí, no hay un valor real de X e Y, así que ¿cómo sabe dónde terminar nuestro círculo? Básicamente, lo renderiza en el punto de origen, lo que significa que el centro de nuestro gráfico de pastel está realmente en la esquina superior izquierda. Así que para empujarlo de nuevo al centro de nuestro lienzo, nuestro view box, estamos usando transform translate solo para empujarlo al centro de la pantalla. Si queremos tomar este ejemplo y simplemente convertirlo en un gráfico de dona, todo lo que tenemos que hacer es básicamente cambiar el radio interno de nuestra función de arco. Hará todo por nosotros. Nada más que eso. Ahora, veamos otro tipo de interactividad que podemos añadir. Así que en este ejemplo, lo que hice es que tenemos un grupo de arcos que toma una variable CSS.

Nuevamente, puedes usar lo que ya estás familiarizado trabajando con DOM regular. Y estamos estableciendo un radio como una variable CSS llamada arc radius, y dentro de nuestro grupo tenemos una cosa nueva, que es un clip path. Eso es para enmascarar si estás familiarizado con la técnica. Y dentro de nuestro clip path, estamos poniendo solo un círculo sin definiciones en absoluto, y vamos a adjuntar a nuestro path el clip path, usando el ID para decirle que este es tu clip path. Deberías enmascarar de acuerdo a eso. ¿Y qué hace realmente el círculo? Bueno, nuevamente, podemos simplemente estilizarlo con CSS. Así que damos las propiedades a nuestro grupo, y veremos en un minuto por qué. Estamos estilizando nuestro círculo. Básicamente estamos estableciendo nuestro radio al 90% del valor real del radio. Y estamos estableciendo una transición, nuevamente, en el radio, con un bonito cubic Bezier para una animación y suavizado agradables. Y luego le decimos que al pasar el ratón sobre cualquier componente, que en este caso específico va a ser el path, porque el clip path no es realmente un componente visible. Si pasamos el ratón sobre un elemento, toma el círculo y agranda su radio a su valor completo. Y lo que obtenemos de eso es una animación muy elegante y muy simple que no tuvimos que trabajar mucho para lograr simplemente usando un poco de CSS de las maneras que ya conocemos.

Ahora veamos un último tipo de ejemplo de visualización de datos. Veamos los medidores. Así que estos son los tipos de componentes más complicados. Pero nuevamente, aún puedes ver que estamos hablando de 31 líneas de código que vamos a revisar, como, en un minuto. Entonces, ¿qué tenemos aquí? Nuevamente, escala lineal en todo tipo de visualización de datos. Probablemente vamos a tener algún tipo de función de escalado. Esta vez queremos escalar entre nuestro dominio, que es un valor entre cero y 100, a un rango que es un ángulo entre menos 90 grados a 90 grados. Eso es para la aguja del medidor. Aquí puedes ver que estamos usando realmente el view box. Y en lugar de renderizar desde la posición X cero Y cero, estamos poniendo, estamos comenzando a renderizar desde menos 100, menos 100. Y lo que básicamente eso significa es, puedo verlo, nuestro punto de origen realmente se encuentra en el punto central de la base de nuestra aguja. Así que eso significa que no necesitamos ningún cálculo especial para determinar el par de puntos de origen, sea lo que sea que estemos renderizando. Podemos simplemente asumir que todo se renderiza de acuerdo a nuestro punto de origen, y construir las cosas de acuerdo a eso. Así que, por ejemplo, nuestras marcas, las líneas grises que tenemos aquí, puedes ver, son básicamente exactamente la misma línea que simplemente sube exactamente por encima de la aguja. Pero luego estamos mapeando sobre los ciertos grados que queremos darle y dando a cada una de esas líneas un ángulo diferente para obtener el efecto de las marcas en todos nuestros arcos. Tenemos un arco. Podríamos haber usado la función de arco de D3 si no estuviéramos cómodos usando un path, o simplemente dárselo a JGPT, también sabríamos qué hacer con él.

Y tenemos nuestra aguja, que es lo único que realmente está siendo animado y dirigido aquí. Tenemos un círculo en el medio, y encima de eso ponemos un triángulo para obtener este bonito efecto visual. Si tienes un diseñador, probablemente obtendrás cosas mucho más bonitas de ello, pero yo no tenía un diseñador, pero es increíble las cosas que puedes hacer simplemente envolviendo un poco de código por ti mismo.

Veamos otro ejemplo, que es básicamente lo mismo pero un poco diferente. Así que otro tipo de medidor, esta vez estamos usando el más convencional, como, medidor de referencia. Nuevamente, tenemos la escala de ángulo. Esta vez decidimos tomar el dominio de las propiedades para que el usuario pueda definir cuál es el inicio y el final del dominio, y lo estamos convirtiendo en un ángulo. Esta vez en lugar de grados, estamos usando radianes, pero básicamente es lo mismo, entre menos 90 grados a 90 grados, solo en radianes.

Estamos construyendo nuestro generador de arcos. Nota que estamos dando aquí tres propiedades aquí, el radio interno, el radio externo, y el ángulo de inicio. Básicamente, lo único que necesita ahora para generar un arco es el ángulo final, que falta. Y luego tenemos nuestros componentes reales. Así que primero que todo, puedes ver en el view box, lo cual es interesante, estamos básicamente dibujando un cuadrado de dos píxeles. Eso es porque realmente no nos importa el tamaño de lo que estamos dibujando. Básicamente estamos solo dibujando el arco.

Así que lo estamos definiendo como entre menos 1, menos 1, con un ancho de 2 y una altura de 1, y luego definimos un gradiente que básicamente va entre menos 1 píxel a 1 píxel, y escalamos eso dando al componente en sí un ancho, así que todo se va a escalar proporcionalmente. Tomamos eso, básicamente creamos un arco gris para el relleno, para el fondo, y otro para el relleno, que utiliza nuestro gradiente. Y puedes ver que también utiliza nuestra escala lineal con el valor proporcionado por el usuario, y eso es básicamente todo.

Nota que estamos poniendo los valores de texto fuera de SVG, porque SVG maneja el texto de manera un poco diferente. Técnicamente, en este caso, podríamos haber usado el elemento de texto de SVG, pero ¿por qué complicarnos las cosas? Podemos simplemente usar lo que ya conocemos. Si hay algunas partes que son más fáciles para ti de hacer en HTML, simplemente hazlo en HTML y fusiona los dos dentro de tus componentes. Nada te lo impide.

Así que cuando este tipo de enfoque no funciona tan bien, cuando la simplicidad no es suficiente, cuando el rendimiento o la escalabilidad comienzan a ser un problema real, ya sea por tener docenas de gráficos en una sola página o tener un solo gráfico con millones o decenas de millones de puntos de datos, entonces probablemente el enfoque SVG no será suficiente para ti. Si la interacción comienza a volverse realmente, realmente compleja, cosas como anotaciones o zoom o incluso etiquetado inteligente para datos desconocidos, entonces probablemente solo ve por una biblioteca. Si tienes múltiples equipos trabajando en ello y cada uno necesita otra cosa, lo cual básicamente viene junto con el otro punto, se convierte en un producto por sí mismo.

Necesitas permitir mucha más configurabilidad, entonces ese es un punto donde también podría haber simplemente pasado a una biblioteca. Y si ese es el caso y te encuentras necesitando más poder, entonces sugeriría que si necesitas el rendimiento, la escalabilidad, la escala, consideres considerarnos. Pero diría o cualquier otra biblioteca que se ajuste a tus necesidades. Básicamente somos muy escalables, muy orientados a empresas así que si eso funciona para ti, entonces danos una oportunidad. Y pensamientos finales, el punto de esta charla básicamente solo quería mostrarte muy, muy rápidamente cómo React es en realidad la visualización de datos es una gran manera de comenzar a jugar con SVG y React y familiarizarte con ello.

Hay mucho que puedes hacer sin llegar a una biblioteca, y es realmente más eficiente y más fácil a largo plazo porque no tienes que aprender cosas nuevas, no tienes que hacer investigación excesiva, no tienes que exponerte a múltiples opciones, y no tienes que pasar por bucles para soportar abstracciones que básicamente están destinadas a soportar múltiples casos de uso que simplemente no te afectan. Puedes simplemente construir cosas tan simples como quieras que soporten tu caso de uso específico y nada más y mantenerlo tan eficiente y ligero como sea posible.

Muchas gracias. Todas estas diapositivas fueron creadas en React. Todo el código fue en vivo. El QR te enviaría al repositorio en sí para que puedas descargarlo jugar con él. Gracias. Increíble. Puedes dejar tu laptop allí. Tengo un sombrero de fiesta para ti. Así que la representación basada en SVG versus canvas, las ventajas y los pros y contras, ventajas de rendimiento en alto volumen de datos. Así que como dije, creo que desde un punto de vista de rendimiento probablemente siempre querrás ir con canvas porque simplemente te da el control que te falta con cualquier otra cosa. Pero la desventaja de esto es que te obligará a implementar todo por ti mismo. Quieres tener eventos en un camino específico de canvas, tienes que crear algo para encargarte de ello. Quieres tener accesibilidad, tienes que crear algo tú mismo para encargarte de ello. Así que no lo usaría a menos que realmente llegues a un punto donde el rendimiento sea un problema tan grande.

Pero si lo es, entonces, sí, canvas es el camino a seguir. Sí. ¿Existe una alternativa sin cabeza al D3 axis? Es tan conveniente pero desafortunadamente modifica el DOM. Sí. Así que en realidad, ven a hablar conmigo después cuando tenga mi laptop. Tengo una versión de D3 axis escrita en React que di en otra charla que tuve sobre un tema similar. Así que puedo mostrártela y dártela con gusto. Compartirla contigo.

¿Cómo se comparan los AG charts con otras bibliotecas como recharts, MUI X charts, cuáles son los pros y los contras en tu opinión? Así que si recuerdo correctamente, esta biblioteca de gráficos específica es toda basada en canvas. Así que por un lado desde un punto de vista de React son mucho más idiomáticas como si realmente fueran componentes que colocas en su lugar. Y ese es el beneficio de ser SVG porque en realidad está basado en DOM. Pero también significa que nuevamente, como es un problema de rendimiento. Así que si realmente vas a una escala muy, muy grande, va a causar problemas. Gracias.

Hagamos este. ¿De dónde viene la animación basada en el tiempo en los ejemplos de gauge en el código? Así que ven a hablar conmigo después de esto. Tenía una diapositiva adicional que quería compartir en caso de que tuviera tiempo y no lo tuve. Pero en realidad estaba en la última diapositiva. También puedes ir a revisar el código. Es exactamente sobre eso. Genial. Hagamos uno más aquí. ¿Es D3 tree shakeable? Sí. Es muy agitable. Nuevamente, depende de lo que tomes porque algunos de estos paquetes en realidad dependen de otros paquetes. Así que los vas a llevar contigo. Pero en su mayoría está construido de manera muy, muy eficiente y recomiendo usarlo si quieres jugar con utilidades para crear tus propios SVGs. Increíble. Muchas gracias, Ito.