Le World Wide Web place une abondance de données à portée de main. En raison du volume de ces données, la présentant d'une manière qui se démarque, ou d'une manière qui fait passer votre message, peut souvent s'avérer délicat. C'est là que les visualisations des données entrent en jeu.
Dans cet article, je vous guiderai à travers la création d'une visualisation des données, à savoir les rappels de véhicules américains pour le mois de janvier 2015, en utilisant la bibliothèque JavaScript JavaScript Dimple.js construite au-dessus de D3.Js.
Le NHTSA / ODI Fournir un fichier de rappel (qui est accessible via leur site Web) contenant toutes les campagnes de défaut et de conformité liées à la sécurité de la NHTSA depuis 1967. Notre objectif est d'extraire les données d'un mois donné ( Janvier 2015), et pour en créer un graphique à barres, représentant le nombre total de rappels de véhicules par Maker.
Regardez Visualiser les données avec D3.js Illustrez vos données avec JavaScript
Regardez ce cours
Regardez ce cours
Cette visualisation des données ne sera pas explicative (nous montrerons des données brutes) et à peine exploratoires (il n'y a pas beaucoup de récit pour les téléspectateurs à construire à partir de ces données). Je veux cependant afficher des informations supplémentaires à côté du graphique lorsqu'un utilisateur plane sur l'une des barres.
C'est ce que nous nous retrouverons avec:
Vous pouvez voir une (plus petite) démo en direct à la fin de l'article ou afficher l'original sur Codepen.
Tous les fichiers mentionnés dans cette section peuvent être trouvés sur notre repo GitHub.
Le fichier d'origine Flat_rcl.txt (lien) est un fichier de valeurs séparé par onglet qui contient un lot des données - 109 682 enregistrements pour être exact. Il existe un fichier d'accompagnement rcl.txt (lien) qui détaille les colonnes concernant ces données.
Comme nous ne nous intéressons que par les données pour janvier 2015 - ou plutôt les enregistrements pour lesquels la date de création des enregistrements est en janvier 2015 - le reste des enregistrements peut être supprimé. Pour ce faire, j'utilise le programme de feuille de calcul OpenOffice Calc (bien que tout autre logiciel de feuille de calcul suffira). Le fichier résultant, rcl_january_2015.csv (lien) ne compte uniquement 201 enregistrements.
Nous devons maintenant réduire les colonnes à un sous-ensemble de ceux disponibles, à savoir:
Date de création d'enregistrement, créateur, modèle, année modèle, date de début de fabrication, date de fin de fabrication, nombre potentiel d'unités affectées, résumé des défauts, résumé des conséquences et résumé correctif. Nous pouvons ensuite ajouter les noms des colonnes à la première ligne du fichier CSV résultant, rcl_january_2015_clean.csv (lien).
Cela nous donne les données brutes dont nous avons besoin pour notre visualisation.
Maintenant, nous devons regrouper manuellement les rappels de Maker, combinant les enregistrements qui ont le même défaut. Nous devons nous assurer que les enregistrements combinés sont triés par date, puis par modèle et qu'ils ont un nombre total potentiel cumulatif d'unités affectées.
Nous allons utiliser une structure de données JSON pour ce regroupement.
Pour illustrer cela, traitons les trois premières entrées du fichier rcl_january_2015_clean.csv. Ceux-ci peuvent être regroupés en une seule ligne indiquant que le J4500 du MCI des années 2013, 2014 et 2015, qui ont les mêmes années de fabrication, présentent le même défaut. Le nombre potentiel d'unités affectées regroupe déjà ces trois modèles ensemble dans l'ensemble de données.
Voici la structure de données JSON que nous allons utiliser:
<span>{
</span> <span>"items": [
</span> <span>{
</span> <span>"item": {
</span> <span>"date": "",
</span> <span>"models": [
</span> <span>""
</span> <span>],
</span> <span>"units": "",
</span> <span>"defect": "",
</span> <span>"consequence": "",
</span> <span>"corrective": ""
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>}</span>Après avoir itérant ce processus (et échappé aux doubles citations), nous avons maintenant le fichier CSV rcl_january_2015_json.csv (lien). Par souci de concision, notre exemple de travail ne montrera que les trois premiers fabricants du fichier d'origine (3 sur 46).
D3 fournit une prise en charge prête à l'emploi pour les formats de fichiers de données, tels que CSV, TSV ou JSON. Un appel ajax est effectué pour récupérer le fichier, puis il est analysé et transformé en un tableau JavaScript. Le fichier CSV que nous avons créé peut être récupéré avec le code suivant:
d3<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>Nous pouvons également définir le tableau JavaScript directement dans le code, ce que nous allons faire ici aux fins de notre démo Codepen. La structure de données a été maintenue le plus près possible du tableau D3 aurait créé à partir du fichier CSV.
data <span>= [
</span> <span>{
</span> <span>'Record creation date':'20150105',
</span> <span>'Maker':'MCI',
</span> <span>'Potential number of units affected':'109',
</span> <span>'JSON data': '{
</span> <span>"items":[
</span> <span>{
</span> <span>"item": {
</span> <span>"date":"January, 5 2015",
</span> <span>"models":[
</span> <span>"J4500 (years 2013, 2014, 2015) ..."
</span> <span>],
</span> <span>"units":"109",
</span> <span>"defect":"...",
</span> <span>"consequence":"...",
</span> <span>"corrective":"..."
</span> <span>}
</span> <span>}
</span> <span>]
</span> <span>}'
</span> <span>},
</span> <span>...
</span><span>];</span><span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>
Le HTML est simple: deux divs, l'une pour le graphique (rappel), l'autre affiche des détails supplémentaires si l'utilisateur plane sur l'une des barres (rappeldetails).
<span>{
</span> <span>"items": [
</span> <span>{
</span> <span>"item": {
</span> <span>"date": "",
</span> <span>"models": [
</span> <span>""
</span> <span>],
</span> <span>"units": "",
</span> <span>"defect": "",
</span> <span>"consequence": "",
</span> <span>"corrective": ""
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>}</span>Nous ajoutons d'abord un objet SVG à l'élément DIV, le faisant référence par son ID. Ensuite, nous lions nos données à notre nouveau graphique, qui sera rendu dans le SVG. Enfin, nous définissons manuellement les limites du graphique pour la positionner correctement dans son parent div.
d3<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>Nous définissons l'axe X du graphique dans le champ Maker de nos données - nous utilisons la méthode AddCategoryAxis car les fabricants constituent des données catégoriques. Nous commandons les fabricants par ordre alphabétique à l'aide de la méthode AddorderRule et masquons le titre de l'axe X (qui aurait été le fabricant), car les noms des fabricants sont explicites.
data <span>= [
</span> <span>{
</span> <span>'Record creation date':'20150105',
</span> <span>'Maker':'MCI',
</span> <span>'Potential number of units affected':'109',
</span> <span>'JSON data': '{
</span> <span>"items":[
</span> <span>{
</span> <span>"item": {
</span> <span>"date":"January, 5 2015",
</span> <span>"models":[
</span> <span>"J4500 (years 2013, 2014, 2015) ..."
</span> <span>],
</span> <span>"units":"109",
</span> <span>"defect":"...",
</span> <span>"consequence":"...",
</span> <span>"corrective":"..."
</span> <span>}
</span> <span>}
</span> <span>]
</span> <span>}'
</span> <span>},
</span> <span>...
</span><span>];</span>Nous définissons l'axe y du graphique au nombre potentiel de champs affectés par les unités de nos données. Nous aurions pu utiliser la méthode AddMeasureAxis ici, qui définit un axe linéaire à partir des valeurs données, mais comme la victoire du fabricant a plus de 20 fois le nombre potentiel d'unités affectées que MCI ou Thor, la colonne résultante aurait éclipsé les deux autres . Dans ce cas, une échelle logarithmique donne plus de place pour des valeurs plus petites, nous utilisons donc la méthode AddLogaxis, qui par défaut à la base 10.
<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>
Maintenant que nous avons défini nos axes, nous pouvons les lier ensemble pour rendre un graphique. Pour cela, nous sélectionnons un graphique à barres via dimple.plot.bar, et nous les attachons au champ de données du créateur. Le deuxième élément de tableau, JSON Data, liera la partie JSON de nos données à chaque barre et nous permettra d'accéder aux données correctes lorsque vous survolez la barre avec la souris.
<span>var svg = dimple.newSvg("#RecallsChart", 800, 560);
</span><span>var myChart = new dimple<span>.chart</span>(svg, data);
</span>myChart<span>.setBounds(60, 30, 710, 355)</span>Par défaut, les infractions sont affichées lorsqu'ils planent avec la souris sur une unité de tracé (ici, une barre) et affichent les axes et les données de la série. Dans notre cas: le fabricant (valeur de l'axe X), le nombre potentiel d'unités affectées (valeur de l'axe y) et la valeur de texte brut de nos données JSON.
La fonction GetToolTipText est surchargée ici pour traiter les données JSON et l'afficher dans un autre div sur le côté. Il renvoie un tableau des données que nous souhaitons afficher comme info-bulle, à savoir le nom du fabric Le format générique de numéro d'anglais via la méthode JavaScript Tolocalestring intégrée).
Mais revenons à l'analyse de données JSON.
Les deux champs agrégés auxquels nous accédons (Aggfield [0] et Aggfield [1]) correspondent au tableau des champs de données que nous avons précédemment définis en série (["Maker", "JSON Data"]), AggField étant une propriété une propriété de l'objet élément sous-jacent.
Nous analysons la chaîne JSON avec la fonction Parsejson de JQuery, définissons un tableau de titres complètes correspondant aux clés de notre objet JSON, puis, en itérant sur l'objet JSON, nous construisons une chaîne HTML pour ajouter à l'ID avec l'ID Rappeldetails.
<span>var x = myChart.addCategoryAxis("x", "Maker");
</span>x<span>.addOrderRule("Maker");
</span>x<span>.title = '';</span>Nous dessinons enfin le graphique avec une transition esthétique en utilisant la facilité élastique avec un retard d'une seconde.
myChart<span>.addLogAxis("y", "Potential number of units affected");</span>Ai-je dit enfin? Eh bien, nous ajoutons ici une autre astuce esthétique aux étiquettes de l'axe X.
Par défaut, les étiquettes de l'axe X sont écrites horizontalement. Mais ils peuvent facilement se chevaucher, donc nous allons les écrire verticalement à la place. C’est là que l’exposition par Daple de ses objets D3 sous-jacentes est utile. Veuillez noter que nous ne pouvons le changer qu'une fois le graphique tiré, donc après l'appel MyChart.Draw ().
Pour ce faire, nous sélectionnons d'abord chaque texte d'étiquette, ou plutôt la forme SVG correspondante liée à l'axe X pour chaque étiquette. La méthode GetBbox () appartient à l'interfacesvglocatisable et renvoie un objet SVGrect qui définit la boîte de délimitation, exposant ses coordonnées, sa hauteur et sa largeur. Nous effectuons ensuite une rotation de la boîte SVG et une légère traduction verticale pour la rapprocher de la ligne de l'axe X.
Et voici le résultat final:
Voir les rappels des véhicules à stylo pour janvier 2015 par SitePoint (@SitePoint) sur Codepen.
La largeur de ce stylo a été réduite afin de l'intégrer dans l'article. Vous pouvez voir le codepen d'origine ici
Dans cet article, nous avons vu comment nettoyer et préparer des données pour la visualisation des données, définissant spécifiquement une structure de données pour correspondre au résultat final que nous avions en tête. Nous avons utilisé à la fois les bibliothèques Dimple.js et D3.js, avec quelques appels limités à jQuery (principalement liés au traitement JSON). Nous avons tiré le graphique à barres de nos données, avec un peu d'interaction exploratoire en surchargeant la fonctionnalité à outils de Dimple. Nous avons également accédé à l'objet D3 sous-jacent pour manipuler les étiquettes de l'axe X.
En tant que note latérale, SVG est désormais largement pris en charge, mais il est correct de le vérifier au préalable (avec Modernizr par exemple), et de fournir un secours tel qu'une image PNG si nécessaire. Bien sûr, le chargement conditionnel de D3.JS et de Dimple.js doit également être pris en compte.
Si vous souhaitez plonger plus profondément dans la visualisation des données, Udacity propose une visualisation des données intitulée et D3.js autonomes qui couvre les concepts de visualisation, l'utilisation de D3.js et de Dimple.js, des structures narratives et de l'animation. De plus, le site de Mike Bostock (le créateur de D3.JS) est la source parfaite si vous voulez comprendre les concepts derrière cette bibliothèque, tandis que Dimple et D3 fournissent une liste d'exemples à apprendre.
Création d'un graphique multiligne utilisant la fossette et D3 implique plusieurs étapes. Tout d'abord, vous devez configurer votre fichier HTML et inclure les bibliothèques D3 et Dimple. Ensuite, vous devez charger vos données, qui peuvent être dans divers formats tels que CSV, JSON ou TSV. Une fois vos données chargées, vous pouvez créer un nouvel objet SVG et définir ses dimensions. Après cela, vous pouvez créer un nouveau dimple, spécifier les axes et ajouter les lignes pour chaque série de données. Enfin, vous pouvez personnaliser l'apparence du graphique et ajouter l'interactivité si nécessaire.
Comment puis-je ajouter de l'interactivité à mon graphique fomb expérimenter et fournir des informations supplémentaires. Vous pouvez ajouter des infractions qui affichent plus d'informations lorsque l'utilisateur plane sur un point de données. Vous pouvez également ajouter des auditeurs d'événements qui répondent aux actions des utilisateurs tels que des clics ou des mouvements de souris. Par exemple, vous pouvez mettre en surbrillance une ligne ou afficher une vue détaillée des données lorsque l'utilisateur clique dessus.
Comment puis-je gérer les données manquantes ou incohérentes dans la fossette?
La création d'un graphique à barres avec DIMPLE et D3 implique des étapes similaires pour créer un graphique de ligne. Vous devez charger vos données, créer un objet SVG et créer un nouveau dimple. Cependant, au lieu d'ajouter des lignes, vous ajoutez des barres à l'aide de la méthode dimple.addseries (). Vous pouvez également personnaliser l'apparence des barres et ajouter l'interactivité selon les besoins.
Comment puis-je animer mon graphique de fossettes?
Comment puis-je créer un tracé de dispers Un tracé de dispersion avec la fossette et D3 implique des étapes similaires pour créer une ligne ou un graphique à barres. Vous devez charger vos données, créer un objet SVG et créer un nouveau dimple. Cependant, au lieu d'ajouter des lignes ou des barres, vous ajoutez des points à l'aide de la méthode dimple.addseries (). Vous pouvez également personnaliser l'apparence des points et ajouter l'interactivité au besoin.
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!
La différence entre vscode et visual studio
Quelles informations privées les amis proches de Douyin verront-ils ?
Solution au problème selon lequel les fichiers exe ne peuvent pas être ouverts dans le système win10
Codes hexadécimaux de couleur courants
Qu'est-ce qu'un fichier .Xauthority ?
Comment changer le mot de passe dans MySQL
Comment obtenir la longueur d'un tableau en js
convertir l'utilisation de la commande
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
