Visualisation de données interactive : commencer avec D3. js - V5

1. Introduction : D3.js dans une novelles: Bienvenue à D trois points Js concepts clés. Ce cours est une introduction très solide à ce qui est devenu l'une des technologies les plus populaires pour réaliser des visualisations de données interactives pour le Web. Je m'appelle Bill Sander. Je fais de l'information, conception et de la visualisation de données depuis plus de 20 ans, travaillant sur des expériences statiques, infographiques et interactives. Je fais du design, et je suis un programmeur autodidacte. J' ai des souvenirs vifs des douleurs que vous traversez par les technologies d'apprentissage avec peu ou pas documentation ou de tutoriels et un gourou technique plutôt que des humains ordinaires. Et j'aime produire aucun absurdité et des instructions claires que tout le monde peut envelopper la tête autour. D three est une bibliothèque JavaScript qui est étonnamment facile à utiliser pour ceux qui ont travaillé en JavaScript auparavant, particulier les bibliothèques comme Jake Weary parce qu'elle suit beaucoup des normes et des meilleures pratiques que vous avez vues auparavant. D trois, Aussi comme Jake Weary vous permet de manipuler et d'interagir avec n'importe quel élément sur une page Web que vous pourriez modifier et lire à partir de HTML CSS et interagir avec d'autres JavaScript. Donc, tout ce que vous créez est un élément entièrement conforme de toute l'expérience dans le navigateur . Si vous ne connaissez pas HTML CSS et JavaScript du tout. Vous voudrez prendre inter classe sur ces technologies avant de travailler trop avec les trois. Cependant, j'ai tendance à utiliser un langage très simple et à essayer d'expliquer clairement les choses, comme si mon public n'était pas super technique. Ainsi, même une personne quelque peu technophobe pourra tomber avec ce cours, même si certains des détails sont un peu flous. Puisque tout dans D 3 se passe dans un navigateur, cela signifie que nous devons commencer par créer une page Web de base. Donc, je suis ici dans Sublime Text, qui est un excellent éditeur de texte pour le codage car il reconnaît votre code et fait des choses comme le cull le surviennent, vous aidant à trouver des bugs dans les problèmes et le texte sublime finira même vos extraits de code pour vous comme vous tapez des choses. Il fera des suggestions sur les choix que vous pouvez faire qui ont du sens et vous permettra de faire des choses comme simplement taper HTML. Appuyez sur la touche de tabulation, et il va mettre en place toute votre page Web de base pour vous, un gain de temps énorme par rapport à travailler dans aucun pad ou l'envoyer par SMS, par exemple. Donc maintenant que j'ai un framework HTML, je peux juste mettre dans le titre de ce document. Je vais aussi ajouter un div vide avec le graphique I D, qui est où tous les bons trucs D trois vont se produire plus tard. Ensuite, je vais ajouter du CSS à la page afin que je puisse simplement taper, style et appuyer sur Tab, et il ajoutera automatiquement une balise de style pour mon CSS. Donc, d'abord, je vais ajouter une couleur d'arrière-plan au corps de l'ensemble de la page Web essentiellement et aussi définir le avec 2 100%. Donc de cette façon, il va juste étirer toute la largeur de la page. Donc, si je sauvegarde ceci, retournez à mon navigateur et actualisez cette page, nous voyons que la couleur de fond de cela, comme le gris, étend le tout avec du document. Et il utilise aussi la hauteur. Voudrait juste, vous savez, le corps sera en quelque sorte de hauteur par défaut 200%. On n'a pas besoin de s'inquiéter pour ça maintenant. En outre, ce que je vais faire, c'est que je vais ouvrir un autre élément de style ici, une autre entrée CSS pour mon graphique. Et bien sûr, graphique hashtag signifie qu'il va s'appliquer seulement à l'élément avec l'idée de graphique cette chose ici et je vais redéfinir la couleur de fond. Dans ce cas, je vais le faire correspondre à l'arrière-plan du corps, ce que je vais expliquer dans une seconde. Je vais définir un spécifique avec juste pour que ce soit un ensemble dans une hauteur définie et vous verrez ce que ça fait. Et je vais aussi définir une, um, marge supérieure et inférieure de 50 pixels juste pour sortir du bord supérieur du navigateur . Les animaux ont dit une marge horizontale automatique de sorte qu'il est automatiquement centré lui-même. Et je vais aussi lui donner une frontière. Juste un groupe solide. On choisit la bordure noire. Donc encore une fois, si je retourne en arrière, rechargez ma page. Vous savez, je viens de l'éloigner du bord avec cette marge supérieure de 50 picks, puis la marge automatique la place au centre, et j'ai la même couleur de fond mais une petite bordure pour voir où elle vit réellement . Et j'utilise cette couleur de fond parce que plus tard, je peux dire quand je la change, ce que vous verrez dans la vidéo suivante. Je vais pouvoir voir la différence pour m'assurer que les changements qui vous font qu'elle se produise réellement. Ok, il est temps de passer à faire quelque chose sur cette page qui a vraiment à voir avec D 3. J' ai trouvé la meilleure façon d'apprendre est de travailler sur une tâche spécifique plutôt que d'apprendre en théorie quel code fait quoi. Nous allons donc construire un nuage de points animé et interactif en utilisant D 3. Ce cours ne va pas tenter de couvrir tous les détails et nuance sur D 3, mais nous allons nous concentrer sur plusieurs des concepts clés les plus importants qui, une fois que vous les comprenez, vous permettront de faire toutes sortes de des choses. Et à partir de là, il sera plus facile d'apprendre des concepts de niveau plus profond dans la bibliothèque. Il est à noter que D trois peut créer ses objets soit en tant qu'éléments SPG, qui sont des graphiques vectoriels, auras, éléments de canevas qui font partie de la norme HTML cinq. Ce sont des avantages et des inconvénients que je ne vais pas entrer ici. Ce cours travaillera sur Lee an SPG. Mais si vous préférez canvas html five, il ne sera pas difficile de convertir ce que vous apprenez ici pour utiliser cette norme à la place, enfin, avant que nous puissions réellement travailler avec D trois. Nous devons en fait ajouter d trois, la bibliothèque à la page. Donc je vais ajouter une balise de script, et je dois juste définir la source. Et cette source est un fichier JavaScript dans ce cas qui vit droit dans le dossier allait vous montrer ici droit dans le dossier à côté de mon fichier html point d'index. Donc je n'ai pas à lui donner un chemin. Mais vous pouvez, bien sûr, référencer la bibliothèque sur un dépôt Cdn qui vit dans le nuage quelque part. Mais je venais d'utiliser un fichier local. Ensuite, nous allons commencer à ajouter des éléments SPG à la page pour voir comment fonctionnent les méthodes les plus basiques D trois . En passant, tout le code de ce cours sera disponible via le lien dans la description du cours afin que vous puissiez télécharger et suivre leçon par leçon. Mais si vous le pouvez, je vous recommande d'écrire le code vous-même en cours de route. Il n'y a pas de meilleure façon d'apprendre qu'en le faisant vous-même 2. Ajouter des éléments SVG dans D3: Alors maintenant, il est temps de prendre le fichier que nous avons juste une sorte de mettre en place le cadre de base pour et commencer à ajouter des choses à la page, Commencez à ajouter les éléments SPG qui vont devenir sont vraiment sexy et cool graphique interactive . Donc la première chose que je dois faire est que je vais ajouter une balise de script ci-dessous mon div ici. Et la raison pour laquelle je l'ai mis là est que, vous savez, la façon dont HTML se charge est qu'il se charge de haut en bas. Donc, ça le lit d'ici jusqu'à ici. Et je ne veux pas que mon JavaScript essaie de faire quoi que ce soit avec ce div mettant des choses dedans jusqu'à ce qu'il existe réellement. C' est pourquoi j'ai mis des choses en dessous qu'il y a des façons de le faire. Où tu l'as mis ici n'a pas d'importance. Ce n'est pas vraiment un détail dont nous devons nous inquiéter aujourd'hui, mais il est plus facile de le mettre en dessous du jour où vous voulez que les choses se passent. Donc, dans cette balise de script, la toute première chose que je vais faire est que je vais créer une variable appelée Xvg, et cette variable va contenir un élément D trois et donc laissez-moi juste créer ça. Je vais dire 3 points de sélection et je vais dire Sélectionnez ce tableau, Dave qu'on a créé. Et puis avec ça, je veux que vous renversiez un SV G. Et je veux lui donner un attribut de oops A avec des attributs de 1000 pixels. Copiez et collez les modifications à la hauteur et modifiez cela à 500 pixels. Et à mon petit demi-côlon. Alors que se passe-t-il ici ? Je suis littéralement juste en train de créer une variable qui essentiellement contiendra alors un d trois spg d' une certaine largeur et hauteur. Cela va donc essentiellement être annexé au tableau. Et donc ce que je vais faire maintenant, c'est que je vais juste sauver ça. Je vais retourner à mon navigateur. Je vais frapper, rafraîchir, et vous ne verrez rien, parce que essentiellement, parce que essentiellement, j'espère qu'il y a un élément SPG ici, mais nous n'avons pas donné d'attributs autres que la largeur et la hauteur, Donc je ne peux pas dire si c'est là. Mais ce que je peux faire, c'est ouvrir mon inspecteur Web. Donc c'est l'option de commande. Je suis sur le Mac et je peux aller regarder les éléments. Si vous n'êtes pas familier avec ce genre de processus et comment cela fonctionne, regardez certainement dedans . C' est un excellent moyen de déboguer le code. Mais au centre, je peux voir chaque élément HTML tel qu'il a été généré sur la page afin que je puisse cliquer dans mon graphique, que je vois a une flèche à côté de lui, ce qui est un bon signe. Il doit y avoir quelque chose à l'intérieur. Sinon, il n'y aurait pas ce petit héros. Je clique dessus ouvert et assez sûr, je n'ai pas l'élément spg. Il a une largeur de 1000 picks et une hauteur de 1000 pixels, c'est pourquoi ce sont des oeufs qui sentent toute la surface de cette même bordure d'arrière-plan que j'ai créée plus tôt. Donc, lorsque vous roulez, vous pouvez voir que c'est une sorte de point culminant en bleu. Donc, il l'a fait. Je ne peux juste pas le voir maintenant, alors réparons ça. Donc ce que je vais faire, c'est que je vais y aller et je vais ajouter du style à mon CSS ici. Je vais juste dire pour tous les éléments SPG juste en utilisant la balise SPG là, je veux que vous définissiez la couleur de fond. Et c'est là que je vais juste le dire d'attendre. Ok, donc c'est de ça que je parlais tout à l'heure quand j'ai créé l'arrière-plan de ce gris. Et puis j'ai fait ma journée de la même couleur grise. Donc, il s'est mélangé ensemble. C' était un peu inutile, sauf que maintenant, quand je me rafraîchis, mon blanc va vraiment apparaître. Donc maintenant, je sais qu'il existe sans même jeter un coup d'oeil ici à l'inspecteur est logique. L' autre chose que je vais faire, c'est que je vais ajouter quelques autres variables. Je vais ajouter une variable au-dessus de tout ici, et le 1er 1 va être appelé avec. Je vais mettre ça à 1000 jambon et créer une hauteur appelée que je vais mettre à 500. Et pour ceux d'entre vous qui ont fait de la programmation, vous pouvez probablement prédire ce que je vais faire ensuite. Je vais en fait définir ces attributs pour utiliser ces variables, et donc essentiellement, je commence à abstraire. Vous savez des choses que si je voulais changer la largeur et la hauteur plus tard, je pourrais juste le changer ici, et ça changera automatiquement ici. Vous savez des choses que si je voulais changer la largeur et la hauteur plus tard, je pourrais juste le changer ici, Et bien sûr, vous verrez. Probablement sur la route, je vais utiliser ces variables d'autres façons, ce qui est pourquoi il est utile de le faire. Ok, donc ensuite ce que je veux faire, je veux vraiment ajouter quelque chose à mon SPG. Hum et je veux en quelque sorte vous montrer comment SPG fonctionne un peu. D' abord, je vais prendre mon SPG. Alors maintenant, ce genre de variable est ça ? Comme je l'ai dit, un conteneur qui a un élément SPG entier pour que je puisse faire quelque chose de similaire à ce que j'ai fait avant, où je vais écrire quelque chose à lui. Donc je vais prendre mon SPG, et je veux juste remonter un rectangle. Et le raccourci pour cela en langage SPG, c'est en quelque sorte son propre langage. Appelons ça. D' habitude, je n'ai que les quatre lettres effacées. Ok, donc je vais panda rectangle. Je vais aussi lui donner quelques attributs. Et donc je dirais d'abord, je veux définir les attributs X où il va être situé sur la page horizontalement et je dois dire, Mettez-le à 100 copie coller. Je dois définir le pourquoi à 100 à je vais ajouter un avec des attributs. Et donnons-lui un 10 et fera la hauteur aussi 10. Donc, ce que j'ai fait ici, c'est que j'ai ajouté un rectangle à mon SPG Si je dis cela et je vais rafraîchir Boom, je n'ai pas svg rectangle qui est 100 photos est terminé dans la direction X et 100 pixels vers le bas dans la direction Y Couple points importants ici d trois spg la hauteur Le pourquoi est un peu déroutant et contre-intuitif. C' est 00 ici, dans le coin supérieur gauche. Donc, chaque fois que vous ajoutez une hauteur, vous êtes en train de descendre devient parfois un peu déroutant lorsque vous placez des choses à l'écran. Mais essaye de te souvenir de cette neige. Si je vais dans mon inspecteur et que je vais dans mon élément SPG maintenant, il y a une erreur à côté de lui. Je peux l'ouvrir et je peux voir que j'ai un rectangle situé un ex de 100. Pourquoi avoir 100 avec de 10 pixels et j'ai de 10 pixels. Vous remarquez que vous n'avez pas besoin d'avoir le PX ici. Il se débrouille automatiquement. Donc SPG vous permet de créer les objets géométriques comme des rectangles ou je peux faire un cercle et mon cercle, je pourrais ajouter, et des attributs, qui s'appelle C X. Et je vais expliquer que dans une seconde je suis va pousser celui-ci un peu vers la droite. Donc, il en a 100. Je vais dire 200. Je vais lui donner un C. Pourquoi ? Et nous pourrions aussi bien le garder à la même chose. Pourquoi positionner comme l'autre et est un autre attribut pour les cercles, qui est notre qui, si vous êtes familier avec la géométrie, vous pourriez être en mesure de deviner est le rayon du cercle. Donc, ce que j'ai fait ici, Comme je l'ai dit, le C X, qui est essentiellement un rectangle, est la position basée sur le coin supérieur gauche de ce rectangle. Donc, ce coin supérieur gauche est exactement 100 pixels au-dessus et 100 pixels vers le bas. Où est maintenant ? Si je me rafraîchis, See Ex dit. Placez le centre du cercle exactement dans ce cas, 200 pixels au-dessus et 100 pixels vers le bas, sorte que les cercles sont situés en fonction de leurs centres. Les rectangles et certains autres objets sont situés en fonction de leurs coins en haut à gauche qui pourraient également devenir un peu déroutant et funky juste pour que vous le sachiez. Donc tu sais juste, tu dois te souvenir de ça. Et puis j'ai dit un rayon de cinq pour ce cercle. Et donc c'est un diamètre de exactement 10. Donc c'est la même chose avec ce rayon de cinq diamètres 10. C' est une largeur de 10 etcetera. Vous pouvez probablement obtenir le juste ici. Encore une idée de base. SPG assemblé à des objets géométriques. Vous ajoutez un tas d'attributs tels que son emplacement. Sa largeur, sa hauteur, son rayon sur elle fait ce que vous pourriez attendre. Je vais en faire un de plus ici, vous pouvez aussi un stylo, des choses comme des lignes. OK, et voici les attributs modifiés encore une fois. Donc, au lieu de X ou C X, ce que nous avons est X un. Donc le x du premier objet et je dis, pourquoi un et mettons-le aussi sur 100 vers le bas et je vais faire un x deux et pourquoi deux ? Et donc le X 2 je vais mettre 400 le Y deux à 200. Et donc pour la ligne, vous devez également ajouter d'autres attributs, qui est la couleur du trait. Certains de la peau et donné accident vasculaire cérébral noir. Mettez dans mon rafraichissement semi deux-points et vous verrez une ligne. Encore une fois, qu'est-ce que je regarde ici ? C' était quoi, toutes ces choses ? X un, La première valeur X Une ligne commence ici et se termine ici. Il a donc essentiellement deux positions et donc la deuxième position est X deux. Et pourquoi si x deux est poussé Tout le reste ici. Pourquoi ? Pour pousser ici. Donc, il crée une ligne d'ici à ici et il découvre automatiquement que le SPG, vous savez, avait une sorte de mettre l'angle là-dedans. Il suffit de relier ces deux choses. Idée de base. Je peux définir la couleur du trait. Je pourrais changer le coup avec si je voulais toutes sortes de choses. Donc, vous savez, SPG a toutes sortes de choses au-delà des rectangles, des cercles et des lignes. Vous pouvez ajouter des symboles que vous pouvez ajouter, vous savez, essentiellement géométriques comme des polygones qui ont toutes sortes de formes bizarres. Mais l'idée de base est toujours la même. Vous ajoutez l'objet en utilisant le langage SVG. Vous ajoutez les attributs nécessaires pour que vous puissiez le voir et le placer quelque part sur l'écran, et c'est tout. Donc, comme, alors que nous créons notre graphique interactif un peu plus tard, nous allons juste le faire. Ajoutera des objets dans un certain emplacement et les colorisera etcetera, fonction de divers attributs. Espérons que cela a du sens. devrait être assez simple. Ensuite, nous allons passer à vraiment travailler avec des données. 3. Commencer à travailler avec des données dans D3: donc c'est génial. Vous savez, nous pouvons créer des formes et des lignes et toutes sortes de choses dans SPG dans le navigateur en utilisant D trois . Mais D trois est vraiment une question de travail avec des données. Alors pourquoi ne pas commencer à faire ça ? Chargons quelques données et voyons ce que nous pouvons en faire. Donc, je suis un début juste en supprimant les choses que nous venons de faire plus tôt où nous avons ajouté le rectangle dans le cercle dans la ligne. Je n'ai plus besoin de ça. Et je vais juste créer une nouvelle ligne. Et ce que je vais faire, tout d' abord, c'est que je vais utiliser quelque chose intégré dans D trois appelé d trois que CS v. Et quand vous faites un CSP à trois points, c'est qui chargera, comme vous le devinez, un fichier C S v . Et je travaille avec un fichier appelé Boston Housing dot CS frais, qui est disponible dans le dossier avec les trucs que vous avez téléchargés pour le cours ici. Et allons-y avant de commencer. Jetons un coup d'oeil à ça. Vous voyez, le fichier SV et je peux vous expliquer ce qui se passe là-dedans. Donc, un fichier de frais CS est un fichier délimité par des virgules, ce qui signifie que vous avez des champs et des données qui sont juste séparés par des virgules. Donc, comme vous pouvez le voir ici, je le regarde en quelque sorte nativement dans l'éditeur de texte. Ici, j'ai des noms de champs qui sont toujours dans la première ligne d'un fichier CSP séparé par des virgules . J' ai donc un champ appelé Crime un appelé Charles etcetera, tous séparés par des virgules et ensuite chaque ligne de données ci-dessous. Il s'agit d'une valeur de données pour l'associé de champ dans la même position, séparée par une virgule de la suivante, puis de la suivante, etcetera, etcetera. Donc, vous pouvez le regarder dans l'éditeur de texte. C' est juste un fichier texte brut avec les valeurs séparées par des virgules. Vous pouvez réellement ouvrir ces fichiers dans Excel, qui est en train de le regarder maintenant, et il le pose juste plus comme une feuille de calcul typique. Excel, en passant, peut exporter voir les fichiers SV pour voir si vous avez des données qui ne sont pas au format CSP, et vous voulez utiliser un commentaire de fichier délimité. Vous pouvez exporter depuis Excel n'importe quel format d'Excel vers un CSP. Alors juste très rapidement quelles sont les données ici ? On a des données sur le logement à Boston. C' est une sorte d'ensemble de données célèbre qui contient district par district, différentes variables pour diverses choses sur les nouveaux quartiers résidentiels à Boston. Nous avons donc le taux de criminalité dans le district. Nous avons, ah, ah, la valeur binaire vient de s'appeler Charles, qui est soit un zéro, soit un. La plupart d'entre eux sont des zéros. Mais de temps en temps, on trouve un quartier de logement qui en a un. Et ce que ça représente, c'est que ce quartier est à côté de la rivière Charles à Boston. C' est tout ce qu'on représente. Nous aussi celui qui mesure l'oxyde nitreux dans l'atmosphère de ce quartier. Pour quelque raison que ce soit, nous avons le nombre de pièces dans un logement dans cette région. Le nombre moyen ou médian de chambres, l'âge, l'âge médian du logement, ce qui signifie, quand a-t-il été construit il y a 65 ans ? Dans ce cas, la distance de certaines zones de métro clés. Nous avons le pourcentage de pauvres dans ce district ainsi que la valeur médiane d'un logement dans ce district. Et, euh, je ne suis pas sûr si c'est en milliers ou quelle est la valeur ici, mais c'est ce que ces champs signifient, et donc c'est à ça que les données ressemblent quand on les regarde, juste un format simple. Donc, si je retourne au code ici, j'ai commencé par taper d trois points CS frais. Et puis vous mettez dans le nom du fichier et une note importante à ce sujet. D trois ne peut pas lire des fichiers de données comme celui-ci à partir d'un dossier de fichiers. Donc, vous ne pouvez pas exécuter ce code simplement en déposant sur le fichier html avec JavaScript dans votre navigateur. C' est pour ça que tu as remarqué mon toi. Les RL ressemblent aussi à ceci. Ce sont des sites Colon 80 80 parce que je cours un navigateur Web très simple localement sur ma machine de développement. L' une des façons les plus simples de le faire est d'aller au bit NAMI B i t. Et suis-je point ou gars croire, et vous pouvez télécharger une pile de carte. Donc, dans ma ma'am de mon ordinateur, qui est moi, pas Macintosh Apache, ma suite PHP, et vous pouvez télécharger cette application et ensuite il exécute essentiellement un serveur Web localement. C' est un moyen très facile de le faire. Il y a 1 000 000 autres façons de le faire. Mais si vous n'êtes pas super technique NAMI, madame, les piles étaient formidables pour commencer. Donc, vous devez exécuter à partir d'un serveur. C' est la chose rapide de vous frapper des erreurs, essayant de ne pas utiliser un serveur. C' est pour ça que tu saches. Bon, alors jetons un coup d'oeil au code, donc d trois points CSP d trois points CSP natif charge nativement voir les fichiers SV ces fichiers délimités par des virgules . D trois a également d trois points tsv, qui chargera un fichier délimité par des tabulations où les champs air séparés par des onglets. Il y a aussi maintenant d trois points dsv, qui va essentiellement lire toutes les valeurs délimitées. Donc, en d'autres termes, vous pourriez avoir des données qui viennent avec des tuyaux verticaux entre chaque champ de données que vous avez défini manuellement Quel est le dilemme dans le d trois points dsv de l'UE. Si longue histoire courte, c'est juste une sorte de fonction ou la méthode pour faire ce truc. Et je vais juste te montrer la syntaxe. Et donc l'idée de base est que je dis d trois points chemin CSP vers le fichier dans ce cas est dans le même dossier que ce code, ce qui explique pourquoi il n'y a pas de chemin de dossier ici, puis D trois. La version 5 a commencé à utiliser des promesses. Donc je ne vais pas entrer dans une grande leçon ici sur les promesses et ce qu'elles sont. Mais l'idée de base est que d trois deux JavaScript, vraiment généralement pour des années et des années pourrait faire des choses synchrones. Ce qui signifie que vous pourriez demander un fichier et ensuite javascript vous voulez faire quelque chose avec les données dans ce fichier ? Et c'était un sens synchrone que vous demandiez le fichier et ensuite vous deviez avoir du code écrit, c'est-à-dire, et une fois que ça arrive, une fois que nous avons fait ce travail, alors faites des choses. Et JavaScript utilise maintenant cette syntaxe où vous dites d trois points c s v Dans ce cas pour D trois, vous savez, vous savez, c'est ainsi que Syntex fonctionne ici et ensuite utilisé point alors, et tout ce qui est à l'intérieur de cela ne sera pas déclenché jusqu'à ce que D trois ait téléchargé et analysé ce fichier CSB. Donc, ça rend juste beaucoup plus facile orteil. Essentiellement, ne faites pas d'erreurs où vous essayez d'appeler du code avant que les choses précédentes ne se soient produites, surtout dans vos fichiers d'appel, parce que si ce fichier est, euh, sur l'été Web et vous, il code qui parlait au web pour aller chercher un fichier , puis télécharger ces données, puis le sac à main. Ça peut prendre un certain temps. Et si les entraîneurs se déclenchent trop rapidement, vous pouvez avoir des ennuis rapidement. De si longues promesses vous évitent de faire cette erreur. Très bien, donc d trois points c S v fichier nema ou chemin vers le point de fichier puis puis je veux faire quelque chose . Et ce que je vais faire, c'est que je vais appeler une fonction parce que maintenant je pourrais faire un tas de trucs en un seul endroit. Donc, c'est à ça que ça ressemble d trois points c s v point Puis fonction, vous savez, accolades et tout ce qui est ici. Tout ce que je veux faire ici, je peux le faire maintenant. Une chose que je vais faire aussi est que je vais dire des données de fonction maintenant que les données de mot ici sont juste un paramètre et ce que cela signifie Dans ce cas, si vous êtes familier avec JavaScript, vous pouvez appeler une fonction, et puis vous êtes passant une fonction du paramètre dans la fonction, puis vous pouvez faire des choses avec ce paramètre. Dans des fonctions comme celle-ci, le paramètre reflète davantage ce qui s'est passé. Donc, en d'autres termes, d trois points c s v lit dans ce fichier C S v. Et puis quoi qu'il arrive là-dedans, je dis que je veux faire des trucs avec ça dans cette fonction. Et donc la première chose que je vais faire avec ça, c'est que je vais dire les données du journal des points de console. Et donc si vous êtes programmeur, vous savez déjà ce que cela fait. Si vous ne l'êtes pas, c'est peut-être nouveau. Mais l'idée de base est que dans les navigateurs Web modernes, vous avez l'inspecteur Web. Et donc si je dio commande option I sur chrome ou contrôle, Option I sur PC et cram, il ouvre cet inspecteur Web où vous avez comme outils de développement, dont l' un est appelé le Consul et le Consul. Lorsque je charge ce code, vous verrez si je fais le journal de points de console, qui est à nouveau intégré dans la plupart des navigateurs modernes. Ce sera essentiel tout ce que je lui ai demandé de tout de suite. Laisse-moi changer les cheveux Eurail pour utiliser ça. Quel était le dossier qui fonctionnait maintenant, qui est le dossier de données 03. Et si je lance maintenant ce code, regardez ce qui se passe au conseil maintenant que les données qui ont été lues à partir du fichier CSB sont là parce que je l'ai demandé à être écrit là-bas et je peux voir que j'ai 506 éléments parce qu'il y a 506 lignes dans le ensemble de données. Et si je frappe ce petit air ici, ça s'ouvre et je peux voir qu'il est en fait divisé en segments 100 100 rose à la fois. Pour quelque raison que ce soit, je ne sais pas pourquoi ? Mais c'est le cas. Et puis, si je m'ouvre, je peux voir chaque ligne individuelle de données. Et donc si je vérifie cela par rapport à mes données originales dit, Si je retourne au fichier CSB ma première ligne, le taux de criminalité est de 0,632 Et bien sûr, c'est le nombre que je vois ici. Et l'oxyde nitreux est de 0,0 point 537999 peu importe. Et cela correspond à ce que j'ai ici donc littéralement ligne par ligne, je l'ai écrit sur la console juste pour que je puisse voir que les données sont là. Il ne lance pas d'erreur ou quoi que ce soit d'autre. Et en passant, chacune de ces lignes, vous remarquerez que c'est Jason JavaScript. Les notations d'objet du C S V ont été converties en Jason, qui est un format de données que JavaScript aime vraiment. D 3/10 pour travailler avec elle. Beaucoup de la plupart des JavaScript que vous travaillez ces jours-ci travailleront avec Jason lorsque vous parlez de données. Et le format Jason est juste le nom du champ accolade, virgule de la valeur du champ deux-points, un autre nom de champ , valeur deux-points etcetera, etcetera, etcetera. Vous pouvez voir ici, nous voyons point, point point. Mais je peux à nouveau ouvrir chaque ligne et voir chacun des champs dans chaque valeur unique. Donc, vous pouvez en quelque sorte inspecter les données de cette façon et vous assurer que tout se passe de la façon dont il est censé se produire juste en faisant le journal des points de console. J' ai donc maintenant des données. Ce n'est pas l'anneau de l'époque, ça marche. Ça fait exactement ce que je voulais faire. Donc maintenant, nous pouvons réellement commencer à faire des trucs avec ces données, alors passons-y. Je vais commenter les ébauches de bûches de doute du consul. On n'a plus besoin de ça. Et ce que je vais faire, c'est ça. Je vais juste commencer à taper ici. Je vais dire spg dot select all quote dot d o t. Et alors que se passe-t-il ici ? Vous remarquerez avant qu'on fasse quelque chose de similaire. Nous avons dit d trois points de sélection de hachage graphique livre signe graphique. Et je disais, Hey, D 3, s'il vous plaît sélectionner la Div avec le graphique i d. C' est déjà dans le dom le modèle d'objet de document. Et nous voyons quelque chose de très similaire ici. abord, je dis, utilisez l'objet S V g que nous avons créé j'aurais pu dire d trois points electile ou comme Fiji Die Select Toutes sortes de n'a pas d'importance. Mais je dis du travail dans ce truc que nous avons déjà. C' est comme tout le monde, pas seulement l'un des 1er 1 qui est ce que d trois points sélectionner comme. Tous aiment chaque chose qui a le point de classe Maintenant, ceux-ci n'existent pas encore, dont je parle dans une seconde, mais sélectionnez toutes ces choses si elles existent et sinon, c'est bon parce que nous allons faire des choses. Quoi qu'il en soit, il y a une de ces choses bizarres à propos de D 3 que vous pouvez faire ça même si elles n'existent pas, et ça marche toujours. Alors prends juste ma parole sur celui-là. Donc je vais dire dot select all dot et ensuite je vais commencer à faire des trucs avec ça parce que la façon dont ces sélecteurs fonctionnent, si vous êtes familier avec Jake fatigué, vous êtes déjà habitué à travailler avec des sélecteurs idée très similaire. Vous sélectionnez des choses, puis vous faites des choses avec elle et a également des méthodes enchaînées. Donc, je dis svg dot sélectionner tout. Et puis si je fais un autre point quelque chose ou autre et un autre point quelque chose plutôt après cela ,tout sera enchaîné tous travaillant sur la même chose jusqu'à ce que vous frappez un point-virgule, , auquel cas est en quelque sorte fait. Donc, par exemple, je vais dire que ça a tranché tous les points et je vais dire avec ces choses, je veux que vous utilisiez des données. C' est ce que font les données de points. Et puis je transmets ce paramètre que j'ai sorti plus tôt. Au fait, ces paramètres pourraient être nommés n'importe quoi. Je pourrais appeler ça Fred et si je l'ai appelé Fred plus tard, ça va marcher pour ça ne doit pas être appelé données. Juste pour que vous sachiez, cela doit être des données de points, mais le nom du paramètre pourrait être n'importe quoi. Donc je vais juste utiliser des données parce que c'est simple. Donc les données de points ont utilisé ces données et ensuite je vais dire entrer. Et c'est un autre genre de chose étrange spécifique à propos de D 3, où il y a essentiellement cette commande Entrée. Il y en a aussi une qui s'appelle sortie. Et donc le marché, c'est que je dis, accord, D trois. Je veux que vous aimez tout ce qui a un point de classe, je veux que vous travailliez avec des données et spécifiquement ces données que j'ai et quand je veux faire est pour chaque objet entrant dans l'écran, ce qui va être un pour chaque ligne de données. Je veux que tu fasses des trucs avec ça. C' est donc ce que fait le point enter. Si j'avais été, disons, disons, mettre à jour les données et une rose avait disparu d'un ensemble de données parce que je les filtrais ou quelque chose, je pourrais l'appeler point exit et alors je dirais qu'il peut être de supprimer tout points à l' écran qui quittent parce qu'ils disparaissent des données. Donc nous ne allons pas vraiment aller dans la sortie de point du tout, mais point Entrée est pour chaque chose ajoutée à l'écran, je veux que vous fassiez des choses. Alors ce que je veux que tu fasses. Eh bien, je vais dire, euh point ajouter un cercle parce que je voulais un cercle pour chaque rangée de données. Et donc, vous savez, plus tôt quand nous avons testé l'ajout de cercles, nous avons dit « v g dot upend circle », qui était un cercle en attente, non ? C' est génial. Ce qui est vraiment puissant et cool à propos de D trois, c'est que quand je dis sélectionner quelque chose de données utilisées et pour chacune de ces choses, saisissez-le. Et puis pour chacun de ceux que je dis, ajoutez un cercle. Essentiellement, cela agit comme une boucle. Il est littéralement en boucle à travers les données une route du temps et pour chacune de ces choses, ajoutant un cercle à la scène, ce qui est super cool et puissant. Et maintenant je vais dire pour ce cercle, je veux que tu aies un attribut. C' est comme ça que fonctionnent les méthodes enchaînées, non ? Et maintenant je travaille sur ce cercle parce que j'ai ajouté quelque chose. Et pour chacun de ces trucs, et je vais dire que je dois lui dire où devrait être le centre. Et je vais juste mettre ça à 100 comme on l'a fait avant. J' ai besoin de définir la valeur c y. Fais ça 100. Aussi, je vais régler le rayon à, disons, cinq, et je vais avoir de nouveaux attributs que je vais appeler. Eh bien, je ne vais pas appeler. C' est Phil. Et donc ce que c'est la couleur de remplissage maintenant quelques notes à ce sujet. Tout d'abord, vous devez utiliser le mot Phil. Vous savez, si vous faites cela en CSS, ce que vous pouvez faire d'ailleurs au lieu de dire, attribut, attribut, Phil, je pourrais dire classe d'attribut et lui donner un nom de classe, puis mettre une classe ici dans mon CSS et établi que la couleur de remplissage là-bas, et je dois ajouter après l'appel Phil, ils ne sont pas de couleur parce que c'est SPG. Et c'est le mot que SPG utilise pour Phil voiture. Mais longue histoire courte, je peux produire un CSS, mais dans ce cas, je le fais intentionnellement comme une couleur de remplissage définie manuellement dans le JavaScript. Parce que plus tard, je vais m' ajuster. Je me sens la couleur basée sur les données. C' est pour ça que je le fais de cette façon. Vous pouvez certainement le faire d'une façon ou d'une autre dépend de ce que vous essayez de faire. Donc si je sauve cette chose et que je recharge la page sur laquelle nous travaillons plus tôt, mais que se passe-t-il ? J' ai ce qui ressemble à un cercle. Et donc je suis dans mon inspecteur web. En plus de la console, j'ai cette chose appelée éléments et éléments. Je devrais vous montrer tous les éléments de la page, le modèle d'objet de document entier. J' ai donc mon div avec une idée de graphique ici. Si j'ouvre ça, j'ai mon SPG. Et si j'ouvre ça, regarde ça. Je vois mes cercles et ce n'est pas un seul cercle. C' est beaucoup, beaucoup, beaucoup de cercles. Mais bien sûr, ils ont tous le même c x et voir pourquoi. Donc, essentiellement, j'ai plus de 500 cercles assis l'un sur l'autre juste là. Donc, en d'autres termes. Le code fait exactement ce qu'il est censé faire, il fait exactement ce que je veux . Donc on se débrouille vraiment bien. Rien à faire avant de partir ici, c'est que je vais ajouter une chose que je vais dire que les cercles sont égaux à ça. Je mets une variable. Et la raison pour laquelle je fais cela est parce que si je veux me référer à ces cercles que j'ai créés plus tard rapidement et facilement, je les ai maintenant essentiellement attachés à un objet. Un peu comme je l'ai dit, vous savez, S V G est égal à ça, et je pourrais me référer à SPG plus tard et travailler avec. C' est pourquoi je fais des cercles égaux pour que j'aie accès plus tard. Et à ce point, je vais déclarer cette variable cercles ici, ce qui introduit une autre idée vraiment importante dans la programmation qui est appelée portée . Et donc je ne vais pas vraiment ici pour expliquer la portée et la profondeur. Mais l'idée de base est que si je dis que vous savez, cercles sont égaux à quelque chose et je ne le déclare pas en dehors de cette fonction, alors que les noms de variables cercles ne sont disponibles que tant que je suis à l'intérieur de ces accolades . Donc, en d'autres termes, si j'essayais de faire quelque chose avec des cercles ici, tu sais, plus tard et mon script, ça ne marchera pas, parce que le script ne sait pas qu'il existe. Mais si je le déclare ici, je dis qu'il y a une variable. Il va appeler des cercles et vous gardez l'œil dehors pour ça. Puis quand je fais des trucs avec ça et que tu sais, une sorte de signe c'est une valeur ici, alors il est toujours disponible pour moi plus tard. C' est pourquoi nous avons ces variables globales, comme dans la hauteur et les cercles. Et, euh, SPG est aussi variable globale. Donc nous travaillerons avec eux plus tard. D' accord, alors nous allons commencer à appliquer plus d'attributs aux cercles qui vont être dictés par les données et commencer à donner vie à ce truc. 4. Créer des graphiques basés dans des données dans D3: Bon, donc on peut commencer à faire des trucs avec ces cercles maintenant, fonction des données que nous avons chargées et travailler la première fois, c'est que je vais retourner ici. Et j'allais ajouter quelque chose à ces cercles. Et quand je vais ajouter c'est cette classe parce que, vous savez, je fais cette sélection toutes les choses de classe de points ici et ils n'existent pas encore. Je fais des trucs avec eux de toute façon, mais ils le veulent. Adam, je pourrais aussi bien m'assurer qu'ils ont cette classe parce que plus tard, si jamais je voulais me référer à eux en utilisant un select all, vous connaissez les choses de points de classe, alors ils les auront. Donc, cela ne sert aucun but en ce moment sauf de savoir qu'il est là pour une utilisation plus tard . Je vais aussi le faire. Je vais ajouter autre chose. En outre, les attributs que nous pouvons ajouter des styles directement et un attribut de style sera ajouté à l'objet directement dans la balise, comme vous le verrez dans une seconde. Donc le style que je vais ajouter est l'opacité. Message de l'opacité à 0,5, et donc la capacité peut être n'importe où entre zéro et un zéro est invisible. L' un est 100 % opaque, et donc 0,5 est 50 % translucide. Alors je vais frapper, sauver. Je vais rafraîchir la page et vous verrez qu'il ressemble exactement le même parce que j' ai encore 506 points courus l'un sur l'autre. Même s'ils sont à moitié trans écoutés, il semble qu'un seul point soit encore. Mais je peux voir ici, dans l'inspecteur, qu'ils ont un style de laissez-passer. Il e 0,5 chacun d'entre eux. Et en passant, ils ont la classe égale point Donc tout est ajouté de manière appropriée. Le code fait ce qu'il est censé faire. Donc, vous savez, c'est évidemment un bon endroit pour commencer. Donc la prochaine chose que je vais faire, qui est, vous savez, vraiment ce qu'on est là pour faire, comme le plus important dans D 3, c'est aussi. Modifiez le placement de ces objets en fonction des données, à droite. Un nuage de points est des points sur un graphique placé dans l'axe X horizontalement dans une certaine position, basé sur le nombre, pourquoi accéder à un sous-sol certaine position, et dans notre cas, nous allons utiliser Thea la taille DOT, également basés sur des données. Alors faisons d'abord la valeur X. Donc ici, je mets le centre sur l'axe horizontal manuellement. 200 pixels à partir de la gauche. C' est génial. Peu importe. Ce n'est pas vraiment daté visualisation, cependant. Au lieu de l'envoyer manuellement et statiquement, ce que je peux faire est d'utiliser une fonction. Et donc la fonction ressemble à ceci et vous savez, donc c'est un peu comme la fonction plus tôt où nous avons une fonction puis un paramètre. Alors quel est ce paramètre D maintenant, au fait, encore une fois, je n'ai pas besoin d'appeler ça d. Je pourrais appeler ça Fred Joe ou X Y Z n'a pas d'importance, mais je l'appelle parce que c'est une sorte de norme en D trois. Et ce qui est vraiment puissant et étonnant à propos de D 3, c'est que chaque cercle a été ajouté à la scène parce que j'ai dit, vous savez , sélectionner des données utilisées, et pour tous ceux qui sont ajoutés à un cercle, il n'a pas simplement ajouté les cercles. Il a également lié les données de chaque cercle à chaque cercle, signifie que chaque ligne de données qui conduit cette existence de cercles est également liée à cet objet. Donc D trois est conscient des données associées à chacun de ces objets. Donc, si je dis que nous allons utiliser la fonction au lieu de dire cela manuellement et je dis juste que la console regarde la console que le journal D j'ai frappé, actualiser sur la page, enregistrer et actualiser et regarder ce qui se passe. Tout d'abord, tous les cercles sont coincés ici parce que je ne lui ai pas dit une valeur à utiliser. Ouais, juste pour que tu saches. Mais si je retourne à ma console, regardez ce que j'ai ici maintenant, comme nous avons vu plus tôt chaque rangée de données. Si je fais défiler, jusqu'au sommet est maintenant visible dans la console parce que je l'ai demandé à être écrit là. Et c'est donc la première ligne de données. Rappelez-vous, crime est de 0,63 à, euh, oxyde nitreux nocif est de 0,5379 etcetera. Et pour que les données y soient liées. Donc, je peux utiliser ces données à chaque fois que je me réfère à cet objet. Laisse-moi juste me débarrasser de ça. Et si je faisais ça ? Donc, la fonction maintenant, afin de définir cette valeur C X, je dois utiliser return parce que ce que cela fait est que je dois dire que 200 est réellement. Je dis, dit que les attributs de l'attribut C X aux résultats de cette fonction, et vous devez utiliser le mot retourne. Si je dis juste ce retour 100 et que j'appuie sur Refresh, regardez ce qui se passe. C' est exactement ce que nous avions avant où j'ai des centaines de points, tous dans la même position. Le sexe est 100 c sage 100. Donc, rien n'a changé par rapport à ce que j'ai fait plus tôt, sauf au lieu de dire mettre le c x 200 vous tous dans un seul endroit. Je dis utiliser une fonction, mais je suis toujours de retour. Euh, des valeurs statiques. Ce n'est pas si intéressant si je prends ce retour, au fait. Donc, je suis juste en sécurité 100 ici et j'ai frappé. Rafraîchissez les cercles et ici parce qu'il n'y a pas de C X qui est défini D trois est confus. Et donc si vous frappez une erreur comme celle-ci, que vous ferez probablement neuf fois qu'il est présent parce que vous avez oublié d'utiliser le mot retour ici, alors assurez-vous que c'est la valeur de retour, mais je ne veux pas définir cette pour être statique. Ce n'est pas le but ici. Je veux le définir pour être piloté par les données. Donc, à la place, je vais dire utiliser ce paramètre D et utiliser d point pauvre. Et c'est ainsi que vous faites référence aux valeurs de Jason en JavaScript. C' est D cause c'est le nom de l'objet que nous avons assigné ici nom de champ point et rappelez-vous, nous avons un champ qui est appelé pauvre droit ? Le pourcentage de pauvres dans ce district. Donc, quand je dis retourner d point pauvre, il dit, utilisé ce champ pour cette valeur de cercles qui y est liée. L' un d'eux a écrit un temps. Donc si je frappe, rafraîchis, regarde ce qui va se passer ? Je n'ai plus 500 points l'un sur l'autre, mais ils sont tous brillants coincés ici. Et alors pourquoi c'est ça ? Eh bien, parce que le pourcentage de pauvres dans ce premier point est de 4,98 %, ce qui signifie que j'ai demandé d 3 de placer ce point 4,98 pixels de la gauche. Les suivants neuf pixels à partir de la gauche. Les prochaines pour les prochaines. Environ trois, etcetera, etcetera, etcetera. Ces pauvres valeurs un très petit nombre donc ils sont tous coincés là-bas et côté gauche . Donc juste pour que je puisse tous les voir. Et si je les multipliais tous par Disons 50 maintenant, je frappe, rafraîchis, et regarde, maintenant je peux les voir. Et parce qu'ils sont étalés, je peux maintenant voir la translucidité. n'y a qu'un point ici, il y a tout un tas l'un sur l'autre juste ici, etcetera, etcetera. Maintenant, ils s'enfuient de l'écran. Donc, je vais principalement changer pour un 30 pour l'instant, juste pour que je puisse les voir. Ce n'est pas la façon dont vous faites la visualisation des données cause l'importance de l'échelle, est-ce pas ? Vous ne multiplieriez jamais manuellement mon numéro. Mais je veux juste voir où ils vivent et voir ce que ça fait. Et ça semble fonctionner. Donc c'est assez bon pour l'instant. Maintenant, je ferais quelque chose de très similaire. Où, au lieu d'utiliser ah, définissez la valeur ah, valeur dure pour voir pourquoi je vais définir cela en utilisant une fonction. Aussi, au lieu d'utiliser le champ pauvre, je veux utiliser le champ des chambres. Je suis un nouveau dire balais fois 50 dans ce cas et je suis un coup rafraîchissement et Wow. Regardez que nous avons quelque chose qui ressemble à un nuage de dispersion. Et donc encore une fois, il est de régler manuellement les paramètres, vous savez, en termes de comment, combien sur la multiplication des nombres par ce qui est bizarre. Mais c'est assez bon pour avoir une idée de ce à quoi ressemblent ces données. Et donc j'ai pauvre. Tu es plus pauvre à droite. Et tu l'as fait. N' oublie pas, c'est une autre chose bizarre. Zéro sur l'axe Y est en haut et en haut. Pourquoi le numéro est en bas. Donc, en d'autres termes, plus vous êtes pauvres, moins vous avez de pièces dans votre logement, ce qui est logique. Mais bien sûr, ça monte verticalement, ce qui est un peu bizarre. On s'occupera de ça plus tard. Maintenant, enfin, je vais ajouter aussi pour ma valeur, juste la taille de la bulle, une autre fonction, et je vais utiliser le champ de valeur, accord. Le prix de chaque logement a frappé, rafraîchir. Et j'ai des points géants et j'ai des points plus petits. Mais l'air est vraiment géant. Ils sont tous au-dessus de l'autre, et je pourrais rendre les faciles encore plus petits. Donc je vais juste diviser par deux à nouveau juste pour voir à quoi ça ressemble. Et c'est bien. Donc maintenant, j'ai un petit petit petit point et j'ai de beaux gros points clustering. Et encore une fois, du point de vue des données, tout a du sens. Moins pauvres sont ici, ce qui signifie plus riches, beaucoup plus gros points, ce qui signifie plus de valeur, plus pauvres, petits points, maisons de moindre valeur. C' est juste que cela a du sens conceptuel lorsque nous pensons à la façon dont ces types de choses fonctionnent du point de vue des données. Donc la dernière chose que je vais faire, parce que je vais juste ajouter un style à mon CSS ici parce que je veux que mes points, mes choses avec point de classe aient deux attributs associés à eux. Le 1er 1 est un trait, et je mets la couleur du trait manuellement sur noir. Mais je vais aussi ajouter un coup avec et c'est la syntaxe pour ça et le coup avec je vais mettre à ah un. Et je pense que c'est un. En fait, une minute. Je pense que je dois faire un PX um et donc je pense qu'il fait un pixel par défaut dans SPG. Et si je dis ceci et je frappe, rafraîchir nous ne pouvons vraiment pas le voir parce que les points sont déjà noirs et que la capacité est de 50% du coup, c'est que vous ne pouvez vraiment pas dire la différence, mais nous allons l'utiliser dynamiquement plus tard. C' est pour ça que je l'ai dit de cette façon dans l'Azaz. Une classe avec style. D' accord, alors nous allons commencer à travailler avec vraiment définir ces échelles de ces choses correctement, en utilisant un autre outil vraiment puissant intégré dans D 3. 5. Utiliser des Échelles D3: Très bien, ça va être un gros. Ça va être une leçon assez compliquée, beaucoup de code, mais beaucoup de choses répétitives. Donc, une fois que vous aurez les concepts, il se réunira relativement simple. Mais il y a beaucoup de choses à faire ici. Dis juste, tu sais donc la dernière leçon que tu connais, on a placé ces points sur l'écran juste en multipliant les choses correctement. Nous avions de petites valeurs pour les pauvres, donc il est en quelque sorte multiplié par 30 juste pour le faire étaler manuellement. Et ce n'est pas la bonne façon de le faire. Ce que nous devons vraiment faire est d'utiliser un outil construit en deux D 3 pour définir nos échelles dynamiquement en fonction des données et en fonction de la quantité d'espace disponible pour nous et D 3 a intégré ces outils incroyables pour le faire. Ce que nous devons vraiment faire est d'utiliser un outil construit en deux D 3 pour définir nos échelles dynamiquement en fonction des données et en fonction de la quantité d'espace disponible pour nous et D 3 Et donc ce sont des échelles D trois, et il y a un tas de façons différentes de faire des échelles et D trois. Je vais juste en faire un ici, en fait finir par faire un couple pendant cette leçon. Mais je vais commencer à utiliser un que vous allez probablement vous retrouver en utilisant un peu, qui est une échelle linéaire. Donc la première chose que je vais faire est que je vais juste créer une variable appelée X Scale parce cette Gail va utiliser pour notre axe X est un placement horizontal. Et j'ai vu Mlle 8 X échelle égale d trois points échelle linéaire. Et c'est parce que c'est une échelle linéaire, qui signifie qu'elle aura essentiellement un point de départ et un point sans fin. Et si vous transmettez des valeurs n'importe où entre ces deux nombres, il va essentiellement mettre quelque chose à l'écran basé sur n'importe où entre ces deux nombres le même rapport, qui ont tous commencé à raser une seconde. Donc, une échelle se compose de deux choses. Il y a le domaine, puis il y a aussi la plage. Par conséquent, le domaine est également souvent appelé les valeurs d'entrée et les plages se réfèrent à la valeur de sortie. J' allais donc définir manuellement mon domaine et ma portée et expliquer ce qu'ils sont. Donc, l'idée de base ici est que je dis que je vais utiliser une échelle, et je vais passer les valeurs et le passé dans les valeurs ou les valeurs d'entrée, et ensuite cela va les convertir par magie en coordonnées X. sur l'axe X entre zéro et 500. C' est la façon dont vous l'utilisez réellement est au lieu de dire, retourner d dot pauvres fois 30 comme nous l'avons fait plus tôt. Au lieu de cela, nous disons retour ex échelle Didot pauvre. Et maintenant, quand je dis est correct de comprendre où mettre les choses sur la valeur X, utilisez cette fonction appelée échelle X, en utilisant cette valeur cercles médiocre. Et c'est donc la valeur d'entrée. Donc quelque part entre zéro et 30, je suppose. Ou peut-être les valeurs minimales et maximales disponibles dans ce champ. Et donc, en d'autres termes, si elle était, si d point pauvre était 15 pour ce cercle sera juste au milieu. Entre ces deux linéaires l'échelle, les valeurs linéaires et donc va retourner et placer sur l'axe X exactement un 250 à nouveau un mi-chemin entre zéro et 500. Donc, la valeur d'entrée est la valeur de données et la plage la valeur de sortie est le placement dans les coordonnées X. Alors voyons ce qui se passe si je frappe juste une sorte de sauver ici et de cliquer sur Rafraîchir. Regarde ça. Donc, il va tout le chemin potentiellement de son petit zéro jusqu'à ce qu'il devrait être 500 qui devrait être à mi-chemin. Pourquoi ça va au-delà de 500 ? Peut-être que je dois avoir des valeurs supérieures à 30 et c'est ce qu'est une échelle linéaire. Il fera n'importe où entre ces deux valeurs, laissant des nombres de handle qui vont au-delà de ces deux valeurs. Jetons donc un coup d'oeil à nos données ici. Si je regarde mon pauvre champ et que je passe du plus grand au plus petit. Bien sûr, la valeur la plus élevée est en fait d'environ 38. Et c'est pourquoi les choses s'étendent au-delà du droitier. Donc si je nous change, c'est tout. Je pensais que l'invité le maximum était de 40 coups, sauver, frapper, rafraîchir, regarder. Ça arrive. Tout s'écrase maintenant. Maintenant, il n'y a pas de valeurs supérieures à 500. En fait, c'est un peu plus petit que 500 parce qu'un peu moins de 40 si cela a du sens. Une chose que vous remarquerez est que le domaine et la plage que vous passez dans un tableau après ces petits crochets sont donc un tableau avec la première valeur et une seconde valeur. Si vous faites des échelles et que vous avez des erreurs, ça ne marche pas, non ? Ou peut-être qu'il lance même une erreur réelle. Les chances sont plutôt bonnes. Vous avez oublié que les crochets à l'intérieur de ces parenthèses étaient la virgule ou quelque chose comme ça . C' est une erreur très courante, surtout quand vous commencez tout juste. Donc nous avons encore, vous savez, quelques problèmes ici, qui est que je suis tout d'abord, vous savez, vous savez, assis ma valeur maximale à 500 d'après j'écris ma gamme, accord. La valeur de sortie réelle, où il va réellement sur l'écran que vous êtes vraiment un milliers. Permettez-moi de changer ça pour l'instant. Encore une fois, il suffit d'être actualisé manuellement. Et bien sûr, il se propage. C' est le pouvoir des balances, non ? Il est tellement plus facile de faire des choses comme ça. Mais pire que ça, c'est que je fais une supposition. Je suppose que la valeur minimale pour ce champ pourrait être zéro. La valeur maximale peut être 40. En fait, la première hypothèse que j'avais eu tort, n' est-ce pas ? Un exemple parfait d'erreur. C' est aussi une mauvaise façon de le faire. Et si j'avais un ensemble de données géant et que je ne savais pas que les valeurs minimales et maximales étaient encore pires. Et si je travaillais avec des données dynamiques et que ces données étaient en train de changer. Et donc, le maximum minimum pourrait vraiment changer au fil du temps, donc je ne peux pas définir manuellement ces nombres. Ça n'a pas de sens de faire ça. Ce qui m'amène au prochain outil vraiment grand, puissant, important, important, utile qui est intégré dans D 3, où je peux en fait, vous savez, calculer les valeurs minimales et maximales . Donc encore une fois, je vais créer une variable. Je vais juste appeler X hommes, Max, Max, parce que ça me donne le min Max pour le placement X à nouveau, et je vais utiliser d étendue à trois points et d étendue à trois points fait exactement ce que je dis. Il est en fait juste de trouver les valeurs minimales et maximales. C' est juste la syntaxe. C' est comme ça que je fais. Comme je transmets les données une fois de plus, j'ai cette variable appelée données. Donc, je transmets ça, et puis je dois utiliser une fonction pour en sortir. Ce que je veux en sortir. C' est une bonne fonction d'utilisation de temps d juste parce que c'est une bonne norme à utiliser. Mais je pourrais appeler ça d comme je voulais et la raison pour laquelle je dois faire une fonction est parce que ces données sont essentiellement une collection d'un tas de champs. Je dois dire à trois points quel champ je me soucie. Donc, je veux dire retour d point pauvre Maintenant, si je viens de retourner d point pauvre, ça va devenir très confus parce que dans un fichier C S V, toutes ces données sont réellement stockées sous forme de texte. Et donc trois choses. Toutes ces valeurs, même celles que nous connaissons leur nombre parce que nous regardons lui ou les humains, nous pouvons dire quel est le nombre. D 3 pense que c'est un texto quelque chose. Il pense que la chaîne 0.632 Donc en fait pour convertir cela en un nombre et je vais utiliser juste une fonction JavaScript intégrée appelée bourse float. Et donc parse float utilise littéralement JavaScript pour dire, Prenez cette chaîne et retournez la valeur flottante. Le nombre décimal réel que cette chaîne représente 0,632 Si j'utilise l'analyse dans I nt, alors nous allons arrondir les nombres vers le haut ou vers le bas deux entiers que nous ne voulons pas parce que nous voulons les valeurs réelles. Alors, le flotteur de sac fait ça. Bon, donc maintenant j'ai la valeur max min. Et allons juste, vous savez, juste ça à la console pour que je puisse voir à quoi ça ressemble. Et assurez-vous que je ne vois pas d'erreurs bizarres. Certains à dire console dot log min Max, revenir ici, aller à ma console hit, rafraîchir, et regarder, je n'ai pas tableau. Voir les petites parenthèses et ma valeur minimale est un 1,73 quoi que ce soit. Et ma valeur maximale est que 37,97 etcetera. Et donc je peux voir chaque valeur individuelle. Ça marche. J' ai donc ces chiffres. Qu' est-ce que je fais avec eux ? Eh bien, vous pourriez deviner que de définir manuellement mon minimum et mon maximum pour mon domaine, je vais utiliser cette variable à la place. Certains essais ont utilisé les X hommes Max. Utilisez la première valeur pour l'entrée minimum et utilisez la deuxième valeur pour le maximum. Et donc vous remarquerez que la première valeur est que la position d'index zéro dans un tableau et JavaScript Et la deuxième valeur est à la première position d'index. Un peu déroutant si vous n'êtes pas un programmeur, mais cela a juste eu des travaux de script de travail. Il utilise l'indexation zéro pour accéder au premier élément d'un tableau. Et maintenant, si je frappe, rafraîchir une fois de plus, vous verrez maintenant que ça va de zéro maintenant parce que si je n'ai pas quel que soit mon minimum est, ça va le placer à zéro. Quel que soit mon maximum, ça va le placer à 1000 et tout ce qui se trouve entre les deux va placer n'importe quoi entre les deux. Et donc c'est zéro. Mais n'oubliez pas, c'est le centre des cercles à zéro. Donc, il s'enfuit du bord gauche ou, dans ce cas, s'enfuit du bord droit. Mais il est placé exactement à zéro ou 1000 pour les plus petits points d'extrémité. Donc mon ex balance fonctionne magnifiquement. Donc je vais faire exactement la même chose pour mon pourquoi. Et ma somme r appellerait ça un Lyman retour Simon Collison ou Min Max. Et pour mon pourquoi Min Max valeurs. Je ne veux pas du pauvre champ. Je veux le champ des chambres et pour mon bras et ma valeur maximale à nouveau. Je ne veux pas des pauvres. Je veux la valeur parce que ce sont les champs qui conduisent la position Y dans ce cas et la taille de la bulle dans ce cas. Et une fois de plus, je vais utiliser une chose similaire. Je vais créer deux échelles de plus. Je vais créer une échelle Y et dans notre échelle et au lieu des X Men, Max, je vais utiliser le Wyman Max. Donc pour mon Wyman Max, je vais dire de 0 à 300. On verra à quoi ça ressemble pour le moment. Et ils pour ma balance. Je vais utiliser le bras et Max au lieu des X Men. Max. Et je vais juste dire manuellement que je veux que je ne veux pas que mes cercles soient plus petits que deux ou disons plus grands que 10 rayons de dizaines de diamètre de 20. Et donc encore une fois, je fais la même chose que j'ai fait ici. Je dis d'utiliser l'échelle y avec cette valeur. Et j'ai utilisé notre échelle avec cette valeur. Et je n'ai plus besoin de ce diviseur. Donc, si je sauve, je frappe, rafraîchis et regarde ce que nous avons. Donc, nous allons tout le chemin de haut en bas jusqu'à je ne l'ai dit qu'à 300. Je suppose que ma taille est Qu'est-ce que c'est ? 500. C' est seulement changer à 500 voir ce qui se passe. Oui, maintenant il va tout le chemin vers le bas de tout le chemin vers le haut, toujours le bas jusqu'à gauche jusqu'à la droite, et donc utiliser tout l'espace que j'ai à ma disposition, qui est un excellent point de départ. Mais, tu sais, il est en train de s'écouler. C' est bizarre. Donc il y a un moyen facile de réparer ça, aussi. Tu sais, je lui dis de commencer à zéro et de finir à 500 commencé zéro et entré 1000. Mais pourquoi ne pas vraiment définir cela pour qu'il gère cette mawr élégamment et la façon dont je vais le faire car j'ai ma largeur et ma hauteur en tant que variables ici, je vais ajouter une nouvelle variable appelée Marge sur mon ensemble That à 30. Disons-le. Les 30 pixels de marge dans mon graphique sont ce que je cherche. Et maintenant je ne veux pas mettre que ma valeur minimale à zéro. Je veux le mettre à la marge. En d'autres termes, 30 pixels à partir de la gauche, puis ma valeur maximale au lieu de 1000. Je veux éteindre le avec moins la marge, donc ça va être 970 pixels. Mais la raison pour laquelle je fais cela est ce que si je voulais doubler la taille, je pourrais juste changer ce nombre et il comprendrait automatiquement comment faire tous mes ajustements ici. Et donc de même, je vais dire pour mes raisons pourquoi je veux que la valeur minimale au lieu d' être à nouveau à zéro soit la marge dans ce cas au lieu d'avec ma marge de cul, je vais dire hauteur, ma marge la plus élevée parce que je ne parle pas d'aller comme ça avec mon sage. C' est tout le chemin d'ici à ici. Donc avait sauvé frappé, rafraîchir. Et maintenant tout est déplacé par 30 pixels de tous les bords différents. Mais cela soulève une sorte importante de chose intéressante. Et je l'ai mentionné brièvement avant. Je pense que là où, vous savez, nous avons moins de pauvres si riches, plus pauvres à droite, et plus pauvres ont moins de chambres. Mais c'est ça qui monte, et ça se sent bizarre pour les gens. Même c'est un nombre inférieur parce que le zéro Y ici et haut sage ici. Alors, comment on répare ça ? Tu sais, utiliser des balances devient si facile à réparer parce que tout ce que j'ai à faire c'est dire, tu sais quoi ? Pour mes valeurs d'entrée, au lieu d'avoir ma valeur minimale et c'est associé au plus loin que vous connaissez, au plus bas. Pourquoi, qui est en haut et ma valeur maximale avec le Y le plus élevé. Je peux juste les échanger. Je peux dire, mettre un maximum en haut et le minimum en bas. Et j'aurais pu les laisser la même chose et dire d'échanger ces deux-là. Mais l'un ou l'autre fonctionne. Maintenant, si j'appuie sur rafraichir, tout va basculer verticalement. Et maintenant, oui, plus je reçois moins de chambres, raison, raison, parce que la lecture de l'échelle pour les sages, allant d'un petit nombre d'orteils, un nombre élevé. Donc, il a juste fait ça automatiquement très facilement pour moi. Donc les échelles ne sont pas seulement pour le placement, vous pouvez faire d'autres choses avec des échelles , et je vais utiliser un autre type d'échelle ici, et je vais appeler celui-ci voir échelle, parce que je vais utiliser celle-ci pour les couleurs Donc au lieu d'utiliser une échelle linéaire, je vais nous utiliser une échelle inhabituelle. Donc, c'est l'échelle de points d'échelle orginal. Et cela a également un domaine et fouets une plage a toujours des valeurs d'entrée et de sortie. Dans ce cas, le domaine est essentiellement, um, um, valeurs uniques à revêtement dur. Dans mon cas, qui encore une fois je pourrais faire cette dynamique. Je le voulais, mais il n'y a pas besoin, et les valeurs de sortie sont essentiellement directement associées à chacun d'entre eux. Donc, une échelle linéaire va n'importe où d'ici à ici. En fait, comme vous l'avez vu plus tôt, cela sortira même des limites de la demande que vous fournissez. Alors qu'une échelle ordinaire associe littéralement la première valeur, puis la plage à la première valeur dans le domaine et la deuxième valeur avec les deuxième valeurs de la directement liée. C' est ce que je vais faire ici, c'est que je vais juste lui donner une valeur hexi décimale de la valeur de couleur . Et j'ai pour ma valeur maximale, celle que je vais changer les choses orange pour la valeur minimale. Ils vont être de cette couleur grise. Et donc la façon dont je vais m'en servir c'est de me former. Je remplis la couleur, et donc je vais changer ça en une fonction, Andi, comme vous pouvez l'imaginer, retourner l'échelle C. Et dans ce cas, je vais utiliser le point Charles. Et donc ce qui se passe ici, c'est que je dis, si vous vous souvenez que le Charles Field, si je retourne à la feuille de calcul ici, c'est celle-ci les haies, zéros et les uns. temps en temps, vous en voyez un qui signifie que ce quartier est près de la rivière Charles. Et donc je dis littéralement, en passant un zur ou un de ce champ si le zéro m'a passé une valeur grise, si c'est un, passez-moi une valeur orange. Et maintenant que jamais signé que je rentre, je frappe, rafraîchir et boum. Là, nous l'avons. On a des points orange, on a des points gris. Maintenant, les points orange sont un peu difficiles à voir pour deux raisons. L' un est là l'opacité. Et c'est assez facile pour en réparer un. Ajoutez quelque chose d'autre à cela au lieu de le définir manuellement. Encore une fois, je peux utiliser une fonction. Et donc je vais utiliser à nouveau les données liées. Et au lieu de s'asseoir dans un agneau pour dire retour Dida, Charles est égal à un. Si c'est le cas, retournez-en un sinon retournez, disons 0.3. Donc, si vous n'êtes pas familier avec le raccourci if else instruction en JavaScript, c'est à quoi cela ressemble. Cela dit littéralement si c'est vrai, Dita Charles est égal à un. C' est ce qui vous dit que c'est une déclaration if. Ensuite, faites cela autrement et va donc retourner cette valeur. Basé sur quoi ? Tu sais ce qui est vrai ici ? Donc maintenant, une fois de plus, frapper, rafraîchir et boom ces air parfaitement opaque Alors que ceux-ci sont beaux et fanés retour Très peu une passe ity Mais comme vous pouvez le voir, j'ai encore un problème parce que ces orange les points sont derrière certains de ces points noirs et je veux vraiment que ceux orange se démarquent. Et surtout si nous avions un très petit point orange derrière comme plusieurs points noirs, il peut être que vous ne seriez même pas capable de le voir du tout. Donc, c'est aussi flexible et la façon dont il est flexible est de comprendre une chose très importante propos de svg. SPG est tout au sujet de la commande. Les éléments apparaissent dans le dom sur la page. Donc, la première rangée de données disposée ce premier dotnet l'a laissé tomber ici le 2ème 1 est ici. Le 3ème 1 est là. Et donc si tous les trois étaient au-dessus de l'autre, ce 3ème 1 ici serait littéralement au-dessus de celui-ci ici. Celui-ci ne serait pas visible, alors que celui-ci serait visible. Et donc tout est au sujet du placement dans l'ordre. Donc, cela me dit que si je triais les données de sorte que toutes les données ont été ordonnées par le champ Charles River et tous les zéros viennent en premier, tous les gris et tous les orange viennent plus tard, donc les orange seront alors au-dessus de ces grises. Donc le tri et le script Java est un peu bizarre, la syntaxe. Mais ce n'est pas difficile. C' est juste un peu bizarre et un peu déroutant parfois. Donc, le moyen rapide et facile de faire le tri est simplement d'utiliser les travaux intégrés, obtenir la fonction. Je vais juste leur dire que les données sont égales au tri des points de données, et ce que vous faites ici est encore une fois, vous utilisez une fonction et ce sont deux paramètres qui sont utilisés dans la fonction. Et essentiellement, ça se lit comme ça et je vais juste l'expliquer. Charles, moins a battu Charles. Donc essentiellement, ce qui sort sort fait et JavaScript est. Il passe par les données une ligne, un élément de fois, en fait une sorte de deux éléments à la fois, le premier nombre de hits, puis la deuxième ou la première chose qu'il frappe la première ligne de données. Appelons ça dans la deuxième rangée de données et en disant retour huit, Charles moins battu Charles disait juste Javascript. Si c'est les chiffres bas, faites-le d'abord. Si c'est le grand nombre peut venir deuxième. Si je renverse le battement de Charles moins huit Charles, je l'inverser. Donc, cela peut sembler un peu déroutant. Certainement. Recherchez le tri et JavaScript dans un autre tutoriel pour en savoir plus à ce sujet. Mais pour l'instant, ne vous inquiétez pas. C' est la syntaxe est juste comment cela fonctionne. Donc une fois de plus, maintenant pour ces , genre, regardez ces points ici qui sont en quelque sorte derrière ces autres points. Quand j'appuie sur Rafraîchir. Maintenant, ils sont au sommet parce qu'ils viennent plus tard, quand ils ont été poussés sur le h campus sur la scène à 3 het j'allais faire une autre chose dans le code très rapidement. Hum, vous savez, nous avons parlé un peu de portée variable ici, et nous avons nos variables globales ici. Je vais en fait ajouter mon échelle ex. Et pourquoi les variables d'échelle ici ? Parce que j'ai besoin d'utiliser ceux en dehors de cette fonction plus tard. Ce n'est que des preuves futures. Je sais que je vais vouloir une référence ailleurs. Et maintenant, si je le déclare ici, plutôt ici, ils seront disponibles pour moi plus tard. 6. Utiliser des axes D3: D' accord. Donc nous avons encore d'autres choses que nous voulons modifier dans ce projet. Et, fait, en fait,j'ai remarqué une erreur que j'ai faite tout à l'heure. Si vous vous souvenez, quand nous regardons le code, euh , vous savez, j'avais ajouté cette classe de points, et j'avais réglé le trait sur cette couleur. Mais j'ai des citations autour de la valeur de couleur, et donc vous remarquez que nous ne voyons pas le trait ici. Et exemple si classique du genre d'erreur que je fais tout le temps. Tu sais, si je ne le fais pas, tu n'as pas besoin de guillemets autour de cette valeur de couleur, donc je dois les enlever. Maintenant, si j'appuie sur Rafraîchir. Et maintenant, nous pouvons voir ce joli contour noir autour de nos points orange. Et parce que leur opacité à 100% je les vois, ces autres qui sont, vous savez, essentiellement, plus faible rapacité. Vous ne le remarquez pas vraiment, mais il est en fait très subtilement là parce que n'oubliez pas, c'est en fait une couleur grise, je crois. Longue histoire courte. Je voulais juste arranger ça très vite. Donc, ce que nous allons faire dans cette leçon, c'est ajouter la ligne d'accès. Voici la version finale et nous avons, vous savez, notre valeur minimale maximale. Nous avons nos petites lignes verticales et horizontales. Tu sais, on a des haches. Et comment créer un accès ? Eh bien, vous savez, on pourrait juste le créer manuellement correctement ? Je pourrais littéralement dessiner manuellement une ligne horizontale qui commence ici et se termine ici manuellement. Dessinez cette petite ligne principalement. Déposez cette petite ligne, dessinez principalement les étiquettes. C' est dit un par un. Ce serait une sorte de douleur dans les fesses. Pourquoi le ferais-tu comme ça ? C' est juste dingue. Heureusement, bien sûr, je vais dire que D 3 a des outils intégrés pour le faire très facilement. Un peu comme la dernière leçon. Celle-ci va être très impliquée. Ça va prendre un moment. Les haches sont C'est un excellent outil. Construit en deux. D trois prend quelques étapes, mais encore une fois, copiez coller. C' est en fait un concept assez simple. Il faut juste quelques étapes différentes dans quelques lignes de code différentes pour le faire. Laissez-moi revenir à notre document de travail ici et à notre code, et la première chose que je dois faire est que je vais créer une variable que je vais juste appeler l'axe X. Et donc je vais dire que l'accès X est égal à D trois points espoirs d'accès en bas et ce qui n'est pas le fond de Boston . Et je voulais utiliser ma balance ex. Alors que se passe-t-il ici ? Je crée un objet, et je dis que je veux utiliser la méthode D threes intégrée à l'accès Bottom et un fond d'accès est littéralement juste un accès en bas. C' est le genre d'accès qui vit normalement au bas des graphiques, qui est ce que c'est un axe X, non ? C' est comme ça que nous nous référons à ça. Et vous verrez qu'il ne finit pas réellement en bas de la page par défaut. Nous devons le déplacer. Mais nous devons aussi lui dire quelle échelle utiliser, car alors D 3 fera automatiquement le bon avec l'utilisation du domaine et de la plage que nous avons mis en place ci-dessus dans l'échelle. Donc, cela aide vraiment à faciliter l'ajustement de vos axes à mesure que vos données changent, et je vous le montrerai dans un instant. La prochaine chose que je dois faire est que j'ai besoin de créer un autre objet que je vais appeler X X SG et qu'est-ce que l'axe X G et ce que cela va contenir est un élément de groupe SPG. Donc spg dot upend G et ainsi des éléments groupés. Les éléments G sont vraiment de bonnes choses savent utiliser. Essentiellement, Si vous mettez des choses à l'intérieur d'un élément de groupe dans SPG, alors vous pouvez agir sur ce seul élément groupé comme un seul élément. Et donc, par exemple, si je retourne ici, cet axe se compose essentiellement de deux étiquettes. L' un du haut du bas à cocher marque, un de la partie inférieure du haut et la ligne verticale qui les relie. C' est cinq objets différents si vous voulez les créer principalement. Et même si vous vouliez créer un manuellement, vous pourriez. Mais vous voudriez le mettre dans un élément groupé G un, sorte que vous pouvez alors les déplacer en tant qu'un seul objet. Plutôt avoir enlever tous individuellement. Ce serait fou, non ? Si longue histoire courte, je crée mon élément groupé. Je vais en fait donner à ce groupe un couple de précision, donc même le donner sur i d. et j'allais appeler l'axe X pour mon i d afin que je puisse y faire référence plus tard, et je vais aussi ajouter une classe et la classe. Je vais appeler Access. Et c'est parce que je n'ai pas besoin d'avoir une classe d'axe X. C' est différent de ma classe d'axe y, car ils partagent tous les deux la même couleur et le même traitement visuel, etcetera, fois pour les étiquettes et les lignes. Donc, une classe d'actions fera l'affaire pour cela. Et puis la dernière chose que je dois faire est que je dois ensuite essentiellement prendre cet élément de groupe que j'ai créé cet objet et appeler l'accès que j'ai également créé. Il y a juste cette syntaxe est juste comment cela fonctionne. Ne t'accroche pas trop dessus. C' est juste comment ça fait maintenant que j'ai créé l'Axe ? Ajouté il sont, vous savez, également créé un élément de groupe avec quelques attributs, puis utiliser cet élément de groupe pour appeler l'accès. Si je retourne ici, frappez rafraîchir espère que le nouveau sur désolé hit, rafraîchir et Boom. Nous avons un accès en bas de citation sans citation, même si c'est en haut et vous remarquerez qu'un D 3 a fait des choses assez cool, vous savez. Tout d'abord, il a automatiquement utilisé l'échelle, donc ça commence à n'importe quoi. Cette valeur minimale est 1,7 et va jusqu'à 38 ish où vous pouvez dire à droite Cela va de 30 à 35. C' est si large. C' est moins pourquoi c'est un mensonge comme trois, pas cinq différence. Il a également ajouté automatiquement des graduations à certains intervalles réguliers et même ajouté les valeurs à droite. Donc, il fait des choses basées sur des algorithmes qui sont très intelligents, très puissants. Je ne veux pas utiliser les valeurs par défaut intégrées, que nous allons réparer plus tard. Mais c'est plutôt bon, non ? C' est un très bon début, Donc la prochaine chose que je veux faire est que je veux déplacer l'accès au bas du graphique où il appartient. Il ne veut pas vraiment, vraiment vivre au sommet. C' est une norme que votre ex access vit au bas du graphique et que votre axe Y se trouve à gauche du graphique. Donc, la façon de le faire est d'utiliser quelque chose appelé Transform parce que essentiellement ce que nous voulions est que nous voulions déplacer tout ce groupe, donc après avoir appelé l'accès, nous pouvons simplement ajouter un autre attribut, qui est une transformation et ce que je vais utiliser la méthode translate dans les attributs de transformation et la méthode translate ressemble à ceci. Maintenant, vous remarquerez. Tout d'abord, c'est une chaîne. Donc, j'appelle les attributs de transformation et je le traduit et traduit essentiellement traduit pour que je le déplace zéro pixels sur l'axe X et 100 pixels sur l'axe Y. Donc je dis, ne bougez pas tout horizontalement, mais déplacez-le vers le bas de 100 pixels. Donc, si j'appuie sur Actualiser maintenant, tout ce groupe d'accès, le tout devrait descendre de 100 pixels autour de là. Donc si j'ai frappé rafraichir Boom, il a fait exactement ce que je voulais faire. Donc, comme vous pouvez l'imaginer, je ne veux pas vraiment le déplacer manuellement. 100 pixels. Je pourrais le déplacer manuellement. 470 pixels, hauteur de membre droit, 500 miles, 30 marge, et ça irait juste ici. Mais pourquoi utiliser des valeurs codées en dur quand certaines de ces valeurs peuvent changer sur les routes et dit, je suis en fait changer ce nombre codé en dur et utiliser les variables qui ont déjà établi dans la façon dont je vais le faire est, si vous êtes familier avec le script Java, affaiblir faire ce qu'on appelle la concaténation de chaîne, qui est un gros mot juste pour signifier que je veux prendre ma chaîne et la combiner avec des variables et en quelque sorte le remettre ensemble comme une chaîne. Et la façon de le faire est essentiellement, vous savez, vous savez, j'ai une citation d'ouverture et une citation sans fin, et ce que je veux faire est de mettre fin à la citation et d'ouvrir à nouveau la citation, puis séparé par des signes plus, puis dans le au milieu ici, je vais ajouter la variable. Donc, si vous vous souvenez, la variable est que nous avons notre hauteur moins la marge. Donc vous remarquerez que j'ai mis entre parenthèses parce que si je l'ai essayé, Cat peut-il faire une chaîne et ne pas mettre les parenthèses autour d'elle ? Parfois, ça fait des choses bizarres où ça sera, tu sais, hauteur moins la marge. Et ça finira en fait. Ces deux nombres sont-ils en quelque sorte assemblés, et cela finira par être un grand nombre plutôt que de faire la soustraction d'abord, puis mettre ces 470 pixels dans cette chaîne. , Essayez-le, expérimentez et vous verrez de quoi je parle. La longue histoire courte. Si je le fais maintenant, si j'avais enregistré et appuyé sur rafraichir, ma ligne d'accès va droit au bas, c'est exactement où je le veux. Maintenant, j'ai un problème où j'ai un cercle qui le traverse, parce qu' une fois de plus, cela est également placé exactement centré ici, et nous nous occuperons de cela plus tard. Donc ce que je veux faire maintenant, c'est que je veux résoudre ce problème où j'ai, vous savez, coches intéressantes. D 3 fait juste automatiquement pour moi, ce qui est génial, mais il y a quelques problèmes ici. L' un est que vous savez, il n'y a aucune raison pour ce marché de tiques 15 Comme qui se soucie où 15 est par défaut ? Je recommande que lorsque vous faites des visualisations de données que vous utilisez comme quelques coches, car vous pouvez éventuellement vous en sortir. Donc, ma position par défaut est toujours d'avoir le numéro inférieur et le numéro supérieur et rien d'autre entre les deux. Vous devez me convaincre d'inclure des coches supplémentaires, valeurs supplémentaires, parce que si elles ne servent pas un but, alors elles ne devraient pas être là parce qu'elles sont vraiment une distraction visuelle. Ils vous éloignent des données, ce qui est vraiment là où vous voulez que votre audience soit concentrée. Il y a donc un tas de façons différentes de le faire. Une chose est construite en deux D trois axes, bien sûr, parce qu'ils sont si géniaux, je peux faire des choses comme, disons, ajouter à cela, vous savez, l'axe X. Il va d trois points de fond excédentaire x échelle. Je pourrais juste dire que c'est zéro. Et si je sauve et frappe, actualisez maintenant ce qui se passe. Je n'ai pas de tiques, pas d'étiquettes, pas de graduations supplémentaires, juste la marque de début et de fin afin que je puisse placer manuellement le numéro inférieur et le numéro supérieur ici. Mais ce n'est pas la façon la plus utile de le faire. Au lieu de cela, je peux utiliser quelque chose appelé valeurs de tick. Et donc les valeurs de tick est un peu parce que je peux m'intéresser manuellement dire, je veux des valeurs de tickets à, disons, trois whips trois et 12 et vous remarquerez que ces air dans un tableau Ok, donc juste, vous Sache , encore une fois, si tu fais ça et que quelque chose de bizarre arrive, tu oublies probablement les crochets dans la virgule. Et donc si je dis mettre, prendre des valeurs à 3 et 12 et que j'appuie sur Refresh Look, il y a une tique qui coche à 3. Et puis il y a 1 à 12 vous savez, et Aiken, parce que c'est un tableau en ont autant que je veux que je voulais 33. Boum ! Il y en a 33 maintenant. Bien sûr, je ne veux pas de valeurs de ticks placées au hasard. C' est juste un peu bizarre. Au lieu de cela, je veux juste avoir un numéro inférieur et un au numéro supérieur. Et n'oubliez pas que nous avons déjà une variable qui contient nos chiffres inférieurs et supérieurs. Droit sont les valeurs minimales et maximales, donc je peux copier cette variable. Au lieu de le faire manuellement, je peux dire Utilisez ma tente X Men Max, First Value et My X Men Max Valeur Maximum, deuxième valeur sauver. Et maintenant j'en ai un en bas et un en haut, et vous remarquerez qu'il utilise des entiers par défaut. C' est ce que tu sais. Les trois méthodes d'accès D D D D utilisent. Il y a un moyen de le changer pour utiliser la valeur flottante sur, mais je ne vais pas déranger le faire maintenant. Nous pouvons toujours modifier ce genre de choses plus tard, donc la prochaine chose que je veux corriger liée à la réduction de la distraction visuelle est lesjoueurs oloniaux, parce que je recommande aussi fortement de ne jamais utiliser le noir sur fond blanc vos lignes d'accès ou étiquettes à nouveau, vous voulez réduire le contraste et réduire la distraction. Vous ne voulez pas que votre audience se concentre sur vos lignes d'accès et vos étiquettes. Ils doivent pouvoir le lire, mais ils n'ont pas besoin d'attirer l'attention sur eux-mêmes. Donc, j'ai été recommandé d'utiliser une pluie comme nous avons déjà créé ah style. Nous avons ajouté une classe à ces objets et donc je peux créer une classe dans mon CSS en utilisant l'accès par point. Et quand je dois faire, c'est que j'ai besoin de dire la ligne d'accès à point et le chemin d'accès à point. Et je vais mettre le coup pour que les deux soient gentils comme Ray. Alors pourquoi ai-je fait la ligne Don Access et obtenu le chemin d'accès ? Eh bien, si nous regardons l'accès réel dans l'inspecteur à droite, les éléments ici sont l'élément de groupe, qui contient toutes les choses correctes. Et si j'ouvre les lèvres et que vous voyez qu'il a l'axe de la classe. Si j'ouvre cela, il y a un chemin, qui est la façon dont D 3 crée la ligne horizontale et il y a aussi chaque tick et chaque tick est un groupe qui se compose d'une ligne, qui est le connecteur vertical et le texte. Et donc, pour quelque raison que ce soit, D trois crée des chemins et des lignes. Et donc tous les deux ont besoin d'avoir cette couleur, comme, grâce, coup de couleur. Et il y a aussi le texte qui contient l'étiquette elle-même. Et donc, pendant que j'y suis, je pourrais aussi bien dire le texte de l'axe des points. Et je veux que ça utilise la couleur de remplissage. Et rappelez-vous, je dois utiliser Phil, pas le mot couleur ici. Si j'utilise la couleur, rien ne se passera. Donc encore une fois, bon endroit pour déboguer votre code. Vous allez probablement utiliser la couleur par défaut si vous le faites beaucoup de HTML et CSS, vous ne pouvez pas. Tu dois utiliser Phil. Alors remplissez avec le même gris revenir rafraîchir frappé. Et maintenant, ils sont gentils, comme des taux lisibles, mais ce n'est pas distrayant. Alors maintenant faisons la même chose pour l'axe des y, est-ce pas ? Donc je vais retourner à mes axes et je vais créer Oh, pourquoi l'objet Access ? Et au lieu d'une échelle inférieure, il a utilisé ce qu'on appelle une échelle de gauche. Et au lieu d'utiliser l'échelle x, je vais utiliser l'objet de l'échelle Y. Combien est mon pourquoi les valeurs Min Max ? Et je vais créer un autre objet appelé Why Access G. et ça, bien sûr, utilise mon bras dans un frère. Attribuez-lui une idée de pourquoi l'accès et a encore une fois la même classe. Et puis je vais m'en servir. Pourquoi ? Groupe d'accès ? Je vais appeler l'objet de l'axe y. Et au lieu de traduire zéro horizontalement et 470 ou quoi que ce soit verticalement dans ce cas, je veux avoir cette chose au lieu d'être juste ici chemin au point zéro, qui est où il serait par défaut. Je ne veux pas bouger verticalement du tout. Je veux le déplacer horizontalement. 30 pixels. Donc si je retourne ici au lieu de faire la contamination sur cette valeur et que le saumon le fasse sur la première valeur, alors maintenant il va le déplacer horizontalement et pas verticalement. Mais bien sûr, je ne veux pas le déplacer. Hauteur moins marge. Je veux juste le déplacer de 30 pixels à partir de la gauche. Et donc je vais juste dire, déplacez-le sur le même montant que la variable de marge. Je pourrais Hagit code dur à 2h30 si je le voulais, mais je vais juste le faire comme marge pour l'instant. Donc maintenant, si je frappe, Rafraîchir là il ISS. Maintenant vous remarquerez que vous savez, j'ai encore des cercles qui traversent les lignes parce qu'ils sont placés exactement au même endroit que nous allons réparer plus tard. Et les axes eux-mêmes se croisent, ce qui n'est pas nécessairement un problème. Mais nous allons arranger ça quand nous réparons d'autres choses. Et c'est un autre cas où les axes, vous savez, rendent les choses beaucoup plus faciles à faire que vous ne le pensez autrement. Et donc ce que je vais faire, c'est que je vais en fait vous savez, nous avons nos variables ici avec une marge de hauteur. Il disait que je vais ajouter une autre variable que je vais juste appeler nos valeurs. Et je vais juste assigner ça comme un tableau d'une liste de deux choses dans ce cas qui va être deux et dix. Si vous vous souvenez, nous avons notre minimum, et la taille maximale de bulles sont destinés. Le plus petit est deux pixels et un rayon. Le plus grand est de 10 pixels. Et donc je veux vouloir utiliser ces valeurs dans quelques endroits différents. Le premier endroit où je vais l'utiliser, c'est pour fixer mon échelle. Donc, si vous vous souvenez pour notre gamme droite, nos valeurs de sortie, nous avons dit, mettre de la gauche. Vous savez, la valeur minimale sera exactement 30 pixels à partir de la gauche, et la valeur maximale sera la pleine largeur de moins 30. Donc 1001 est un 30 qui est 9 70 et c'est très bien. Mais si je veux tout mettre bien, je veux que je ne veux pas de ce type ici. Je veux qu'il s'enfonce un peu. Et combien je veux qu'il soit enfoncé ? Pourquoi on poussé sur littéralement, exactement la même quantité que le rayon droit de la moitié de la largeur du cercle. Parce que alors il sera juste ici, et le bord de celui-ci sera exactement au bord de l'accès lui-même. Donc je peux le faire en utilisant nos valeurs. Donc, je peux dire, mettre la valeur X minimale sur les coordonnées X à la marge, plus nos valeurs, cette chose que j'ai créée maximum. Donc, en d'autres termes, ça va toujours être désolé. Pas 10, juste un. Ce sera toujours dans ce cas parce qu'il y a des valeurs est réglé sur 10. Ce sera 30 plus des dizaines de 40 pixels et la même chose la largeur moins la marge moins nos valeurs. Valeur maximale. Et maintenant, si je frappe, rafraîchir tout va se montrer juste un peu, non ? Donc littéralement, ce type est maintenant en train de frapper le bord et je pourrais modifier ça. Je peux y ajouter un ou deux pixels si je le voulais, mais c'est quelque chose que vous pouvez vous ajuster plus tard. J' ai donc nos valeurs. Je l'ajoute à cette année, et je vais faire la même chose en bas pour la raison pour laquelle je ne veux pas ça du haut. Je voulais le haut plus le rayon maximum, et je le veux encore. La hauteur moins la marge moins ce rayon. Donc encore une fois, si je frappe rafraîchir maintenant, tout va s'enfoncer un peu verticalement et vous remarquerez que certains allaient fermer ce gars. Donc, ça ne continue pas, euh, en évidence pendant que je vais et vient. Et je pourrais aussi bien les changer parce que pourquoi, dit Thies, codé en dur quand ceux-ci pourraient être définis manuellement ou en abusant aussi des données dynamiques, donc je vais utiliser la valeur minimale et maximale que j'ai provenant de mes variables en bas. Donc, une fois de plus, enregistrer hit, actualiser. Rien de visible. Changer leur cause. Nous avons déjà vu ce que nous avions fait plus tôt. Maintenant, l' une des choses que vous remarquerez est que ce cercle n'est l' une des choses que vous remarquerez est que ce cercle n'estmême pas au bord parce que ce cercle est plus petit. On enfonce tout de 10 sur celui-là a un petit rayon. C' est pour ça que celle-là est au bord. Mais celui-ci ne l'est pas. Et tu sais, pendant que je joue avec mes chiffres ici, je vais faire un peu plus grand cercle. Je vais l'appeler 15. Maintenant, si je dis que les plus grands cercles sont un peu plus grands, les choses sont toujours automatiquement enfoncées, déplacées, placées exactement là où elles doivent être. Et c'est la valeur d'utiliser des variables plutôt que de définir les choses manuellement. Si j'avais un tas d'endroits où je mettrais les valeurs r manuellement, je devais changer. Alors chaque endroit où est maintenant ? Je le change juste en un seul endroit et dans les mises à jour partout où j'en avais besoin. D' accord. Les choses ont l'air assez bien. Je pense qu'il ne reste plus qu'à animer ça et à ajouter un peu d'interactivité , et nous serons prêts à y aller. 7. Animation dans D3: D' accord. Donc, notre graphique à bulles de nuage de points est plutôt bon. Je suis vraiment content de ça. Et, hum, ensuite, ce que je veux faire est de l'animer, le donner vie parce que, vous savez, nous utilisons JavaScript. Nous créons une chose dynamique qui vit dans un navigateur web, et nous avons à notre disposition les outils pour au moins le donner à la vie visuellement, un peu plus, plutôt que de simplement charger cette chose et de le faire un graphique statique affaiblir. Donnez juste un peu de bonbons pour les yeux, ce qui est en fait une chose très importante. Vous savez, l'esthétique compte dans les communications, et c'est ce que c'est. C' est des communications. Et donc, si vous pouviez la rendre belle et engager une animation est une excellente façon de le faire, nous pourrions aussi bien le faire. Donc je vais juste aller au code ici. Et la première chose que je vais faire, c'est que nous avons créé ces cercles. Nous avons donné aux cercles des attributs comme leur position X et y, rayon , taille , remplissage , couleur , rapacité, etc. Et donc ce que je vais faire en premier, c'est que je vais changer le rayon de ces cercles. Je vais juste supprimer la fonction. Je vais le couper en utilisant, vous savez, commande X sur le Mac contrôle Exxon PC pour que je puisse le coller plus tard. Et je vais juste le changer manuellement, retour à zéro. Quelque chose frappé, enregistrer et actualiser et charger. Et qu'est-ce qu'on voit ? Qu' est-ce qu'on voit ? Rien, n' est-ce pas ? Parce que tous les cercles qui, d'ailleurs, sont toujours là. Donc, si je vais dans le CO, les éléments ici et ouvrir peut-être le tableau et le SPG, nous avons encore des cercles. Ils ont encore des attributs X et Y. Et il est toujours positionné exactement où ils sont censés être sur l'écran, comme vous pouvez le voir lorsque je les enroule, mais ils ont tous un rayon de zéro. Ce sont donc des objets qui n'ont pas de largeur et de hauteur, donc ils sont essentiellement invisibles. Mais ils sont là. D' accord, donc ils existent toujours. Ils sont toujours à l'écran, ils n'ont pas de visibilité. Et on va changer ça en animation. Donc la façon de le faire est ces deux choses rapides la première chose que je vais faire est que je vais ajouter un appel de fonction ici. Donc, une fois que mon script est fait, j'ai, vous savez, créé mon objet SPG Sets de variables créent l'objet SPG. Lisez les données, trié il a mis en place mes trucs d'échelle, ajouté les cercles sur les lignes d'axe. Et maintenant je vais dire, s'il vous plaît, faites une mise à jour. Et c'est une fonction que je vais créer appelée mise à jour. Je pourrais appeler ça. Quoi que je voulais, j'allais l'appeler mise à jour et ensuite créer une nouvelle fonction ici et vous remarquerez que c'est en dehors de cette fonction sur laquelle nous avons travaillé ci-dessus. Rappelez-vous ces accolades qui a terminé la fonction qui a commencé avec D trois points CS frais, Ce qui apporte à la première ligne ici une idée très similaire à portée variable. Essentiellement, les fonctions ont la portée de. Et donc si j'étais orteil écrire le code pour exécuter ce que je veux avoir dans cette mise à jour, l'animation à l'intérieur de cette fonction, comme où le reste de ce truc est, alors je n'aurais pas accès à cela en dehors de cette fonction. Maintenant, dans cette leçon que j'enseigne sur D 3, nous ne ferons rien avec ça, mais c'est une bonne pratique de mettre vos mises à jour, choses en dehors de cette fonction d'appel de données parce que plus tard, comme, dire, j'avais un bouton sur la page. Je veux cliquer sur ce bouton qui charge peut-être de nouvelles données ou change des choses que je veux réanimer des choses. Si c'est en dehors de cette fonction d'origine, alors j'y ai accès lorsque je fais des choses comme cliquer sur les boutons. C' est donc juste une bonne pratique de le faire de cette façon. Donc, je vais appeler une fonction appelée Update, et puis je dois créer cette fonction. Et c'est la syntaxe pour le faire. Et maintenant, cette fonction va consister en le code pour que l'animation se produise. Et donc, comme je viens de le dire, vous savez, nous avons son objet appelé cercles, qui contient nos cercles que nous avons créés et liés aux données et ajouté des attributs pour ce que je peux faire. Cette fonction de mise à jour est référencée à cet objet. C' est pourquoi nous avons ajouté ce nom de variable, ce nom d'objet. C' est une minute d'appel, c'est que je vais dire juste des cercles de transition de points et c'est juste une autre bonne méthode. Construire en D trois qui vous permet de créer des animations se produisent. Vous voulez une transition choses sur la scène et faire des choses arriver. Et donc ce que je veux faire arriver, c'est , c' j'ai changé mon rayon à zéro. Et donc je veux animer le rayon au fil du temps. Et donc la façon de le faire est de dire, attribut de point de transition cerclé Parce que ce que je veux une transition, ce sont les attributs eux-mêmes . Et donc je veux faire passer l'attribut sont le rayon revenir ici et coller dans cette fonction que j'ai copié plus tôt, et donc littéralement je dis prendre mes cercles animer les attributs sont et animés à cette valeur que nous utilisé plus tôt. Bon, donc je vais sauver et je suis un coup de rafraichir et regarder ce qui se passe. Ils sont tous animés sur la scène, et cela arrive très rapidement parce que la vitesse par défaut de l'animation est assez rapide. J' allais le charger à nouveau. Juste vous pouvez le voir encore une fois. C' est l'animation sur. C' est bon. C' est mieux que de ne pas animer, je suppose. Mais c'est vraiment rapide. Et donc au lieu de simplement les animer à la fois, ce que je veux faire est de les retarder et je vais juste montrer la syntaxe pour retarder les choses et juste vous montrer une chose rapide. Donc, avant de modifier les attributs, vous voulez lui dire de faire en sorte que le délai se produise. Et donc disons que je suis allé ici et j'ai dit, juste retarder 1000 millisecondes et le retard. La valeur est toujours en millisecondes, donc 1000 millisecondes est une seconde. Donc, si j'appuie sur sauver, j'appuie sur Rafraîchir. Qu' est-ce qui va se passer, n'est-ce pas ? On va voir un écran blanc de Blakes pendant une seconde, et puis je m'anime encore très, très vite, si vide, puis je m'anime. Donc, c'est OK. C' est au moins je peux voir qu'ils animent séparément des axes. C' est déjà un peu mieux qu'il ne l'était. Mais ce que je veux vraiment faire, c'est que je veux que chaque point soit animé individuellement un par un dans l'ordre dans lequel ils apparaissent sur la scène à l'écran. Donc, la façon de le faire comme je peux aussi une fois de plus changer ce délai en une fonction. Et donc ce que je vais faire, c'est que je vais dire fonction, peut-être quelque chose d'un peu différent ici. En plus de transmettre la valeur de données elle-même, ce que vous pouvez faire dans n'importe quelle fonction comme nous l'avons fait plusieurs fois où nous transmettons les données liées et ensuite nous pouvons nous référer aux noms de champs pour faire des choses avec elle. Vous pouvez également, dans l'une de ces fonctions, référer également au numéro d'index de tout ce qui est passé à travers. Et qu'est-ce que ça veut dire ? J' ai parlé d'indices avant où, vous savez, j'ai créé un rayon appelé X Men Max, et c'était, vous savez, un tableau avec deux éléments dedans. Donc, le premier élément est cette position d'index zéro, et le second élément est une position d'index 1. Donc, juste l'ordre dans lequel ces choses sont stockées dans ces fonctions où ont des données liées , qui a 506 éléments en elle ? Quand je dis faire des choses et faire des choses basées sur la valeur d'index, qui est toujours le deuxième paramètre disponible pour vous dans ces rayons, essentiellement, cela signifie que ça va boucler à travers ces 506 valeurs. Et j'ai accès à ce numéro 12345 après 506. Donc, en fait, si je console doute, connectez-vous que je maintenant que je l'ai fait référence. Oui, je n'en ai pas parlé ici, mais je pourrais faire la même chose dans l'une de ces fonctions. Mais je fais référence ici. Donc, je peux y accéder ici. Consul, dialoguer il a frappé, rafraîchir et regarder ce qui se passe ? Il l'écrit. Tu vois, tous ces numéros sont juste écrits parce que j'ai accès à tous ces numéros de 0 à 505, non ? Pas cinq ou six. Bon départ à zéro. Et donc ce que je vais faire maintenant, c'est pas dire Ok. Au lieu de retarder 1000 millisecondes, je veux retarder. Et encore une fois, je dois utiliser ce mot de retour. Je veux retarder exactement ce numéro. Donc le premier cercle qui apparaît va retarder zéro millisecondes. Ça ne va pas retarder du tout parce que c'est l'indice zéro, le 2ème 1 qui est que le seul indice va retarder une milliseconde. Le troisième sera à quelques millisecondes. Et une course de cinq en 6e 1 va poser 505 millisecondes un peu plus d'une demi-seconde. Donc, si je rafraîchis mon écran, vous allez les voir animer un par un assez rapidement. Ça a l'air assez gentil à ce stade, mais c'est un peu trop rapide. Je vais juste maintenant, juste manuellement, tu sais, disons le multiplier par 10 et maintenant ça va ralentir. Donc, le 506e point va être retardé 5000 et 60 millisecondes. Donc un peu plus de cinq secondes. Et donc toutes ces animations vont prendre cinq secondes. Et maintenant, il a l'air vraiment élégant et agréable et propre et simple. Et je peux en quelque sorte voir comment il se construit sur l'ensemble des données. Ça a l'air magnifique. C' est vraiment une belle façon de regarder les choses. Donc une autre chose à noter est que les transitions, vous savez, animations et D 3 peuvent vraiment se produire sur, vous savez, vous savez, peu près n'importe quoi. Droit ? Donc, je suis là, vous savez, provoquant une transition. Je le retarde. Et puis la chose que je suis en train de faire la transition est les attributs, à droite, le rayon des cercles. Si je le voulais, je pourrais changer, tu sais, l'ennemi. Tous les autres attributs que j'ai définis l'exposition, la position Y, la couleur de remplissage , la capacité, etc. Et donc vous savez, par exemple, que faire si je change la valeur X à zéro par défaut, puis que la valeur X soit cette chose ? Qu' est-ce qui se passerait, c'est que tous les points commenceraient par ici et glisseraient en place, non ? Ou si je transfère l'opacité et non la valeur PR Au lieu que les points soient minuscules et deviennent plus grands du rayon zéro Teoh invisible à un plus grand rayon, ils seraient simplement invisibles et deviennent légèrement plus opaques. Aziz, la capacité se sent dedans pour que vous puissiez animer n'importe quoi. C' est vraiment génial. Et D 3, c'est assez facile de le faire. Donc, cette chose se réunit vraiment bien. Tout ce que j'ai à faire maintenant est d'ajouter un peu d'interactivité et ce que je vais faire dans la leçon suivante est de montrer comment ajouter un effet de survol très simple. 8. Interactivité dans D3: D' accord. Donc notre nuage de dispersion a l'air génial. C' est de l'animation. Tout ce que nous voulons faire maintenant est d'ajouter une certaine interactivité juste pour vous montrer comment cela fonctionne. Et donc ce que je vais faire, Simon et un événement de vol stationnaire, une astuce pour montrer les données associées à des points ou quelque chose de vraiment simple. Et la première chose que vous devez faire est en fait de créer un div, qui va essentiellement contenir mes éléments d'info-bulle d'outils. Et certains allaient créer un div. Et je vais donner une idée des conseils d'outils pour que je puisse y revenir plus tard. Et pendant que j'y suis, je pourrais aussi bien ajouter la classe de Thèse es, qui, parce que je veux m'assurer que la chose ressemble à ce que je voulais avoir l'air droit. Donc, je vais créer un conseil, plutôt une classe CSS. Juste pour cela, je d outil pointe pour le saumon faire est que je vais dire position Absolue. Donc, pour ceux d'entre vous qui connaissent CSS, positionnement absolu signifie juste que partout où je décide de dire à Javascript de mettre ce div, il sera placé dans une position absolue, qui signifie par rapport au coin supérieur gauche de l'ensemble du navigateur pas en quelque sorte dans les paramètres de quelque chose dont il se trouve à l'intérieur, il est juste plus facile de gérer le positionnement exact. Je vais lui donner une couleur de fond blanc, et je vais ajouter un peu de rembourrage. Je pense que tout le chemin en fait, juste 20 pixels de rembourrage. Je pense que tout le chemin en fait, C' est juste pour que lorsque j'ajoute du contenu dans l'info-bulle, vous savez, texte et tout ce que j'y mets, il n'est pas écrasé jusqu'aux bords de cette Div. Je vais lui donner une frontière. Hum, et je pense que je vais juste faire, genre, genre, une solide bordure noire d'un pixel pour l'instant, nous ne sommes pas je ne suis pas vraiment en train de concevoir ça. Je suis juste en train de le rendre visible pour qu'on puisse voir les bords pour qu'on puisse le juger en termes de succès qu'il fonctionne. Laisse-moi juste frapper sur ça. Je vais rafraîchir la page et ce qui va se passer et me laisser fermer chez mon inspecteur . Il y a ma pointe d'outil, non ? Il est coincé ici parce que c'est un jour qui vient après cet appareil, juste en quelque sorte assis ici en bas. Je ne lui ai pas dit de vivre nulle part. Il est visible, même s'il n'a pas de contenu en raison du rembourrage sur. Bien sûr, c'est génial. Il existe. Mais maintenant, je dois faire des trucs avec ça. Et donc la première fois à faire est que je suis en fait une annonce dans la classe qu'il a une opacité zéro est suffisant. Je rafraîchis son invisible. Il est toujours là. Mais c'est invisible parce que je veux seulement que ça devienne visible. Lorsque je roule sur un point et que j'y ajoute du contenu correctement, ce genre de chose a du sens. Ok, donc je voulais prendre vie quand je roule sur dot Comment vais-je faire ça ? Allons dans nos cercles sont des points et, vous savez, nous avons ces événements enchaînés. Allons dans nos cercles sont des points et, vous savez, Tout d'abord, j'ai sélectionné toutes les choses avec la classe. Je l'ai fait agir, vous savez, une sorte de choses se sont produites sur la base des données. Le truc que j'ai fait pour faire était un cercle de stylo et les cercles ont des attributs une fois jamais ajouté tous ces attributs. Il y a d'autres choses que je peux faire, telles que l'ajout de la souris sur le point sur l'événement de la souris. Et donc, si vous utilisez Jake fatigué, vous êtes familier avec ce concept point sur la souris sur le point sur la souris déplacé sur la souris est comment il est fait référence dans D trois. Donc, si je dis point sur la souris et que j'utilise une fonction, alors ce que je peux faire, c'est que je lui dis de faire des choses quand je souris dessus, comme vous vous attendiez. Donc ce que je vais faire ici, c'est que j'allais commencer assez simple ici et vous remarquerez que je transmets les données liées, d'ailleurs, accord. Donc je vais juste dire ça, je vais créer une variable. Je vais appeler html. Je vais dire que html est égal à d point pauvre. Donc, je dis littéralement juste, mettre ce pauvre pourcentage de pauvres dans ce quartier dans cette variable et ensuite je vais dire que je dois décider où je veux que l'info-bulle soit à l'écran. En fait, avant de le faire, faisons juste ce HTML est égal à d que pauvre. Et puis tout ce que j'ai à dire est, um d trois sélectionner cette info-bulle div que nous avons créé et lui donner du HTML, qui est point html. Dans ce cas, je passe l'âge du nom de variable à une fois de plus. Je pourrais appeler cela un nom de variable ? Tout ce que je veux a fait des infos. ce moment, tant que je dis html à propos d'une info masculine elle, ça va marcher. Mais j'utilise juste une variable simple appelée HTML. Espérons que ce n'est pas déroutant. J' ai donc assigné la variable. Je sélectionne l'info-bulle. Je dis Mettez ce html en HTML. Et donc maintenant, si je rafraîchis la page à nouveau, elle n'est pas visible. Mais si je retourne à ma classe et que je commente cette ligne maintenant, ça va être visible maintenant, vous pouvez voir ces chiffres changer quand je roule sur différents points, non ? Alors laissez-moi rendre ce passage plus facile parce que la prochaine chose que je vais dio est en fait placer et rendre visible cette astuce d'outil après avoir ajouté des choses à elle. J' ai donc ajouté mon homme ht. C' est invisible parce que je l'ai rendu invisible à nouveau. Donc, la prochaine chose que je veux faire est que je veux dire, Réglons les whips de style pour cette info-bulle div. Et quand je veux faire, c'est tout d'abord, faites la position de gauche à, disons, juste 100 pixels. D' accord ? Du bord gauche, je vais aussi définir ce style. Je suis dit, mettez-le 100 pixels du haut. Juste en quelque sorte de définir principalement ces chiffres pour commencer, et je dois le rendre visible. Donc je dois ajouter l'opacité du style, et je vais m'asseoir ça à je ne vais pas en faire une. Je vais le rendre un peu translucide pour que vous puissiez voir les points derrière. Mais surtout, vous savez, plupart du temps plus opaque de dans l'épargne translucide. Retourne frapper, Rafraîchir. Donc, mon info-bulle est invisible parce que je ne suis pas roulé sur quoi que ce soit. Dès que je suis en masse sur quelque chose, ça devient visible et c'est là-bas. Exactement 100 pixels de ce coin, 100 au-dessus et 100 en haut à gauche, à droite. Comme je roule sur les différents, vous pouvez voir que la taille de celui-ci sorte de changements basés sur avoir le nombre est le nombre points décimaux il y a etcetera. Donc, ce sont des marchandises. Bon départ. Mais la prochaine chose que je veux faire, c'est que je vais vraiment rendre ce placement plus dynamique. Je ne vais pas faire ça parfaitement, mais je vais te montrer ce que je fais et tu pourras toujours l'ajuster toi-même. Je ne vais pas faire ça parfaitement, plus tard, plutôt que de simplement dire manuellement Placez 100 pixels de la gauche, ce qui est un peu étrange, comme, Pourquoi voudrais-je le mettre là ? Je n'ai pas suivi ma souris. Je voulais vraiment être exactement où je roule sur le point, je veux que l'info-bulle apparaisse là. Donc D 3 s'y est intégré. D trois événements point point page x. alors laissez-moi juste dire que l'actualisation de la touche. Maintenant ce qu'il va faire, c'est dire D 3 me dire où est la souris en ce moment en termes d'exposition et mettre la pointe de l'outil juste là. Et donc il y a ISS. Vous remarquerez maintenant qu'il est aligné sur le bord gauche de l'info-bulle. Il n'est pas centré sur mon point de souris, plutôt, donc je dois le faire manuellement pour pouvoir dire D événement de trois jours sur Page X. Je vais juste dire peut-être, peut-être que c'est 200 pixels de large. Je ne sais rien. Soustraire 100 afin de le faire manuellement à nouveau. Pas la meilleure façon de le faire. Mais c'est bon pour l'instant. Et maintenant, c'est un peu trop loin à gauche. Mais comme je pourrais ajouter, plus de contenu qui mai centre mieux. Donc je ne vais pas m'inquiéter pour ça maintenant. Je veux juste le faire trier généralement dans la bonne position, ish pour le moment. Donc je me demandais la même chose pour le pourquoi positionnement. Et donc je vais dire un événement à trois points sur cette page, pourquoi je vais économiser moins 100 en ce moment. Encore une fois, rafraîchissez. Et maintenant, il suit mon désordre de haut en bas, tout autour, pas parfaitement positionné, mais encore une fois, je peux tweeter ça plus tard. Donc c'est génial. On fait de bons progrès ici. La seule chose que vous remarquerez, cependant, est que même si cela fait ce que je voulais faire, la seule chose qu'il ne fait pas, c'est qu'une fois que je m'en vais, ça ne disparaît pas. Donc c'est bizarre. Ce n'est pas bon. Je dois réparer ça aussi. Donc, comme vous pouvez l'imaginer, si vous avez déjà fait une programmation avec Hickory, je dois aussi ajouter un point sur l'événement de la souris passé en fonction, et dans ce cas je n'ai même pas besoin de lier les données. Je veux dire, je n'ai pas besoin de transmettre ces données liées à dysfonctionnement de l'Islam. C' est juste pour dire, Hé, Hé, sélectionne cette astuce et cache-la pour moi. Donc, d trois ne sélectionne l'info-bulle Div et nous allons définir le style Et je vais juste à quelque chose de vraiment simple. Je vais juste dire, déplacez-le 1000 pixels vers la gauche, Négatif 1000 juste de l'écran et pendant que je suis là, mais je n'ai pas vraiment besoin de faire les deux, mais je ne sais pas pourquoi. Réglons la capacité à zéro à Et donc si je fais juste cela avait sauvé l'actualisation des coups. Maintenant, il suit ma souris et son actif dès que les points disponibles sur l'écran, même si son animation droite. Et une fois que je m'en vais, il disparaît. Donc maintenant, j'ai une astuce d'outil qui fonctionne, vraiment faire à peu près ce que je voulais faire. Mais je pense que je veux ajouter plus de contenu à l'info-bulle. C' est assez fonctionnel, mais je veux juste montrer un concept ici. Vous n'avez pas besoin de simplement passer une valeur que vous savez que nous pouvons faire un membre de concaténation de chaîne. On en a parlé tout à l'heure. Et si je voulais vous donner plus d'informations dans l'info-bulle. Eh bien, une chose que je pourrais faire est que je pourrais dire, OK, HTML est égal au texte d'abord. Je veux que vous sachiez, c'est la valeur X. Donc j'allais dire X, je vais te dire que c'est le pore, um, champ. Et donc c'est génial. Donc maintenant, si je frappe rafraîchir maintenant, tu peux regarder, pense que j'ai cassé quelque chose. Oh, j'ai oublié d'ajouter la science plus, voir que j'ai oublié de ne pas pouvoir faire de ces souches une autre grande j'ai oublié d'ajouter la science plus, voir que j'ai oublié de ne pas pouvoir faire de ces souches une autre grandechose de débogage de code où vous avez fait quelque chose Tout ce qui casse et des choses comme chose de débogage de code où vous avez fait quelque chose Tout ce qui casse et des choses comme oublier les signes plus entre les deux est un exemple classique d'une erreur que vous ferez. Donc maintenant, je vois cette chaîne complète que les deux choses contaminées ensemble sorte de mettre ensemble, et je pourrais aussi bien vous donner toutes les valeurs de champ. Droit ? On a Ford. Tout se passe ici. J' ai le X, le pourquoi le rayon du cercle et aussi la couleur, non ? Laisse-moi changer tout ça. Je vous assure la raison pour laquelle les sont et la couleur et le pourquoi est le champ des lèvres Crooms. Donc, disons cela ici, le R est la valeur médiane de chaque propriété, puis la couleur est basée sur ce champ Charles River. Donc, si je fais cela, cependant, si je ne fais pas un changement rapide ce que vous remarquerez que je dis que HTML est égal à ceci. Et puis je dis que HTML est égal à ça. Donc, je réinitialise essentiellement la variable de mile supplémentaire à chaque fois ici. Ce n'est pas bon. Ce que je dois faire est en fait faire plus égaux pour ces suivants. Et donc si vous n'êtes pas familier avec ce raccourci, je dis que HTML est égal à quelque chose pour cette première ligne et je dis, Maintenant, ajoutez ceci, puis ajoutez-y ceci. Donc je suis juste en train d'y ajouter en chemin. Donc maintenant, si je dis même appuyer rafraîchir maintenant toutes les informations sont là, mais tout est dans les mêmes lignes. Je n'ai pas ajouté de sauts de ligne ou fait un autre style, pas la meilleure façon de le faire, mais une façon simple de le faire. Je peux littéralement simplement ajouter des sauts de ligne. Il y a d'autres façons de le faire, mais j'allais faire le moyen rapide et facile ici pour l'instant, donc je vais ajouter des sauts de ligne au 1er 3 Je n'en ai pas besoin pour le dernier coup Refresh, et maintenant j'ai toutes mes informations là-dedans et c'est clignotant et clignotant parce que c'est essentiellement derrière ma souris, qui est au-dessus d'un point. Mais dès qu'il apparaît maintenant, je suis à la souris sur ce point que je suis fini. Donc, je dois principalement changer cette position. Je vais juste dire, moins 1 50 pour l'instant et voir si ça sort du chemin. Donc c'est génial. C' est, vous savez, c'est bien pour l'instant de coder ces valeurs en dur. Il est intéressant de noter que la bonne façon de le faire comme je le ferais normalement et vous devriez le faire est, plutôt que de dire manuellement, moins 100 moins 1 50 Pour ces deux choses, vous pouvez à la place détecter le avec de cette Div après avoir ajouté le HTML, puis dire type d' événement Ajax, moins qui plonge avec divisé par deux à droite, vous voulez soustraire la moitié avec parce que vous voulez être centré sur votre souris et la même chose pour la hauteur . Détectez la hauteur une fois que vous avez ajouté l'extrême el, puis dites Soustraire la hauteur , puis peut-être quelques pixels supplémentaires. Donc, vous voulez que ce carré sorte de glissé le légèrement au-dessus de votre souris juste des moyens rapides et faciles de le faire. Vous savez qu'il y a d'autres moyens, mais c'est une façon assez rapide, efficace et précise de le faire. C' est bien. Nous avons donc des conseils d'outils qui suivent la souris. Que faire, vous savez, à peu près ce que je veux qu'il fasse, c'est certainement beaucoup de travail à faire en termes de style et de beauté pour rendre les choses un peu plus dynamiques. Mais ça fonctionne assez bien pour nos besoins aujourd'hui, donc on est à peu près fait, sauf comme une chose mineure qui me dérange à propos de ce graphique à bulles sur lequel nous avons travaillé , et je vais corriger ça dans notre prochaine et dernière leçon. 9. D3 - Une chose plus: Donc nous avons fait tout ce que nous avons décidé de faire avec notre nuage de dispersion. Tout fonctionne très bien. Il vient à la vie. Ça anime toutes ces choses. Mais il y a une chose à propos de cet intrigue qui me gêne depuis le moment où nous avons commencé à le créer. Um, si tu te souviens tout à l'heure, on a eu un problème où j'ai retourné tout ça verticalement, non ? Parce que je voulais, euh, ces gars ici contre ici parce que c'était bizarre d'avoir, euh, une valeur élevée, vivre au fond, à faible valeur, vivre au sommet. On l'a retourné verticalement. Rappelez-vous que j'ai un problème similaire avec notre échelle horizontale parce que ce que j'ai ici est un faible nombre signifiant un faible pourcentage de pauvres dans un nombre élevé, un pourcentage élevé de pauvres. Mais pour nous, c'est un manque de quelque chose. Et si je le suis, si j'ai plus de pauvres gens dans un quartier, j'ai des maisons moins précieuses, points plus petits et moins de pièces où se trouvaient au bas de cette échelle sur l'axe des Y, et de sorte que tout ça se sent mal. En fait, c'est une chose connue. chercheurs qui ont fait leurs preuves s'attendent à ce que les valeurs élevées soient au sommet, ce que nous avons fait précédemment se reflète verticalement mais aussi en quelque sorte vers la droite. Hum, donc on a une valeur élevée, ah, pourcentage élevé de pauvres. Mais ce sont des gens qui ont moins de richesses ici, et donc ça se sent mal. Et donc ce que je veux faire, c'est que je veux retourner notre axe X comme nous retournons l'axe r y plus tôt. C' est donc exactement le même processus que nous avons suivi plus tôt, où nous, au lieu d'avoir notre valeur maximale inférieure Wyman, une valeur plus élevée, vous savez, valeur inférieure de côté, associée à la faible pourquoi qui est au sommet, nous avons littéralement juste transpirer avec les échanger. Donc le maximum est maintenant là et le minimum est là. Où faire exactement la même chose ? Je vais dire, Utilisez la valeur maximale à gauche et la valeur minimale à droite. Donc maintenant, si je viens de frapper sauver le coup, rafraîchir l'os maintenant il est retourné. Et donc, en tant que lecteur de graphique, cela me semble plus naturel que cette richesse élevée, ce qui signifie moins de nous, mais une richesse élevée est ici dans le coin supérieur droit. Maintenant, j'ai un problème similaire lié où j'ai un nombre élevé sur la gauche dans un nombre bas sur la droite. Maintenant, c'est techniquement correct, parce que ce sont les chiffres. Nous mesurons le pourcentage de pauvres, mais c'est quand même une sorte de mal. Et donc ce que je veux faire est de me débarrasser de ces chiffres et de les mettre manuellement dans différentes étiquettes. Ça aura plus de sens pour le lecteur de graphique. Et donc, si vous vous souvenez plus tôt quand nous avons créé nos axes, nous définissons manuellement les valeurs de tick que nous avons dit utiliser le plus bas et le plus haut nombre, plus élevé, et cela fonctionne très bien. C' est une très bonne façon de le faire pour beaucoup de graphiques. Mais au lieu de faire cela en utilisant la fonction de valeurs de ticks intégrées, je vais revenir en arrière et définir les ticks. Si tu te souviens de ça quand je t'ai montré l'Axe pour la première fois, j'allais dire, tu sais quoi ? Vous zéro ticks ne mettez pas de tiques là-dedans. Et donc si je touche rafraîchir mes étiquettes disparaissent, donc je dois principalement les mettre en moi-même. Donc, le moyen rapide et facile de le faire est que je vais juste ajouter manuellement du texte. Je vais le mettre ici après avoir créé mes axes avant d'appeler ma mise à jour. Je vais juste dire que tu sais quoi ? Ajoutons du texte à notre SPG. Je ne vais pas utiliser un nom de variable. Je ne vais pas faire ça exactement de la manière la plus parfaite jamais. Mais très rapidement, ajoutons du texte et j'ai besoin de ce texte pour vivre sur l'axe X. Je vais utiliser cette échelle parce que je voulais être placé exactement où je le veux. Je veux que vous mettiez d'abord ce texte ce premier morceau de texte à l' expédition X euh, en utilisant l'échelle X que nous avons configurée plus tôt. Et je veux utiliser cette variable X hommes Max et je veux mettre la valeur minimale dans leur premier. Donc l'exposition est à cette échelle pour ce nombre minimum, et ensuite je vais dire pour l'opposition blanche, utilisons aussi, euh, disons la même chose. Je vais utiliser l'échelle y et je suis utilisé. Le pourquoi Min Max et moi mosquée utilisent la valeur minimale parce que maintenant n'oubliez pas que nous sommes notre plus bas sage ou au bas de notre graphique, qui est où je veux que cette tique existe. Et puis je dis que vous devez lui dire ce que le texte devrait lire. Et la façon dont vous le faites est ici. Vous savez, si vous ajoutez un élément de texte qui dans le texte, vous dites en fait que le texte par point est égal à n'importe quel texte ou point, parenthèses, quoi que ce soit. Et donc je vais dire que pour la valeur minimale, qui est le faible pourcentage de pauvres, je vais appeler ça plus riche parce que c'est vraiment ce que nous regardons ici. Donc, si je retourne en arrière et que je touche rafraichir, j'ai maintenant les mots plus riches ici parce que c'est ce que c'est. C' est plus de richesse, Les pour nous, et cela a plus de sens pour notre public. Mais bien sûr, j'ai quelques problèmes. Tout d'abord, le texte est parfaitement aligné avec cette position ici, mais il s'aligne sur le bord gauche du texte et s'exécute hors de l'écran. Donc, ce que je veux faire est de le centrer et aussi faire que cela ressemble plus à l'étiquette de la façon dont je recommande ce qui est plus petit gris Moins contraste e plus simple, etcetera. Donc je vais le faire de deux façons différentes. D' abord, je vais réparer le positionnement. Donc je voulais être centré et D 3 l'a intégré. Eh bien, SPG s'y est vraiment intégré. Donc, d trois fait également le texte ancre AC hommage. Et donc je peux définir l'ancrage de ce texte soit au début, au milieu ou à la fin. Et donc si je dis que c'est dit pour commencer ce que c'est par défaut, cela signifie que la ligne gauche dans la position que j'ai choisie. Si je dis la fin juste beaucoup et en disant milieu, ça va centrer la ligne. Donc si je me rafraîchis maintenant, c'est aligné au centre, donc c'est bien. C' est un bon début. Mais maintenant, je veux changer la mise en forme de ce texte. Et après ça, je vais le déplacer verticalement aussi, parce que je ne sais pas pourquoi. C' est ce que je sais pourquoi. Mais il est assis ici, alors que je voulais être ici. Mais d'abord, faisons le look réel, donc je vais ajouter un cours et nous l'avons déjà fait avant. Je vais dire attribut, classe et je vais juste appeler cette étiquette d'accès de classe. Et maintenant, si je remonte et ajoute la classe CSS pour l'étiquette d'accès, je vais la mettre à côté de ces gars. C' est facile de trouver plus tard, je vais faire la même couleur de remplissage gris. Et je veux utiliser une police d'un gentil sur Sarah Font. Je vais dire une taille amusante de 10 pixels. Je voulais être gentil et petit, , idéalement, je veux ressembler à ce type ici, et c'est plutôt bon. Plutôt proche. Assez bien pour l'instant. Je ne vais pas la modifier follement pour cette leçon, mais je veux réparer le fait qu'elle est coincée ici, non ? Il est parfaitement doublé avec le bas de notre balance, qui est là où ce gars est positionné, non ? La valeur la plus basse vit exactement là , c'est pourquoi c'est là-haut. Donc vous savez, il y a plusieurs façons de le faire. Un moyen simple, rapide et facile est, plutôt que de le dire, le mettre dans la position Y exactement en bas, la valeur minimale Faites cela. En plus, disons notre marge droite, parce que ça va la pousser vers le bas. Rappelez-vous, nous avons tout poussé en 30 pixels. Si je le repousse de 30 pixels, peut-être que ce sera exactement là où je voulais être. Et voici, ISS. Maintenant, parfois tu dois tweeter un peu ça. Parfois, il ne devrait pas parfaitement exactement où vous le voulez à quelques pixels si vous en avez besoin . Mais tu sais, ça marche très bien. Et je veux faire la même chose. Mais pour le label Most gauche. Donc je vais juste le dupliquer, non ? Un texte de stylo. Maintenant, le positionnement ex va être basé sur la valeur maximale, qui dans ce cas, est la moins riche, non ? Je voulais être dans la même position. Je voulais toujours être aligné au centre et utiliser la même classe. Mais dans ce cas, l'étiquette est moins riche, sûre, rafraîchir. Et maintenant c'est exactement ce que je voulais être. J' espère donc que ce cours sur D 3 a été utile et intéressant. Vraiment. Nous venons de mettre en place des compétences fondamentales, vous savez, ça va être relativement simple maintenant pour vous, j'espère aller chercher la syntaxe d trois et ajouter plus de compétences et propose deux projets qui sur lequel vous travaillez. Tu sais, si tu travaillais avec Jake, Jake Weary ou d'autres emplois te plaignais juste dans le passé, beaucoup de choses étaient probablement encore plus faciles à apprendre pour toi. Si ce n'est pas le cas, vous savez, vous avez appris beaucoup de choses clés ici, que vous pourrez reproduire et appliquer à de nouveaux apprentissages au fur et à mesure que vous allez de l'avant avec D 3. Ce que je recommande certainement est de vérifier d trois Js dot org le site Web d trois. Allez sur la page des exemples et vous trouverez des exemples infinis de grands projets D trois où vous serez en mesure de voir le code source et de jouer avec. Certains concepts et la peur plus complexe et d'autres pour être sûr. Mais ça devrait être un bon point de départ pour toi, Mike, j'ai dit, j'espère vraiment que tu as apprécié le cours. Bien sûr, j'espère que vous avez beaucoup appris et je vous souhaite heureux. D trois ng aller de l'avant