[Jouer de la musique] 

DAVID CHOUINARD: Je suis David Chouinard, et ce est D3. Bienvenue. Nous allons en apprendre davantage sur D3 aujourd'hui. D3 est un framework JavaScript pour la construction d'une grande qualité visualisations interactives pour le web. Des choses comme ce que nous sommes voir à l'arrière de moi, nous allons apprendre à faire les choses, sorte de les bases d'elle. Mais ça va être cool. Commençons faire de jolies images. Nous avons plus de démos des perspectives disponibles. Faisons-le. 

Acte I, DOM manipulation-- nous allons commencer tout de suite faire des choses cool. Tout d'abord, sur la gauche, nous avons code. Sur la droite, nous avons le résultat de notre code. Allons à travers elle. 

Faisons un cercle. Comment ça sonne? svg.append circle-- nous venons de faire un cercle. Vous ne me croyez pas, non? Ce ne est pas là. 

Donc, ce que nous avons ici est, SVG est scalable vector graphics. Ce est la façon dont nous disons que le navigateur faire des graphiques vectoriels dans le navigateur. Ce que nous venons de le faire en ce moment est ajouté un cercle à parcourir. 

La promesse est que le cercle nécessite un peu d'attributs de base avant que nous puissions effectivement voir. Nous devons lui dire sa position x, sa position y, son rayon. Nous ne avons pas dire tout cela, donc nous ne voyons pas en ce moment. Mais nous allons dire ce genre de choses. 

Alors tout d'abord, vous avez de donner notre cercle un nom. Alors appelons-cercle. Notre cercle a un nom maintenant. Et nous allons lui donner quelques attributs. Que diriez-cx serait centrer x, donc le centre de la position x. Disons, pour 200 200 pixels. 

Donnons-lui un an de 200 pixels ainsi. Et un R, un rayon d'environ 40 pixels. Voyons maintenant. Je ne peux pas épeler. 

Là vous allez. Nous avons un cercle à la position 200 pixels, 200 pixels, rayon de 40 pixels. Plutôt cool, non? Nous avons un cercle. Ouais. 

Donc pas besoin de suivre le long. Tous ces exemples, toutes le code que je fais aujourd'hui seront fournis en ligne à la fin sous la forme d'exemples interactifs avec points de contrôle à chaque acte, et ainsi de suite. 

Faisons plus de choses. Ce cercle noir est vraiment moche. Je suis désolé pour cette erreur messages là. Nous y voilà. 

Donnons-lui une couleur. Comment ça? Je aime bleu acier. Eh bien, notre cercle a changé de couleur. C'est génial. Faisons semi-transparent too-- semi-transparent. 

Donc, ce sont des attributs nous définissons sur le cercle. La première chose que nous avons fait est nous mettons un cercle sur la page. Et puis nous définissons un tas d'attributs. Certaines d'entre elles sont nécessaires, comme CX, CY, et Radius. Et d'autres sont facultatifs. 

Il ya beaucoup plus d'attributs. Il ya beaucoup d'entre eux. Par exemple, nous pourrions avoir un AVC ainsi, un coup de rouge. Mais nous allons enlever ce. Nous sommes de retour à un cercle, un cercle bleu. 

Faisons donc plusieurs cercles. Comment ça? Faisons un autre cercle. Ce est excitant, non? 

Donc, dire que je ai tout simplement copié-collé ce que nous avions déjà. Appelons cela circle2. Et nous allons faire exactement même chose et lui donner attributs, étant donné une position x de 300. Yay, nous avons maintenant deux cercles. 

Et bien sûr, nous pourrions mettre à jour ces valeurs. Je peux me exprimer à 400, et maintenant il se déplace. Et puisque ce est ennuyeux, nous allons retirer, afin circle2.remove. Il est parti maintenant. 

Donc ce que nous faisons et est juste très, cette very-- est très similaire à ce que vous pourrait faire dans jQuery, par exemple. Nous sommes en train de manipuler le DOM, il est appelé. Vous pourriez avoir entendu ce mot auparavant. Nous créons des choses, la mise en attributs sur des choses, le retrait de composants. 

Maintenant, voici où cela devient intéressant. Donc, plus tard dans le code, nous pourrions encore désigner le cercle original ici. Donc, nous allons réinitialiser son attribut cx. Disons, sa position x 400. Et je vais faire la transition que, donc ce est évident. Nous y voilà. 

