Nuage de points basé sur JavaScript avec zones courbes dans React

Création d'un nuage de points dynamique avec des données de température et d'humidité

La visualisation efficace des points de données est essentielle lorsque vous traitez plusieurs variables. Dans ce scénario, tracer température et humidité sur un nuage de points peut fournir des informations précieuses. Un nuage de points permet de représenter les corrélations et les modèles entre ces variables, en particulier au fil du temps.

Au-delà d'un simple tracé, vous souhaiterez peut-être créer des zones spécialisées qui séparent les régions du graphique en fonction d'une courbe. Cela ajoute une couche de complexité à votre diagramme, fournissant une analyse plus détaillée, comme la définition de zones de différents niveaux d'humidité sur des plages de température. Cela peut être difficile, surtout si les zones sont basées sur des courbes.

Heureusement, il existe de nombreuses bibliothèques disponibles pour Réagir et du JavaScript simple qui peut aider à tracer ces points de données et à ajouter des zones courbes. En utilisant les bons outils, vous pouvez facilement générer un nuage de points avec des zones personnalisées pour une meilleure analyse des données. Ces outils permettent une flexibilité et une précision dans la cartographie des relations non linéaires.

Dans cet article, nous explorerons comment collecter des points de données et utiliser les bibliothèques JavaScript et React populaires pour dessiner des nuages ​​de points avec des zones courbes. Avec la bonne configuration, vous serez en mesure de cartographier efficacement vos données de température et d’humidité sur un diagramme.

Comprendre la mise en œuvre du nuage de points avec des zones courbes dans React

Le premier exemple dans les scripts utilise Réagir en combinaison avec le puissant D3.js bibliothèque pour créer un nuage de points avec des zones courbes. Le nuage de points mappe la température sur l’axe des x et l’humidité sur l’axe des y, aidant ainsi à visualiser la relation entre ces deux variables. Les points de données sont représentés par des cercles, tracés à l'aide des méthodes D3 `enter()` et `append()`, qui garantissent que chaque point de données est ajouté au DOM. Un aspect crucial de l'implémentation est l'utilisation d'échelles linéaires avec `scaleLinear()`, qui mappe les valeurs de température et d'humidité aux positions des pixels dans le SVG, permettant aux points d'être positionnés correctement sur la carte.

En plus de tracer des points de données, le script dessine des zones courbes à l'aide d'un générateur de lignes (`d3.line()`). Cette commande crée des chemins qui représentent des courbes entre des points spécifiés, permettant de tracer des zones non linéaires sur le nuage de points. Dans ce cas, `curve(d3.curveNatural)` est appliqué pour créer des courbes douces et naturelles entre les valeurs de température et d'humidité. Ces courbes sont essentielles pour définir différentes zones dans le nuage de points, qui peuvent représenter des régions ou des plages d'intérêt spécifiques, telles qu'une plage d'humidité confortable ou dangereuse en fonction de la température.

Le deuxième exemple exploite Graphique.js dans React, une bibliothèque plus simple mais efficace pour le rendu des graphiques. Le composant Chart.js « Scatter » est utilisé pour tracer des points de données de température et d'humidité. Bien que Chart.js ne soit pas aussi flexible que D3.js pour créer des visualisations personnalisées, il offre une configuration intuitive pour les nuages ​​de points. Une fonctionnalité clé ici est le plugin « annotation », qui permet de dessiner des formes, des lignes ou des régions sur le graphique. Ce plugin est utilisé pour approximer les zones courbes en traçant des lignes droites sur les sections du nuage de points, créant ainsi des divisions visuelles entre les zones d'intérêt. Bien que les zones courbes soient approximées par des lignes droites, cette méthode est simple et permet de visualiser rapidement les zones dans un nuage de points.

