Création de nuages ​​de points interactifs avec Plotly –

Les nuages ​​de points sont un type de visualisation de données qui montre la relation entre deux variables. Ils sont particulièrement utiles pour repérer les tendances, les clusters et les valeurs aberrantes au sein des ensembles de données. Sans les bons outils, la création de ces tracés peut être un processus fastidieux, nécessitant souvent des compétences approfondies en matière de codage et de conception.

Une bibliothèque qui vous permet de créer rapidement des graphiques complexes est Terrain. Plotly est une bibliothèque graphique qui facilite la création en ligne de graphiques interactifs de qualité publication. Il offre une gamme de types et de styles de tracé, et son interactivité est idéale pour créer des nuages ​​de points.

Points clés à retenir

• Plotly fournit une plate-forme puissante pour créer des nuages ​​de points interactifs, offrant des options de personnalisation étendues.
• Vanilla JavaScript et React peuvent tous deux être utilisés avec Plotly pour créer des visualisations de données dynamiques.

Plotly permet de générer rapidement et facilement des nuages ​​de points, qui sont non seulement précis mais également hautement interactifs. Cette interactivité est essentielle pour les développeurs professionnels qui souhaitent offrir aux utilisateurs finaux la possibilité d’explorer les données en profondeur, grâce à des fonctionnalités telles que le survol pour révéler des points de données, le panoramique et le zoom.

Pourquoi choisir Plotly ?

Plotly est un choix populaire parmi les développeurs pour créer des nuages ​​de points en raison de ses fonctionnalités complètes qui répondent aux besoins professionnels. Voici pourquoi il se démarque :

• Interactivité. Les nuages ​​de points de Plotly ne sont pas seulement des images statiques ; ils sont entièrement interactifs. Les utilisateurs peuvent zoomer sur des zones d’intérêt, survoler pour obtenir plus d’informations sur des points de données spécifiques et même cliquer pour interagir avec les données en temps réel. Ce niveau d’interactivité est crucial pour une analyse approfondie des données et rend le processus d’exploration beaucoup plus convivial.
• Facilité d’utilisation. L’un des avantages les plus importants de Plotly est sa simplicité. La bibliothèque fournit une interface de haut niveau qui élimine les complexités liées à la création de graphiques détaillés. Cela signifie que les développeurs peuvent produire des visualisations sophistiquées avec moins de code, ce qui est particulièrement avantageux lorsque le temps est une contrainte ou lorsqu’ils travaillent sur un prototypage rapide.
• Personnalisation. Avec Plotly, chaque aspect d’un nuage de points peut être personnalisé pour répondre aux besoins spécifiques de votre projet. De la couleur et de la taille des marqueurs à la disposition des axes et au style du quadrillage, Plotly vous donne le contrôle sur la façon dont vos données sont présentées. Cette flexibilité garantit que la visualisation finale correspond à vos exigences de conception et transmet efficacement le message souhaité.
• Compatibilité. La compatibilité de Plotly s’étend au-delà de JavaScript et React. Il peut être utilisé avec une variété de langages et de frameworks de programmation, ce qui en fait un outil polyvalent dans l’arsenal d’un développeur. Que vous travailliez sur une application Web, une application mobile ou même un projet côté serveur, Plotly peut s’intégrer facilement à votre flux de travail.
• Performance. La gestion de grands ensembles de données peut s’avérer difficile, mais Plotly est conçu pour les gérer efficacement. Il utilise WebGL pour le rendu, ce qui permet de maintenir les performances sans sacrifier la qualité ou la réactivité des visualisations. Ceci est particulièrement important pour les applications qui nécessitent des mises à jour de données en temps réel ou pour celles qui travaillent avec du Big Data.
• Communauté et soutien. Plotly a une forte présence communautaire et une documentation complète, qui constituent des ressources inestimables pour les développeurs. Que vous cherchiez à résoudre un problème, à rechercher les meilleures pratiques ou à chercher de l’inspiration pour votre prochain projet, la communauté et l’assistance disponibles peuvent vous guider tout au long du processus.

Premiers pas avec Plotly

Plotly est une bibliothèque graphique qui facilite la création en ligne de graphiques interactifs de qualité publication. Il offre une gamme de types et de styles de tracé, et son interactivité est idéale pour créer des nuages ​​de points.