Nous avons donc ajouté un cercle. Nous avons mis certains attributs. Nous avons ajouté un autre cercle, enlevé. Et puis nous allons modifier le cercle d'origine. 

Mais voici où il obtient beaucoup plus intéressant. Non seulement nous pouvons définir les attributs comme des valeurs juste, nous pouvons dire, hey, cercle, aller à la position 200. Nous pouvons également les définir comme fonctions. 

Ainsi, au lieu de donner 400 ici, nous pouvons faire des calculs à la volée pour ce que nous veulent cet attribut soit. Donc, ce est comment vous exprimez cela. Nous disons, au lieu de 400, laissez-moi vous donner une fonction à la place. Et ici, à l'intérieur de cette fonction, nous pouvons faire tout calcul fou. 

Nous pourrions prendre le temps et regarder quelque chose d'autre et décider de façon dynamique pour le cercle la valeur que nous voulons. Que diriez-vous nous donnons simplement un x position aléatoire? Donc, ce est cela. 

Alors qu'est-ce qui dit est, pour tous les x, exécutez cette fonction. Et ce que nous faisons est le calcul certaines choses, une fois aléatoires la largeur et que le retour. Ainsi, chaque fois que nous courons, nous obtenons une cercle qui va à un endroit aléatoire. Ce est plutôt cool. Je me sens comme je pourrais regarder à ce pour un peu. Nous commençons à rendre à quelque chose d'intéressant ici. Faisons de cette entreprise guidée par les données. Il n'y a pas de données ici. Nous allons changer cela. 

Documents-- Acte II, Data Driven Revenons donc ici. Et nous allons simplement se débarrasser de circle2, parce que nous sommes juste ajout et la suppression il. Donc, nous ne avons pas vraiment besoin. Nous devons être beaucoup plus intelligent ici. Disons, nous avons certaines données de quelque sorte. Un moment-- disons, nous avions des données de ce formulaire. Nous avions un tableau, juste une série de chiffres. Nous avons sept chiffres ici, quelles qu'elles montant représente: dans le compte bancaire de gens, comment combien ils pèsent, Dieu sait quoi. 

Ce sont des chiffres, et nous vouloir utiliser nos cercles pour représenter ces chiffres en quelque sorte. Nous voulons lier notre cercles à ces chiffres. Donc, ce que nous faisons. Disons, nous voulons une cercle pour chaque numéro. Nous pourrions faire le vieux chose que nous étions doing-- cercle append et circle2 et circle3. Mais cela sort de la main, et il ya beaucoup de répéter logique. 

Alors soyons plus intelligent avec ça. Au lieu d'utiliser le cercle var svg.append que nous utilisons seulement, nous allons utiliser ce petit bloc ici. Je ne veux pas aller en profondeur dans ce que toutes ces parties font. Et ce est un peu un sujet avancé. Et je souhaite que je pourrais. 

Mais la chose principale à recognize-- et vous verrez est très souvent dans le code D3. Ce bloc de texte de base crée autant de cercles comme il existe des éléments de données dans ce tableau ici. Donc, cela crée autant cercles comme il ya des éléments. Il va nous créer des sept cercles. Et il fait une chose vraiment, vraiment la clé. Alors disons que courent. Enlevons notre autre cercle. Disons simplement commenter cette séparer sortir et courir ce message. 

Nous y voilà. Donc notre cercle voici une beaucoup plus sombre, parce que nous avoir sept cercles, une au-dessus de l'autre. Nous venons de créer sept cercles, une chacun pour chacun de ces éléments de données. Mais il ya une chose qui se est passé clé avec ce bout ici. 

Ce est ce que les données ont été tenus. Donc, chacun de ces éléments de données, 10, 45, 105, était liée à un cercle particulier. Il se agit donc non seulement créés un tas de cercles mais lie ces deux choses ensemble. 

Et à l'avenir, parce que nous avons créé ces cercles avec cette fonction, D3 si je vous donne un cercle, vous pouvez me donner les données qui lui sont associés. Donc, nous pouvons demander à D3. Hey, D3, je ai ce cercle. Quel est le données que le cercle a? Et D3 serait nous dire 10 ou 45 ou 105. 

Ces choses sont liées. Ce est un concept très, très fondamentale. Voyons cela. 

