[Musikwiedergabe] 

DAVID CHOUINARD: Ich bin David Chouinard, und dies ist D3. Willkommen. Wir werden über D3 heute lernen. D3 ist ein JavaScript-Framework für den Aufbau einer hochwertigen interaktive Visualisierungen für das Web. Dinge wie das, was wir sind Sehen hinter mir, wir werden lernen, die machen Dinge, Art der Grundlagen der es. Aber es wird cool sein. Fangen wir an! macht schöne Bilder. Wir haben mehr Demos bekommen Perspektiven zur Verfügung. Lass es uns tun. 

Akt I, DOM manipulation-- werden wir sofort beginnen, coole Dinge. Zunächst einmal links, haben wir Code. Auf der rechten Seite haben wir das Ergebnis unserer Code. Lassen Sie uns durch sie gehen. 

Machen wir einen Kreis. Wie klingt das? svg.append circle-- wir gerade einen Kreis. Sie glauben mir nicht, oder? Es ist nicht da. 

Also, was wir getan haben genau hier ist, SVG Scalable Vector Graphics. Das ist die Art, wie wir sagen, den Browser auf machen Vektorgrafiken in der Browser. Was wir gerade jetzt tat ist ein Kreis zu durchsuchen aufgenommen. 

Das Versprechen ist, dass der Kreis erfordert ein wenig grundlegende Attribute bevor wir tatsächlich sehen. Wir müssen sie sagen, ihre x-Position, seine y-Position, seinen Radius. Wir wollten nicht sagen, dass es irgendetwas davon, so dass wir jetzt nicht sehen, es. Aber lassen Sie uns sagen, dass es so. 

Also zunächst einmal, Sie haben zu unserem Kreis einen Namen geben. So nennen wir es Kreis. Unser Kreis hat jetzt einen Namen. Und lassen Sie uns geben Sie ihm ein paar Attribute. Wie wäre cx würde x zu zentrieren, so das Zentrum der x-Position. Nehmen wir an, 200 200 Pixel. 

Geben wir ihm eine y von 200 Pixeln sowie. Und ein R ist ein Radius von etwa 40 Pixel. Nun wollen wir sehen. Ich kann nicht buchstabieren. 

Dort gehen Sie. Wir haben einen Kreis an der Position 200 Pixel, 200 Pixel, Radius von 40 Pixel. Irgendwie cool, oder? Wir haben einen Kreis. Ja. 

So dass keine Notwendigkeit zu folgen. Alle diese Beispiele werden alle von der Code, den ich heute tun online am Ende zur Verfügung gestellt werden in Form von interaktiven Beispielen mit Checkpoints jede Handlung, und so weiter. 

Lassen Sie uns mehr Zeug. Diese schwarzen Kreis ist wirklich hässlich. Es tut mir leid für diesen Fehler Nachrichten recht. Dort gehen wir. 

Geben wir ihm eine Farbe. Wie ist das? Ich mag zu stahlblau. Nun, unser Kreis die Farbe gewechselt. Das ist großartig. Machen wir es semi-transparent too-- halbtransparent. 

Das sind Attribute wir sind auf dem Kreis zu definieren. Das erste, was wir getan haben ist wir einen Kreis auf der Seite. Und dann werden wir die Definition eine Reihe von Attributen. Einige davon werden benötigt, wie CX, CY, und Radius. Und andere sind optional. 

Es gibt eine Menge mehr Eigenschaften. Es gibt eine Menge von ihnen. Zum Beispiel könnten wir eine haben, Schlaganfall sowie ein Hub rot. Aber lassen Sie uns zu entfernen, dass. Wir sind wieder zu einem Kreis, einem blauen Kreis. 

Lassen Sie uns also weitere Kreise. Wie ist das? Lassen Sie uns einen anderen Kreis. Das ist spannend, nicht wahr? 

Also sage ich nur Copy-Pasted was wir schon. Nennen wir es circle2. Und lassen Sie uns den genauen Gleiche und geben Sie es Attribute, gegeben eine x-Position 300. Yay, haben wir jetzt zwei Kreise. 

Und natürlich könnten wir aktualisieren Sie diese Werte. Ich konnte es bei 400 gesetzt, und jetzt geht es. Und da es ist ärgerlich, lassen Sie uns nehmen Sie sie, so circle2.remove. Es ist jetzt weg. 

Also, was wir tun und ist nur sehr, diese very-- ist sehr ähnlich zu dem, was man könnte in jQuery zu tun, zum Beispiel. Wir sind nur die Manipulation DOM, es heißt. Man könnte dieses Wort gehört haben. Wir schaffen Dinge, die Einstellung Attribute auf Sachen, die Beseitigung Zeug. 

Nun, hier ist es interessant. So später im Code, konnten wir noch finden Sie in der Original-Kreis hier. Lassen Sie uns also setzen Sie seine Eigenschaft zu cx. Nehmen wir an, seine x-Position auf 400. Und ich werde den Übergang daß, so dass es auf der Hand. Dort gehen wir. 

