Visualización de Datos en React y Next.js

¿Qué hace Visualización de Datos en React y Next.js?

Resumen

Usa esta habilidad cuando la visualización esté dentro de una superficie de producto React o Next.js. El enfoque no es solo el renderizado del gráfico. El enfoque es la propiedad del componente, la seguridad de la hidratación, los límites entre cliente y servidor, la estrategia de paquetes y la integración limpia entre React y cualquier capa de visualización que realmente esté dibujando las marcas.

Suposición por defecto: React debería ser propietario de la estructura, el diseño y el estado de la aplicación, mientras que la capa de visualización es propietaria de las escalas, la geometría y el renderizado imperativo de alcance limitado.

Si la solicitud principal se trata de pruebas de captura de pantalla, regresión visual, datos de gráficos simulados o estrategia de cobertura E2E, dirígete primero a ../testing-data-visualizations/SKILL.md y vuelve a esta habilidad solo para los detalles de implementación específicos de React o Next.js.

Elige Esta Habilidad Cuando

• el usuario está construyendo gráficos dentro de componentes React
• la aplicación usa Next.js, el App Router o límites de componentes de servidor y cliente
• el gráfico usa D3, Canvas, SVG, Vega-Lite, Plot, WebGL, deck.gl, PixiJS, Sigma.js o Three.js dentro de una superficie React
• la superficie usa Mermaid, React Flow, Cytoscape.js, Sprotty, JointJS, GoJS, ELK, Dagre, Graphviz/WASM, D2 u otro renderizador de diagramas tipo UML
• la hidratación, SSR, carga dinámica o APIs solo del navegador afectan la implementación
• el tamaño del paquete, la carga a nivel de ruta y la integración del producto son importantes
• la página es una historia visual editorial que combina diseño React, estados de desplazamiento, paralaje, gráficos fijos, activos generados, capas SVG/Canvas/D3/WebGL/Three.js, partículas, animación de flujo y alternativas de accesibilidad

Patrón de Trabajo

1. Decide qué partes son seguras para el servidor y cuáles deben ejecutarse en el navegador.
2. Mantén la carga de datos, la transformación, la configuración del gráfico y las preocupaciones de la capa de renderizado separadas.
3. Estima cuántas instancias de gráfico pueden ser visibles en una página a la vez y si el trabajo costoso se puede compartir entre ellas.
4. Deja que React sea propietario del diseño, los controles, el estado de enrutamiento, las funciones de persistencia y los resúmenes de estado activo.
5. Deja que D3, Canvas, las inserciones de Vega-Lite, Plot, las bibliotecas WebGL o Three.js sean propietarios del renderizado a nivel de marca.
6. Modela el estado de la vista respaldado por URL explícitamente antes de conectar los controles: filtros, rango, métrica, comparación, entidad seleccionada, pestaña activa, límites del mapa, zoom, objetivo de la cámara y ruta de profundización.
7. Usa localStorage solo para preferencias personales pequeñas; usa IndexedDB o almacenamiento remoto para vistas guardadas más grandes, borradores, fragmentos en caché, anotaciones personalizadas o espacios de trabajo compartidos/multidispositivo. El estado de URL entrante debe anular los valores predeterminados persistidos.
8. Usa carga dinámica o límites solo para el cliente intencionalmente para el código de visualización solo del navegador.
9. Si el gráfico es propietario de las interacciones de rueda, pellizco o arrastre, haz explícito el contrato del navegador. Usa un listener nativo no pasivo o un hook de biblioteca cuando se deba cancelar el desplazamiento predeterminado, y no asumas que onWheel a nivel de framework es suficiente.
10. Para superficies editoriales o de infografía, mantén el título de la idea, el modo de artefacto, el subtítulo, el plan de anotación, la nota de la fuente, el diseño de pantalla grande, el diseño vertical para móviles, el diseño horizontal opcional para móviles y la capa de renderizado del gráfico como responsabilidades explícitas del componente. Usa ../../references/foundations/mobile-first-responsive-visualization.md para decisiones táctiles, de teclado, viewport visual, conexión intermitente y capacidad del dispositivo.
11. Para scrollytelling o paralaje, usa ../scrollytelling-and-parallax-data-visualization/SKILL.md para el contrato de la historia. Modela las escenas como estado tipificado en lugar de matemáticas de desplazamiento ad hoc. Cada escena debe definir capas visibles, texto de anotación, activos multimedia, estado de la cámara o transformación, rango de activación/progreso, fotograma clave estático y alternativa de movimiento reducido.
12. Para trabajo editorial avanzado, informes, decks, imágenes generadas, animación o integración en páginas existentes, usa ../../references/foundations/meaning-preserving-visual-design-workflow.md y ../../references/foundations/mobile-first-responsive-visualization.md antes de la implementación. Aplica el flujo de trabajo compartido para imágenes conceptuales, variantes de pantalla grande/móvil, aprobación o iteración, y el contrato de diseño semántico vinculante que React debe implementar.
13. Para imágenes generadas o ilustraciones, mantén los activos en rutas públicas deterministas o módulos importables, y mantén las etiquetas/superposiciones de datos en capas editables de propiedad de React.
14. Para WebGL, mantén el ciclo de vida del renderizador, el cambio de tamaño, la pérdida de contexto, la eliminación y los bucles de animación dentro de un límite de componente estrecho solo para el cliente. React debe pasar versiones de datos y props, no mutar objetos de GPU en todo el árbol.
15. Para diagramas UML, ERD, de dependencias, máquinas de estado, flujos o arquitectura interactivos, usa ../uml-and-software-architecture-visualization/SKILL.md primero; React debe ser propietario del estado de la aplicación, paneles, controles, enrutamiento y persistencia, mientras que la capa de diagramas es propietaria de los detalles de diseño/renderizado.
16. Para espacios de trabajo operativos, usa ../../references/foundations/operational-visualization-workspaces.md antes de la descomposición de componentes. React debe ser propietario del estado del shell, las barras de comandos, los cajones, los rieles, los resúmenes activos, el estado de URL y la sincronización del inspector, mientras que la capa de visualización es propietaria de la geometría, el diseño y la selección.