Donc, la façon dont nous avait demandé si D3-- ce ne est pas pertinent pour ce, mais faites-moi confiance là-dessus. Ce est ainsi que nous demandons D3. Hey, D3, donne-moi la première cercle que vous pouvez trouver. Donnez-moi le premier cercle que vous pouvez trouver. Et puis nous pourrions demander D3, ce est les données à ce sujet, comme celui-ci, 10. 

Donc, nous demandons simplement D3, trouvez-moi le premier cercle que vous pouvez trouver. Quoi de ses données? 10, ce est bien notre premier élément de données. Nous pourrions lui demander, hey, D3, nous trouver notre troisième cercle. 105. Pourquoi est-ce vraiment important? 

Donc ici, je l'ai mentionné que nous pourrions utiliser les fonctions. Et je l'ai mentionné que ce était une chose très puissante. Ainsi, non seulement nos fonctions peuvent faire des choses comme faire un peu de calcul, par exemple, retourner un nombre aléatoire, il peut aussi faire des choses basées sur les données. Ce est ce que signifient données entraînés documents. Ce est ce que signifie D3. 

Donc, ce x postition-- place de dire simplement, tous les cercles, obtenir position x 200, nous pourrait lui donner une fonction. Et ici, nous pouvons faire quelques calculs. et d ici tient lieu pour les données. Donc, chaque fois que nous avons un cercle, essentiellement, D3 créera ces sept cercles. Et puis pour chaque 

cercle, il va aller, hé, circle1 quelle est votre position x. Auparavant, nous étions toujours répondre 200. Mais maintenant, chaque fois D3 demande nous quelle est votre position x, ça va donner us-- nous avons ce cercle, si nous avons les données. Il va nous donner les données et dire, que voulez-vous l'exposition d'être, sur la base de ces données. 

Disons simplement retourner les données réelles. Donc, si nous courons cela, cela donne Les données américaines entraînées documents. Ces cercles sont basés par rapport Position-- ils sont des bases en fonction des données. 

Donc, pour le premier cercle, D3 met un cercle. Et puis D3 nous demande, qu'est-ce que vous voulez que l'exposition soit. Et nous disons juste, tout ce que les données sont. Faire l'exposition 10. 

Puis il demande, qu'est-ce que vous voulez que le exposition soit pour le second cercle. Et nous répondons, 45. Et nous, bien sûr, peut faire un peu de calcul ici. Je trouve que ces cercles sont sorte de écrasé jusqu'à. 

Donc multiplier par trois, de multiplier par trois données. Notre cercle vient de se élargir sur. Notre valeur a été triplé. 

Le cercle est vraiment sur le bord, nous allons donc peut-être qu'il sorte de décalage. Disons, par 20. Voici. 

Il se agit d'une visualisation des données. Ce est un très basique, mais cette nous donne un aperçu de nos données. Il nous dit que, par exemple, nous avoir un petit groupe d'éléments. Et nous avons une grande valeur aberrante ici. Cela nous donne quelques informations sur la distribution. 

Si nous étions, par exemple, de changer les données à 150 ici et rafraîchissement, notre visualisation est modifiée. Ce document est guidée par les données. 

Alors bien sûr, tous ces éléments, tous ces attributs ici, nous pouvons utiliser une fonction, pas seulement les chiffres, et pas seulement les positions x et y. Donc, nous pouvons utiliser une fonction de la couleur. Donc, nous allons faire la même chose. Nous allons lui donner une fonction. 

Et disons, nous pourrions avoir conditionnelles dans notre fonction. Cette fonction peut être cent des lignes longues. Il peut faire des choses très, très compliquées. 

Mettons donc une instruction if ici. Disons que, si nos données est moins de 50, ce est un certain seuil que nous sommes intéressés dans pour une raison quelconque. Faisons vert. Sinon, disons que ce est rouge. Comment ça? Nice. 

Donc notre visualisation de données commence pour transmettre des informations plus intéressant sur de nombreux canaux. Alors maintenant, nous savons un peu sur la distribution. Et nous savons qu'il ya une sorte de coupé à 50 que nous sommes intéressés à. Nous savons qu'il ya deux points de données en dessous de ce seuil et la plupart ci-dessus. 

Donc, comme une étape finale, ces données ici, il est très rare de voir ce genre. Alors disons simplement le déplacer vers une variable parce que ce est plus propre, comme ça. Et puis nous utilisons cette variable ici. Ce est exactement la même chose. Ce est juste un peu plus propre. 