Les deux méthodes intègrent des pratiques importantes, telles que la mise à l'échelle des données à l'aide de « scaleLinear() » dans D3.js et l'utilisation d'options intégrées pour personnaliser les échelles des graphiques dans Chart.js. Ces approches sont conçues pour être flexibles, permettant aux développeurs de les modifier et de les étendre pour différents cas d'utilisation. Alors que D3.js offre plus de contrôle et de précision pour dessiner des courbes et des zones, Chart.js fournit une configuration plus rapide pour les nuages ​​de points de base avec un certain niveau de personnalisation via des plugins tels que « annotation ». Les deux scripts sont modulaires et réutilisables, offrant une flexibilité dans la création de nuages ​​de points interactifs avec des zones courbes dans les applications React.

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const ScatterPlotWithCurves = ({ data }) => {
  const svgRef = useRef();
  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr('width', 500)
      .attr('height', 500);
    const xScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.temperatureC), d3.max(data, d => d.temperatureC)])
      .range([0, 500]);
    const yScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.humidity), d3.max(data, d => d.humidity)])
      .range([500, 0]);
    svg.selectAll('.dot')
      .data(data)
      .enter().append('circle')
      .attr('cx', d => xScale(d.temperatureC))
      .attr('cy', d => yScale(d.humidity))
      .attr('r', 5);
    // Add zones using curved paths
    const lineGenerator = d3.line()
      .x(d => xScale(d[0]))
      .y(d => yScale(d[1]))
      .curve(d3.curveNatural);
    svg.append('path')
      .datum([[30, 60], [40, 70], [50, 80]])
      .attr('d', lineGenerator)
      .attr('stroke', 'red')
      .attr('fill', 'none');
  }, [data]);
  return <svg ref={svgRef}></svg>;
};
export default ScatterPlotWithCurves;

import React from 'react';
import { Scatter } from 'react-chartjs-2';
const ScatterPlot = ({ data }) => {
  const chartData = {
    datasets: [{
      label: 'Temperature vs Humidity',
      data: data.map(d => ({ x: d.temperatureC, y: d.humidity })),
      borderColor: 'blue',
      pointBackgroundColor: 'blue',
    }],
  };
  const options = {
    scales: {
      x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Temperature (°C)' } },
      y: { title: { display: true, text: 'Humidity (%)' } },
    },
    plugins: {
      annotation: { // Plugin to draw curved zones
        annotations: [{
          type: 'line',
          xMin: 30, xMax: 50, yMin: 60, yMax: 80,
          borderColor: 'red', borderWidth: 2,
        }],
      },
    },
  };
  return <Scatter data={chartData} options={options} />;
};
export default ScatterPlot;

Explorer des bibliothèques alternatives pour la création de nuages ​​de points dans React

En plus de D3.js et Graphique.js, il existe d'autres bibliothèques robustes capables de gérer la création de nuages ​​de points dans Réagir. L'une de ces options est Plotly, une bibliothèque de graphiques qui offre à la fois flexibilité et facilité d'utilisation. Plotly permet des tracés interactifs, y compris des nuages ​​de points, dans lesquels vous pouvez non seulement tracer des données, mais également ajouter des zones courbes à l'aide d'annotations ou de capacités de dessin de forme. Plotly est livré avec une prise en charge intégrée de la conception réactive, ce qui le rend adapté aux applications Web qui doivent s'adapter à différentes tailles d'écran.

Une autre alternative consiste à utiliser Rechargements, une bibliothèque spécialement conçue pour les applications React. Recharts fournit une API plus simple que D3.js et constitue un excellent choix pour les développeurs qui souhaitent des résultats rapides avec une configuration minimale. Il prend en charge les nuages ​​de points et les formes personnalisées, permettant de se rapprocher des zones courbes. Bien que Recharts ne dispose pas de la personnalisation étendue de D3.js, il reste une option intéressante pour gérer les nuages ​​de points de base, en particulier lorsque la facilité d'utilisation et la lisibilité sont des considérations clés.

Enfin, pour ceux qui souhaitent des performances et une vitesse de rendu maximales, ToileJS est une bonne option. CanvasJS est léger et se concentre sur l'utilisation du canevas HTML5 pour le dessin. Il peut gérer efficacement de grands ensembles de données et prend en charge les mises à jour en temps réel, ce qui en fait un choix idéal pour les applications nécessitant des performances élevées. Bien qu'il lui manque peut-être une partie de la flexibilité de D3.js, CanvasJS est parfait pour les applications qui nécessitent un rendu rapide et une réactivité, telles que les tableaux de bord de surveillance.