So haben wir einen Kreis. Wir setzen einige Attribute. Wir haben einen anderen Kreis, entfernt es. Und dann sind wir zu modifizieren der ursprüngliche Kreis. 

Aber hier ist, wo es geht viel interessanter. Wir können nicht nur gesetzt Attribute als nur Werte, können wir sagen, hey, Kreis, gehen in die Position 200. Wir können auch sie gesetzt als Funktionen. 

Also anstatt 400 hier, wir einige Berechnung durchzuführen im laufenden Betrieb, was wir wollen, dass Attribut sein. Das ist also, wie Sie möchten, dass zum Ausdruck bringen. Wir sagen, statt 400, lassen Sie mich geben Ihnen eine Funktion statt. Und hier, im Inneren dieser Funktion wir können jede verrückte Berechnung durchzuführen. 

Wir könnten die Zeit zu nehmen und Blick auf eine andere Sache, und dynamisch zu entscheiden, der Kreis, welchen Wert wir wollen. Wie wäre es geben wir nur es eine zufällige x-Position? So ist das also. 

Also, was sagt, dass ist, für alle x, führen Sie diese Funktion aus. Und was wir tun, ist die Berechnung einige Dinge, ein Zufalls fache der Breite und wieder, dass. Also jedes Mal, dass wir laufen, bekommen wir ein Kreis, der in eine zufällige Platz geht. Es ist irgendwie cool. Ich fühle mich wie ich aussehen könnte in dieser für eine kleine. Wir fangen an, zu erhalten etwas Interessantes hier. Lassen Sie uns diese Daten nun angetrieben werden. Es gibt keine Daten hier. Lassen Sie uns das ändern. 

Akt II, Data Driven Documents-- Lassen Sie uns also, um hier zurückzukehren. Und lassen Sie uns nur loswerden circle2 weil wir gerade das Hinzufügen und Entfernen es. So haben wir nicht wirklich brauchen. Wir müssen hier sehr viel mehr, schlau zu sein. Nehmen wir an, wir haben Einige Daten von einer Art. Eine moment-- sagen wir mal, wir hatten Daten von dieser Form. Wir hatten eine Reihe, nur eine Reihe von Zahlen. Wir haben sieben Nummern hier, was auch immer diese represent-- Menge in Bankkonto der Menschen, wie viel sie wiegen, was weiß ich. 

Diese Zahlen sind, und wir wollen unsere Kreise verwenden , diese Zahlen irgendwie darzustellen. Wir wollen unseren binden Kreise auf diese Zahlen. Also, was wir tun. Nehmen wir an, wir wollen ein Kreis für jede Zahl. Wir konnten die alten tun, was wir doing-- Kreis append und circle2 und circle3. Aber das aus dem Ruder, und es gibt eine Menge von sich wiederholenden Logik. 

Lassen Sie uns also klüger damit. Anstelle der Verwendung der var Kreis svg.append, dass wir nur mit, wir werden verwenden dieser kleine Block hier. Ich will nicht, um eingehende gehen in welchem ​​alle diese Teile zu tun. Und es ist eine Art von einem fortschrittlichen Thema. Und ich wünschte, ich könnte es. 

Aber der Schlüssel ist daran zu recognize-- und Sie werden sehen, ist sehr oft in D3-Code. Dieser Textblock Grund erstellt so viele Kreise wie Datenelemente in diesem Array finden Sie hier. Also das schafft so viele Kreise, wie es Elemente gibt. Es wird uns zu schaffen sieben Kreisen. Und es macht einen sehr, sehr wichtige Sache. Lassen Sie uns so laufen, dass. Loesen Sie die anderen Kreis. Sagen wir einfach kommentieren Sie diese scheiden aus und führen Sie diese wieder ein. 

Dort gehen wir. So ist unser Kreis ist hier ein viel dunkler, weil wir haben sieben Kreisen, eine auf der Oberseite der anderen. Wir gerade erstellt sieben Kreisen, eine jeweils für jedes dieser Datenelemente. Aber es gibt eine wichtige Sache, die passiert mit diesem Ausschnitt hier. 

Es ist, daß Daten gebunden wurde. Also jeder einzelne von diejenigen Datenelemente, 10, 45, 105, war gebunden auf einen bestimmten Kreis. Das sind also nicht nur erstellt eine Reihe von Kreisen sondern verbindet diese beiden Dinge zusammen. 

Und in der Zukunft, weil wir erstellt diese Kreise mit dieser Funktion D3, wenn ich dir einen Kreis, können Sie geben Sie mir die Daten zugeordnet. So können wir D3 fragen. Hey, D3, habe ich diesen Kreis. Was ist in der die Daten, die der Kreis? Und D3 würde uns sagen, 10 oder 45 oder 105. 