Ensuite, Acte III, Scales-- Donc seul problème droit ici, ce est, si nous changeons notre données dans ce 200 value-- si nous changeons à 400 ou quelque chose et rafraîchissement, alors cette valeur juste allé hors de l'écran. Donc, notre logique ici de la façon dont nous faisons les trois fois et 20, de l'étaler, puis compenser un peu est vraiment maladroit. 

Que veulent dire ces chiffres? Ils sont juste codées en dur là-bas. Et ils sont très liés aux données. Nous voulons un document de données pilotée. Nous voulons un document très flexible, que les données fournies, il se adapte à et la représente. 

Ce que nous devons fondamentalement est, nous avoir cette plage de numéros 10. 45, 105. Et nous voulons mapper cette entrée sur la largeur, la largeur ici. Nous avons donc la gamme de nombres allant de 0 à 100. Et nous avons ce campus I va de 20 à 700, dans ce cas. 

Nous voulons type de mapper que sur. Nous voulons que l'échelle et puis le compenser un peu. Il se avère que ces D3 a. Ce est ce qu'on appelle une échelle. Donc, nous allons l'utiliser. 

La façon dont works-- je vais tapez ceci et puis expliquer. Ce est une échelle. Qu'est-ce qu'il va faire, ce est, il sera sur la carte les valeurs de 1 à 200 sur 20 à 600. Nous pouvons vérifier cela. Nous pouvons voir ici. 

Donc, si je le nourris 1-- un moment. Donnez-moi une seconde. Je dois avoir mal tapé il. Là vous allez. Je suis désolé. 

Alors, que va faire une échelle est, il faudra une valeur et puis le convertir que, étendre ce, de sorte qu'il remplit toute la gamme que vous demandez. Donc dans ce cas, si nous lui donnons une, ça va mapper cette entrée sur 20. Et si nous lui donnons 200, ce est aller à la carte que sur 600. Et quelque part entre les deux, si nous obtenons 100, ce est va être quelque part entre 20 et 600. 

Et bien sûr, maintenant ce est ce nous devons supprimer ces disques codés choses que nous avons là. Donc, ce que nous voulons faire, ce est prendre les données que nous sommes étant donné que les données individuelles élément, et de passer à l'échelle en premier. Donc balance agrandissez-le. 

Well-- Oh, nous avons une petite erreur ici. Il nous manque des données. Là vous allez. Et qui étend dehors. 

Cela nous donne le même résultat que nous avions avant, mais au lieu d'avoir celles codé en dur contraintes. Et si la taille de notre changements de toile, par exemple, si nous voulons avoir cette plus 400 pixels et il écrase sur, nous pouvons avoir over-- nous pouvons le développer, ou nous peut réduire cette marge gauche à un peu moins ou plus de 20. Ces chiffres, ceux-ci codés en dur chiffres font désormais sens pour nous. 

Et nous pourrions faire beaucoup plus choses intéressantes ainsi. Ainsi, au lieu d'avoir un linéaire échelle, nous pourrait vouloir connecter une échelle. Et cela nous donnera une échelle logarithmique. 

Alors maintenant, notre échelle, au lieu de élargir simplement sur cette plage, ce est faire des choses plus sophistiquées. Au lieu d'avoir cette gamme dur codé, et qui au lieu d'avoir 600, nous pourrions simplement utiliser la largeur, afin de 20 à la largeur de moins 40, Deux fois la marge de l'autre côté. Et cela fait beaucoup plus de sens pour quelqu'un qui pourrait regarder le code. 

Fait intéressant, les écailles deviennent très, très sophistiqués ainsi. Ils font beaucoup de choses intéressantes. Donc, les échelles ne ont pas nécessairement pour fonctionner seulement avec les numéros. Faisons une échelle de couleurs. 

Donc, notre gamme pourrait être-- notre domaine est de 1 à 200. Ce est la chose d'entrée. Mais nous pourrions mapper de vert au rouge, par exemple. Et maintenant, si nous adoptons une, nous allons obtenir vert. Si nous lui donnons 200, nous aurons rouge. Et si nous passons ce quelque chose entre les deux, il va y avoir une combinaison de cela, quelque part sur le gradient entre le vert et le rouge. 