Guía de Next.js

• Prefiere Componentes de Servidor para la obtención de datos, contenido de encuadre y diseño cuando el gráfico no necesite APIs del navegador allí.
• Usa Componentes de Cliente para gráficos interactivos, medición de contenedores, eventos de puntero o bibliotecas solo del navegador.
• Usa importaciones dinámicas cuando el tiempo de ejecución del gráfico no sea necesario en la ruta inicial o deba evitar SSR.
• Mantén los activos del gráfico y las rutas de exportación deterministas cuando la misma visualización deba aparecer en informes o documentos.
• Usa parámetros de ruta o parámetros de búsqueda como la entrada canónica para el estado de vista compartible cuando sea posible. Analízalos y normalízalos antes de inicializar el estado del gráfico solo del cliente para que las vistas vinculadas no parpadeen a través de valores predeterminados no relacionados.
• Usa navegación de tipo reemplazo para cambios transitorios de alta frecuencia y navegación de tipo push para selecciones confirmadas, filtros aplicados, pasos de profundización y transiciones de vistas guardadas.
• Para páginas de tipo publicación, diseña las composiciones de escritorio y móvil como estados hermanos, no como un solo SVG comprimido.
• En móvil, mantén la visualización principal primero o inmediatamente disponible. Coloca filtros secundarios, inspectores y configuraciones en paneles colapsables, cajones, hojas inferiores o controles en línea que preserven los resúmenes de estado activo y devuelvan el foco/desplazamiento al gráfico después de Aplicar, Cancelar, Restablecer o cerrar.
• Para espacios de trabajo densos, prefiere un riel de control/esquema de escritorio, un viewport central y un riel de inspector; usa una barra de comandos móvil con paneles de esquema, filtro y detalles en lugar de apilar los rieles de escritorio sobre la visualización.
• Usa window.visualViewport o el manejo de cambio de tamaño equivalente para controles con uso intensivo del teclado para que los flujos de búsqueda, filtro y anotación no oculten la única acción crítica o oscurezcan permanentemente la visualización.
• Usa Eventos de Puntero para interacciones táctiles/lápiz/ratón personalizadas cuando sea posible, con touch-action explícito, áreas de impacto agrandadas, alternativas de arrastre, controles de restablecimiento y sin evidencia solo de hover.
• Usa IntersectionObserver, Scrollama, Motion useScroll, ScrollTrigger de GSAP, líneas de tiempo CSS de desplazamiento o controles de paso explícitos con moderación y de forma accesible. La vista predeterminada aún debe comunicar la afirmación.
• Prefiere el desplazamiento nativo y position: sticky para secciones de historia fijas. Evita el secuestro de desplazamiento y mantén el comportamiento de la rueda, el tacto, la barra de desplazamiento y el teclado predecible.
• Usa prefers-reduced-motion para cambiar historias animadas a diseños de estado final, fotograma clave o escalonados.
• Carga de forma diferida WebGL pesado, 3D, video o activos derivados de la generación de imágenes sin causar cambios de diseño. Reserva las relaciones de aspecto y los carriles de etiquetas.
• Pausa los bucles de animación de WebGL cuando esté fuera de pantalla, oculto por la ruta, con pestañas alejadas o cuando el movimiento reducido esté activo.

Expectativas de Salida