Diese Dinge werden gebunden. Das ist ein sehr, sehr grundlegendes Konzept. Schauen wir uns das. 

So ist die Art, wie wir würde fragen D3-- so dies irrelevant für diese, aber glauben Sie mir nur darauf. Dies ist, wie wir bitten D3. Hey, D3, gib mir die ersten Kreis, die Sie finden können. Gib mir den ersten Kreis Sie finden können. Und dann haben wir D3 fragen konnte, was ist die Daten auf dem, wie diese, 10. 

So dass wir nur fragen, D3, finden mich der erste Kreis Sie finden können. Was ist seine Daten? 10, ist, dass in der Tat unser erste Datenelement. Wir könnten es bitten, hey, D3, finden Sie uns unsere dritte Kreis. 105. Warum ist das wirklich wichtig? 

Also hier habe ich erwähnt, dass wir Funktionen nutzen könnten. Und ich erwähnte, dass war eine sehr mächtige Sache. So können nicht nur unsere Funktionen Dinge tun wie tun einige Berechnung beispielsweise Rückkehr eine Zufallszahl, es kann auch Dinge auf Grundlage der Daten. Dies ist, was datengesteuerte Dokumente bedeuten. Das ist, was D3 steht. 

Also das x postition-- statt nur zu sagen, alle Kreise, zu x-Position 200, wir könnte es geben, eine Funktion. Und hier können wir eine Berechnung durchzuführen. und d steht hier an Ort und Stelle für die Daten. Also jedes Mal, wir haben ein Kreis, im Grunde D3 wird diese sieben Kreisen erstellen. Und dann für jeden 

Kreis, es wird gehen, hey, circle1 was ist Ihre Position x. Früher waren wir immer die Beantwortung 200. Aber jetzt, fragt jedes Mal D3 uns, was ist Ihre Position x, es wird geben us-- wir dass Kreis, so haben wir die Daten. Es wird uns die Daten zu geben und zu sagen: was wollen Sie die Ausstellung zu sein, auf der Grundlage dieser Daten. 

Lassen Sie uns gerade die aktuellen Daten zurück. Wenn wir dies ausführen, das gibt uns datengesteuerte Dokumente. Diese Kreise werden basierend in Bezug Position-- sie sind Basen in Abhängigkeit von den Daten. 

So zum ersten Kreis, D3 stellt einen Kreis. Und dann D3 fragt uns, was zu tun Sie wollen, dass die Ausstellung zu sein. Und wir einfach sagen, was auch immer die Daten. Stellen Sie die Ausstellung 10. 

Dann fragt sie, was tun Sie das wollen, Darlegung für den zweiten Kreis. Und wir antworten, 45. Und wir natürlich kann machen einige Rechen hier. Ich finde, dass diese Kreise sind eine Art von bis zerquetscht. 

So multipliziert es mit 3 multiplizieren Daten 3. Unser Kreis wurde gerade erweitert aus. Unser Wert wurde verdreifacht. 

Der Kreis ist wirklich am Rande, also lasst uns vielleicht Art Offset es. Nehmen wir an, um 20. Bitte schön. 

Dies ist eine Datenvisualisierung. Es ist ein sehr einfaches, aber diese gibt uns einen Einblick in unsere Daten. Es sagt uns, dass wir zum Beispiel haben eine kleine Gruppe von Elementen. Und wir haben eine große Ausreißer hier. Das gibt uns einige Informationen über die Verteilung. 

Wenn wir zum Beispiel ändern die Daten zu 150 hier und Aktualisierung, unsere Visualisierung geändert wird. Dieses Dokument ist datengesteuert. 

So natürlich alle diese Elemente, Alle diese Attribute hier, können wir eine Funktion zu verwenden, nicht nur die Zahlen, nicht nur die x- und y-Positionen. So kann man eine Funktion für die Farbe zu verwenden. Also werden wir das gleiche tun. Wir werden ihm eine Funktion. 

Und lassen Sie uns sagen, wir hätten conditionals in unserer Funktion. Diese Funktion kann sein Hundert Zeilen lang. Es kann sehr, sehr komplizierte Dinge zu tun. 

Also lassen wir eine if-Anweisung hier. Lassen Sie uns sagen, wenn unsere Daten kleiner ist 50, ist, dass einige Schwellen dass wir interessiert in aus irgendeinem Grund. Machen wir es grün. Sonst machen wir es rot. Wie ist das? Nizza. 

Also unsere Datenvisualisierung beginnt Weitere interessante Informationen vermitteln auf vielen Kanälen. So, jetzt wissen wir, ein wenig über die Verteilung. Und wir wissen, dass es eine Art von schnitt bei 50, die uns interessiert. Wir wissen, dass es zwei Datenpunkten unterhalb dieser Schwelle, und die meisten von ihnen oben. 