Et au lieu d'avoir ce genre de logique maladroit nous avons ici avec le conditionnelle là, nous pourrions avoir quelque chose-- une échelle linéaire entre les deux. Nous aimerions donc utiliser l'échelle que nous venons créé, que nous avons appelé la couleur. Et avons décidé de D, qui est notre élément de données. Et là nous allons. Nous avons une échelle de couleurs. 

Donc, ce est la cartographie. Donc, l'extrême gauche est complètement vert. L'extrême droite est complètement rouge. Et tout le reste est une fonction de d. Nous avons une intéressante visualisations ici. Mais nos données était un peu ennuyeux. Voyons voir ce que nous pourrions faire si nous avions des données les plus intéressantes. 

Acte IV, Avec de travail Data-- la première chose nous voulons faire pour rendre notre visualisation plus intéressant est de déplacer les données ailleurs. Ce est très maladroit d'avoir les données codées en dur ici. Et généralement, nous serons demandant quelqu'un d'autre pour les données. Nous serons peut-être demandons au gouvernement, le Bureau du recensement, ce est vos données puis tracer ou de demander que une entité tierce partie pour certaines données puis la construction d'un visualisation sur ce point. 

Donc la première chose que nous voulons faire est que déplacer à un autre endroit. Donc, je vais créer un déposer ici appelé data.json. JSON est le format de données. Vous ne avez pas d'en savoir beaucoup à ce sujet. Et nous allons copier le peu de données que nous avons là, coller dans verbatim il, aller Retour à notre code de visualisation ici, et utilisez cette fonction ici. Vous ne avez pas à connaître les détails. Mais ce que cela va faire est, il trouvera ce fichier, chercher, et nous le retourner. Donc ce que cela fait est, il va et obtenir le fichier data.json. Et puis tout le code qui est retrait inside-- essentiellement, tout le code nous avons there-- sera courir que lorsque nous obtenons les données. Et puis ça va fonctionner que code avec les données que nous avons. Grande, nous avons une visualisation qui interroge pour un peu de code quelque part d'autre, ce qui est généralement où il interroge quelques données ailleurs, ce qui est habituellement comment visualisations travaillent. 

Mais je veux revenir aux données. Ainsi, les données fondamentalement D3-- D3 consomme données qui est une liste de choses. D3 attend les données qui viennent d'être une liste des choses, un ensemble de choses. Il ne importe pas ce que ces choses sont, dans la mesure où ce est un tableau d'entre eux. 

Donc ici, par exemple, nous pourrions de Bien sûr ont valeurs à virgule flottante. Nous pourrions avoir négatifs. D3 ne se soucie pas, si longtemps car ce est une liste de choses. 

Comme les choses intéressantes que nous pourrait avoir, nous pourrions aussi avoir une liste de chaînes comme ça. Donc, ce sont les titres Crimson Je ai ramassé il ya quelques jours. Et peut-être vous pouvez trouver quelques intéressantes choses au sujet de ces titres a. 

Encore une fois, ce est une liste de choses. D3 ne se soucie pas. Ces arriver à être une chaîne. Nous avons changé nos données. 

Revenons à notre visualisation. Maintenant, notre visualisation attend soit l'entrée de chiffres. Nous allons donc avoir de faire quelques changements. Ainsi, par exemple, tout d'abord, peut-être nous voulons mettre ces cercles le long par la longueur de la manchette, la nombre de caractères dans le titre. 

Donc, ce que nous ferons chaque fois que notre est-- fonction est appelée avec une chaîne, nous trouverons que ce est la longueur et puis passer cette à l'échelle. La couleur, je vais revenir qui au bleu d'acier. Et là nous allons. Nous avons une visualisation manchettes de Crimson. 

Notre échelle est un hors bits. Supposons que la plus longue titre est 100 caractères, de sorte que se étendre un peu. Et nous avons une visualisation. Il semble donc que la plupart des gros titres sont assez rapprochés, en termes de ligne de caractère. Mais at-il vraiment une se démarque. 

Nous pourrions construire des outils à explorer que plus. Mais quand je travaillais sur ce, je étais curieux de savoir si, dans cet ensemble de données, manchettes avec un colon en eux serait plus longue. Je suppose qu'ils le feraient. 

Donc, nous allons découvrir. Nous allons utiliser la couleur chaîne comme nous le faisions avant, pour coder certains de savoir si il ya un colon ou pas. Donc nous utiliserons à nouveau un sursis. Vous ne avez pas à connaître les détails de cette, mais ce est ainsi, nous vérifions un chaîne pour un caractère particulier en JavaScript, encore une fois, pas pertinent. 

Mais si nous ne trouvons pas un colon, nous reviendrons vert. Et si nous le faisons, nous reviendrons rouge. Encore une fois, les titres qui ont deux points sera rouge. Ce est ce que cela désigne: agréable. 

Il semble donc que mon hypothèse est heurté. Il ya seulement deux. Nous ne avons que six points de données et seulement deux ont eu deux points. Mais il semble un peu plus sur l'extrémité inférieure, en fait. Manchettes avec deux points semblent être généralement plus courte, au moins dans nos données set-- intéressant. 

Revenons à ce que bleu acier et ensuite voir ce que nous pouvons faire avec encore des données plus intéressantes. Encore une fois, je ai mentionné que données D3 est une liste de choses. Nous avons vu de nombreux types de numéros. Nous avons vu cordes. Mais les choses peuvent également être des objets. 

Ils peuvent être des choses compliquées qui comprennent beaucoup de choses. Pour dire que plus clairement, dans la plupart des cas, nous vouloir construire chaque point de données comme plus compliqué que de simplement une valeur. Si vous ne l'imaginez une base de données sur les étudiants, il pourrait y avoir un étudiant nom, une carte d'étudiant, et beaucoup de choses associé avec un dossier en particulier, pas seulement une chaîne ou un nombre. Alors regardons cela. 

Ce est un de ces ensembles de données. Ce est un ensemble de données sur les séismes. Donc, tout ici sur notre liste ou un tableau des choses contient beaucoup de choses lui-même. Ainsi, chaque point de données a une et une magnitude de coordonnées. Et se coordonne contenir deux choses. 

Ainsi, chaque jour est maintenant beaucoup plus compliqué et beaucoup plus intéressant et contient beaucoup plus informations intéressantes. Voyons nous pourrions construire sur cela. En revenant ici, encore une fois, à l'aide notre visualisation du cercle de l'histogramme nous avons construit, nous allons voir si nous pouvons construire une la visualisation de la distribution d'amplitude dans notre ensemble de données. 

Donc, ici, ce est le même concept. Mais maintenant, d contient plus de choses. d contient de nombreux éléments de données. Nous sommes tellement d arrière. D3 nous donne d. Et nous répondons en trouvant l'ampleur de d puis passage que à l'échelle. 

Et puis nous devons changer notre échelle, bien sûr. Donc grandeurs ne ont tout simplement pas aller beaucoup plus de 10. En fait, il ne ya jamais eu un tremblement de terre de magnitude 10. Mais ce est le genre de notre supérieure fin, notre gamme supérieure. 

Rafraîchissons. Nice, nous avons une visualisation. Il est intéressant de note-- sorte il existe deux points de données qui sont presque exactement les unes sur les d'autre part, en termes de grandeur. Vous voyez ce par l'opacité que nous utilisons. 

Nous avons maintenant des données géographiques. Nous avons latitudes et longitudes. Nous pourrions peut-être faire quelque chose d'un beaucoup plus intéressant avec cela. Voyons un peu plus façon intéressante de visualiser cette plus compliqué données que nous avons accès. 

Acte V, Mapping-- fondamentalement, nous voulons les mettre sur une carte. Je veux dire, ce est là que cela va. Nous voulons encoder des informations sur le position de ces lectures du tremblement de terre, ainsi leur ampleur, parce que nous avons maintenant. Nous comprenons comment consommer des données plus complexes. 

La première chose que nous ferons est créer une carte, un fond de carte. Je vais passer par très rapidement. Ce est le code délicate. Ce est un autre de ces recettes que vous ne avez pas vraiment faut bien comprendre que vous pouvez utiliser. Mais ce est le code. Ce code crée ici une carte. 

Nous ne allons pas entrer dans le détail. Mais superficiellement, ce qu'il fait est, il interroge ce fichier us.json, qui est un fichier de données comme celle que nous avions auparavant. Ce est plus complexe, bien sûr. Mais dans ce cas, tout, chaque point de données est cet état et a une liste des latitudes et longitude qui définissent le polygone, cette forme, cet état. 