• Nombra el límite de propiedad entre React y la capa de visualización.
• Para trabajo explicativo, nombra el título de la idea, el modo de artefacto, la capa de anotación, la estrategia de etiquetado directo y la ruta de lectura móvil.
• Para trabajo móvil, nombra el diseño vertical para móviles, si el horizontal es compatible, cómo los controles evitan cubrir el gráfico, cómo se comporta el teclado en pantalla y cómo las interacciones táctiles/de pellizco se asignan a selección, zoom, panorámica y restablecimiento.
• Para espacios de trabajo operativos, nombra los componentes del shell, el estado seleccionado predeterminado, el comportamiento sincronizado de esquema/búsqueda/filtro/inspector, la regla de selección clara de superficie vacía, los paneles de comandos móviles y el estado del espacio de trabajo respaldado por URL.
• Para trabajo dirigido artísticamente, nombra los activos generados o ilustrados, los estados de desplazamiento/animación, el comportamiento de movimiento reducido y la alternativa de fotograma fijo.
• Para superficies conceptuales, usa el flujo de trabajo de diseño compartido para imágenes conceptuales, estado de aprobación, referencias aprobadas, contrato de diseño semántico vinculante, elementos bloqueados y flexibles, capas de datos de propiedad de React, capas de propiedad del renderizador, continuación móvil/horizontal y desviaciones aprobadas.
• Para scrollytelling o paralaje, nombra el controlador de desplazamiento, el contrato de la escena, los rangos de activación/progreso, el diseño fijo, la alternativa móvil y los fotogramas clave estáticos.
• Para WebGL o partículas, nombra el renderizador, el límite de datos a búfer, el reloj de animación, la ruta de limpieza/eliminación, el comportamiento de movimiento reducido y la alternativa estática.
• Señala explícitamente cualquier código solo para el cliente o sensible a la hidratación.
• Señala cualquier interacción que deba suprimir el desplazamiento nativo del navegador o el encadenamiento de desplazamiento.
• Señala qué estado está respaldado por URL, persistido localmente, respaldado por IndexedDB, guardado de forma remota o intencionalmente efímero.
• Señala el comportamiento de copia de enlace, vista guardada, restablecimiento, actualización, retroceso/avance y estado de URL no válido.
• Señala qué áreas de control o detalles están colapsadas de forma predeterminada o son cerrables, y cómo el estado activo permanece visible.
• Señala el comportamiento de la conexión de datos en vivo en móvil: estado obsoleto, reconexión, datos sin conexión/parciales, modo de ancho de banda reducido y estrategia de alerta/notificación cuando sea relevante.
• Indica si el gráfico es adecuado para SSR, renderizado solo para el cliente o carga dinámica.
• Para trabajo nuevo, incluye una sección de diseño técnico que cubra el recuento de instancias simultáneas, el rendimiento por instancia versus a nivel de página y las implicaciones de mantenimiento del patrón de integración elegido.
• Mantén el tamaño del paquete, las necesidades de exportación y la accesibilidad visibles en el diseño.

Referencias

• Teoría compartida:
  • ../../references/foundations/editorial-infographic-system.md
  • ../../references/foundations/art-directed-interactive-visual-stories.md
  • ../../references/foundations/meaning-preserving-visual-design-workflow.md
  • ../../references/foundations/task-abstraction-and-chart-selection.md
  • ../../references/foundations/perception-color-and-encoding.md
  • ../../references/foundations/shareable-state-and-persistence.md
  • ../../references/foundations/mobile-first-responsive-visualization.md
  • ../../references/foundations/operational-visualization-workspaces.md
  • ../../references/foundations/implementation-design-and-tradeoffs.md
• Referencias de habilidades:
  • ./references/react-component-patterns.md
  • ./references/d3-canvas-and-grammar-in-react.md
  • ./references/nextjs-client-server-boundaries.md
  • ./references/lazy-loading-ssr-and-bundle-strategy.md
  • ../uml-and-software-architecture-visualization/SKILL.md
  • ../scrollytelling-and-parallax-data-visualization/SKILL.md
  • ../testing-data-visualizations/SKILL.md

Prompts Representativos

• "¿Cómo debería integrar este gráfico en una aplicación React?"
• "¿Cuál es el patrón React correcto para D3, Canvas o Vega-Lite aquí?"
• "Haz que esta visualización funcione limpiamente en Next.js App Router."
• "Construye una historia de scrollytelling React con gráficos fijos y alternativa de movimiento reducido."
• "¿Debería este gráfico ser un Componente de Cliente o usar una importación dinámica?"
• "Ayúdame a evitar problemas de hidratación y SSR con esta visualización."
• "Construye un diagrama UML, ERD, de flujo, máquina de estado, dependencias o arquitectura interactivo en React."