So als letzten Schritt werden diese Daten hier es ist sehr selten, dies so zu sehen. Lassen Sie uns also verschieben Sie es gerade aus auf eine Variable denn das ist sauberer, wie diese. Und dann setzen wir hier die Variable. Es ist genau dasselbe. Es ist nur ein bisschen sauberer. 

Weiter oben, Akt III, Scales-- So richtige Problem Hier ist, wenn wir ändern unsere Daten in diesem 200 value-- wenn wir es auf 400 zu ändern oder so etwas und Aktualisierung, dann wird dieser Wert ging im Off. Also hier unsere Logik der, wie wir die Zeit 3 und 20, um es zu verteilen, und dann Offset es etwas ist wirklich klobig. 

Was bedeuten die Zahlen? Sie sind nur schwer es codiert. Und sie sind sehr stark an die Daten gebunden. Wir wollen eine datengesteuerte Dokument. Wir wollen ein sehr flexibles Dokument, daß gegebenen Daten, anpasst, um sie und vertritt sie. 

Was wir brauchen, ist im Grunde, wir haben diese Zahlenbereich 10. 45, 105. Und wir wollen, dass kartieren auf möchten die Breite, die volle Breite hier. So haben wir den Bereich der Zahlen geht von 0 bis 100. Und wir haben diese Campus I geht von 20 bis 700, in diesem Fall. 

Wir Art von wollen, dass Karte auf. Wir wollen, dass Scale-up und dann versetzt sie ein wenig. Es stellt sich heraus, dass D3 hat diese. Es nennt sich eine Skala. Also lassen Sie sie verwenden. 

Die Art und Weise, die works-- Ich bin zu gehen Geben Sie diese nach oben und dann erklären. Dies ist ein Maßstab. Was wird es tun, wird sie kartieren Werte von 1 bis 200 auf 20 bis 600. Wir können das überprüfen. Das können wir hier sehen. 

Also, wenn ich füttern 1-- einen Moment. Gib mir eine Sekunde. Ich muß es falsch eingegeben. Dort gehen Sie. Es tut mir leid, dass. 

Also, was ein Maßstab tun ist, wird der Wert zu nehmen und konvertieren Sie, dass, erweitern, dass Sie, so dass es füllt das gesamte Spektrum für fragen. Also in diesem Fall, wenn wir ihm ein, es geht um die Karte aus, auf 20. Und wenn wir es 200, ist es werde die Karte auf 600. Und irgendwo dazwischen, wenn wir 100, ist es werde irgendwo sein zwischen 20 und 600. 

Und natürlich, das ist jetzt das, was wir brauchen, um diese hart codiert entfernen Dinge, die wir haben recht. Also, was wir wollen, ist nehmen Sie die Daten, die wir sind gegeben, dass einzelne Daten Element, und übergeben es an erster skalieren. So Skala wird es skalieren. 

Well-- Oh, wir haben hier ein wenig Fehler. Wir fehlende Daten. Dort gehen Sie. Und das dehnt es sich aus. 

Das gibt uns die gleiche Dadurch hatten wir vor, aber anstatt denjenigen hart codiert Einschränkungen. Und wenn der Umfang unserer Leinen ändert, beispielsweise, wenn wir wollen, um diese über haben 400 Pixel und zermatscht aus, wir können es haben over-- wir können sie zu erweitern, oder wir können diese linken Rand zu verringern etwas weniger oder mehr als 20 beträgt. Diese Zahlen, diese hart codiert Zahlen nun sinnvoll zu uns. 

Und wir könnten noch viel mehr interessante Dinge. Also statt mit einem linearen Maßstab, wir möchten Sie vielleicht einen Maßstab anzumelden. Und das wird uns eine logarithmische Skala. 

So, jetzt unser Maßstab, an Stelle von nur darauf hin, dass die Erweiterung Bereich, es tut anspruchsvollere Dinge. Anstatt diesen Bereich Fest codiert, und anstatt daß 600 wir möchten Sie vielleicht nur die Breite zu verwenden, so von 20 auf die Breite minus 40, 2-fache der Rand auf der anderen Seite. Und das macht viel mehr Sinn, jemand, der auf den Code aussehen könnte. 

Interessanterweise erhalten die Schuppen sehr, sehr anspruchsvoll als auch. Sie haben eine Menge interessanter Dinge. So Skalen nicht notwendigerweise nur mit Zahlen arbeiten. Lassen Sie uns ein Farbskala. 

Also unser Angebot be-- könnte Unsere Domäne ist 1-200. Das ist der Eingang Sache. Aber wir wollen von der Karte könnten grün nach rot, zum Beispiel. Und nun, wenn wir es 1 passieren, wir werden grün zu bekommen. Wenn wir es 200 ist, bieten wir rot. Und wenn wir es passieren etwas dazwischen, es wird einige Mischung davon sein, irgendwo auf dem Gradienten grün und rot. 

