Visualisation de données pour React et Next.js

Que fait Visualisation de données pour React et Next.js ?

Vue d'ensemble

Utilisez cette compétence lorsque la visualisation vit à l'intérieur d'une surface produit React ou Next.js. L'accent n'est pas seulement mis sur le rendu des graphiques. L'accent est mis sur la propriété des composants, la sécurité de l'hydratation, les frontières client et serveur, la stratégie de bundle et l'intégration propre entre React et la couche de visualisation qui dessine réellement les marques.

Hypothèse par défaut : React doit posséder la structure, la mise en page et l'état de l'application, tandis que la couche de visualisation possède les échelles, la géométrie et le rendu impératif étroitement défini.

Si la demande principale concerne les tests de capture d'écran, la régression visuelle, les données de graphique simulées ou la stratégie de couverture E2E, orientez d'abord vers ../testing-data-visualizations/SKILL.md et revenez à cette compétence uniquement pour les détails d'implémentation spécifiques à React ou Next.js.

Choisissez cette compétence lorsque

• l'utilisateur crée des graphiques à l'intérieur de composants React
• l'application utilise Next.js, le App Router, ou les frontières entre composants serveur et client
• le graphique utilise D3, Canvas, SVG, Vega-Lite, Plot, WebGL, deck.gl, PixiJS, Sigma.js ou Three.js dans une surface React
• la surface utilise Mermaid, React Flow, Cytoscape.js, Sprotty, JointJS, GoJS, ELK, Dagre, Graphviz/WASM, D2 ou un autre moteur de rendu de diagramme de type UML
• l'hydratation, le SSR, le chargement dynamique ou les API réservées au navigateur affectent l'implémentation
• la taille du bundle, le chargement au niveau de la route et l'intégration du produit sont importants
• la page est une histoire visuelle éditoriale qui combine la mise en page React, les états de défilement, le parallaxe, les graphiques collants, les actifs générés, les couches SVG/Canvas/D3/WebGL/Three.js, les particules, l'animation de flux et les solutions de repli pour l'accessibilité

Schéma de travail

1. Décidez quelles parties sont sûres côté serveur et lesquelles doivent s'exécuter dans le navigateur.
2. Gardez le chargement des données, la transformation, la configuration du graphique et les préoccupations de la couche de rendu séparées.
3. Estimez combien d'instances de graphique peuvent être visibles sur une page à la fois et si un travail coûteux peut être partagé entre elles.
4. Laissez React posséder la mise en page, les contrôles, l'état de routage, les fonctionnalités de persistance et les résumés d'état actif.
5. Laissez D3, Canvas, les intégrations Vega-Lite, Plot, les bibliothèques WebGL ou Three.js posséder le rendu au niveau des marques.
6. Modélisez explicitement l'état de la vue soutenu par l'URL avant de câbler les contrôles : filtres, plage, métrique, comparaison, entité sélectionnée, onglet actif, limites de la carte, zoom, cible de la caméra et chemin d'exploration détaillé.
7. Utilisez localStorage uniquement pour les préférences personnelles minuscules ; utilisez IndexedDB ou le stockage distant pour les vues enregistrées plus grandes, les brouillons, les tranches mises en cache, les annotations personnalisées ou les espaces de travail partagés/multi-appareils. L'état de l'URL entrant doit remplacer les valeurs par défaut persistées.
8. Utilisez le chargement dynamique ou les limites réservées au client intentionnellement pour le code de visualisation réservé au navigateur.
9. Si le graphique possède les interactions de molette, de pincement ou de glissement, rendez le contrat du navigateur explicite. Utilisez un écouteur natif non passif ou un hook de bibliothèque lorsque le défilement par défaut doit être annulé, et ne supposez pas que onWheel au niveau du framework est suffisant.
10. Pour les surfaces éditoriales ou d'infographie, gardez le titre de l'aperçu, le mode artefact, le sous-titre, le plan d'annotation, la note source, la mise en page grand écran, la mise en page portrait mobile, la mise en page paysage mobile facultative et la couche de rendu du graphique en tant que responsabilités explicites des composants. Utilisez ../../references/foundations/mobile-first-responsive-visualization.md pour les décisions concernant le tactile, le clavier, la fenêtre visuelle, la connexion intermittente et les capacités de l'appareil.
11. Pour le scrollytelling ou le parallaxe, utilisez ../scrollytelling-and-parallax-data-visualization/SKILL.md pour le contrat de l'histoire. Modélisez les scènes comme un état typé plutôt que comme un calcul de défilement ad hoc. Chaque scène doit définir les couches visibles, le texte d'annotation, les actifs multimédias, l'état de la caméra ou de la transformation, la plage de déclenchement/progression, l'image clé statique et le repli en cas de mouvement réduit.
12. Pour les travaux éditoriaux avancés, les rapports, les présentations, les images générées, les animations ou l'intégration de pages existantes, utilisez ../../references/foundations/meaning-preserving-visual-design-workflow.md et ../../references/foundations/mobile-first-responsive-visualization.md avant l'implémentation. Appliquez le flux de travail partagé pour les images conceptuelles, les variantes grand écran/mobile, l'approbation ou l'itération, et le contrat de conception sémantique contraignant que React doit implémenter.
13. Pour les images générées ou les illustrations, conservez les actifs dans des chemins publics déterministes ou des modules importables, et gardez les étiquettes/les superpositions de données dans des couches modifiables appartenant à React.
14. Pour WebGL, gardez le cycle de vie du moteur de rendu, le redimensionnement, la perte de contexte, la suppression et les boucles d'animation à l'intérieur d'une limite de composant client étroite. React doit passer les versions de données et les props, et ne pas muter les objets GPU dans l'arborescence.
15. Pour les diagrammes UML interactifs, ERD, de dépendance, de machine à états, de flux ou d'architecture, utilisez d'abord ../uml-and-software-architecture-visualization/SKILL.md ; React doit posséder l'état de l'application, les panneaux, les contrôles, le routage et la persistance tandis que la couche de diagramme possède les détails de mise en page/rendu.
16. Pour les espaces de travail opérationnels, utilisez ../../references/foundations/operational-visualization-workspaces.md avant la décomposition des composants. React doit posséder l'état du shell, les barres de commandes, les tiroirs, les rails, les résumés actifs, l'état de l'URL et la synchronisation de l'inspecteur tandis que la couche de visualisation possède la géométrie, la mise en page et la sélection.

