Créez de superbes visualisations de données en PHP à l'aide de D3.js

Avec l'avènement de l'ère Internet, les données sont devenues un élément indispensable de notre vie et de notre travail. La visualisation des données est devenue une technique très populaire dans le processus de traitement et d'analyse des données. La visualisation des données nous permet de mieux comprendre les données, de découvrir des modèles et des tendances dans les données et de mieux démontrer les résultats de l'analyse des données aux autres. Dans cet article, nous expliquerons comment créer de superbes visualisations de données en PHP à l'aide de D3.js.

1. Qu'est-ce que D3.js

D3.js (Data-Driven Documents) est une bibliothèque de visualisation de données basée sur les normes Web, qui combine des données et des documents via une liaison de données flexible et une conversion élégante pour créer des visualisations de données interactives. À l'aide de D3.js, vous pouvez créer différents types de visualisations de données, notamment des graphiques linéaires, des graphiques à barres, des nuages ​​de points, des diagrammes circulaires, etc.

2. Créez un histogramme simple

Tout d'abord, nous devons introduire le fichier de bibliothèque D3.js. Vous pouvez télécharger la dernière version sur le site officiel D3.js. Dans votre fichier HTML, importez la bibliothèque D3.js en utilisant l'instruction suivante :

<script src="https://d3js.org/d3.v5.min.js"></script>

Dans cet exemple, nous allons créer un simple graphique à barres qui montre la population d'une certaine ville de 2010 à 2019.

Tout d’abord, nous devons créer un div pour contenir notre graphique. Ajoutez le code suivant au fichier HTML :

<div id="chart"></div>

Ensuite, dans le fichier JavaScript, nous pouvons définir certaines données comme suit :

var data = [
  { year: 2010, population: 10500000 },
  { year: 2011, population: 10800000 },
  { year: 2012, population: 11200000 },
  { year: 2013, population: 11500000 },
  { year: 2014, population: 12000000 },
  { year: 2015, population: 12400000 },
  { year: 2016, population: 12800000 },
  { year: 2017, population: 13200000 },
  { year: 2018, population: 13600000 },
  { year: 2019, population: 14000000 }
];

Ensuite, nous pouvons utiliser D3.js pour créer un élément SVG, et cet élément est notre Where le diagramme sera dessiné. Ajoutez le code suivant au fichier JavaScript :

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400);

Ensuite, nous pouvons créer une échelle pour mapper les valeurs des données aux valeurs réelles des pixels. Ajoutez le code suivant au fichier JavaScript :

var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.population; })])
  .range([400, 0]);

Dans ce code, nous utilisons la fonction d3.scaleLinear() pour créer une échelle linéaire. La fonction domain() est utilisée pour définir la plage de données et la fonction range() est utilisée pour définir la plage de valeurs réelles mappées.

Ensuite, nous pouvons créer un axe et l'ajouter à l'élément SVG. Ajoutez le code suivant au fichier JavaScript :

var yAxis = d3.axisLeft(y);
svg.append("g")
  .attr("transform", "translate(50,0)")
  .call(yAxis);

Dans ce code, nous utilisons la fonction d3.axisLeft() pour créer un axe de coordonnées gauche. Nous ajoutons ensuite cet axe à l'élément SVG à l'aide de la fonction append(). Enfin, utilisez la fonction call() pour appliquer les axes que nous venons de créer.

Maintenant, nous sommes prêts à dessiner le graphique à barres. Ajoutez le code suivant au fichier JavaScript :

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return 50 + (d.year - 2010) * 45; })
  .attr("y", function(d){ return y(d.population); })
  .attr("width", 40)
  .attr("height", function(d){ return 400 - y(d.population); })
  .attr("fill", "steelblue");

Dans ce code, nous utilisons la fonction selectAll() pour sélectionner tous les rectangles de l'élément SVG, puis utilisons la fonction data() pour lier les données au rectangle. La fonction enter() indique à D3.js quoi faire s'il y a de nouvelles données. Dans cet exemple, nous traçons 10 barres, nous utilisons donc 10 objets de données. Ensuite, nous utilisons la fonction append() pour ajouter un élément rectangulaire. Ensuite, utilisez la fonction attr() pour définir la position, la largeur, la hauteur et la couleur du rectangle. Enfin, nous avons un joli graphique à barres qui montre la population d'une certaine ville de 2010 à 2019.

3. Créer une visualisation interactive des données

Maintenant, nous avons créé un histogramme simple. Cependant, si vous souhaitez rendre votre visualisation de données plus intéressante, vous devez ajouter quelques fonctionnalités interactives. Ensuite, nous montrerons comment créer une visualisation de données interactive qui change lorsque l'utilisateur déplace la souris sur un graphique à barres.

Tout d'abord, nous devons modifier l'élément SVG que nous avons créé précédemment. Ajoutez le code suivant au fichier JavaScript :

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400)
  .on("mousemove", onMouseMove);

Dans ce code, nous ajoutons un événement à l'élément SVG. Lorsque la souris passe sur un élément SVG, la fonction onMouseMove() sera déclenchée.

Ensuite, nous devons écrire la fonction onMouseMove(). Ajoutez le code suivant au fichier JavaScript :

function onMouseMove() {
  var mouseX = d3.mouse(this)[0];
  var year = Math.round((mouseX - 50) / 45) + 2010;
  var index = year - 2010;

  var rect = svg.selectAll("rect")._groups[0][index];
  var oldColor = d3.select(rect).attr("fill");
  d3.select(rect).attr("fill", "blue");

  setTimeout(function(){ 
      d3.select(rect).attr("fill", oldColor);
  }, 500);
}

Dans ce code, nous utilisons la fonction d3.mouse() pour obtenir les coordonnées de la souris dans l'élément SVG. Nous calculons ensuite l'année en fonction de la position de la souris pour trouver l'objet de données sur lequel nous souhaitons opérer. En sélectionnant l'élément rectangulaire correspondant à ces données, on peut changer la couleur de l'élément rectangulaire en bleu. Nous utilisons la fonction setTimeout() pour rétablir la couleur de l'élément rectangulaire à sa couleur d'origine après 500 millisecondes.

Maintenant, nous avons réalisé une visualisation interactive des données. Lorsque l'utilisateur déplace la souris sur un histogramme, l'histogramme devient bleu puis reprend sa couleur d'origine. A travers cet exemple, nous pouvons constater la puissance et la flexibilité de D3.js.

4. Résumé

Dans cet article, nous avons présenté comment utiliser D3.js en PHP pour créer de superbes visualisations de données. Nous avons montré comment créer un graphique à barres simple et rendre notre visualisation de données plus intéressante en ajoutant des fonctionnalités interactives. D3.js fournit une API et des fonctionnalités riches qui vous permettent de créer facilement différents types de visualisations de données. Si vous souhaitez en savoir plus sur l'utilisation et les techniques de D3.js, vous pouvez vous référer à la documentation officielle de D3.js ou à quelques excellents tutoriels D3.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!