Efficient Data Visualisation with React and SVG

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Vea hasta dónde pueden llevarlo los gráficos simples en React y SVG, y dónde comienzan a aparecer sus límites. Exploraremos el punto óptimo de usar el modelo declarativo de React con elementos SVG simples y un toque de D3 para funciones de utilidad como escalado y generación de rutas, antes de alcanzar los límites de rendimiento y complejidad que requieren algo más robusto.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

 Ido Moshe
Ido Moshe
27 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Ido, un desarrollador full stack, discute los beneficios de construir componentes de visualización de datos desde cero usando React, SVG y D3 mínimo. Comprender formas básicas de SVG, agrupar elementos y la naturaleza declarativa de SVG. Explorar la compatibilidad de SVG con CSS, eventos DOM y características del navegador. Destacar las dificultades de integrar D3 con React y separar las utilidades de transformación de datos. Utilizar bibliotecas D3 para la manipulación de datos y crear componentes Sparkline. Mejorar componentes con marcadores, estilo CSS, interactividad, transiciones y gráficos de pastel. Utilizar CSS para animaciones en visualización de datos y visualización de indicadores con animación de aguja. Definir componentes SVG, interacciones y consideraciones para la integración DIY vs. biblioteca. Explorar el eje D3, gráficos AG y animación basada en el tiempo.

1. Beneficios de Construir Componentes de Visualización de Datos

Short description:

Ido, un desarrollador full stack, discute los beneficios de construir componentes de visualización de datos desde cero usando React, SVG y D3 mínimo. Al evitar bibliotecas pesadas, los desarrolladores obtienen control sobre la estructura, el estilo y la integración, reduciendo el peso del paquete y la sobrecarga cognitiva. Se enfatizan las soluciones personalizadas adaptadas a casos de uso específicos, destacando la eficiencia de los componentes autoconstruidos.

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.

2. Building Data Components with React and SVG

Short description:

Discutiendo la naturaleza minimalista de SVG para gráficos 2D y los beneficios de usar React y SVG con un toque de D3 para la visualización de datos. Entendiendo formas básicas de SVG como líneas, rectángulos, círculos, elipses, polilíneas, polígonos y rutas. Explorando elementos de grupo para el estilo, el cuadro de vista para la posición del sistema de coordenadas, y la naturaleza declarativa de SVG que se integra bien con React.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

SVGs para hacer destacar tu blog
React Summit Remote Edition 2021React Summit Remote Edition 2021
36 min
SVGs para hacer destacar tu blog
Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.
El Lenguaje de las Formas: Entendiendo el Elemento SVG Path
React Summit 2020React Summit 2020
32 min
El Lenguaje de las Formas: Entendiendo el Elemento SVG Path
This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
React Day Berlin 2023React Day Berlin 2023
7 min
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
Gráficos, como una Función del Estado / Gráfico = fn(estado)
React Summit Remote Edition 2021React Summit Remote Edition 2021
15 min
Gráficos, como una Función del Estado / Gráfico = fn(estado)
Anil Durman, engineer at the New York Times, discusses the role of graphics in the context of state. He highlights the work done by his team in helping people understand the news through new formats and pages. The team is hiring for various tech roles. By night, Anil is a creative coder exploring the intersection of creativity and code, and his latest project, Good Graphics, focuses on UI as a function of state, React components, and SVGs. He demonstrates how components can be updated based on state, allowing for declarative graphics. Anil also showcases how nested circles and grids can be used to create complex systems in React, enabling dynamic and reactive graphic designs.