Configuration de Plotly

Pour le JavaScript vanille : vous pouvez inclure Plotly directement dans votre HTML :

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Pour réagir : installez Plotly en utilisant npm :

npm install plotly.js-dist-min

Importez-le ensuite dans votre composant React :

import Plotly from 'plotly.js-dist-min';

Création d’un nuage de points de base

Commençons par un nuage de points de base.

JavaScript vanille :

const data = [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
}];

const layout = {
  title: 'Basic Scatter Plot',
  xaxis: { title: 'X-Axis' },
  yaxis: { title: 'Y-Axis' }
};

Plotly.newPlot('myDiv', data, layout);

Après avoir ouvert le HTML fichier dans un navigateur, votre nuage de points de base devrait ressembler à celui ci-dessous.

Réagir:

import React from 'react';
import Plot from 'react-plotly.js';

function ScatterPlot() {
  const data = [{
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    mode: 'markers',
    type: 'scatter'
  }];

  const layout = {
    title: 'Basic Scatter Plot',
    xaxis: { title: 'X-Axis' },
    yaxis: { title: 'Y-Axis' }
  };

  return <Plot data={data} layout={layout} />;
}

export default ScatterPlot;

Courir npm start dans votre projet React, et vous devriez voir quelque chose de similaire à ceci :

Amélioration des nuages ​​de points

Vous pouvez améliorer les nuages ​​de points en ajoutant davantage de traces, en personnalisant les marqueurs et en ajoutant des annotations.

Ajout de plusieurs traces :

const trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter',
  name: 'Dataset 1'
};

const trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'markers',
  type: 'scatter',
  name: 'Dataset 2'
};

const data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Personnalisation des marqueurs :

const trace = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'markers',
  type: 'scatter',
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 12
  }
};

const data = [trace];

Plotly.newPlot('myDiv', data);

Création d’un nuage de points interactif

Les nuages ​​de points interactifs permettent aux utilisateurs d’interagir directement avec les points de données.

JavaScript vanille :

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  type: 'scatter',
  marker: { size: 12 }
};

const layout = {
  title: 'Interactive Scatter Plot',
  xaxis: { title: 'X Axis' },
  yaxis: { title: 'Y Axis' },
  hovermode: 'closest'
};

Plotly.newPlot('myDiv', [trace], layout);

document.getElementById('myDiv').on('plotly_click', function(data){
  alert('You clicked on a data point!');
});

Pour un aperçu interactif des nuages ​​de points, consultez cette démo CodePen.

Voir le stylo Intrigue pour Vanille de Binara Prabhanga (@Binara-Prabhanga) sur CodeStylo.

Réagir:

import React from 'react';
import Plot from 'react-plotly.js';

class InteractiveScatterPlot extends React.Component {
  onPlotClick = (data) => {
    alert(You clicked on a data point with coordinates (${data.points[0].x}, ${data.points[0].y}) );
  };

  render() {
    const trace = {
      x: [1, 2, 3, 4],
      y: [10, 11, 12, 13],
      mode: 'markers',
      type: 'scatter',
      marker: { size: 12 }
    };

    const layout = {
      title: 'Interactive Scatter Plot',
      xaxis: { title: 'X Axis' },
      yaxis: { title: 'Y Axis' },
      hovermode: 'closest'
    };

    return <Plot data={[trace]} layout={layout} onClick={this.onPlotClick} />;
  }
}

export default InteractiveScatterPlot;

Pour voir les nuages ​​de points en action, consultez cette démo CodeSandbox.

Emballer

Ce didacticiel a couvert les bases de la création de nuages ​​de points avec Plotly, notamment la configuration de votre environnement, la création d’un tracé de base, son amélioration avec des fonctionnalités supplémentaires et son caractère interactif.

Si vous souhaitez consulter le code de ces graphiques, voici mon Démo CodeSandbox.

Expérimentez avec ces exemples et explorez la documentation de Plotly pour découvrir des fonctionnalités et des options de personnalisation plus avancées. Si vous recherchez des informations sur la façon de créer de superbes visualisations de données, nous avons un guide pratique ici.

FAQ sur Plotly