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

Rate this content
Bookmark

Si estás construyendo un tablero de control, una plataforma de análisis o cualquier aplicación web donde necesites dar a tus usuarios una visión de sus datos, necesitas hermosas, personalizadas, visualizaciones de datos interactivas en tu aplicación React. Pero construir visualizaciones a mano con una biblioteca de bajo nivel como D3 puede ser un gran dolor de cabeza, que implica reinventar la rueda. En esta charla, veremos cómo el desarrollo de visualización de datos puede ser mucho más fácil gracias a herramientas como Plot, una biblioteca de dataviz de alto nivel para una rápida y fácil creación de gráficos, y Observable, un entorno de prototipado de dataviz reactivo, ambos del creador de D3. A través de ejemplos de codificación en vivo, exploraremos cómo los refs de React nos permiten delegar la manipulación del DOM para nuestras visualizaciones de datos, y cómo la funcionalidad de incrustación de Observable nos permite reutilizar fácilmente las visualizaciones construidas por la comunidad para nuestros propios datos y casos de uso. Al final de esta charla, sabremos cómo obtener una hermosa, personalizada, visualización de datos interactiva en nuestras aplicaciones con una fracción del tiempo y esfuerzo!

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

FAQ

Observable Plot es una biblioteca de DataVis de código abierto que permite crear rápidamente gráficos significativos, ofreciendo flexibilidad para personalizar y construir el tipo de visualización necesario. Se basa en una API simple pero poderosa, empleando una gramática de gráficos para sistematizar la creación de gráficos de cualquier tipo.

Observable Plot fue creado por los mismos desarrolladores que la biblioteca D3 y utiliza D3 como base para la creación de visualizaciones basadas en SVG. Esto le permite heredar y aprovechar la década de experiencia en optimización y funcionalidades de D3.

La gramática de gráficos de Observable Plot sistematiza la creación de gráficos, permitiendo describir y combinar elementos visuales básicos como marcas y escalas para construir una amplia variedad de gráficos. Esto facilita la creación de visualizaciones personalizadas sin requerir un conocimiento profundo en cada aspecto técnico del diseño gráfico.

Para integrar Observable Plot en una aplicación React, puedes utilizar hooks como useRef y useEffect para manejar la manipulación del DOM que realiza Plot, permitiendo que React delegue esta tarea y se encargue de actualizar la visualización cuando sea necesario. Esto mantiene una integración limpia y eficiente entre React y Observable Plot.

Sí, Observable Plot permite una gran personalización de las visualizaciones. Ofrece la posibilidad de ajustar las propiedades del gráfico, como los ejes, las marcas, y la inclusión de elementos como cuadrículas o líneas de referencia. Además, permite modificar el orden y la apariencia de los elementos gráficos según las necesidades del usuario.

Observable Plot, al ser una herramienta de visualización de datos, tiene la capacidad de ser adaptado para mejorar la accesibilidad, aunque es un área en constante desarrollo. La comunidad puede contribuir en GitHub para mejorar aspectos de accesibilidad, asegurando que las visualizaciones sean útiles para un rango más amplio de usuarios.

Sí, Observable Plot permite la exportación de visualizaciones a través de la inserción de un fragmento de código o un iFrame, facilitando la integración de las visualizaciones en otras aplicaciones o sitios web, y permitiendo una rápida prototipación y colaboración.

Anjana Vakil
Anjana Vakil
27 min
22 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla trata sobre la visualización interactiva de datos en React utilizando la biblioteca Plot. Plot es una biblioteca de alto nivel que simplifica el proceso de visualización de datos al proporcionar conceptos clave y valores predeterminados para las decisiones de diseño. Se puede integrar con React utilizando hooks como useRef y useEffect. Plot permite la personalización y admite características como la clasificación y la adición de marcas adicionales. La charla también discute las preocupaciones de accesibilidad, el soporte SSR y compara Plot con otras bibliotecas como D3 y Vega-Lite.

1. Introducción a la visualización de datos interactiva en React

Short description:

Hola, amigos. ¿Cómo les va? Soy Anjana Vakil, una defensora de los desarrolladores en Observable. Hoy, hablaré sobre la visualización de datos interactiva en React. Visualizar datos puede ayudar a descubrir significado, patrones e insights. La visualización de datos es valiosa para las aplicaciones web, los paneles de control y los insights del usuario. Es un campo amplio, pero podemos construir visualizaciones efectivas sin aprender todo. Exploraremos cómo hacer una aplicación de visualización de datos reactiva en React usando la trama Observable.

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.

2. Introducción a la biblioteca Plot

Short description:

Plot es una biblioteca de alto nivel creada por la misma persona que creó D3. Te permite crear visualizaciones significativas y personalizables rápidamente. Plot emplea una gramática de gráficos, una forma de describir y sistematizar la creación de gráficos. Proporciona conceptos clave como marcas, escalas, transformaciones y facetas para crear gráficos poderosos y complejos. Los valores predeterminados de la biblioteca toman decisiones de diseño por ti, simplificando el proceso de visualización de datos.

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.

QnA

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn