1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [Musikwiedergabe] 3 00:00:11,880 --> 00:00:16,480 >> DAVID CHOUINARD: Ich bin David Chouinard, und dies ist D3. 4 00:00:16,480 --> 00:00:17,700 Willkommen. 5 00:00:17,700 --> 00:00:21,270 Wir werden über D3 heute lernen. 6 00:00:21,270 --> 00:00:25,020 D3 ist ein JavaScript-Framework für den Aufbau einer hochwertigen 7 00:00:25,020 --> 00:00:28,110 interaktive Visualisierungen für das Web. 8 00:00:28,110 --> 00:00:30,870 Dinge wie das, was wir sind Sehen hinter mir, 9 00:00:30,870 --> 00:00:34,230 wir werden lernen, die machen Dinge, Art der Grundlagen der es. 10 00:00:34,230 --> 00:00:36,452 Aber es wird cool sein. 11 00:00:36,452 --> 00:00:38,160 Fangen wir an! macht schöne Bilder. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Wir haben mehr Demos bekommen Perspektiven zur Verfügung. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Lass es uns tun. 16 00:00:50,760 --> 00:00:58,700 >> Akt I, DOM manipulation-- werden wir sofort beginnen, coole Dinge. 17 00:00:58,700 --> 00:01:01,240 Zunächst einmal links, haben wir Code. 18 00:01:01,240 --> 00:01:03,470 Auf der rechten Seite haben wir das Ergebnis unserer Code. 19 00:01:03,470 --> 00:01:04,900 Lassen Sie uns durch sie gehen. 20 00:01:04,900 --> 00:01:05,780 >> Machen wir einen Kreis. 21 00:01:05,780 --> 00:01:08,570 Wie klingt das? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- wir gerade einen Kreis. 23 00:01:14,934 --> 00:01:16,100 Sie glauben mir nicht, oder? 24 00:01:16,100 --> 00:01:18,190 Es ist nicht da. 25 00:01:18,190 --> 00:01:21,830 >> Also, was wir getan haben genau hier ist, SVG Scalable Vector Graphics. 26 00:01:21,830 --> 00:01:27,530 Das ist die Art, wie wir sagen, den Browser auf machen Vektorgrafiken in der Browser. 27 00:01:27,530 --> 00:01:30,740 Was wir gerade jetzt tat ist ein Kreis zu durchsuchen aufgenommen. 28 00:01:30,740 --> 00:01:34,790 >> Das Versprechen ist, dass der Kreis erfordert ein wenig grundlegende Attribute 29 00:01:34,790 --> 00:01:36,850 bevor wir tatsächlich sehen. 30 00:01:36,850 --> 00:01:40,045 Wir müssen sie sagen, ihre x-Position, seine y-Position, seinen Radius. 31 00:01:40,045 --> 00:01:43,310 Wir wollten nicht sagen, dass es irgendetwas davon, so dass wir jetzt nicht sehen, es. 32 00:01:43,310 --> 00:01:46,210 Aber lassen Sie uns sagen, dass es so. 33 00:01:46,210 --> 00:01:49,510 >> Also zunächst einmal, Sie haben zu unserem Kreis einen Namen geben. 34 00:01:49,510 --> 00:01:53,070 So nennen wir es Kreis. 35 00:01:53,070 --> 00:01:54,406 Unser Kreis hat jetzt einen Namen. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 Und lassen Sie uns geben Sie ihm ein paar Attribute. 38 00:01:59,490 --> 00:02:03,690 Wie wäre cx würde x zu zentrieren, so das Zentrum der x-Position. 39 00:02:03,690 --> 00:02:06,730 Nehmen wir an, 200 200 Pixel. 40 00:02:06,730 --> 00:02:10,220 >> Geben wir ihm eine y von 200 Pixeln sowie. 41 00:02:10,220 --> 00:02:16,032 Und ein R ist ein Radius von etwa 40 Pixel. 42 00:02:16,032 --> 00:02:16,950 Nun wollen wir sehen. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Ich kann nicht buchstabieren. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Dort gehen Sie. 47 00:02:31,520 --> 00:02:37,330 Wir haben einen Kreis an der Position 200 Pixel, 200 Pixel, Radius von 40 Pixel. 48 00:02:37,330 --> 00:02:38,280 Irgendwie cool, oder? 49 00:02:38,280 --> 00:02:38,988 Wir haben einen Kreis. 50 00:02:38,988 --> 00:02:40,880 Ja. 51 00:02:40,880 --> 00:02:42,670 >> So dass keine Notwendigkeit zu folgen. 52 00:02:42,670 --> 00:02:45,790 Alle diese Beispiele werden alle von der Code, den ich heute tun 53 00:02:45,790 --> 00:02:51,300 online am Ende zur Verfügung gestellt werden in Form von interaktiven Beispielen 54 00:02:51,300 --> 00:02:54,010 mit Checkpoints jede Handlung, und so weiter. 55 00:02:54,010 --> 00:02:55,160 >> Lassen Sie uns mehr Zeug. 56 00:02:55,160 --> 00:02:58,901 Diese schwarzen Kreis ist wirklich hässlich. 57 00:02:58,901 --> 00:03:01,541 Es tut mir leid für diesen Fehler Nachrichten recht. 58 00:03:01,541 --> 00:03:05,340 Dort gehen wir. 59 00:03:05,340 --> 00:03:06,350 >> Geben wir ihm eine Farbe. 60 00:03:06,350 --> 00:03:07,170 Wie ist das? 61 00:03:07,170 --> 00:03:08,340 Ich mag zu stahlblau. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Nun, unser Kreis die Farbe gewechselt. 64 00:03:16,030 --> 00:03:17,320 Das ist großartig. 65 00:03:17,320 --> 00:03:31,330 Machen wir es semi-transparent too-- halbtransparent. 66 00:03:31,330 --> 00:03:33,670 >> Das sind Attribute wir sind auf dem Kreis zu definieren. 67 00:03:33,670 --> 00:03:36,774 Das erste, was wir getan haben ist wir einen Kreis auf der Seite. 68 00:03:36,774 --> 00:03:38,690 Und dann werden wir die Definition eine Reihe von Attributen. 69 00:03:38,690 --> 00:03:41,610 Einige davon werden benötigt, wie CX, CY, und Radius. 70 00:03:41,610 --> 00:03:42,680 Und andere sind optional. 71 00:03:42,680 --> 00:03:44,730 >> Es gibt eine Menge mehr Eigenschaften. 72 00:03:44,730 --> 00:03:46,760 Es gibt eine Menge von ihnen. 73 00:03:46,760 --> 00:03:53,070 Zum Beispiel könnten wir eine haben, Schlaganfall sowie ein Hub rot. 74 00:03:53,070 --> 00:03:55,630 Aber lassen Sie uns zu entfernen, dass. 75 00:03:55,630 --> 00:04:00,450 Wir sind wieder zu einem Kreis, einem blauen Kreis. 76 00:04:00,450 --> 00:04:01,600 >> Lassen Sie uns also weitere Kreise. 77 00:04:01,600 --> 00:04:02,810 Wie ist das? 78 00:04:02,810 --> 00:04:04,665 Lassen Sie uns einen anderen Kreis. 79 00:04:04,665 --> 00:04:05,985 Das ist spannend, nicht wahr? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Also sage ich nur Copy-Pasted was wir schon. 82 00:04:12,300 --> 00:04:13,570 Nennen wir es circle2. 83 00:04:13,570 --> 00:04:15,840 Und lassen Sie uns den genauen Gleiche und geben Sie es 84 00:04:15,840 --> 00:04:20,450 Attribute, gegeben eine x-Position 300. 85 00:04:20,450 --> 00:04:24,140 Yay, haben wir jetzt zwei Kreise. 86 00:04:24,140 --> 00:04:27,240 >> Und natürlich könnten wir aktualisieren Sie diese Werte. 87 00:04:27,240 --> 00:04:31,640 Ich konnte es bei 400 gesetzt, und jetzt geht es. 88 00:04:31,640 --> 00:04:35,470 Und da es ist ärgerlich, lassen Sie uns nehmen Sie sie, so circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Es ist jetzt weg. 91 00:04:40,730 --> 00:04:43,170 >> Also, was wir tun und ist nur sehr, diese very-- 92 00:04:43,170 --> 00:04:46,030 ist sehr ähnlich zu dem, was man könnte in jQuery zu tun, zum Beispiel. 93 00:04:46,030 --> 00:04:48,240 Wir sind nur die Manipulation DOM, es heißt. 94 00:04:48,240 --> 00:04:50,040 Man könnte dieses Wort gehört haben. 95 00:04:50,040 --> 00:04:53,255 Wir schaffen Dinge, die Einstellung Attribute auf Sachen, die Beseitigung Zeug. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Nun, hier ist es interessant. 98 00:05:02,360 --> 00:05:07,250 So später im Code, konnten wir noch finden Sie in der Original-Kreis hier. 99 00:05:07,250 --> 00:05:14,100 Lassen Sie uns also setzen Sie seine Eigenschaft zu cx. 100 00:05:14,100 --> 00:05:18,260 Nehmen wir an, seine x-Position auf 400. 101 00:05:18,260 --> 00:05:22,406 Und ich werde den Übergang daß, so dass es auf der Hand. 102 00:05:22,406 --> 00:05:23,360 Dort gehen wir. 103 00:05:23,360 --> 00:05:24,780 >> So haben wir einen Kreis. 104 00:05:24,780 --> 00:05:26,440 Wir setzen einige Attribute. 105 00:05:26,440 --> 00:05:28,210 Wir haben einen anderen Kreis, entfernt es. 106 00:05:28,210 --> 00:05:31,650 Und dann sind wir zu modifizieren der ursprüngliche Kreis. 107 00:05:31,650 --> 00:05:35,400 >> Aber hier ist, wo es geht viel interessanter. 108 00:05:35,400 --> 00:05:39,070 Wir können nicht nur gesetzt Attribute als nur Werte, können wir sagen, 109 00:05:39,070 --> 00:05:41,610 hey, Kreis, gehen in die Position 200. 110 00:05:41,610 --> 00:05:44,540 Wir können auch sie gesetzt als Funktionen. 111 00:05:44,540 --> 00:05:48,850 >> Also anstatt 400 hier, wir einige Berechnung durchzuführen 112 00:05:48,850 --> 00:05:53,950 im laufenden Betrieb, was wir wollen, dass Attribut sein. 113 00:05:53,950 --> 00:05:56,580 Das ist also, wie Sie möchten, dass zum Ausdruck bringen. 114 00:05:56,580 --> 00:06:00,660 Wir sagen, statt 400, lassen Sie mich geben Ihnen eine Funktion statt. 115 00:06:00,660 --> 00:06:04,180 Und hier, im Inneren dieser Funktion wir können jede verrückte Berechnung durchzuführen. 116 00:06:04,180 --> 00:06:06,820 >> Wir könnten die Zeit zu nehmen und Blick auf eine andere Sache, 117 00:06:06,820 --> 00:06:11,230 und dynamisch zu entscheiden, der Kreis, welchen Wert wir wollen. 118 00:06:11,230 --> 00:06:15,266 Wie wäre es geben wir nur es eine zufällige x-Position? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 So ist das also. 121 00:06:21,120 --> 00:06:25,490 >> Also, was sagt, dass ist, für alle x, führen Sie diese Funktion aus. 122 00:06:25,490 --> 00:06:29,340 Und was wir tun, ist die Berechnung einige Dinge, ein Zufalls fache der Breite 123 00:06:29,340 --> 00:06:30,410 und wieder, dass. 124 00:06:30,410 --> 00:06:34,765 Also jedes Mal, dass wir laufen, bekommen wir ein Kreis, der in eine zufällige Platz geht. 125 00:06:34,765 --> 00:06:36,394 Es ist irgendwie cool. 126 00:06:36,394 --> 00:06:38,310 Ich fühle mich wie ich aussehen könnte in dieser für eine kleine. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Wir fangen an, zu erhalten etwas Interessantes hier. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Lassen Sie uns diese Daten nun angetrieben werden. 131 00:06:51,390 --> 00:06:53,420 Es gibt keine Daten hier. 132 00:06:53,420 --> 00:06:54,482 Lassen Sie uns das ändern. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Akt II, Data Driven Documents-- Lassen Sie uns also, um hier zurückzukehren. 135 00:07:12,140 --> 00:07:15,340 Und lassen Sie uns nur loswerden circle2 weil wir gerade das Hinzufügen und Entfernen 136 00:07:15,340 --> 00:07:15,840 es. 137 00:07:15,840 --> 00:07:17,382 So haben wir nicht wirklich brauchen. 138 00:07:17,382 --> 00:07:21,421 Wir müssen hier sehr viel mehr, schlau zu sein. 139 00:07:21,421 --> 00:07:23,170 Nehmen wir an, wir haben Einige Daten von einer Art. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Eine moment-- sagen wir mal, wir hatten Daten von dieser Form. 142 00:07:40,020 --> 00:07:41,800 Wir hatten eine Reihe, nur eine Reihe von Zahlen. 143 00:07:41,800 --> 00:07:45,750 Wir haben sieben Nummern hier, was auch immer diese represent-- Menge 144 00:07:45,750 --> 00:07:48,810 in Bankkonto der Menschen, wie viel sie wiegen, was weiß ich. 145 00:07:48,810 --> 00:07:51,310 >> Diese Zahlen sind, und wir wollen unsere Kreise verwenden 146 00:07:51,310 --> 00:07:53,240 , diese Zahlen irgendwie darzustellen. 147 00:07:53,240 --> 00:07:55,515 Wir wollen unseren binden Kreise auf diese Zahlen. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Also, was wir tun. 150 00:07:59,626 --> 00:08:01,500 Nehmen wir an, wir wollen ein Kreis für jede Zahl. 151 00:08:01,500 --> 00:08:03,590 Wir konnten die alten tun, was wir doing-- 152 00:08:03,590 --> 00:08:06,020 Kreis append und circle2 und circle3. 153 00:08:06,020 --> 00:08:10,020 Aber das aus dem Ruder, und es gibt eine Menge von sich wiederholenden Logik. 154 00:08:10,020 --> 00:08:12,760 >> Lassen Sie uns also klüger damit. 155 00:08:12,760 --> 00:08:17,810 Anstelle der Verwendung der var Kreis svg.append, dass wir nur mit, 156 00:08:17,810 --> 00:08:21,580 wir werden verwenden dieser kleine Block hier. 157 00:08:21,580 --> 00:08:24,510 Ich will nicht, um eingehende gehen in welchem ​​alle diese Teile zu tun. 158 00:08:24,510 --> 00:08:26,020 Und es ist eine Art von einem fortschrittlichen Thema. 159 00:08:26,020 --> 00:08:27,830 Und ich wünschte, ich könnte es. 160 00:08:27,830 --> 00:08:31,370 >> Aber der Schlüssel ist daran zu recognize-- und Sie werden sehen, ist sehr oft in D3-Code. 161 00:08:31,370 --> 00:08:36,840 Dieser Textblock Grund erstellt so viele Kreise 162 00:08:36,840 --> 00:08:41,360 wie Datenelemente in diesem Array finden Sie hier. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Also das schafft so viele Kreise, wie es Elemente gibt. 165 00:08:55,780 --> 00:08:58,520 Es wird uns zu schaffen sieben Kreisen. 166 00:08:58,520 --> 00:09:01,710 Und es macht einen sehr, sehr wichtige Sache. 167 00:09:01,710 --> 00:09:02,460 Lassen Sie uns so laufen, dass. 168 00:09:02,460 --> 00:09:05,460 Loesen Sie die anderen Kreis. 169 00:09:05,460 --> 00:09:09,565 Sagen wir einfach kommentieren Sie diese scheiden aus und führen Sie diese wieder ein. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Dort gehen wir. 172 00:09:15,260 --> 00:09:18,030 So ist unser Kreis ist hier ein viel dunkler, weil wir 173 00:09:18,030 --> 00:09:20,720 haben sieben Kreisen, eine auf der Oberseite der anderen. 174 00:09:20,720 --> 00:09:25,425 Wir gerade erstellt sieben Kreisen, eine jeweils für jedes dieser Datenelemente. 175 00:09:25,425 --> 00:09:28,860 Aber es gibt eine wichtige Sache, die passiert mit diesem Ausschnitt hier. 176 00:09:28,860 --> 00:09:31,030 >> Es ist, daß Daten gebunden wurde. 177 00:09:31,030 --> 00:09:33,440 Also jeder einzelne von diejenigen Datenelemente, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, war gebunden auf einen bestimmten Kreis. 179 00:09:38,830 --> 00:09:40,960 Das sind also nicht nur erstellt eine Reihe von Kreisen 180 00:09:40,960 --> 00:09:43,420 sondern verbindet diese beiden Dinge zusammen. 181 00:09:43,420 --> 00:09:48,740 >> Und in der Zukunft, weil wir erstellt diese Kreise mit dieser Funktion D3, 182 00:09:48,740 --> 00:09:52,430 wenn ich dir einen Kreis, können Sie geben Sie mir die Daten zugeordnet. 183 00:09:52,430 --> 00:09:53,280 So können wir D3 fragen. 184 00:09:53,280 --> 00:09:54,840 Hey, D3, habe ich diesen Kreis. 185 00:09:54,840 --> 00:09:57,350 Was ist in der die Daten, die der Kreis? 186 00:09:57,350 --> 00:10:01,290 Und D3 würde uns sagen, 10 oder 45 oder 105. 187 00:10:01,290 --> 00:10:02,380 >> Diese Dinge werden gebunden. 188 00:10:02,380 --> 00:10:04,490 Das ist ein sehr, sehr grundlegendes Konzept. 189 00:10:04,490 --> 00:10:06,070 Schauen wir uns das. 190 00:10:06,070 --> 00:10:12,210 >> So ist die Art, wie wir würde fragen D3-- so dies irrelevant für diese, 191 00:10:12,210 --> 00:10:16,620 aber glauben Sie mir nur darauf. 192 00:10:16,620 --> 00:10:17,620 Dies ist, wie wir bitten D3. 193 00:10:17,620 --> 00:10:21,312 Hey, D3, gib mir die ersten Kreis, die Sie finden können. 194 00:10:21,312 --> 00:10:23,580 Gib mir den ersten Kreis Sie finden können. 195 00:10:23,580 --> 00:10:29,660 Und dann haben wir D3 fragen konnte, was ist die Daten auf dem, wie diese, 10. 196 00:10:29,660 --> 00:10:33,380 >> So dass wir nur fragen, D3, finden mich der erste Kreis Sie finden können. 197 00:10:33,380 --> 00:10:34,400 Was ist seine Daten? 198 00:10:34,400 --> 00:10:36,650 10, ist, dass in der Tat unser erste Datenelement. 199 00:10:36,650 --> 00:10:42,150 Wir könnten es bitten, hey, D3, finden Sie uns unsere dritte Kreis. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Warum ist das wirklich wichtig? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Also hier habe ich erwähnt, dass wir Funktionen nutzen könnten. 204 00:10:52,250 --> 00:10:54,910 Und ich erwähnte, dass war eine sehr mächtige Sache. 205 00:10:54,910 --> 00:11:03,070 So können nicht nur unsere Funktionen Dinge tun wie tun einige Berechnung beispielsweise 206 00:11:03,070 --> 00:11:09,170 Rückkehr eine Zufallszahl, es kann auch Dinge auf Grundlage der Daten. 207 00:11:09,170 --> 00:11:11,550 Dies ist, was datengesteuerte Dokumente bedeuten. 208 00:11:11,550 --> 00:11:13,750 Das ist, was D3 steht. 209 00:11:13,750 --> 00:11:17,800 >> Also das x postition-- statt nur zu sagen, alle Kreise, 210 00:11:17,800 --> 00:11:21,735 zu x-Position 200, wir könnte es geben, eine Funktion. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 Und hier können wir eine Berechnung durchzuführen. 213 00:11:30,140 --> 00:11:33,710 und d steht hier an Ort und Stelle für die Daten. 214 00:11:33,710 --> 00:11:36,120 Also jedes Mal, wir haben ein Kreis, im Grunde 215 00:11:36,120 --> 00:11:37,750 D3 wird diese sieben Kreisen erstellen. 216 00:11:37,750 --> 00:11:38,500 Und dann für jeden 217 00:11:38,500 --> 00:11:41,920 >> Kreis, es wird gehen, hey, circle1 was ist Ihre Position x. 218 00:11:41,920 --> 00:11:45,210 Früher waren wir immer die Beantwortung 200. 219 00:11:45,210 --> 00:11:48,630 Aber jetzt, fragt jedes Mal D3 uns, was ist Ihre Position x, 220 00:11:48,630 --> 00:11:51,790 es wird geben us-- wir dass Kreis, so haben wir die Daten. 221 00:11:51,790 --> 00:11:55,290 Es wird uns die Daten zu geben und zu sagen: was wollen Sie die Ausstellung zu sein, 222 00:11:55,290 --> 00:11:57,120 auf der Grundlage dieser Daten. 223 00:11:57,120 --> 00:11:59,590 >> Lassen Sie uns gerade die aktuellen Daten zurück. 224 00:11:59,590 --> 00:12:04,910 Wenn wir dies ausführen, das gibt uns datengesteuerte Dokumente. 225 00:12:04,910 --> 00:12:08,040 Diese Kreise werden basierend in Bezug Position-- 226 00:12:08,040 --> 00:12:11,120 sie sind Basen in Abhängigkeit von den Daten. 227 00:12:11,120 --> 00:12:13,100 >> So zum ersten Kreis, D3 stellt einen Kreis. 228 00:12:13,100 --> 00:12:16,770 Und dann D3 fragt uns, was zu tun Sie wollen, dass die Ausstellung zu sein. 229 00:12:16,770 --> 00:12:19,620 Und wir einfach sagen, was auch immer die Daten. 230 00:12:19,620 --> 00:12:21,185 Stellen Sie die Ausstellung 10. 231 00:12:21,185 --> 00:12:26,320 >> Dann fragt sie, was tun Sie das wollen, Darlegung für den zweiten Kreis. 232 00:12:26,320 --> 00:12:27,270 Und wir antworten, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 Und wir natürlich kann machen einige Rechen hier. 235 00:12:32,230 --> 00:12:35,510 Ich finde, dass diese Kreise sind eine Art von bis zerquetscht. 236 00:12:35,510 --> 00:12:38,965 >> So multipliziert es mit 3 multiplizieren Daten 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Unser Kreis wurde gerade erweitert aus. 239 00:12:43,840 --> 00:12:46,730 Unser Wert wurde verdreifacht. 240 00:12:46,730 --> 00:12:51,010 >> Der Kreis ist wirklich am Rande, also lasst uns vielleicht Art Offset es. 241 00:12:51,010 --> 00:12:53,632 Nehmen wir an, um 20. 242 00:12:53,632 --> 00:12:56,070 Bitte schön. 243 00:12:56,070 --> 00:12:57,590 >> Dies ist eine Datenvisualisierung. 244 00:12:57,590 --> 00:13:01,767 Es ist ein sehr einfaches, aber diese gibt uns einen Einblick in unsere Daten. 245 00:13:01,767 --> 00:13:04,600 Es sagt uns, dass wir zum Beispiel haben eine kleine Gruppe von Elementen. 246 00:13:04,600 --> 00:13:06,340 Und wir haben eine große Ausreißer hier. 247 00:13:06,340 --> 00:13:10,830 Das gibt uns einige Informationen über die Verteilung. 248 00:13:10,830 --> 00:13:20,830 >> Wenn wir zum Beispiel ändern die Daten zu 150 hier und Aktualisierung, 249 00:13:20,830 --> 00:13:22,630 unsere Visualisierung geändert wird. 250 00:13:22,630 --> 00:13:24,285 Dieses Dokument ist datengesteuert. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> So natürlich alle diese Elemente, Alle diese Attribute hier, 253 00:13:36,180 --> 00:13:38,430 können wir eine Funktion zu verwenden, nicht nur die Zahlen, nicht nur 254 00:13:38,430 --> 00:13:39,900 die x- und y-Positionen. 255 00:13:39,900 --> 00:13:42,120 So kann man eine Funktion für die Farbe zu verwenden. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Also werden wir das gleiche tun. 258 00:13:46,360 --> 00:13:49,360 Wir werden ihm eine Funktion. 259 00:13:49,360 --> 00:13:52,320 >> Und lassen Sie uns sagen, wir hätten conditionals in unserer Funktion. 260 00:13:52,320 --> 00:13:54,770 Diese Funktion kann sein Hundert Zeilen lang. 261 00:13:54,770 --> 00:13:57,150 Es kann sehr, sehr komplizierte Dinge zu tun. 262 00:13:57,150 --> 00:13:59,080 >> Also lassen wir eine if-Anweisung hier. 263 00:13:59,080 --> 00:14:03,420 Lassen Sie uns sagen, wenn unsere Daten kleiner ist 50, ist, dass einige Schwellen 264 00:14:03,420 --> 00:14:05,817 dass wir interessiert in aus irgendeinem Grund. 265 00:14:05,817 --> 00:14:06,650 Machen wir es grün. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 Sonst machen wir es rot. 268 00:14:15,320 --> 00:14:16,110 Wie ist das? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Nizza. 271 00:14:21,220 --> 00:14:24,860 >> Also unsere Datenvisualisierung beginnt Weitere interessante Informationen vermitteln 272 00:14:24,860 --> 00:14:26,727 auf vielen Kanälen. 273 00:14:26,727 --> 00:14:28,560 So, jetzt wissen wir, ein wenig über die Verteilung. 274 00:14:28,560 --> 00:14:31,768 Und wir wissen, dass es eine Art von schnitt bei 50, die uns interessiert. 275 00:14:31,768 --> 00:14:35,630 Wir wissen, dass es zwei Datenpunkten unterhalb dieser Schwelle, und die meisten von ihnen 276 00:14:35,630 --> 00:14:36,130 oben. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> So als letzten Schritt werden diese Daten hier es ist sehr selten, dies so zu sehen. 279 00:14:46,160 --> 00:14:52,610 Lassen Sie uns also verschieben Sie es gerade aus auf eine Variable denn das ist sauberer, wie diese. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 Und dann setzen wir hier die Variable. 282 00:15:05,197 --> 00:15:06,280 Es ist genau dasselbe. 283 00:15:06,280 --> 00:15:07,280 Es ist nur ein bisschen sauberer. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Weiter oben, Akt III, Scales-- So richtige Problem 286 00:15:35,300 --> 00:15:38,920 Hier ist, wenn wir ändern unsere Daten in diesem 200 value-- 287 00:15:38,920 --> 00:15:41,685 wenn wir es auf 400 zu ändern oder so etwas und Aktualisierung, 288 00:15:41,685 --> 00:15:44,540 dann wird dieser Wert ging im Off. 289 00:15:44,540 --> 00:15:49,040 Also hier unsere Logik der, wie wir die Zeit 3 290 00:15:49,040 --> 00:15:52,570 und 20, um es zu verteilen, und dann Offset es etwas ist wirklich klobig. 291 00:15:52,570 --> 00:15:54,150 >> Was bedeuten die Zahlen? 292 00:15:54,150 --> 00:15:55,400 Sie sind nur schwer es codiert. 293 00:15:55,400 --> 00:15:58,830 Und sie sind sehr stark an die Daten gebunden. 294 00:15:58,830 --> 00:16:00,550 Wir wollen eine datengesteuerte Dokument. 295 00:16:00,550 --> 00:16:05,460 Wir wollen ein sehr flexibles Dokument, daß gegebenen Daten, anpasst, um sie 296 00:16:05,460 --> 00:16:07,900 und vertritt sie. 297 00:16:07,900 --> 00:16:11,330 >> Was wir brauchen, ist im Grunde, wir haben diese Zahlenbereich 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 Und wir wollen, dass kartieren auf möchten die Breite, die volle Breite hier. 300 00:16:17,630 --> 00:16:20,620 So haben wir den Bereich der Zahlen geht von 0 bis 100. 301 00:16:20,620 --> 00:16:24,980 Und wir haben diese Campus I geht von 20 bis 700, in diesem Fall. 302 00:16:24,980 --> 00:16:26,515 >> Wir Art von wollen, dass Karte auf. 303 00:16:26,515 --> 00:16:30,002 Wir wollen, dass Scale-up und dann versetzt sie ein wenig. 304 00:16:30,002 --> 00:16:33,165 Es stellt sich heraus, dass D3 hat diese. 305 00:16:33,165 --> 00:16:34,220 Es nennt sich eine Skala. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Also lassen Sie sie verwenden. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Die Art und Weise, die works-- Ich bin zu gehen Geben Sie diese nach oben und dann erklären. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Dies ist ein Maßstab. 312 00:17:02,450 --> 00:17:08,670 Was wird es tun, wird sie kartieren Werte von 1 bis 200 auf 20 bis 600. 313 00:17:08,670 --> 00:17:10,990 Wir können das überprüfen. 314 00:17:10,990 --> 00:17:13,329 Das können wir hier sehen. 315 00:17:13,329 --> 00:17:21,704 >> Also, wenn ich füttern 1-- einen Moment. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Gib mir eine Sekunde. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Ich muß es falsch eingegeben. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Dort gehen Sie. 322 00:18:15,990 --> 00:18:17,930 Es tut mir leid, dass. 323 00:18:17,930 --> 00:18:22,050 >> Also, was ein Maßstab tun ist, wird der Wert zu nehmen 324 00:18:22,050 --> 00:18:24,930 und konvertieren Sie, dass, erweitern, dass Sie, so dass es 325 00:18:24,930 --> 00:18:27,320 füllt das gesamte Spektrum für fragen. 326 00:18:27,320 --> 00:18:32,910 Also in diesem Fall, wenn wir ihm ein, es geht um die Karte aus, auf 20. 327 00:18:32,910 --> 00:18:37,750 Und wenn wir es 200, ist es werde die Karte auf 600. 328 00:18:37,750 --> 00:18:40,460 Und irgendwo dazwischen, wenn wir 100, ist es 329 00:18:40,460 --> 00:18:44,610 werde irgendwo sein zwischen 20 und 600. 330 00:18:44,610 --> 00:18:51,480 >> Und natürlich, das ist jetzt das, was wir brauchen, um diese hart codiert entfernen 331 00:18:51,480 --> 00:18:53,402 Dinge, die wir haben recht. 332 00:18:53,402 --> 00:18:55,950 Also, was wir wollen, ist nehmen Sie die Daten, die wir sind 333 00:18:55,950 --> 00:19:00,950 gegeben, dass einzelne Daten Element, und übergeben es an erster skalieren. 334 00:19:00,950 --> 00:19:02,635 So Skala wird es skalieren. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, wir haben hier ein wenig Fehler. 337 00:19:48,880 --> 00:19:50,120 Wir fehlende Daten. 338 00:19:50,120 --> 00:19:51,290 Dort gehen Sie. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 Und das dehnt es sich aus. 341 00:19:59,550 --> 00:20:01,383 >> Das gibt uns die gleiche Dadurch hatten wir vor, 342 00:20:01,383 --> 00:20:04,030 aber anstatt denjenigen hart codiert Einschränkungen. 343 00:20:04,030 --> 00:20:07,790 Und wenn der Umfang unserer Leinen ändert, beispielsweise, 344 00:20:07,790 --> 00:20:11,790 wenn wir wollen, um diese über haben 400 Pixel und zermatscht aus, 345 00:20:11,790 --> 00:20:15,440 wir können es haben over-- wir können sie zu erweitern, oder wir 346 00:20:15,440 --> 00:20:21,890 können diese linken Rand zu verringern etwas weniger oder mehr als 20 beträgt. 347 00:20:21,890 --> 00:20:25,470 Diese Zahlen, diese hart codiert Zahlen nun sinnvoll zu uns. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> Und wir könnten noch viel mehr interessante Dinge. 350 00:20:30,520 --> 00:20:35,990 Also statt mit einem linearen Maßstab, wir möchten Sie vielleicht einen Maßstab anzumelden. 351 00:20:35,990 --> 00:20:37,840 Und das wird uns eine logarithmische Skala. 352 00:20:37,840 --> 00:20:41,269 >> So, jetzt unser Maßstab, an Stelle von nur darauf hin, dass die Erweiterung Bereich, 353 00:20:41,269 --> 00:20:42,810 es tut anspruchsvollere Dinge. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Anstatt diesen Bereich Fest codiert, und anstatt daß 600 356 00:20:53,790 --> 00:20:58,465 wir möchten Sie vielleicht nur die Breite zu verwenden, so von 20 auf die Breite minus 40, 357 00:20:58,465 --> 00:21:02,392 2-fache der Rand auf der anderen Seite. 358 00:21:02,392 --> 00:21:05,350 Und das macht viel mehr Sinn, jemand, der auf den Code aussehen könnte. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Interessanterweise erhalten die Schuppen sehr, sehr anspruchsvoll als auch. 361 00:21:11,850 --> 00:21:13,350 Sie haben eine Menge interessanter Dinge. 362 00:21:13,350 --> 00:21:17,620 So Skalen nicht notwendigerweise nur mit Zahlen arbeiten. 363 00:21:17,620 --> 00:21:18,955 Lassen Sie uns ein Farbskala. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Also unser Angebot be-- könnte Unsere Domäne ist 1-200. 366 00:21:26,120 --> 00:21:28,220 Das ist der Eingang Sache. 367 00:21:28,220 --> 00:21:33,793 Aber wir wollen von der Karte könnten grün nach rot, zum Beispiel. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 Und nun, wenn wir es 1 passieren, wir werden grün zu bekommen. 370 00:21:42,910 --> 00:21:45,110 Wenn wir es 200 ist, bieten wir rot. 371 00:21:45,110 --> 00:21:49,480 Und wenn wir es passieren etwas dazwischen, es wird einige Mischung davon sein, 372 00:21:49,480 --> 00:21:52,520 irgendwo auf dem Gradienten grün und rot. 373 00:21:52,520 --> 00:21:55,210 >> Und anstatt diese Art von Logik klobig 374 00:21:55,210 --> 00:21:58,550 Wir haben hier mit der bedingte Recht gibt, 375 00:21:58,550 --> 00:22:03,250 wir hätten something-- ein linearen Skala zwischen denen. 376 00:22:03,250 --> 00:22:07,100 So würden wir den Maßstab verwenden wir nur erstellt, die wir genannt Farbe. 377 00:22:07,100 --> 00:22:09,060 Und wir geben würde es D, die ist unser Datenelement. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 Und wir gehen. 380 00:22:15,060 --> 00:22:18,070 Wir haben eine Farbskala. 381 00:22:18,070 --> 00:22:18,940 >> So ist dieses Mapping. 382 00:22:18,940 --> 00:22:20,960 So ganz links ist komplett grün. 383 00:22:20,960 --> 00:22:22,560 Ganz rechts ist komplett rot. 384 00:22:22,560 --> 00:22:24,828 Und alles dazwischen ist eine Funktion von d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Wir haben eine interessante Visualisierungen hier. 387 00:22:35,160 --> 00:22:36,952 Aber unsere Daten war irgendwie langweilig. 388 00:22:36,952 --> 00:22:39,410 Mal sehen, was wir tun könnten, wenn wir mehr interessante Daten. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Akt IV, Arbeiten mit Data-- das erste, was 391 00:22:50,500 --> 00:22:53,560 wir tun, damit, dass unsere Visualisierung interessanter 392 00:22:53,560 --> 00:22:56,140 ist, um die Daten an anderer Stelle zu bewegen. 393 00:22:56,140 --> 00:22:58,310 Es ist sehr klobig zu haben die Daten der Fest hier codiert. 394 00:22:58,310 --> 00:23:01,220 Und im Allgemeinen, wir werden fragen jemand anderes für die Daten. 395 00:23:01,220 --> 00:23:05,400 Wir werden vielleicht fragen, werden die Regierung, das Census Bureau, was ist Ihre Daten 396 00:23:05,400 --> 00:23:10,170 und dann Plotten, dass oder fragen Einige Drittanbieter-Unternehmen für einige Daten 397 00:23:10,170 --> 00:23:13,330 und dann den Aufbau einer Visualisierung auf, dass. 398 00:23:13,330 --> 00:23:17,170 >> Das erste, was wir tun wollen ist zu bewegen, dass irgendwo anders. 399 00:23:17,170 --> 00:23:24,130 So werde ich ein erstellen Datei hier genannt data.json. 400 00:23:24,130 --> 00:23:25,600 JSON das Datenformat ist. 401 00:23:25,600 --> 00:23:29,210 Sie müssen nicht zu viel darüber wissen. 402 00:23:29,210 --> 00:23:33,210 Und wir werden die kopieren wenig Daten, die wir dort haben, 403 00:23:33,210 --> 00:23:40,330 fügen Sie in es wörtlich, gehen zurück zu unserem Visualisierungscode 404 00:23:40,330 --> 00:23:45,362 hier, und verwenden Sie diese Funktion hier. 405 00:23:45,362 --> 00:23:46,820 Sie müssen nicht, um die Details zu kennen. 406 00:23:46,820 --> 00:23:49,800 Aber was diese tun werden, ist, es wird die Datei zu finden, 407 00:23:49,800 --> 00:23:51,780 zu holen, und schicken Sie es uns. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Was das bedeutet ist, es geht und nutzen Sie die data.json Datei. 410 00:24:15,220 --> 00:24:18,570 Und dann ist der Code, inside-- Wesentlichen eingerückt, 411 00:24:18,570 --> 00:24:21,800 der gesamte Code haben wir sind-- wird laufen nur, wenn wir die Daten wieder zu bekommen. 412 00:24:21,800 --> 00:24:25,760 Und es geht um, dass laufen Code mit den Daten, die wir haben. 413 00:24:25,760 --> 00:24:28,870 Große, haben wir ein Visualisierung, die abfragt 414 00:24:28,870 --> 00:24:31,390 für einige Code irgendwo sonst, das normalerweise 415 00:24:31,390 --> 00:24:36,110 wo es einige Daten aus Abfragen irgendwo anders, was normalerweise 416 00:24:36,110 --> 00:24:38,656 wie Visualisierungen arbeiten. 417 00:24:38,656 --> 00:24:41,400 >> Aber ich will zurück zu den Daten zu gehen. 418 00:24:41,400 --> 00:24:48,030 So werden die Daten grundsätzlich in D3-- D3 verbraucht Daten, die eine Liste der Dinge ist. 419 00:24:48,030 --> 00:24:53,000 D3 erwartet, dass die Daten nur eine Liste sein Dinge, eine Anordnung von Dingen. 420 00:24:53,000 --> 00:24:58,780 Es spielt keine Rolle, was die Dinge, sind, so lange wie er ein Array von ihnen. 421 00:24:58,780 --> 00:25:02,460 >> So, hier, zum Beispiel, wir könnten von Natürlich sind Fließkommazahlen. 422 00:25:02,460 --> 00:25:04,830 Wir konnten Negative haben. 423 00:25:04,830 --> 00:25:09,400 D3 ist es egal, so lange, denn es ist eine Liste der Dinge. 424 00:25:09,400 --> 00:25:13,270 >> Als interessante Dinge, die wir teilen wollen, könnten wir auch 425 00:25:13,270 --> 00:25:19,410 eine Liste von Zeichenketten so. 426 00:25:19,410 --> 00:25:25,440 Das sind also die purpurnen Schlagzeilen Ich nahm vor ein paar Tagen. 427 00:25:25,440 --> 00:25:29,220 Und vielleicht haben Sie einige interessante finden Dinge über diese eine Schlagzeilen. 428 00:25:29,220 --> 00:25:30,970 >> Also noch einmal, das ist eine Liste der Dinge. 429 00:25:30,970 --> 00:25:32,360 D3 ist es egal. 430 00:25:32,360 --> 00:25:35,572 Dies geschieht, um ein String sein. 431 00:25:35,572 --> 00:25:36,530 Wir haben unsere Daten geändert. 432 00:25:36,530 --> 00:25:38,210 >> Lassen Sie uns unsere Visualisierungs zurückzukehren. 433 00:25:38,210 --> 00:25:42,495 Nun rechnet unserem Visualisierung die Eingabe an Zahlen sein. 434 00:25:42,495 --> 00:25:44,370 So werden wir haben, um ein paar Änderungen vornehmen. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 So zum Beispiel, zunächst vielleicht wir diese Kreise zusammen setzen wollen 437 00:25:52,180 --> 00:25:56,870 durch die Länge der Kopfzeile, die Anzahl der Zeichen in der Überschrift. 438 00:25:56,870 --> 00:26:03,600 >> Also, was wir jedes Mal tun ist-- unsere Funktion wird durch einen string, 439 00:26:03,600 --> 00:26:09,095 wir finden es ist lang und dann passieren, dass auf Ebene. 440 00:26:09,095 --> 00:26:11,550 Die Farbe, werde ich zurückkehren dass die Stahlblau. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 Und wir gehen. 443 00:26:20,420 --> 00:26:23,190 Wir haben eine Visualisierung Crimson Schlagzeilen. 444 00:26:23,190 --> 00:26:25,500 >> Unser Maßstab ist etwas abseits. 445 00:26:25,500 --> 00:26:29,680 Nehmen wir an, der längsten Überschrift ist 100 Zeichen lang, 446 00:26:29,680 --> 00:26:32,244 so erstrecken, dass ein bisschen. 447 00:26:32,244 --> 00:26:33,410 Und wir haben eine Visualisierung. 448 00:26:33,410 --> 00:26:36,710 So scheint es, dass die meisten Schlagzeilen sind ziemlich dicht beieinander, 449 00:26:36,710 --> 00:26:38,750 im Hinblick auf die Charakterlinie. 450 00:26:38,750 --> 00:26:41,200 Aber man es wirklich steht. 451 00:26:41,200 --> 00:26:46,660 >> Wir konnten einige Werkzeuge zu bauen zu entdecken, dass mehr. 452 00:26:46,660 --> 00:26:50,710 Aber wenn ich daran arbeiten, war ich neugierig, ob in diesem Datensatz, 453 00:26:50,710 --> 00:26:53,880 Schlagzeilen mit einem Doppelpunkt in ihnen hätte länger sein. 454 00:26:53,880 --> 00:26:55,770 Ich davon ausgegangen, sie würden. 455 00:26:55,770 --> 00:26:56,660 >> Also lassen Sie uns herausfinden. 456 00:26:56,660 --> 00:27:00,650 Lassen Sie uns die Farbe Kanal wie wir es vor, 457 00:27:00,650 --> 00:27:04,540 zu einigen, ob kodieren es gibt ein Doppelpunkt oder nein. 458 00:27:04,540 --> 00:27:07,220 Also werden wir wieder eine bedingte verwenden. 459 00:27:07,220 --> 00:27:09,350 Sie müssen nicht wissen, die Einzelheiten dieser, 460 00:27:09,350 --> 00:27:14,260 aber das ist, wie wir überprüfen ein String für einen bestimmten Charakter 461 00:27:14,260 --> 00:27:16,355 in JavaScript wieder, nicht relevant. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Aber wenn wir nicht finden ein Doppelpunkt, werden wir grün zurück. 464 00:27:23,270 --> 00:27:26,100 Und wenn wir das tun, werden wir wieder rot. 465 00:27:26,100 --> 00:27:29,010 Also noch einmal, dass Schlagzeilen haben ein Doppelpunkt rot. 466 00:27:29,010 --> 00:27:34,980 Dies ist, was diese means-- nett. 467 00:27:34,980 --> 00:27:38,040 >> So scheint es, dass mein Hypothese stieß. 468 00:27:38,040 --> 00:27:39,360 Es gibt nur zwei. 469 00:27:39,360 --> 00:27:42,380 Wir haben nur sechs Datenpunkte und nur zwei Doppelpunkte hatten. 470 00:27:42,380 --> 00:27:45,510 Aber es scheint ein wenig am unteren Ende, in der Tat. 471 00:27:45,510 --> 00:27:47,830 Überschriften mit Doppelpunkten scheinen generell kürzer sein, 472 00:27:47,830 --> 00:27:52,370 zumindest in unseren Daten Satz-- interessant. 473 00:27:52,370 --> 00:27:55,830 >> Lassen Sie uns zurück, dass auf stahlblau und dann sehen, 474 00:27:55,830 --> 00:28:00,601 was können wir mit noch machen Weitere interessante Daten. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Also noch einmal, erwähnte ich, dass Daten in D3 ist eine Liste der Dinge. 477 00:28:09,070 --> 00:28:11,080 Wir haben Zahlen vieler Arten zu sehen. 478 00:28:11,080 --> 00:28:12,810 Wir haben gesehen, Streicher. 479 00:28:12,810 --> 00:28:15,700 Aber die Dinge können auch Objekte sein. 480 00:28:15,700 --> 00:28:20,080 >> Sie können komplizierte Dinge sein dass eine Menge Dinge sind. 481 00:28:20,080 --> 00:28:24,510 Um mehr klar sagen, dass, in den meisten Fällen, die wir 482 00:28:24,510 --> 00:28:28,384 will jeden Datenpunkt als bauen Je komplizierter als nur einen Wert. 483 00:28:28,384 --> 00:28:30,175 Wenn Sie sich vorstellen ein Datenbank über Studenten, 484 00:28:30,175 --> 00:28:32,470 es könnte ein Schüler sein zu nennen, ein Studentenausweis, 485 00:28:32,470 --> 00:28:36,370 und eine Menge Dinge verbunden mit einem bestimmten Datensatz, 486 00:28:36,370 --> 00:28:39,834 nicht nur ein String oder eine Zahl. 487 00:28:39,834 --> 00:28:40,750 Also schauen wir uns das an. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Dies ist ein solcher Datensatz. 490 00:28:56,760 --> 00:28:59,090 Dies ist eine Daten über Erdbeben gesetzt. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Also alles, was hier auf unserer Liste oder Array Dinge enthält viele Dinge selbst. 493 00:29:08,430 --> 00:29:11,380 Also jeden Datenpunkt hat eine Betrag und eine Koordinate. 494 00:29:11,380 --> 00:29:13,425 Und koordiniert sich enthalten zwei Dinge. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Also jeden Tag ist jetzt noch viel mehr kompliziert und viel interessanter 497 00:29:20,450 --> 00:29:22,700 und enthält viel mehr interessante Informationen. 498 00:29:22,700 --> 00:29:26,730 Mal sehen, wir könnten aus, dass zu bauen. 499 00:29:26,730 --> 00:29:36,130 Rückfahrt hier wieder mit unsere Histogramm Kreis Visualisierung 500 00:29:36,130 --> 00:29:42,110 wir aufgebaut haben, lassen Sie uns sehen, ob wir einen bauen Visualisierung der Größenordnung Verteilung 501 00:29:42,110 --> 00:29:43,305 in unserem Datenbestand. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Also hier ist es das gleiche Konzept. 504 00:29:48,660 --> 00:29:51,920 Aber jetzt, enthält d mehr Dinge. 505 00:29:51,920 --> 00:29:54,780 d enthält viele Datenelemente. 506 00:29:54,780 --> 00:29:57,946 So bekommen wir zurück d. 507 00:29:57,946 --> 00:29:59,670 D3 gibt uns d. 508 00:29:59,670 --> 00:30:06,080 Und wir von der Suche nach der Stärke reagieren von d und dann beiläufig, dass auf Ebene. 509 00:30:06,080 --> 00:30:08,490 >> Und dann ändern müssen wir unser Maßstab, natürlich. 510 00:30:08,490 --> 00:30:12,980 So Größen einfach nicht gehen mehr als 10. 511 00:30:12,980 --> 00:30:15,485 Eigentlich gibt es noch nie 10 Erdbeben der Stärke. 512 00:30:15,485 --> 00:30:19,360 Aber das ist Art von unserem Ober Ende unserer oberen Spektrum. 513 00:30:19,360 --> 00:30:20,240 >> Lassen Sie uns zu erfrischen. 514 00:30:20,240 --> 00:30:22,990 Nizza, haben wir eine Visualisierung. 515 00:30:22,990 --> 00:30:25,490 Es ist interessant, so HINWEIS-- gibt es zwei Datenpunkte, 516 00:30:25,490 --> 00:30:29,010 fast genau auf der jeweils andere, betragsmäßig. 517 00:30:29,010 --> 00:30:31,350 Sie sehen dies durch die Opazität wir verwenden. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Wir haben geografischen Daten jetzt. 520 00:30:42,690 --> 00:30:44,710 Wir haben Breiten und Längengrad. 521 00:30:44,710 --> 00:30:47,549 Vielleicht werden wir etwas tun konnte, ein viel interessanter mit dem. 522 00:30:47,549 --> 00:30:49,590 Lassen Sie uns etwas mehr interessante Art und Weise zu visualisieren 523 00:30:49,590 --> 00:30:53,500 dies komplizierter Daten, die wir Zugriff haben. 524 00:30:53,500 --> 00:31:04,950 >> Akt V, Mapping-- grundlegend, Wir wollen diese auf einer Karte setzen. 525 00:31:04,950 --> 00:31:07,690 Ich meine, das ist, wohin das führt. 526 00:31:07,690 --> 00:31:13,130 Wir wollen Informationen über die zu kodieren Position dieser Erdbeben Lesungen 527 00:31:13,130 --> 00:31:16,350 sowie ihre Größe, weil wir das jetzt. 528 00:31:16,350 --> 00:31:21,310 Wir verstehen, wie man zu konsumieren komplizierter Daten. 529 00:31:21,310 --> 00:31:26,200 >> Das erste, was wir tun ist schaffen eine Karte, eine Hintergrundkarte. 530 00:31:26,200 --> 00:31:29,360 Ich werde zu durchlaufen dies sehr schnell. 531 00:31:29,360 --> 00:31:30,560 Dies ist schwierig Code. 532 00:31:30,560 --> 00:31:33,110 Es ist eine andere einer von denen, Rezepte, die Sie nicht wirklich 533 00:31:33,110 --> 00:31:35,690 haben, um zu verstehen, damit Sie verwenden. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Aber das ist Code. 536 00:31:39,740 --> 00:31:43,580 Dieser Code erstellt hier eine Karte. 537 00:31:43,580 --> 00:31:45,730 >> Wir werden nicht im Detail zu gehen. 538 00:31:45,730 --> 00:31:54,210 Aber oberflächlich ist, was es tut, es dieses us.json Datei, fragt die 539 00:31:54,210 --> 00:31:57,150 ist eine Datendatei, wie das, was wir vorher hatten. 540 00:31:57,150 --> 00:31:59,150 Es ist komplizierter, natürlich. 541 00:31:59,150 --> 00:32:02,920 Aber in diesem Fall ist alles, jeder Datenpunkt ist dieser Zustand 542 00:32:02,920 --> 00:32:05,420 und hat eine Liste von Breiten und Längen 543 00:32:05,420 --> 00:32:10,500 dass das Polygon zu definieren, dass Form, dass Staat. 544 00:32:10,500 --> 00:32:13,280 >> Was D3 machen wird, ist ähnlich zu dem, was wir getan haben, bevor. 545 00:32:13,280 --> 00:32:18,140 Sie wird beantragen, dass und binden, dass an einem Element. 546 00:32:18,140 --> 00:32:20,890 Und es gibt eine Funktion, wird dieses Element kartieren, 547 00:32:20,890 --> 00:32:23,410 auf der Basis der Breitengrade und Längengrad. 548 00:32:23,410 --> 00:32:24,580 Sie können mehr darüber lesen. 549 00:32:24,580 --> 00:32:27,385 Und ich empfehle es. 550 00:32:27,385 --> 00:32:30,090 >> Es gibt Links zu den Ende dieser Code geschrieben. 551 00:32:30,090 --> 00:32:31,570 Und der Code kommentiert. 552 00:32:31,570 --> 00:32:34,050 In gibt es Links für weitere Informationen hierzu. 553 00:32:34,050 --> 00:32:36,590 Ich empfehle Ihnen, es nachschlagen. 554 00:32:36,590 --> 00:32:39,460 Aber was wir interessiert, ist, Diese Projektionsfunktion. 555 00:32:39,460 --> 00:32:41,210 Ich möchte durchmachen. 556 00:32:41,210 --> 00:32:43,522 >> Zunächst lassen Sie mich Sie, ja, wir haben eine Karte. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Karten sind cool. 559 00:32:49,970 --> 00:32:52,330 Lassen Sie uns also einen Blick auf diese Produktionsfunktion. 560 00:32:52,330 --> 00:32:56,481 >> Projektion ist sehr wie eine Waage, Waage wieder. 561 00:32:56,481 --> 00:32:59,210 Also, was die Produktion für Diese Projektionsfunktion 562 00:32:59,210 --> 00:33:06,610 hat ist, könnten wir es passieren Länge und latitudes-- in diesem Fall 563 00:33:06,610 --> 00:33:09,590 Diese Werte sind hier die Lat-Long-Positionen des Gebäudes 564 00:33:09,590 --> 00:33:13,990 wir sind in der richtigen Sitz now-- der Projektion. 565 00:33:13,990 --> 00:33:20,560 Und die Projektion wird konvertieren dass in x- und y-Pixelwerte. 566 00:33:20,560 --> 00:33:23,300 >> Also, was tun, ist Projektion ist sehr ähnlich unserer Maßstab. 567 00:33:23,300 --> 00:33:27,270 Es ist unter unseren Breiten und Längengrad, die eine ganze Welt repräsentiert 568 00:33:27,270 --> 00:33:31,390 und schrumpfenden und Dimensionierung, dass auf dem Platz, die wir wollen, 569 00:33:31,390 --> 00:33:33,510 dass wir es gegeben. 570 00:33:33,510 --> 00:33:35,220 In diesem Fall sind wir Weitergabe dieser Werte. 571 00:33:35,220 --> 00:33:41,370 Und es gibt uns, gut, dass auf dem Bildschirm bedeutet 640 Pixel. 572 00:33:41,370 --> 00:33:46,250 Diese ganze Bildschirm ist 700 Pixel breit, das macht uns hier, 573 00:33:46,250 --> 00:33:53,310 und 154 Pixel nach unten, die ich Schätzung ist ziemlich genau hier. 574 00:33:53,310 --> 00:33:57,250 >> So nehmen diese Lat-Long-Positionen, die stehen für etwas, auf dem ganzen Globus 575 00:33:57,250 --> 00:34:02,850 und zerquetschen und um bewegte uns x- und y-Pixelwerte zu geben, 576 00:34:02,850 --> 00:34:05,450 das ist das erste, was ist in diesem Mapping-Code. 577 00:34:05,450 --> 00:34:07,920 Und dann der Rest des Code verbraucht die Daten 578 00:34:07,920 --> 00:34:14,310 und ordnet diese Lat-Long-Positionen auf etwas auf dem Bildschirm. 579 00:34:14,310 --> 00:34:18,380 >> Aber wir werden diesen Vorsprung nutzen Funktionen, da es sich herausstellt, 580 00:34:18,380 --> 00:34:20,270 wir haben Lat-Long-Positionen sehnt auch. 581 00:34:20,270 --> 00:34:24,509 Im Rückblick auf unsere Daten, haben wir Breiten und Längengrade 582 00:34:24,509 --> 00:34:25,425 für jede Beobachtung. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Lassen Sie uns also verwenden Projektion. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> So sah unserer Darstellung, wir wollen, dass unsere exposition-- 587 00:34:37,639 --> 00:34:39,590 wir haben eine Breite und eine Länge. 588 00:34:39,590 --> 00:34:40,770 Aber wir wollen Pixelwerte. 589 00:34:40,770 --> 00:34:43,510 Und es stellt sich heraus, genau das haben wir was wir want-- Projektion. 590 00:34:43,510 --> 00:34:46,239 Sehr viel wie wir waren mit Skala genau hier, 591 00:34:46,239 --> 00:34:52,075 Wir gehen jetzt zur Projektion verwenden und geben sie koordiniert. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Das erste, was wir doing-- so sind wir 594 00:34:56,949 --> 00:35:01,520 Erhalten d, die ein einzelnes Daten ist Element eines Erdbebens 595 00:35:01,520 --> 00:35:02,370 Lesen. 596 00:35:02,370 --> 00:35:04,640 Das erste, was wir tun, ist erhalten die Koordinaten. 597 00:35:04,640 --> 00:35:06,150 Na gut, wir haben die Koordinaten. 598 00:35:06,150 --> 00:35:09,160 >> Das zweite, was wir tun, ist passieren, dass auf die Projektion. 599 00:35:09,160 --> 00:35:13,440 Projektions wandelt diese Koordinaten in Pixelwerten x und y. 600 00:35:13,440 --> 00:35:16,680 Und dann das letzte, was wir tun möchte, ist nur zu den x, 601 00:35:16,680 --> 00:35:19,342 was dieser Fall ist der erste. 602 00:35:19,342 --> 00:35:22,050 Es ist die erste der beiden Dinge , die durch Projektion zurückgegeben werden. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Wir werden das gleiche für y zu tun. 605 00:35:29,630 --> 00:35:34,960 Stattdessen werden wir zurückkehren das zweite Element, das y. 606 00:35:34,960 --> 00:35:35,980 Machen Sie sich bereit, um zu aktualisieren. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, zusätzliches Zeichen hier-- schön, wir haben 609 00:35:46,450 --> 00:35:51,730 eine datengesteuerte Dokument, das ist Verheimlichung dieses JSON-Datei von Objekten, 610 00:35:51,730 --> 00:35:57,560 eine Karte macht, und die Änderung der Attribut in Bezug auf die Daten 611 00:35:57,560 --> 00:35:59,600 um sie auf einer Karte zu projizieren. 612 00:35:59,600 --> 00:36:00,840 Das ist wirklich interessant. 613 00:36:00,840 --> 00:36:03,770 Das ist cool. 614 00:36:03,770 --> 00:36:05,640 >> Nehmen wir es noch ein Stück. 615 00:36:05,640 --> 00:36:08,795 Ich meine, wir haben zwei Stücke Informationen mit jedem Datenpunkt. 616 00:36:08,795 --> 00:36:10,000 Ich meine, drei. 617 00:36:10,000 --> 00:36:12,540 Wir haben die Koordinaten, der ein x und y. 618 00:36:12,540 --> 00:36:15,700 Und wir haben die Größenordnung. 619 00:36:15,700 --> 00:36:17,420 >> Wir müssen irgendwie Größenordnung kodieren. 620 00:36:17,420 --> 00:36:18,920 Wir haben eine Menge von Kanälen. 621 00:36:18,920 --> 00:36:20,370 Wir können Farbe zu verwenden. 622 00:36:20,370 --> 00:36:21,890 Wir können Radius verwenden. 623 00:36:21,890 --> 00:36:23,040 Wir konnten die Deckkraft zu verwenden. 624 00:36:23,040 --> 00:36:25,540 Wir konnten viele Dinge im Code verwenden. 625 00:36:25,540 --> 00:36:29,180 Jedes dieser Attribute und viele mehr, die dort nicht aufgeführt sind, 626 00:36:29,180 --> 00:36:33,065 weil sie optional, könnten wir verwenden, um diese Daten zu kodieren, der Hub 627 00:36:33,065 --> 00:36:35,670 und all diese Dinge, die ich erwähnt. 628 00:36:35,670 --> 00:36:36,690 >> Lassen Sie uns Radius. 629 00:36:36,690 --> 00:36:38,830 Ich denke, Radius ist die intuitive. 630 00:36:38,830 --> 00:36:46,210 Also noch einmal, dass wir hart codiert ersetzen 40 und einige Berechnungen. 631 00:36:46,210 --> 00:36:48,810 Wir werden unsere Lieblings-Skala wieder verwenden. 632 00:36:48,810 --> 00:36:50,290 Und wir sind Vergangenheit d. 633 00:36:50,290 --> 00:36:55,850 Aber nicht d, denn wir wollen die Größe von d. d ist nur der Datenpunkt. 634 00:36:55,850 --> 00:36:57,430 Wir passieren die Größe zu skalieren. 635 00:36:57,430 --> 00:36:58,470 >> Lassen Sie uns versuchen, dass wieder. 636 00:36:58,470 --> 00:37:00,230 Ooh, es funktioniert nicht. 637 00:37:00,230 --> 00:37:02,940 Warum funktioniert es nicht? 638 00:37:02,940 --> 00:37:04,387 >> Also denken Sie daran, was Skala tut. 639 00:37:04,387 --> 00:37:05,470 Lassen Sie uns im Maßstab Wiederansicht. 640 00:37:05,470 --> 00:37:10,800 Karten im Maßstab von 1 bis 10 auf zu 22 bis 600, mehr oder weniger. 641 00:37:10,800 --> 00:37:12,030 600 ist riesig. 642 00:37:12,030 --> 00:37:14,730 Deshalb bekommen wir diese. 643 00:37:14,730 --> 00:37:18,420 >> Also, unsere Skala ändern möchten wir etwas mehr zumutbar ist. 644 00:37:18,420 --> 00:37:22,610 Nehmen wir an, wir wollen, 0-60. 645 00:37:22,610 --> 00:37:25,340 60 ist groß, aber 10 Erdbeben sind unglaublich selten. 646 00:37:25,340 --> 00:37:27,880 In der Tat, sie haben noch nie passiert. 647 00:37:27,880 --> 00:37:31,830 >> Also, was tun werden, ist, nehme es unsere Stärke, die von 1 bis 10 geht 648 00:37:31,830 --> 00:37:34,490 und wo es sich an, um es zu erweitern aus. 649 00:37:34,490 --> 00:37:37,370 Und wo es sich auf 0-60. 650 00:37:37,370 --> 00:37:38,840 Lassen Sie uns zu erfrischen. 651 00:37:38,840 --> 00:37:41,850 >> Nizza, haben wir eine Visualisierung. 652 00:37:41,850 --> 00:37:42,500 Das ist großartig. 653 00:37:42,500 --> 00:37:43,736 Dies ist die tatsächlichen Daten. 654 00:37:43,736 --> 00:37:46,360 Sie werden bemerken, in meinem kleinen Spielzeug beispielsweise das größte Erdbeben 655 00:37:46,360 --> 00:37:49,417 ist rechts oben auf uns. 656 00:37:49,417 --> 00:37:50,000 Aber das ist es. 657 00:37:50,000 --> 00:37:54,422 Wir haben einen Tag gefahren Visualisierung dass die Daten verbraucht 658 00:37:54,422 --> 00:37:56,255 und gibt uns wirklich interessante Informationen. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Ja, lassen Sie uns einige hinzufügen Interaktivität zu. 661 00:38:06,420 --> 00:38:08,675 Ich erwähnte, dass war die starke Kraft der D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> So, hier, für jedes Element, wir sind beschreibt eine Reihe von Attributen. 664 00:38:15,060 --> 00:38:20,230 Wir können aber auch zu beschreiben, was wir wollen mit Interaktivität Elemente geschehen. 665 00:38:20,230 --> 00:38:26,190 Beispielsweise beschreiben wir konnten was passiert, wenn wir die Maus über. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 Und sehr ähnlich, dass, dass Sie eine Funktion übernehmen, 668 00:38:33,640 --> 00:38:36,700 sehr ähnlich, die Attribute wir vorher hatten, 669 00:38:36,700 --> 00:38:44,650 wo wir etwas tun, um die Element, wenn wir mit der Maus über sie. 670 00:38:44,650 --> 00:38:47,100 >> Also erste, was wir brauchen, um tun müssen, ist wählen Sie dieses Element, 671 00:38:47,100 --> 00:38:49,435 um es im Grunde zu finden, in den Browser. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 und dann setzen wir könnten ein Attribut zu. 674 00:39:00,920 --> 00:39:06,870 Also, was ich hier mache, ist, wenn wir schweben über etwas, werden wir dieses Element erhalten 675 00:39:06,870 --> 00:39:11,197 und stellen Sie dann die Deckkraft zurück 1, vollständig opak. 676 00:39:11,197 --> 00:39:12,488 Mal sehen, wie das aussieht. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Es scheint, wir haben ein zusätzliche Semikolon hier. 679 00:39:39,080 --> 00:39:42,420 Also, wenn wir hier zu schweben, wird es voll. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Aber jetzt, es natürlich bleibt voll, weil wir 682 00:39:48,960 --> 00:39:53,240 haben, um zu beschreiben, was passiert, wenn entfernen unserem Cursor. 683 00:39:53,240 --> 00:39:59,990 Lassen Sie uns also genau das tun, dass auf mouseout, im Gegensatz zu mouseover. 684 00:39:59,990 --> 00:40:06,399 >> Und wir werden es zum Zurücksetzen was wir before-- 0,5 hatte. 685 00:40:06,399 --> 00:40:10,260 Und jetzt, jedes Mal, wenn wir schweben, erhalten wir einen Vollkreis. 686 00:40:10,260 --> 00:40:13,468 Es hilft uns, zu sehen, was wir wir sind im Wesentlichen die Auswahl. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> Und jetzt machen wir das wirklich großartig. 689 00:40:22,860 --> 00:40:26,210 Lassen Sie uns diesen an realen Daten. 690 00:40:26,210 --> 00:40:30,890 Lassen Sie uns also fragen konnte USGS über ihre Daten. 691 00:40:30,890 --> 00:40:35,630 So der US Geological Survey hat Daten über Erdbeben. 692 00:40:35,630 --> 00:40:41,460 Sie haben eine öffentliche API, die in der Lage ist um im JSON-Format konsumiert werden. 693 00:40:41,460 --> 00:40:42,548 Also lassen Sie uns tun. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Das ist also ein Stück Code, dass Verbindung zum USGS API. 696 00:40:55,900 --> 00:40:57,990 Und es ist ein bisschen wie die Verarbeitung auf sie. 697 00:40:57,990 --> 00:41:02,200 Dies ist nicht relevant, aber es vereinfacht auf eine einfache Datenformat wie die 698 00:41:02,200 --> 00:41:03,800 wir hatten vor. 699 00:41:03,800 --> 00:41:08,140 Also habe ich von unserem Call loszuwerden unsere gefälschte data.json auf Datei. 700 00:41:08,140 --> 00:41:13,110 Und statt, ich rufe Die USGS Wesentlichen. 701 00:41:13,110 --> 00:41:16,700 >> Lassen Sie uns zu erfrischen, nett. 702 00:41:16,700 --> 00:41:21,260 Dies ist tatsächlich, realen Daten von dieser Woche für Erdbeben. 703 00:41:21,260 --> 00:41:23,217 Das ist wirklich interessant. 704 00:41:23,217 --> 00:41:25,050 Dies ist nicht überraschend, für uns, aber es gibt 705 00:41:25,050 --> 00:41:27,909 eine Menge von Erdbeben auf die West Coast in Kalifornien. 706 00:41:27,909 --> 00:41:30,950 Aber ich dachte, es war sehr interessant dass es so viele Erdbeben 707 00:41:30,950 --> 00:41:34,350 in Alaska, und es scheint, hier im Mittleren Westen. 708 00:41:34,350 --> 00:41:37,630 Ich meine, interessant, und wir sind gut. 709 00:41:37,630 --> 00:41:40,410 Das ist das Ergebnis. 710 00:41:40,410 --> 00:41:43,760 >> Aber im Grunde, diese ist das, was D3 hilft uns zu tun. 711 00:41:43,760 --> 00:41:48,030 Es hilft uns, nehmen Daten, binden es Elemente in der DOM, 712 00:41:48,030 --> 00:41:51,620 und haben diese Elemente ändern als eine Funktion der Daten 713 00:41:51,620 --> 00:41:54,780 haben diese Attribute, alle viele Attribute der Elemente, 714 00:41:54,780 --> 00:41:57,393 alle nützlich für die Kanäle um Informationen zu vermitteln. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 ist ein unglaublich mächtiges Bibliothek und erstaunlich gut laufen. 717 00:42:09,290 --> 00:42:12,260 Dies ist ein leistungsfähiges Material. 718 00:42:12,260 --> 00:42:15,960 Datenvisualisierung ist ein unglaublich mächtiges Werkzeug 719 00:42:15,960 --> 00:42:21,530 zur Förderung von den Menschen tief Erkenntnisse, die zu ihrem Kern bekommt 720 00:42:21,530 --> 00:42:25,430 und hilft ihnen zu verstehen, Diese tiefgreifende und intuitive Art und Weise, 721 00:42:25,430 --> 00:42:29,760 wie Daten funktioniert und wie Daten verändert unser Leben. 722 00:42:29,760 --> 00:42:31,019