Apprenez à créer des visualisations de données D3.JS par exemple

d3.js: dessinez la visualisation dynamique des données avec JavaScript

Cet article traite de D3.js, une puissante bibliothèque JavaScript pour créer des visualisations de données dynamiques et interactives. Il utilise HTML, SVG et CSS pour rendre les données dans les navigateurs Web.

Points de base:

• d3.js est une bibliothèque JavaScript polyvalente qui permet aux développeurs de créer des visualisations de données interactives dynamiques dans les navigateurs Web utilisant HTML, SVG et CSS.
• La bibliothèque fournit une multitude d'outils pour le traitement des données, la conversion des données brutes en représentations visuelles significatives et peut être largement personnalisée pour s'adapter aux idées créatives uniques.
• d3.js utilise des barres d'échelle pour mapper les valeurs de données aux propriétés d'affichage visuelles telles que la taille ou la couleur, la création de graphiques et d'autres éléments visuels qui reflètent avec précision les données.
• Cet article fournit des exemples pratiques de graphiques à barres, de graphiques de ligne et de visualisations d'animation, démontrant comment rendre des graphiques de données simples et complexes utilisant D3.js.
• d3.js prend en charge des fonctionnalités avancées telles que les transitions et les animations, permettant aux développeurs de créer des visualisations visuellement engageantes et mises à jour dynamiquement qui améliorent l'expérience utilisateur et l'interaction des données.

d3.js est une opération de document basée sur des données JavaScript Library. Il vous aide à donner vie à vos données en utilisant HTML, SVG et CSS. Les trois bibliothèques JavaScript que chaque développeur Web devraient apprendre sont: jQuery, soulignement et D3. Ces bibliothèques vous permettent de réfléchir au code de nouvelles manières: JQuery vous permet de faire plus de DOM avec moins de code; Traitement des données et programmation graphique. Si vous êtes nouveau dans D3, prenez un moment pour parcourir son impressionnante bibliothèque d'exemples pour voir ce qu'elle peut faire. Ce n'est pas une bibliothèque de graphiques à partir du temps de votre père. William Playfair a inventé le graphique à barres , le graphique de ligne et le graphique de la zone en 1786, et a inventé le graphique à tarte en 1801. Ce sont toujours les principales façons dont la plupart des ensembles de données sont présentés aujourd'hui. Ces graphiques sont excellents, mais D3 vous donne les outils et la flexibilité pour créer des visualisations de données Web uniques, et votre créativité est le seul facteur limitant. D3 est une bibliothèque de visualisation de bas niveau extrêmement flexible avec une API de type JQuery pour le mappage des données aux documents HTML et SVG. Il contient un grand nombre de fonctions mathématiques utiles pour la transformation des données et les calculs physiques, bien que la plupart de ses fonctions proviennent de la manipulation des figures géométriques et des chemins dans SVG. Cet article vise à vous fournir un aperçu de haut niveau des fonctionnalités D3, dans chaque exemple, vous pourrez voir entrée Données, Convert et output documents. Je n'explique pas ce que fait chaque fonction, mais plutôt vous montrer le code, vous devriez être en mesure d'avoir une idée approximative de son fonctionnement. Je n'entre dans les concepts les plus importants: échelle et sélectionner .

graphique à barres

Créer des graphiques à barres simples à l'aide de HTML est l'un des moyens les plus simples de comprendre comment D3 convertit les données en documents. Le code est le suivant:

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

Ce code mappe les données d'entrée [4, 8, 15, 16, 23, 42] à la sortie html.

Glat de contribution GitHub

Avec seulement quelques lignes de code supplémentaires, le graphique à barres ci-dessus peut être converti en un tableau de contribution similaire à GitHub.

Nous ne définissons plus la hauteur en fonction de la valeur numérique des données, mais définissons la couleur d'arrière-plan.

débutant de SVG

La plupart des fonctionnalités de D3 proviennent du fait qu'elle fonctionne avec SVG, qui contient des étiquettes pour dessiner des graphiques 2D tels que les cercles, les polygones, les chemins et le texte.

circulaire

D3 peut gérer des types de données plus complexes.

Tableau de ligne

Le dessin d'un tableau de ligne dans SVG est très simple.

échelle

L'échelle

est une fonction qui mappe le domaine d'entrée dans la plage de sortie.

Visualisation du vol d'animation

Il s'agit d'un exemple de visualisation d'animation montrant des vols entre Melbourne et Sydney.

Conclusion

Cet article ne couvre qu'une petite partie de la bibliothèque D3.JS. J'espère que cet aperçu avancé et quelques exemples pratiques vous donneront une idée de la façon d'utiliser les sélections, les échelles et les transformations. Réfléchissez à la meilleure façon de représenter les données et profitez de la création de votre propre visualisation de données unique.

(La position de l'image reste inchangée)

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!