Und anstatt diese Art von Logik klobig Wir haben hier mit der bedingte Recht gibt, wir hätten something-- ein linearen Skala zwischen denen. So würden wir den Maßstab verwenden wir nur erstellt, die wir genannt Farbe. Und wir geben würde es D, die ist unser Datenelement. Und wir gehen. Wir haben eine Farbskala. 

So ist dieses Mapping. So ganz links ist komplett grün. Ganz rechts ist komplett rot. Und alles dazwischen ist eine Funktion von d. Wir haben eine interessante Visualisierungen hier. Aber unsere Daten war irgendwie langweilig. Mal sehen, was wir tun könnten, wenn wir mehr interessante Daten. 

Akt IV, Arbeiten mit Data-- das erste, was wir tun, damit, dass unsere Visualisierung interessanter ist, um die Daten an anderer Stelle zu bewegen. Es ist sehr klobig zu haben die Daten der Fest hier codiert. Und im Allgemeinen, wir werden fragen jemand anderes für die Daten. Wir werden vielleicht fragen, werden die Regierung, das Census Bureau, was ist Ihre Daten und dann Plotten, dass oder fragen Einige Drittanbieter-Unternehmen für einige Daten und dann den Aufbau einer Visualisierung auf, dass. 

Das erste, was wir tun wollen ist zu bewegen, dass irgendwo anders. So werde ich ein erstellen Datei hier genannt data.json. JSON das Datenformat ist. Sie müssen nicht zu viel darüber wissen. Und wir werden die kopieren wenig Daten, die wir dort haben, fügen Sie in es wörtlich, gehen zurück zu unserem Visualisierungscode hier, und verwenden Sie diese Funktion hier. Sie müssen nicht, um die Details zu kennen. Aber was diese tun werden, ist, es wird die Datei zu finden, zu holen, und schicken Sie es uns. Was das bedeutet ist, es geht und nutzen Sie die data.json Datei. Und dann ist der Code, inside-- Wesentlichen eingerückt, der gesamte Code haben wir sind-- wird laufen nur, wenn wir die Daten wieder zu bekommen. Und es geht um, dass laufen Code mit den Daten, die wir haben. Große, haben wir ein Visualisierung, die abfragt für einige Code irgendwo sonst, das normalerweise wo es einige Daten aus Abfragen irgendwo anders, was normalerweise wie Visualisierungen arbeiten. 

Aber ich will zurück zu den Daten zu gehen. So werden die Daten grundsätzlich in D3-- D3 verbraucht Daten, die eine Liste der Dinge ist. D3 erwartet, dass die Daten nur eine Liste sein Dinge, eine Anordnung von Dingen. Es spielt keine Rolle, was die Dinge, sind, so lange wie er ein Array von ihnen. 

So, hier, zum Beispiel, wir könnten von Natürlich sind Fließkommazahlen. Wir konnten Negative haben. D3 ist es egal, so lange, denn es ist eine Liste der Dinge. 

Als interessante Dinge, die wir teilen wollen, könnten wir auch eine Liste von Zeichenketten so. Das sind also die purpurnen Schlagzeilen Ich nahm vor ein paar Tagen. Und vielleicht haben Sie einige interessante finden Dinge über diese eine Schlagzeilen. 

Also noch einmal, das ist eine Liste der Dinge. D3 ist es egal. Dies geschieht, um ein String sein. Wir haben unsere Daten geändert. 

Lassen Sie uns unsere Visualisierungs zurückzukehren. Nun rechnet unserem Visualisierung die Eingabe an Zahlen sein. So werden wir haben, um ein paar Änderungen vornehmen. So zum Beispiel, zunächst vielleicht wir diese Kreise zusammen setzen wollen durch die Länge der Kopfzeile, die Anzahl der Zeichen in der Überschrift. 

Also, was wir jedes Mal tun ist-- unsere Funktion wird durch einen string, wir finden es ist lang und dann passieren, dass auf Ebene. Die Farbe, werde ich zurückkehren dass die Stahlblau. Und wir gehen. Wir haben eine Visualisierung Crimson Schlagzeilen. 

Unser Maßstab ist etwas abseits. Nehmen wir an, der längsten Überschrift ist 100 Zeichen lang, so erstrecken, dass ein bisschen. Und wir haben eine Visualisierung. So scheint es, dass die meisten Schlagzeilen sind ziemlich dicht beieinander, im Hinblick auf die Charakterlinie. Aber man es wirklich steht. 

Wir konnten einige Werkzeuge zu bauen zu entdecken, dass mehr. Aber wenn ich daran arbeiten, war ich neugierig, ob in diesem Datensatz, Schlagzeilen mit einem Doppelpunkt in ihnen hätte länger sein. Ich davon ausgegangen, sie würden. 

Also lassen Sie uns herausfinden. Lassen Sie uns die Farbe Kanal wie wir es vor, zu einigen, ob kodieren es gibt ein Doppelpunkt oder nein. Also werden wir wieder eine bedingte verwenden. Sie müssen nicht wissen, die Einzelheiten dieser, aber das ist, wie wir überprüfen ein String für einen bestimmten Charakter in JavaScript wieder, nicht relevant. 