Alors, que fera D3 est similaire à ce que nous avons fait avant. Il demandera et lier à un élément qui. Et il ya une fonction qui permettra de cartographier cet élément sur, sur la base des latitudes et longitudes. Vous pouvez en lire plus à ce sujet. Et je le recommande. 

Il ya des liens à la fin de ce code affiché. Et le code est commenté. Dans il existe des liens pour plus à ce sujet. Je vous recommande de regarder vers le haut. Mais ce qui nous préoccupe est cette fonction de projection. Je veux passer par là. 

Tout d'abord, permettez-moi de vous montrer vous que, oui, nous avons une carte. Les cartes sont cool. Alors regardons à ce fonction de production. 

Projection est très comme une échelle, échelles à nouveau. Alors, que la production pour cette fonction de projection ne est, nous pourrions passer la longitude latitudes-- et dans ce cas, ces valeurs sont ici le lat-longs du bâtiment nous sommes assis dans le droit maintenant-- de projection. Et la projection se convertir en ce que les valeurs de pixel x et y. 

Donc, ce est faire la projection est très similaire à notre échelle. Ce est en prenant nos latitudes et longitude qui représente un ensemble de globe et le rétrécissement et que le dimensionnement jusqu'à la place que nous voulons, que nous lui avons donné. Dans ce cas, nous sommes passer ces valeurs. Et ce est de nous donner, ainsi que sur votre écran signifie 640 pixels. Toute Cet écran est de 700 pixels de large, ce qui nous fait question ici, et 154 pixels vers le bas, que je estimation est à peu près ici. 

Donc, en prenant ces lat-longs, qui représenter quelque chose sur l'ensemble du globe et écrasant et se déplaçant qu'environ nous valeurs X et Y de pixels donner, ce est la première chose qui est fait dans ce code de la cartographie. Puis le reste de la Code consomme les données puis mappe ces lat-longs sur quelque chose sur votre écran. 

Mais nous allons utiliser cette projection fonctions, car il se avère nous avons lat-Longs aspire ainsi. En regardant nos données, nous avons latitudes et les coordonnées de longitude pour chaque observation. Donc, nous allons utiliser la projection. 

Donc regarder notre exposition, nous voulons que notre exposition-- nous avons une latitude et une longitude. Mais nous voulons valeurs de pixels. Et il se avère, nous avons exactement ce que l'on want-- projection. Très bien comme nous étions utilisant l'échelle ici, nous allons maintenant utiliser la projection et il coordonne passer. Donc la première chose nous nous sommes donc doing-- obtention d, qui est une donnée individuelle élément d'un tremblement de terre individuelle lecture. La première chose que nous faisons est d'obtenir les coordonnées. Très bien, nous avons les coordonnées. 

La deuxième chose que nous faisons est transmettre cela à la projection. Projection convertit ces coordonnées dans des valeurs de pixel, x et y. Et puis la dernière chose que nous vouloir faire est de simplement obtenir le x, qui ce cas est le premier. Ce est la première des deux choses qui sont renvoyés par projection. 

Nous ferons la même chose pour y. Mais à la place, nous reviendrons le second élément, le y. Préparez-vous à rafraîchir. Ooh, caractère supplémentaire ici-- agréable, nous avons un document des services de données qui est dissimuler ce fichier JSON d'objets, faire une carte, et en changeant la attribuer par rapport aux données à projeter sur un plan. Ce est vraiment intéressant. Ce est cool. 

Prenons un cran. Je veux dire, nous avons deux morceaux de informations avec chaque point de données. Je veux dire, trois. Nous avons les coordonnées, qui est un x et y. Et nous avons l'ampleur. 

Nous avons besoin d'encoder ampleur en quelque sorte. Nous avons beaucoup de canaux. Nous pouvons utiliser la couleur. Nous pouvons utiliser rayon. Nous pourrions utiliser l'opacité. Nous pourrions utiliser beaucoup de choses dans le code. Chacune de ces attributs et beaucoup plus qui ne figurent pas là, parce qu'ils sont en option, on pourrait utiliser pour encoder ces données, la course et toutes ces choses que je ai mentionnés. 

Faisons rayon. Je pense que le rayon est le plus intuitif. Encore une fois, nous le remplacerons que codées en dur 40 et faire quelques calculs. Nous allons utiliser à nouveau notre échelle favori. Et nous sommes passés d. Mais pas d parce que nous voulons l'ampleur de d. d ne est que le point de données. Nous passerons l'ampleur à l'échelle. 