Conseils Next.js

• Préférez les composants serveur pour le chargement des données, le contenu de cadrage et la mise en page lorsque le graphique n'a pas besoin d'API navigateur à cet endroit.
• Utilisez les composants client pour les graphiques interactifs, le dimensionnement des conteneurs, les événements de pointeur ou les bibliothèques réservées au navigateur.
• Utilisez les imports dynamiques lorsque le runtime du graphique n'est pas nécessaire sur le chemin initial ou doit éviter le SSR.
• Gardez les actifs du graphique et les chemins d'exportation déterministes lorsque la même visualisation doit apparaître dans des rapports ou des documents.
• Utilisez les paramètres de route ou les paramètres de recherche comme entrée canonique pour l'état de vue partageable lorsque cela est possible. Analysez-les et normalisez-les avant d'initialiser l'état du graphique réservé au client afin que les vues liées ne scintillent pas à travers des valeurs par défaut non liées.
• Utilisez la navigation de type remplacement pour les changements transitoires à haute fréquence et la navigation de type poussée pour les sélections validées, les filtres appliqués, les étapes d'exploration détaillée et les transitions de vues enregistrées.
• Pour les pages de type publication, concevez les compositions de bureau et mobile comme des états frères, et non comme un seul SVG compressé.
• Sur mobile, gardez la visualisation principale en premier ou immédiatement disponible. Placez les filtres secondaires, les inspecteurs et les paramètres dans des panneaux repliables, des tiroirs, des feuilles inférieures ou des contrôles en ligne qui préservent les résumés d'état actif et ramènent le focus/défilement au graphique après Appliquer, Annuler, Réinitialiser ou fermer.
• Pour les espaces de travail denses, préférez un rail de plan/contrôle de bureau, une fenêtre d'affichage centrale et un rail d'inspecteur ; utilisez une barre de commandes mobile avec des panneaux de plan, de filtre et de détails au lieu d'empiler les rails de bureau au-dessus de la visualisation.
• Utilisez window.visualViewport ou une gestion de redimensionnement équivalente pour les contrôles lourds en clavier afin que les flux de recherche, de filtre et d'annotation ne masquent pas la seule action critique ou n'obscurcissent pas définitivement la visualisation.
• Utilisez les événements de pointeur pour les interactions tactiles/stylet/souris personnalisées lorsque cela est possible, avec touch-action explicite, des zones de contact agrandies, des alternatives de glissement, des contrôles de réinitialisation et aucune preuve de survol uniquement.
• Utilisez IntersectionObserver, Scrollama, Motion useScroll, GSAP ScrollTrigger, les timelines CSS de défilement ou les contrôles d'étape explicites avec parcimonie et de manière accessible. La vue par défaut doit toujours communiquer l'affirmation.
• Préférez le défilement natif et position: sticky pour les sections d'histoire épinglées. Évitez le détournement de défilement et gardez le comportement de la molette, du tactile, de la barre de défilement et du clavier prévisible.
• Utilisez prefers-reduced-motion pour basculer les histoires animées vers des mises en page d'état final, d'image clé ou par étapes.
• Chargez paresseusement les actifs lourds WebGL, 3D, vidéo ou dérivés de la génération d'images sans provoquer de changement de mise en page. Réservez les ratios d'aspect et les voies d'étiquetage.
• Mettez en pause les boucles d'animation WebGL lorsqu'elles sont hors écran, cachées par la route, mises en arrière-plan ou lorsque le mouvement réduit est actif.