Aber wenn wir nicht finden ein Doppelpunkt, werden wir grün zurück. Und wenn wir das tun, werden wir wieder rot. Also noch einmal, dass Schlagzeilen haben ein Doppelpunkt rot. Dies ist, was diese means-- nett. 

So scheint es, dass mein Hypothese stieß. Es gibt nur zwei. Wir haben nur sechs Datenpunkte und nur zwei Doppelpunkte hatten. Aber es scheint ein wenig am unteren Ende, in der Tat. Überschriften mit Doppelpunkten scheinen generell kürzer sein, zumindest in unseren Daten Satz-- interessant. 

Lassen Sie uns zurück, dass auf stahlblau und dann sehen, was können wir mit noch machen Weitere interessante Daten. Also noch einmal, erwähnte ich, dass Daten in D3 ist eine Liste der Dinge. Wir haben Zahlen vieler Arten zu sehen. Wir haben gesehen, Streicher. Aber die Dinge können auch Objekte sein. 

Sie können komplizierte Dinge sein dass eine Menge Dinge sind. Um mehr klar sagen, dass, in den meisten Fällen, die wir will jeden Datenpunkt als bauen Je komplizierter als nur einen Wert. Wenn Sie sich vorstellen ein Datenbank über Studenten, es könnte ein Schüler sein zu nennen, ein Studentenausweis, und eine Menge Dinge verbunden mit einem bestimmten Datensatz, nicht nur ein String oder eine Zahl. Also schauen wir uns das an. 

Dies ist ein solcher Datensatz. Dies ist eine Daten über Erdbeben gesetzt. Also alles, was hier auf unserer Liste oder Array Dinge enthält viele Dinge selbst. Also jeden Datenpunkt hat eine Betrag und eine Koordinate. Und koordiniert sich enthalten zwei Dinge. 

Also jeden Tag ist jetzt noch viel mehr kompliziert und viel interessanter und enthält viel mehr interessante Informationen. Mal sehen, wir könnten aus, dass zu bauen. Rückfahrt hier wieder mit unsere Histogramm Kreis Visualisierung wir aufgebaut haben, lassen Sie uns sehen, ob wir einen bauen Visualisierung der Größenordnung Verteilung in unserem Datenbestand. 

Also hier ist es das gleiche Konzept. Aber jetzt, enthält d mehr Dinge. d enthält viele Datenelemente. So bekommen wir zurück d. D3 gibt uns d. Und wir von der Suche nach der Stärke reagieren von d und dann beiläufig, dass auf Ebene. 

Und dann ändern müssen wir unser Maßstab, natürlich. So Größen einfach nicht gehen mehr als 10. Eigentlich gibt es noch nie 10 Erdbeben der Stärke. Aber das ist Art von unserem Ober Ende unserer oberen Spektrum. 

Lassen Sie uns zu erfrischen. Nizza, haben wir eine Visualisierung. Es ist interessant, so HINWEIS-- gibt es zwei Datenpunkte, fast genau auf der jeweils andere, betragsmäßig. Sie sehen dies durch die Opazität wir verwenden. 

Wir haben geografischen Daten jetzt. Wir haben Breiten und Längengrad. Vielleicht werden wir etwas tun konnte, ein viel interessanter mit dem. Lassen Sie uns etwas mehr interessante Art und Weise zu visualisieren dies komplizierter Daten, die wir Zugriff haben. 

Akt V, Mapping-- grundlegend, Wir wollen diese auf einer Karte setzen. Ich meine, das ist, wohin das führt. Wir wollen Informationen über die zu kodieren Position dieser Erdbeben Lesungen sowie ihre Größe, weil wir das jetzt. Wir verstehen, wie man zu konsumieren komplizierter Daten. 

Das erste, was wir tun ist schaffen eine Karte, eine Hintergrundkarte. Ich werde zu durchlaufen dies sehr schnell. Dies ist schwierig Code. Es ist eine andere einer von denen, Rezepte, die Sie nicht wirklich haben, um zu verstehen, damit Sie verwenden. Aber das ist Code. Dieser Code erstellt hier eine Karte. 

Wir werden nicht im Detail zu gehen. Aber oberflächlich ist, was es tut, es dieses us.json Datei, fragt die ist eine Datendatei, wie das, was wir vorher hatten. Es ist komplizierter, natürlich. Aber in diesem Fall ist alles, jeder Datenpunkt ist dieser Zustand und hat eine Liste von Breiten und Längen dass das Polygon zu definieren, dass Form, dass Staat. 

Was D3 machen wird, ist ähnlich zu dem, was wir getan haben, bevor. Sie wird beantragen, dass und binden, dass an einem Element. Und es gibt eine Funktion, wird dieses Element kartieren, auf der Basis der Breitengrade und Längengrad. Sie können mehr darüber lesen. Und ich empfehle es. 

