Versión en EspañolES

Efficient Data Visualisation with React and SVG

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.

svg

Ido Moshe

27 min

13 Jun, 2025

Comments

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.

Available in English: Efficient Data Visualisation with React and SVG

Video transcription and chapters available for users with access.

Available in other languages:

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 2021

36 min

SVGs para hacer destacar tu blog

Elizabet Oliveira

Xata

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.

react svg react components

El Lenguaje de las Formas: Entendiendo el Elemento SVG Path

React Summit 2020

32 min

El Lenguaje de las Formas: Entendiendo el Elemento SVG Path

Monica Wojciechowska

Netguru

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.

svg

Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX

React Day Berlin 2023

7 min

Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX

Tiger Oakes

Senior engineer at Microsoft

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.

react svg iot fun demos

Gráficos, como una Función del Estado / Gráfico = fn(estado)

React Summit Remote Edition 2021

15 min

Gráficos, como una Función del Estado / Gráfico = fn(estado)

Romello Goodman

New York Times

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.

react svg