Attentes en matière de résultats

• Nommez la frontière de propriété entre React et la couche de visualisation.
• Pour le travail explicatif, nommez le titre de l'aperçu, le mode artefact, la couche d'annotation, la stratégie d'étiquetage direct et le chemin de lecture mobile.
• Pour le travail mobile, nommez la mise en page portrait mobile, si le paysage est pris en charge, comment les contrôles évitent de couvrir le graphique, comment le clavier à l'écran se comporte et comment les interactions tactiles/de pincement sont mappées à la sélection, au zoom, au panoramique et à la réinitialisation.
• Pour les espaces de travail opérationnels, nommez les composants du shell, l'état sélectionné par défaut, le comportement synchronisé de plan/recherche/filtre/inspecteur, la règle de sélection claire pour surface vide, les panneaux de commande mobiles et l'état de l'espace de travail sauvegardé par URL.
• Pour le travail dirigé artistiquement, nommez les actifs générés ou illustrés, les états de défilement/d'animation, le comportement en cas de mouvement réduit et le repli en image fixe.
• Pour les surfaces conceptualisées, utilisez le flux de travail de conception partagé pour les images conceptuelles, le statut d'approbation, les références approuvées, le contrat de conception sémantique contraignant, les éléments verrouillés et flexibles, les couches de données appartenant à React, les couches appartenant au moteur de rendu, la continuation mobile/paysage et les déviations approuvées.
• Pour le scrollytelling ou le parallaxe, nommez le contrôleur de défilement, le contrat de scène, les plages de déclenchement/progression, la mise en page collante, le repli mobile et les images clés statiques.
• Pour WebGL ou les particules, nommez le moteur de rendu, la frontière données-vers-tampon, l'horloge d'animation, le chemin de nettoyage/suppression, le comportement en cas de mouvement réduit et le repli statique.
• Signalez explicitement tout code réservé au client ou sensible à l'hydratation.
• Signalez toute interaction qui doit supprimer le défilement natif du navigateur ou le chaînage de défilement.
• Signalez quel état est sauvegardé par URL, persistant localement, sauvegardé par IndexedDB, enregistré à distance ou intentionnellement éphémère.
• Signalez le comportement du lien de copie, de la vue enregistrée, de la réinitialisation, de l'actualisation, de la navigation arrière/avant et de l'état d'URL invalide.
• Signalez les zones de contrôle ou de détail qui sont réduites par défaut ou fermables, et comment l'état actif reste visible.
• Signalez le comportement de la connexion de données en direct sur mobile : état obsolète, reconnexion, données hors ligne/partielles, mode de bande passante réduite et stratégie d'alerte/notification lorsque cela est pertinent.
• Indiquez si le graphique est un bon candidat pour le SSR, le rendu réservé au client ou le chargement dynamique.
• Pour les nouveaux travaux, incluez une section de conception technique couvrant le nombre d'instances simultanées, les performances par instance ou au niveau de la page, et les implications de maintenance du modèle d'intégration choisi.
• Gardez la taille du bundle, les besoins d'exportation et l'accessibilité visibles dans la conception.

Références

• Théorie partagée :
  • ../../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
• Références de la compétence :
  • ./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

Invites représentatives

• "Comment intégrer ce graphique dans une application React ?"
• "Quel est le bon modèle React pour D3, Canvas ou Vega-Lite ici ?"
• "Faites en sorte que cette visualisation fonctionne proprement dans Next.js App Router."
• "Créez une histoire scrollytelling React avec des graphiques collants et un repli pour mouvement réduit."
• "Ce graphique doit-il être un composant client ou utiliser un import dynamique ?"
• "Aidez-moi à éviter les problèmes d'hydratation et de SSR avec cette visualisation."
• "Créez un diagramme UML, ERD, de flux, de machine d'état, de dépendance ou d'architecture interactif en React."