Es gibt Links zu den Ende dieser Code geschrieben. Und der Code kommentiert. In gibt es Links für weitere Informationen hierzu. Ich empfehle Ihnen, es nachschlagen. Aber was wir interessiert, ist, Diese Projektionsfunktion. Ich möchte durchmachen. 

Zunächst lassen Sie mich Sie, ja, wir haben eine Karte. Karten sind cool. Lassen Sie uns also einen Blick auf diese Produktionsfunktion. 

Projektion ist sehr wie eine Waage, Waage wieder. Also, was die Produktion für Diese Projektionsfunktion hat ist, könnten wir es passieren Länge und latitudes-- in diesem Fall Diese Werte sind hier die Lat-Long-Positionen des Gebäudes wir sind in der richtigen Sitz now-- der Projektion. Und die Projektion wird konvertieren dass in x- und y-Pixelwerte. 

Also, was tun, ist Projektion ist sehr ähnlich unserer Maßstab. Es ist unter unseren Breiten und Längengrad, die eine ganze Welt repräsentiert und schrumpfenden und Dimensionierung, dass auf dem Platz, die wir wollen, dass wir es gegeben. In diesem Fall sind wir Weitergabe dieser Werte. Und es gibt uns, gut, dass auf dem Bildschirm bedeutet 640 Pixel. Diese ganze Bildschirm ist 700 Pixel breit, das macht uns hier, und 154 Pixel nach unten, die ich Schätzung ist ziemlich genau hier. 

So nehmen diese Lat-Long-Positionen, die stehen für etwas, auf dem ganzen Globus und zerquetschen und um bewegte uns x- und y-Pixelwerte zu geben, das ist das erste, was ist in diesem Mapping-Code. Und dann der Rest des Code verbraucht die Daten und ordnet diese Lat-Long-Positionen auf etwas auf dem Bildschirm. 

Aber wir werden diesen Vorsprung nutzen Funktionen, da es sich herausstellt, wir haben Lat-Long-Positionen sehnt auch. Im Rückblick auf unsere Daten, haben wir Breiten und Längengrade für jede Beobachtung. Lassen Sie uns also verwenden Projektion. 

So sah unserer Darstellung, wir wollen, dass unsere exposition-- wir haben eine Breite und eine Länge. Aber wir wollen Pixelwerte. Und es stellt sich heraus, genau das haben wir was wir want-- Projektion. Sehr viel wie wir waren mit Skala genau hier, Wir gehen jetzt zur Projektion verwenden und geben sie koordiniert. Das erste, was wir doing-- so sind wir Erhalten d, die ein einzelnes Daten ist Element eines Erdbebens Lesen. Das erste, was wir tun, ist erhalten die Koordinaten. Na gut, wir haben die Koordinaten. 

Das zweite, was wir tun, ist passieren, dass auf die Projektion. Projektions wandelt diese Koordinaten in Pixelwerten x und y. Und dann das letzte, was wir tun möchte, ist nur zu den x, was dieser Fall ist der erste. Es ist die erste der beiden Dinge , die durch Projektion zurückgegeben werden. 

Wir werden das gleiche für y zu tun. Stattdessen werden wir zurückkehren das zweite Element, das y. Machen Sie sich bereit, um zu aktualisieren. Ooh, zusätzliches Zeichen hier-- schön, wir haben eine datengesteuerte Dokument, das ist Verheimlichung dieses JSON-Datei von Objekten, eine Karte macht, und die Änderung der Attribut in Bezug auf die Daten um sie auf einer Karte zu projizieren. Das ist wirklich interessant. Das ist cool. 

Nehmen wir es noch ein Stück. Ich meine, wir haben zwei Stücke Informationen mit jedem Datenpunkt. Ich meine, drei. Wir haben die Koordinaten, der ein x und y. Und wir haben die Größenordnung. 

Wir müssen irgendwie Größenordnung kodieren. Wir haben eine Menge von Kanälen. Wir können Farbe zu verwenden. Wir können Radius verwenden. Wir konnten die Deckkraft zu verwenden. Wir konnten viele Dinge im Code verwenden. Jedes dieser Attribute und viele mehr, die dort nicht aufgeführt sind, weil sie optional, könnten wir verwenden, um diese Daten zu kodieren, der Hub und all diese Dinge, die ich erwähnt. 

Lassen Sie uns Radius. Ich denke, Radius ist die intuitive. Also noch einmal, dass wir hart codiert ersetzen 40 und einige Berechnungen. Wir werden unsere Lieblings-Skala wieder verwenden. Und wir sind Vergangenheit d. Aber nicht d, denn wir wollen die Größe von d. d ist nur der Datenpunkt. Wir passieren die Größe zu skalieren. 