Essayons encore une fois. Ooh, il ne fonctionne pas. Pourquoi ne pas travailler? 

Alors ne oubliez pas quelle échelle. Regardons à l'échelle à nouveau. cartes à l'échelle de 1 à 10 sur à 22 à 600, plus ou moins. 600 est énorme. Ce est pourquoi nous obtenons cela. 

Donc, nous voulons changer notre échelle à quelque chose de plus raisonnable. Disons, nous voulons 0-60. 60 est grand, mais 10 tremblements de terre sont extrêmement rares. En fait, ils ne ont jamais eu lieu. 

Donc ce que cela va faire, ce est, il va prendre notre grandeur qui va de 1 à 10 et la carte sur l'étendre sur. Et le mapper à 0-60. Rafraîchissons. 

Nice, nous avons une visualisation. Ce est génial. Ce sont des données réelles. Vous remarquerez, dans mon petit jouet par exemple, le plus grand tremblement de terre est juste au-dessus de nous. Mais ce est tout. Nous avons une date entraîné la visualisation qui consomme les données et nous donne vraiment informations intéressantes. Ouais, ajoutons interactivité à elle. Je ai mentionné que ce était la force forte de D3. 

Voici donc, pour chaque élément, nous sommes décrivant un tas d'attributs. Mais nous pouvons aussi décrire ce que nous voulons de se produire avec des éléments d'interactivité. Par exemple, nous pourrions décrire ce qui se passe quand on la souris sur. Et très similaire que, ça va prendre une fonction, très semblable à la attributs que nous avions avant, où nous faisons quelque chose à la élément lorsque nous survolez. 

Donc, première chose que nous devons faire est de sélectionner cet élément, pour le trouver au fond, dans le navigateur. et alors nous pourrions définir un attribut à elle. Donc ce que je fais ici, ce est, quand nous planons sur quelque chose, nous aurons cet élément puis définissez son opacité retour à 1, complètement opaque. Voyons voir à quoi ça ressemble. 

Il semble que nous avons une virgule supplémentaire ici. Donc, si nous survolez ici, il est plein. Mais maintenant, bien sûr, il reste pleine, parce que nous avoir pour décrire ce qui se passe lorsque vous avez retiré de notre curseur. Donc, nous allons faire exactement cela sur mouseout, par opposition à mouseover. 

Et nous allons le remettre à ce que nous avions before-- 0,5. Et maintenant, nous tous les temps stationnaire, on obtient un cercle complet. Il nous aide à voir ce que nous nous sélectionnant essentiellement. 

Et maintenant, nous allons faire ce vraiment super. Disons le connecter à des données réelles. Donc, nous allons poser pourrait USGS sur leurs données. Ainsi, le US Geological Survey dispose de données sur les tremblements de terre. Ils ont une API publique qui est capable à être consommés au format JSON. Alors, faisons cela. 

Donc, ce est un morceau de code qui se connecte à l'API USGS. Et il ya un peu du traitement sur elle. Ce ne est pas pertinent, mais simplifie à un format de données simple comme celui nous avions avant. Donc je me débarrasser de notre appel à notre faux data.json au dossier. Et à la place, je vais appeler l'USGS essentiellement. 

Rafraîchissons, agréable. Ce est, données réelles de la vie réelle à partir de cette semaine pour les tremblements de terre. Ce est vraiment intéressant. Ce ne est pas surprenant pour nous, mais il ya beaucoup de tremblements de terre sur le West Coast en Californie. Mais je pensais que ce était très intéressant qu'il y avait tant de tremblements de terre en Alaska, et apparemment, ici dans le Midwest. Je veux dire, intéressant, et nous sommes bons. Ce est la conclusion. 

Mais fondamentalement, ce est ce que D3 nous aide à faire. Il nous aide à prendre des données, bind à des éléments dans les DOM, et ont ces éléments changent en fonction des données, avoir ces attributs, tous les plusieurs des caractéristiques des éléments, tous être utiles pour les chaînes pour transmettre des informations. 

D3 est un incroyablement puissant Bibliothèque et étonnamment bien fonctionner. Ce est quelque chose de puissant. La visualisation des données est un outil incroyablement puissant pour le transport aux personnes profondes idées qui obtient à leur base et les aide à comprendre, dans cette façon profonde et intuitive, comment les données des œuvres et comment données changent notre vie.