Lassen Sie uns versuchen, dass wieder. Ooh, es funktioniert nicht. Warum funktioniert es nicht? 

Also denken Sie daran, was Skala tut. Lassen Sie uns im Maßstab Wiederansicht. Karten im Maßstab von 1 bis 10 auf zu 22 bis 600, mehr oder weniger. 600 ist riesig. Deshalb bekommen wir diese. 

Also, unsere Skala ändern möchten wir etwas mehr zumutbar ist. Nehmen wir an, wir wollen, 0-60. 60 ist groß, aber 10 Erdbeben sind unglaublich selten. In der Tat, sie haben noch nie passiert. 

Also, was tun werden, ist, nehme es unsere Stärke, die von 1 bis 10 geht und wo es sich an, um es zu erweitern aus. Und wo es sich auf 0-60. Lassen Sie uns zu erfrischen. 

Nizza, haben wir eine Visualisierung. Das ist großartig. Dies ist die tatsächlichen Daten. Sie werden bemerken, in meinem kleinen Spielzeug beispielsweise das größte Erdbeben ist rechts oben auf uns. Aber das ist es. Wir haben einen Tag gefahren Visualisierung dass die Daten verbraucht und gibt uns wirklich interessante Informationen. Ja, lassen Sie uns einige hinzufügen Interaktivität zu. Ich erwähnte, dass war die starke Kraft der D3. 

So, hier, für jedes Element, wir sind beschreibt eine Reihe von Attributen. Wir können aber auch zu beschreiben, was wir wollen mit Interaktivität Elemente geschehen. Beispielsweise beschreiben wir konnten was passiert, wenn wir die Maus über. Und sehr ähnlich, dass, dass Sie eine Funktion übernehmen, sehr ähnlich, die Attribute wir vorher hatten, wo wir etwas tun, um die Element, wenn wir mit der Maus über sie. 

Also erste, was wir brauchen, um tun müssen, ist wählen Sie dieses Element, um es im Grunde zu finden, in den Browser. und dann setzen wir könnten ein Attribut zu. Also, was ich hier mache, ist, wenn wir schweben über etwas, werden wir dieses Element erhalten und stellen Sie dann die Deckkraft zurück 1, vollständig opak. Mal sehen, wie das aussieht. 

Es scheint, wir haben ein zusätzliche Semikolon hier. Also, wenn wir hier zu schweben, wird es voll. Aber jetzt, es natürlich bleibt voll, weil wir haben, um zu beschreiben, was passiert, wenn entfernen unserem Cursor. Lassen Sie uns also genau das tun, dass auf mouseout, im Gegensatz zu mouseover. 

Und wir werden es zum Zurücksetzen was wir before-- 0,5 hatte. Und jetzt, jedes Mal, wenn wir schweben, erhalten wir einen Vollkreis. Es hilft uns, zu sehen, was wir wir sind im Wesentlichen die Auswahl. 

Und jetzt machen wir das wirklich großartig. Lassen Sie uns diesen an realen Daten. Lassen Sie uns also fragen konnte USGS über ihre Daten. So der US Geological Survey hat Daten über Erdbeben. Sie haben eine öffentliche API, die in der Lage ist um im JSON-Format konsumiert werden. Also lassen Sie uns tun. 

Das ist also ein Stück Code, dass Verbindung zum USGS API. Und es ist ein bisschen wie die Verarbeitung auf sie. Dies ist nicht relevant, aber es vereinfacht auf eine einfache Datenformat wie die wir hatten vor. Also habe ich von unserem Call loszuwerden unsere gefälschte data.json auf Datei. Und statt, ich rufe Die USGS Wesentlichen. 

Lassen Sie uns zu erfrischen, nett. Dies ist tatsächlich, realen Daten von dieser Woche für Erdbeben. Das ist wirklich interessant. Dies ist nicht überraschend, für uns, aber es gibt eine Menge von Erdbeben auf die West Coast in Kalifornien. Aber ich dachte, es war sehr interessant dass es so viele Erdbeben in Alaska, und es scheint, hier im Mittleren Westen. Ich meine, interessant, und wir sind gut. Das ist das Ergebnis. 

Aber im Grunde, diese ist das, was D3 hilft uns zu tun. Es hilft uns, nehmen Daten, binden es Elemente in der DOM, und haben diese Elemente ändern als eine Funktion der Daten haben diese Attribute, alle viele Attribute der Elemente, alle nützlich für die Kanäle um Informationen zu vermitteln. 

D3 ist ein unglaublich mächtiges Bibliothek und erstaunlich gut laufen. Dies ist ein leistungsfähiges Material. Datenvisualisierung ist ein unglaublich mächtiges Werkzeug zur Förderung von den Menschen tief Erkenntnisse, die zu ihrem Kern bekommt und hilft ihnen zu verstehen, Diese tiefgreifende und intuitive Art und Weise, wie Daten funktioniert und wie Daten verändert unser Leben.