Interaktive Datenvisualisierung: Erste Schritte mit D3. js - V5

1. Einführung: D3.js in einer Nutshell: Willkommen bei D drei Punkt Js Schlüsselkonzepte. Dieser Kurs ist eine sehr solide Einführung in das, was zu einer der beliebtesten Technologien geworden ist , um interaktive Datenvisualisierungen für das Web zu erstellen. Mein Name ist Bill Sander. Ich arbeite seit über 20 Jahren an Informationen, Design und Datenvisualisierung arbeite an statischen, Infografiken und interaktiven Erlebnissen. Ich entwerfe, und ich bin ein selbstgelehrter Programmierer. Ich habe lebendige Erinnerungen an die Schmerzen, die Sie durch Lerntechnologien gehen, mit wenig oder gar keiner Dokumentation oder Tutorials und einem technischen Gurus statt normalen Menschen. Und ich liebe es, keinen Unsinn und klare Anweisungen zu produzieren, dass jeder seinen Kopf umwickeln kann . D three ist eine JavaScript-Bibliothek, die für diejenigen, die zuvor in JavaScript gearbeitet haben, überraschend einfach zu verwenden ist, insbesondere Bibliotheken wie Jake Weary, weil sie vielen Normen und Best Practices folgt, die Sie zuvor gesehen haben. D drei, Auch wie Jake Weary ermöglicht es Ihnen, zu manipulieren und mit jedem Element auf einer Webseite zu interagieren können Sie ändern und von HTML CSS lesen und mit anderen JavaScript interagieren. Alles, was Sie erstellen, ist also ein vollständig konformes Element der gesamten Erfahrung im Browser . Wenn Sie überhaupt kein HTML CSS und JavaScript kennen. Sie werden interclass auf diese Technologien nehmen wollen, bevor Sie zu viel mit den drei arbeiten . Allerdings neige ich dazu, sehr einfache Sprache zu verwenden und versuche, die Dinge klar zu erklären, als wäre mein Publikum nicht super technisch. So wird selbst eine etwas technophobe Person mit diesem Kurs zusammenfallen können, auch wenn einige der Details etwas unscharf sind. Da alles in D drei in einem Browser passiert, bedeutet das, dass wir mit der Erstellung einer grundlegenden Webseite beginnen müssen. Also hier bin ich in Sublime Text, ein großartiger Texteditor zum Codieren ist, weil er Ihren Code erkennt und Dinge wie Cull entstehen, damit Sie Fehler in Problemen finden und erhabenen Text sogar Ihre Code-Snippets für Sie, wie Sie Dinge eingeben. Es wird Vorschläge zu Entscheidungen machen, die Sie treffen können, die sinnvoll sind und es Ihnen ermöglichen, Dinge wie einfach HTML einzugeben. Drücken Sie die Tab-Taste, und es wird Ihre gesamte grundlegende Webseite für Sie einrichten, eine riesige Zeitersparnis im Vergleich zu arbeiten in keinem Pad oder SMS es, zum Beispiel. Jetzt, da ich ein HTML-Framework habe, kann ich einfach den Titel für dieses Dokument einfügen. Ich werde auch ein leeres div mit dem I-D-Diagramm hinzufügen, das ist, wo all die guten D drei Sachen später passieren werden. Als nächstes werde ich der Seite etwas CSS hinzufügen, damit ich einfach tippen, stylen und Tab drücken kann , und es wird automatisch ein Style-Tag für mein CSS hinzufügen. Also zuerst werde ich dem Körper die gesamte Webseite im Wesentlichen eine Hintergrundfarbe hinzufügen und auch die mit 2 100% setzen. Auf diese Weise wird es nur die gesamte Breite der Seite dehnen. Also, wenn ich das speichere, gehe zurück zu meinem Browser und aktualisiere diese Seite, wir sehen, dass die Hintergrundfarbe davon, wie grau, das gesamte mit dem Dokument erweitert. Und es verbraucht auch die Höhe. Würde nur, wissen Sie, der Körper wird irgendwie Standard 200% Höhe. brauchen wir uns jetzt keine Sorgen zu machen. Außerdem werde ich hier ein weiteres Style-Element öffnen, weiteren CSS-Eintrag für mein Diagramm. Und natürlich bedeutet Hashtag-Diagramm, dass es nur auf das Element mit der Idee des Diagramms dieses Ding hier unten angewendet wird und ich werde wieder die Hintergrundfarbe einstellen. In diesem Fall werde ich es tatsächlich dem Körperhintergrund zuordnen, was ich in einer Sekunde erklären werde. Ich werde ein bestimmtes mit festlegen, nur damit es ein Set in einer festgelegten Höhe ist und du wirst sehen , was das tut. Und ich werde auch einen, ähm, oberen und unteren Rand von 50 Pixeln setzen ähm, , nur um es irgendwie vom oberen Rand des Browsers zu ziehen . Tiere sagten, ein automatischer horizontaler Rand, so dass es sich automatisch zentriert. Und ich werde ihm auch eine Grenze geben. Nur eine solide Gruppe. Ein nimmt schwarzen Rand. Also nochmal, wenn ich zurückgehe, lade meine Seite neu. Weißt du, ich habe es einfach von der Kante weggezogen, mit dem 50 Picks oberen Rand, und dann setzt der automatische Rand es in die Mitte, und ich habe die gleiche Hintergrundfarbe, aber einen kleinen Rand, damit ich sehen kann, wo es tatsächlich lebt . Und ich benutze diese Hintergrundfarbe, weil ich später feststellen kann, wann ich sie ändere, was Sie im nächsten Video sehen werden. Ich werde in der Lage sein, den Unterschied zu sehen, um sicherzustellen, dass die Änderungen, die Sie dazu bringen, dass sie tatsächlich geschieht. Okay, es ist an der Zeit, etwas auf dieser Seite zu tun, das tatsächlich mit D drei zu tun hat. Ich habe gefunden, dass der beste Weg zu lernen ist, an einer bestimmten Aufgabe zu arbeiten, anstatt theoretisch darüber zu lernen , welcher Code was tut. Also werden wir ein animiertes, interaktives Streudiagramm mit D drei erstellen . Dieser Kurs wird nicht versuchen, jedes Detail und jede Nuance über D drei abzudecken, aber wir konzentrieren uns auf einige der wichtigsten Schlüsselkonzepte, die, sobald Sie sie verstehen, werden Sie befähigen, alle Arten von wirklich interessanten Dinge. Und von dort wird es einfacher sein, tiefere Level-Konzepte in der Bibliothek zu erlernen. Es ist erwähnenswert, dass D drei seine Objekte entweder als SPG-Elemente erstellen kann, die Vektorgrafiken, Auren, Canvas-Elemente sind, die Teil des HTML Five-Standards sind. Das sind Vor- und Nachteile beider, auf die ich hier nicht hineinkomme. Dieser Kurs wird an Lee an SPG arbeiten. Aber wenn Sie Canvas html fünf bevorzugen, wird es überhaupt nicht schwierig sein, das zu konvertieren, was Sie hier lernen, um diesen Standard zu verwenden, schließlich, bevor wir tatsächlich mit D drei arbeiten können. Wir müssen tatsächlich d drei hinzufügen, die Bibliothek auf der Seite. Also werde ich ein Skript-Tag hinzufügen, und ich muss nur die Quelle definieren. Und diese Quelle ist eine JavaScript-Datei in diesem Fall, die direkt im Ordner lebt, würde Sie hier direkt im Ordner neben meiner Indexpunkt-HTML-Datei zeigen. Also muss ich ihm keinen Weg geben. Aber Sie könnten natürlich natürlich auf die Bibliothek in einem CDN-Repository verweisen, das irgendwo in der Cloud lebt. Aber ich hatte nur eine lokale Datei verwendet. Als nächstes beginnen wir, SPG-Elemente zur Seite hinzuzufügen, um zu sehen, wie die grundlegendsten D drei Methoden funktionieren . Übrigens, der gesamte Code für diesen Kurs wird über den Link in der Kursbeschreibung verfügbar sein, damit Sie Lektion herunterladen und mitverfolgen können. Aber wenn Sie können, würde ich empfehlen, dass Sie den Code selbst auf dem Weg schreiben. Es gibt keinen besseren Weg zu lernen, als es selbst zu tun 2. SVG-Elemente in D3 hinzufügen: Also, jetzt ist es Zeit, die Datei zu nehmen, die wir einfach das grundlegende Framework einrichten für und beginnen, Dinge auf der Seite hinzuzufügen, beginnen Sie das Hinzufügen der SPG-Elemente, die werden werden wirklich sexy und cool Interactive Grafik Diagramm. Das erste, was ich tun muss, ist, dass ich hier ein Skript-Tag unter meinem div hinzufügen werde. Und der Grund, warum ich es dort habe, ist, dass, wissen Sie, die Art, wie HTML lädt, ist, dass es von oben nach unten geladen wird. Das liest es also von hier oben bis hier runter. Und ich möchte mein JavaScript nicht versuchen, etwas mit diesem div zu tun, bis es tatsächlich existiert. Deshalb lege ich Sachen darunter, dass es Möglichkeiten gibt, es zu tun. Wo du es hier aufstellst, spielt keine Rolle. Es ist nicht wirklich Details, über die wir uns heute Sorgen machen müssen, aber es ist am einfachsten, es unter den Tag zu legen, an dem Sie wollen, dass Dinge passieren. Also, in diesem Skript-Tag, das allererste, was ich tun werde, ist, dass ich eine Variable namens Xvg erstellen werde, und diese Variable wird ein D 3-Element enthalten und lassen Sie mich das einfach erstellen. Ich werde sagen, d drei Punkte wählen und ich werde sagen, Wählen Sie das Diagramm, Dave, den wir erstellt haben. Und dann möchte ich, dass Sie einen SV G aufrüsten und ich möchte ihm ein Attribut von oops A mit Attributen von 1000 Pixeln geben. Kopieren und Einfügen Änderung in der Höhe und ändern Sie diese in 500 Pixel. Und bei meinem kleinen Semikolon. Also, was passiert hier? Ich erstelle buchstäblich nur eine Variable, die im Wesentlichen dann ein d drei spg einer bestimmten Breite und Höhe enthält . Das wird dann im Wesentlichen an das Diagramm angehängt. Und was ich jetzt tun werde, ist, dass ich das einfach retten werde. Ich gehe zurück zu meinem Browser. Ich werde schlagen, aktualisieren, und Sie werden nichts sehen, denn im Wesentlichen, hoffentlich gibt es hier ein SPG-Element, aber wir haben keine anderen Attribute als Breite und Höhe gegeben, also kann ich nicht sagen, ob es da ist. Aber was ich tun kann, ist meinen Webinspektor zu öffnen. Das ist also Kommandooption. Ich auf dem Mac und ich kann mir die Elemente ansehen. Wenn Sie mit dieser Art von Prozess nicht vertraut sind und wie dies funktioniert, schauen Sie auf jeden Fall in sie . Es ist eine gute Möglichkeit, den Code zu debuggen. Aber Mitte kann ich jedes HTML-Element sehen, wie es auf der Seite generiert wurde, so dass ich in mein Diagramm klicken kann , das ich sehe, hat einen Pfeil daneben, was ein gutes Zeichen ist. Da muss etwas drin sein. Sonst gäbe es diesen kleinen Helden nicht. Ich klicke es öffnen und sicher genug, ich habe kein spg Element. Es hat eine Breite von 1000 Picks und eine Höhe von 1000 Pixeln, weshalb es Eier die volle Fläche der gleichen Hintergrundgrenze fühlen, die ich zuvor erstellt habe . Wenn Sie sich also umdrehen, können Sie sehen, dass es eine Art Highlight in Blau ist. Also hat es es getan. Ich kann es jetzt nicht genau sehen, also lasst uns das reparieren. Also, was ich tun werde, ist, ähm, ich werde reingehen und ich werde meinem CSS hier Stil hinzufügen. Ich werde nur für irgendwelche SPG-Elemente sagen, indem ich das SPG-Tag dort verwende, ich möchte, dass Sie die Hintergrundfarbe einstellen. Und hier ist, wo ich sagen werde, dass es warten soll. Okay, das ist es, worüber ich vorhin gesprochen habe, als ich den Hintergrund dieses Grauen erstellt habe. Und dann habe ich meinen Tag aus genau dem gleichen Grau gemacht. Also hat es irgendwie miteinander vermischt. Das war irgendwie nutzlos, außer dass jetzt, wenn ich mich erneuere, mein Weiß tatsächlich auftauchen wird. Also jetzt weiß ich, dass es existiert, ohne einen Blick hier unten im Inspektor macht Sinn. Die andere Sache, die ich tun werde, ist, dass ich tatsächlich ein paar andere Variablen hinzufügen werde. Ich werde hier eine Variable über allem hinzufügen, und die 1. 1 wird mit aufgerufen werden. Ich setze das auf 1000 Schinken und erstelle eine Höhe, die ich auf 500 setzen werde. Und für diejenigen von Ihnen, die etwas programmiert haben, können Sie wahrscheinlich vorhersagen, was ich als Nächstes tun werde. Ich werde diese Attribute festlegen, um diese Variablen zu verwenden, und im Wesentlichen fange ich an, zu abstrahieren. Ähm, du weißt Dinge, wenn ich später die Breite und Höhe ändern wollte, könnte ich ihn hier oben ändern, und es wird es hier automatisch ändern. Und natürlich wirst du sehen. Wahrscheinlich werde ich diese Variablen auf andere Weise verwenden, weshalb es hilfreich ist, das zu tun. Okay, als nächstes, was ich tun möchte, möchte ich wirklich etwas zu meinem SPG hinzufügen. Ähm und ich wollen dir irgendwie zeigen, wie SPG ein bisschen funktioniert. Zuerst werde ich meine SPG nehmen. Also, jetzt ist es diese variable Art von? Wie ich schon sagte, ein Container, der ein ganzes SPG-Element darin hat, damit ich etwas Ähnliches tun kann ich vorher gemacht habe, wo ich etwas dazu schreiben werde. Also werde ich meine SPG nehmen, und ich will nur ein Rechteck auf den Kopf stellen. Und die Abkürzung dafür in SPG Sprache, es ist eine Art eigene Sprache. Nennen wir es. Ich habe normalerweise nur die vier Briefe zerstört. Okay, also werde ich Panda-Rechteck. Ich werde ihm auch ein paar Attribute geben. Und so würde ich zuerst sagen, ich möchte die X-Attribute festlegen, wo es sich auf der Seite horizontal befinden wird, und ich muss sagen, Setzen Sie es bei 100 Kopieren einfügen. Ich muss das Warum bei 100 setzen, um ein mit Attributen hinzuzufügen. Und lasst uns ihm eine 10 geben und die Höhe auch 10 machen. Also, was ich hier getan habe, ist, dass ich meinem SPG ein Rechteck hinzugefügt habe Wenn ich das sage und ich gehe und Boom aktualisiere, habe ich kein Rechteck svg, das 100 Bilder ist vorbei in der X-Richtung und 100 Pixel nach unten in der Y-Richtung Paar wichtige Punkte hier d drei spg die Höhe Das Warum ist ein wenig verwirrend und kontraintuitiv. Das ist 00 hier oben in der linken oberen Ecke. Also jedes Mal, wenn Sie eine Höhe hinzufügen, Sie tatsächlich gehen manchmal ein wenig verwirrend, wenn Sie Dinge auf dem Bildschirm platzieren . Aber versuchen Sie, sich an diesen Schnee zu erinnern. Wenn ich in meinen Inspektor gehe und jetzt in mein SPG-Element gehe, hat es einen Fehler daneben. Ich kann das öffnen und ich kann sehen, ich habe ein Rechteck befindet sich ein Ex von 100. Warum haben 100 mit 10 Pixeln und ich 'd von 10 Pixeln. Sie bemerken, dass Sie das PX hier nicht haben müssen. Es findet es einfach automatisch heraus. So SPG ermöglicht es Ihnen, diese geometrischen Objekte wie Rechtecke zu erstellen, oder ich kann einen Kreis und meinen Kreis tun , könnte ich hinzufügen, und Attribute, die C X genannt wird und ich werde erklären, dass in einer Sekunde bin ich das hier ein wenig nach rechts schieben. Es hat also 100. Ich werde 200 sagen. Ich gebe ihm ein C. Warum? Und wir könnten es genauso gut behalten. Warum Position als die andere und ist ein anderes Attribut für Kreise, das ist unser, wenn Sie überhaupt mit Geometrie vertraut sind, können Sie in der Lage zu erraten, ist der Radius des Kreises. Also, was ich hier getan habe, wie ich gesagt habe, das C X, ist das C X, das im Wesentlichen ein Rechteck ist, die Position basierend auf der oberen linken Ecke dieses Rechtecks. Diese obere linke Ecke ist also genau 100 Pixel über und 100 Pixel nach unten. Wo ist jetzt? Wenn ich mich erneuere, sagt Siehe Ex. Setzen Sie die Mitte des Kreises genau in diesem Fall, 200 Pixel über und 100 Pixel nach unten, so dass Kreise basierend auf ihren Zentren angeordnet sind. Rechtecke und einige andere Objekte sind basierend auf ihren oberen linken Ecken, die auch ein wenig verwirrend und funky, nur so dass Sie es wissen. Also nur du weißt, du musst dich daran erinnern. Und dann sagte ich einen Radius von fünf für diesen Kreis. Und so ist dies ein Durchmesser von genau 10. So ist es das gleiche mit ist dieser Radius von fünf Durchmesser 10. Dies ist eine Breite von 10 etcetera. Wahrscheinlich können Sie das nur hier bekommen. So eine Grundidee wieder. SPG montiert an geometrischen Objekten. Sie fügen eine Reihe von Attributen hinzu, z. B. die Position. Seine Breite, seine Höhe, sein Radius darauf tut, was Sie erwarten könnten. Ich werde noch einen hier machen, Sie können auch einen Stift, Dinge wie Linien. OK, und hier sind die Attribute noch einmal geändert. Also statt X oder C X, was wir haben, ist X eins. Also das x des ersten Objekts und ich sage, warum eins und lasst uns das auch auf 100 runter legen und ich werde ein x zwei machen und warum zwei? Und so die x zwei ich werde es 400 die Y zwei auf 200 setzen. Und so müssen Sie für die Linie auch weitere Attribute hinzufügen, die die Strichfarbe ist. Einige der Haut und gegeben schwarzen Schlaganfall. Setzen Sie meinen Semikolon Refresh ein und Sie werden eine Zeile sehen. Also nochmal, was schaue ich hier an? Was waren all diese Dinger? X eins, Der erste X-Wert Eine Zeile beginnt hier und endet hier. Es hat also im Wesentlichen zwei Positionen und so ist die zweite Position X zwei. Und warum so x zwei wird hier drüben geschoben. Warum? Um hier runter zu stoßen. So erstellt es eine Linie von hier nach hier und es findet automatisch heraus, dass der SPG, wissen Sie eine Art Winkel dort hinein gesetzt hatte. Verbinde diese beiden Dinge einfach irgendwie. Grundlegende Idee. Ich kann die Strichfarbe einstellen. Ich könnte den Schlaganfall mit ändern, wenn ich alle möglichen Dinge wollte. Also, wissen Sie, SPG hat alle möglichen Dinge jenseits von Rechtecken, Kreisen und Linien. Sie können Symbole hinzufügen, die Sie im Wesentlichen geometrisch wie Polygone hinzufügen können , die alle Arten von seltsamen Formen haben. Aber die Grundidee ist immer die gleiche. Sie fügen das Objekt mit der SVG-Sprache hinzu. Sie fügen die Attribute hinzu, die erforderlich sind, damit Sie es sehen und irgendwo auf dem Bildschirm platzieren können, und das war's. also Wenn wiralsoein wenig später unser interaktives Diagramm erstellen,werden wir das einfach tun. Wenn wiralsoein wenig später unser interaktives Diagramm erstellen, Wird Objekte an einer bestimmten Stelle hinzufügen und sie färben etcetera, basierend auf verschiedenen Attributen. Hoffentlich ergibt das Sinn. Sollte ziemlich unkompliziert sein. Als nächstes werden wir wirklich mit einigen Daten arbeiten. 3. Erste Schritte mit Daten in D3 arbeiten: Also, das ist großartig. Sie wissen, wir können Formen und Linien und alle Arten von Dingen in SPG im Browser mit D drei . Aber bei D drei geht es wirklich darum, mit Daten zu arbeiten. Warum fangen wir nicht an, das zu tun? Lassen Sie uns einige Daten laden und sehen, was wir damit machen können. Also bin ich ein Anfang, indem ich einfach das Zeug lösche, das wir gerade gemacht haben, wo wir das Rechteck im Kreis in der Zeile hinzugefügt haben . Ich brauche das Zeug nicht mehr. Und ich werde nur eine neue Linie erstellen. Und was ich tun werde, zuallererst, ist, dass ich etwas in D drei eingebautes benutzen werde, das heißt d drei, dass CS v. Und wenn man einen d drei Punkt CSP macht, wird das laden, wie man vermuten würde, eine C S v-Datei . Und ich arbeite mit einer Datei namens Boston Housing dot CS Gebühr, die im Ordner mit Sachen verfügbar ist, die Sie für den Kurs hier heruntergeladen haben. Und lasst uns, bevor wir anfangen. Werfen wir einen Blick darauf. Sehen Sie, SV Datei und ich kann erklären, was da drin los ist. Eine CS Gebührendatei ist also eine durch Komma getrennte Datei, was bedeutet, dass Sie Felder und Daten haben, die nur durch Kommas getrennt sind. Also, wie Sie hier sehen können, schaue ich es irgendwie nativ im Texteditor an. Hier habe ich Feldnamen, die immer in der ersten Zeile in einer CSP-Datei durch Kommas getrennt . Also habe ich ein Feld namens Kriminalität eins namens Charles etcetera, alle durch Kommas getrennt und dann jede Zeile von Daten unten. Es ist ein Datenwert für den Feld-Associate an der gleichen Position, getrennt durch Komma vom nächsten und dann vom , usw. So könnten Sie es im Texteditor betrachten. Es ist nur eine rohe Textdatei mit den durch Kommas getrennten Werten. Sie können diese Dateien tatsächlich in Excel öffnen, das jetzt einen Blick darauf wirft, und es legt sie einfach eher wie eine typische Tabellenkalkulation aus. Excel übrigens sehen SV-Dateien exportieren, kann übrigens sehen SV-Dateien exportieren,um zu sehen, ob Sie Daten haben, die nicht im CSP-Format sind, und Sie möchten einen Kommentar der getrennten Datei verwenden. Sie können aus Excel ein beliebiges Format aus Excel in einen CSP exportieren. Also einfach wirklich schnell, was sind die Daten hier? Wir haben Boston Wohnungsdaten. Dies ist eine Art berühmter Datensatz, der Bezirk für Bezirk enthält, verschiedene Variablen für verschiedene Dinge über neue Wohnbezirke in Boston. Also haben wir die Kriminalitätsrate im Bezirk. Wir haben, ah, binären Wert nur Charles genannt , der entweder eine Null oder eins ist. Die meisten von ihnen sind Nullen. Aber hin und wieder findet man einen Wohnbezirk, der einen darin hat. Uh, und was das repräsentiert, ist, dass dieser Bezirk neben dem Charles River in Boston ist. Das ist alles, was man repräsentiert. Wir auch diesen, der Lachgas in der Atmosphäre in diesem Bezirk misst. Aus welchem Grund auch immer, wir haben die Anzahl der Zimmer in einer Wohnung in dieser Region. Der Durchschnitt oder die mittlere Anzahl der Zimmer, das Alter, das mittlere Alter der Wohnung, was bedeutet, wann wurde es vor 65 Jahren gebaut? In diesem Fall ist die Entfernung von einigen wichtigen U-Bahn-Bereichen. Wir haben den Prozentsatz der armen Menschen in diesem Bezirk und auch den Medianwert einer Wohnung in diesem Bezirk. Und, ähm, ich bin mir nicht sicher, ob das in Tausenden ist oder was der Wert hier ist, aber das ist, was diese Felder bedeuten, und so sehen die Daten aus, wenn wir sie betrachten, nur eine Art geradliniges Format. Also, wenn ich hier zurück zu dem Code gehe, habe ich begonnen, indem ich d drei Punkt CS Gebühr eintippe. Und dann fügen Sie den Namen der Datei und eine wichtige Notiz dazu ein. D drei kann keine Datendateien wie diese aus einem Dateiordner lesen. Sie können diesen Code also nicht einfach ausführen, indem Sie HTML-Datei mit JavaScript in Ihrem Browser ablegen . Deshalb hast du vielleicht mein Du bemerkt. RL sieht auch so aus. Es ist Websites Colon 80 80, weil ich einen sehr einfachen Webbrowser lokal auf meinem Entwicklungscomputer betreibe . Eine der einfachsten Möglichkeiten, dies zu tun, ist zu Bit NAMI B i t. Und bin ich dot oder Kerl glauben, und Sie können einen Kartenstapel herunterladen. Also in meinem Computer Ma'am, was ich bin , kein Macintosh Apache, meine Fortsetzung PHP, und Sie können diese Anwendung herunterladen und dann im Wesentlichen einen Webserver lokal ausführen. Es ist ein sehr einfacher Weg, es zu tun. Es gibt 1.000.000 andere Möglichkeiten, dies zu tun. Aber wenn Sie nicht super technische Bit NAMI, Ma'am, Stacks waren großartig warten, um loszulegen. Sie müssen also von einem Server aus laufen. Das ist die schnelle Sache, dass Sie Fehler treffen, versuchen, keinen Server zu verwenden. Das wird der Grund sein, nur damit du es weißt. Alles klar, also lassen Sie uns einen Blick auf den Code werfen, so dass d drei Punkt CSP d drei Punkt CSP nativ lädt SV-Dateien diese durch Komma getrennte Dateien sehen . D drei hat auch d drei Punkt tsv, die eine tabulatorgetrennte Datei laden, wo die Felder Luft durch Tabulatoren getrennt. Es gibt jetzt auch d drei Punkt dsv , der im Wesentlichen alle getrennten Werte lesen wird. Mit anderen Worten, Sie könnten Daten haben, die mit vertikalen Leitungen in zwischen jedem Datenfeld kommen, das Sie manuell festlegen, was das Dilemma in der EU d drei Punkt dsv ist. So lange Geschichte kurz, das ist nur eine Art Funktion oder die Methode, wie man dieses Zeug macht. Und ich werde dir nur die Syntax zeigen. Und so ist die Grundidee, dass ich sage d drei Punkt CSP Pfad zur Datei in diesem Fall im gleichen Ordner wie dieser Code ist, weshalb es hier keinen Ordnerpfad und dann D drei gibt. Version fünf begann, Versprechen zu verwenden. Also werde ich hier keine große Lektion über Versprechungen bekommen und was sie sind. Aber die Grundidee ist, dass d drei beide JavaScript, wirklich im Allgemeinen seit Jahren und Jahren könnte eine synchrone Dinge tun. Das heißt, Sie könnten nach einer Datei fragen und dann Javascript, dass Sie etwas mit den Daten in dieser Datei tun möchten ? Und es war eine synchrone Bedeutung, Sie würden nach der Datei fragen und dann müssten Sie Code schreiben lassen, das würde sagen, und sobald das hier ist, sobald wir diese Arbeit getan haben, dann tun Sie Sachen. Und JavaScript verwendet jetzt diese Syntax, wo Sie d drei Punkt c s v sagen In diesem Fall für D drei, wissen Sie, das ist, wie Syntex hier funktioniert und dann dot verwendet, und was auch immer darin ist, wird dann nicht ausgelöst , bis D drei diese CSB-Datei heruntergeladen und analysiert hat. Es macht es einfach viel einfacher, den Zeh. im Wesentlichen keine Fehler, Machen Sieim Wesentlichen keine Fehler,wo Sie versuchen, Code aufzurufen, bevor das vorherige Zeug passiert ist, besonders in Ihren aufrufenden Dateien , denn wenn diese Datei im Websommer ist besonders in Ihren aufrufenden Dateien, denn wenn diese Datei im Websommer istund Sie er würde Code, der mit dem Web sprach, um eine Datei zu holen und dann diese Daten herunterzuladen und dann Geldbeutel. Das ist, ähm, kann eine Weile dauern. Und wenn die Trainer zu schnell auslösen, können Sie schnell in Schwierigkeiten geraten. So lange Geschichte kurze Versprechungen bewahren Sie davor, diesen Fehler zu machen. Alles klar, also d drei Punkt c S v Nema Datei oder Pfad zum Dateipunkt Dann und dann möchte ich etwas tun . Und was ich tun werde, ist, dass ich eine Funktion nennen werde, weil ich jetzt ein paar Sachen an einem Ort erledigen könnte . So sieht das aus d drei Punkt c s v Punkt Dann Funktion, wissen Sie, geschweifte Klammern und alles hier drin. Was immer ich hier drinnen machen will, kann ich jetzt tun. Eine Sache, die ich auch tun werde, ist, dass ich Funktionsdaten jetzt sagen werde, dass Wortdaten hier nur ein Parameter sind und was das bedeutet In diesem Fall, wenn Sie mit JavaScript vertraut sind, können Sie eine Funktion aufrufen, und dann sind Sie Übergeben einer Funktion des Parameters in die Funktion und dann können Sie Dinge mit diesem Parameter tun. In Funktionen wie diesem ist der Parameter eher eine Reflexion dessen, was passiert ist. Mit anderen Worten, d drei Punkt c s v liest in dieser C S v-Datei. Und was auch immer da drin passiert, ich sage dann, dass ich in dieser Funktion Sachen damit machen möchte. Und das erste, was ich damit machen werde, ist, dass ich Konsolenpunktprotokolldaten sagen werde. Und wenn Sie also Programmierer sind, wissen Sie bereits, was das tut. Wenn nicht, ist das vielleicht neu. Aber die Grundidee ist, dass Sie in modernen Webbrowsern den Webinspektor haben. Und so, wenn ich dio Befehl Option I auf Chrom oder Steuerung, Option I auf PC und stopfen, es öffnet sich diese Web-Inspektor, wo Sie wie Entwicklungs-Tools haben, von denen einer der Konsul und der Konsul genannt wird. Wenn ich diesen Code lade, werden Sie sehen, ob ich das Konsolenpunktprotokoll mache, das wiederum in den meisten modernen Browsern integriert ist. Es wird unverzichtbar, was auch immer ich gebeten habe, sofort. Also lassen Sie mich die Eurail Haare ändern, um das zu benutzen. Was waren der Ordner, in dem jetzt gearbeitet wurde, das ist der 03 Datenordner. Und wenn ich jetzt diesen Code ausführe, schau, was im Rat passiert jetzt, dass Daten, die aus der CSB-Datei gelesen wurden da ich gebeten habe, es dort zu schreiben und ich kann sehen, dass ich 506 Elemente habe, weil es 506 Zeilen in der -Datensatz. Und wenn ich diese kleine Luft hier drüben treffe, öffnet es sich und ich sehe, dass es tatsächlich in Segmente 100 100 Rose auf einmal gebrochen ist. Aus welchem Grund auch immer, ich weiß nicht, warum? Aber das tut es. Und wenn ich das öffne, kann ich jede einzelne Datenzeile sehen. Und wenn ich das mit meinen ursprünglichen Daten überprüfe, sagte: Wenn ich zurück zur CSB-Datei gehe, meine erste Zeile, ist die Kriminalitätsrate 0,632 und sicher genug, das ist die Nummer, die ich hier sehe. Und das Lachgas ist 0,0 Punkt 537999 was auch immer. Und das entspricht dem, was ich hier drüben habe, so buchstäblich Zeile für Zeile, ich habe es auf die Konsole geschrieben, nur damit ich sehen kann, dass die Daten da sind. Es wirft keinen Fehler oder irgendetwas anderes. Und übrigens, jede dieser Zeilen werden Sie bemerken, dass dies Jason JavaScript ist. Objektnotationen des C S V wurden in Jason umgewandelt , ein Datenformat, das JavaScript wirklich liebt. D 3/10, um damit zu arbeiten. Viele der meisten JavaScript, die Sie in diesen Tagen arbeiten, arbeiten mit Jason, wenn Sie über Daten sprechen. Und das Jason-Format ist nur geschweifte Klammer Feldname, Doppelpunkt Feldwert Komma , ein anderer Feldname , ein , usw. Sie können hier drüben sehen, wir sehen Punkt, Punkt Punkt. Aber ich kann jede Zeile wieder öffnen und jedes der Felder in jedem einzelnen Wert sehen. So können Sie die Daten irgendwie auf diese Weise inspizieren und sicherstellen, dass alles so passiert wie es passieren soll, indem Sie einfach Konsolenpunktprotokoll durchführen. Also habe ich jetzt Daten. Es ist kein Zeitring, es funktioniert. Es tut genau das, was ich tun wollte. Also, jetzt können wir tatsächlich anfangen, ein paar Sachen mit diesen Daten zu machen, also lasst uns dazu kommen. Ich werde die Konsul Zweifel Log Blanks auskommentieren. Das brauchen wir nicht mehr. Und was ich tun werde, ist das. Ich werde einfach anfangen, hier zu tippen. Ich werde sagen, spg dot wähle alle Zitate Punkt d o t und was passiert hier? Sie werden bemerken, bevor wir etwas Ähnliches gemacht haben. Wir sagten, d drei Punkt wählen Hash-Chart Pfundzeichendiagramm. Und ich sagte, Hey, d drei, bitte wählen Sie das Div mit dem i d Diagramm. Das ist bereits im Dom das Dokumentobjektmodell. Und wir sehen diesen Sumpf etwas sehr Ähnliches hier. Erstens, ich sage, verwenden Sie das S V g Objekt, das wir erstellt haben, ich hätte sagen können, d drei Punkte electile oder als Fidschi Die Select All Art von egal. Aber ich sage, Arbeit in diesem Ding, das wir bereits haben. Es ist wie jeder einzelne, nicht nur eine der ersten 1, was ist, was d drei Punkt als wählen. Alle von ihnen mögen jede einzelne Sache, die den Klassenpunkt hat. Diese existieren noch nicht, worüber ich in einer Sekunde spreche, aber wähle all diese Dinge aus, wenn sie existieren, und wenn nicht, ist es okay, weil wir Sachen machen werden. immer, es gibt eines dieser seltsamen Dinge über D drei, die man irgendwie tun kann, obwohl sie es nicht tun, sie existieren nicht, und es funktioniert immer noch. Also nimm einfach mein Wort auf das. Also werde ich sagen, Punkt wählen Sie alle Punkt und dann werde ich anfangen, Dinge mit denen zu tun, weil die Art, wie diese Selektoren funktionieren, was, wenn Sie mit Jake müde vertraut sind, Sie bereits daran gewöhnt sind, mit Selektoren zu arbeiten Sehr ähnliche Idee. Sie wählen Sachen aus und dann machen Sie Sachen damit und haben auch Methoden verkettet. Also sage ich svg dot wählen Sie alle. Und dann, wenn ich einen anderen Punkt etwas oder anderes mache und einen anderen Punkt etwas eher danach ,wird alles angekettet werden, um an der gleichen Sache zu arbeiten, bis Sie einen Semikolon getroffen haben, , in diesem Fall ist irgendwie erledigt. Also, zum Beispiel, hier werde ich sagen, dass alle Punkte geschlippt und ich werde mit diesen Dingen sagen, ich möchte, dass du Daten verwendest. Das ist, was die Punktdaten tun. Und dann übergebe ich den Parameter, den ich vorhin herausgezogen habe. übrigens Diese Parameter könntenübrigensalles benannt werden. Ich könnte das Ding Fred nennen, und wenn ich es später als Fred bezeichnete, muss das nicht als Daten bezeichnet werden. Nur damit Sie es wissen, müssen dies Punktdaten sein, aber der Parametername könnte alles sein. Also werde ich nur Daten verwenden, weil es einfach ist. Also haben Punktdaten diese Daten verwendet und dann werde ich sagen, Enter. Und das ist eine andere Art von einer seltsamen spezifischen Sache über D drei, wo im Wesentlichen gibt es diesen Eingabe-Befehl. Es gibt auch einen namens „Exit“. Und so ist der Deal hier, ich sage, Ordnung, d drei. Ich möchte, dass Sie genau wie alles, was einen Klassenpunkt hat, möchte ich, dass Sie mit Daten arbeiten und speziell diese Daten, die ich habe, und wenn ich dann tun möchte, ist für jedes Objekt, das in den Bildschirmeintritt , das in den Bildschirm , das für jede Datenzeile eins sein wird. Ich will, dass du Sachen damit machst. Das ist also, was der Punkt eingeben tut. Wenn ich wäre, sagen wir, die Daten zu aktualisieren und einige Rose aus einem Datensatz verschwunden wäre, weil ich sie herausfiltere oder etwas, könnte ich es dot exit nennen und dann würde ich sagen, es könnte sein, alle zu entfernen Punkte auf dem Bildschirm, die beendet werden, weil sie aus den Daten verschwinden. Also werden wir nicht wirklich in den Punkt-Ausgang gehen, aber Punkt Enter ist für jede einzelne Sache, die auf dem Bildschirm hinzugefügt wird, ich möchte, dass du Sachen machst. Also, was ich will, dass du tust. Nun, ich werde sagen, äh Punkt füge einen Kreis an, weil ich einen Kreis für jede einzelne Datenreihe wollte. Und so, wissen Sie, früher, als wir das Hinzufügen von Kreisen getestet haben, sagten wir s v g Punkt Aufwärtskreis , der ein anhängender Kreis war, oder? Das ist großartig. Was wirklich mächtig und cool an D drei ist, dass, wenn ich sage, wählen Sie etwas verwendete Daten und für jedes dieser Dinge, geben Sie es ein. Und dann für jeden von denen sage ich, fügen Sie einen Kreis an. Im Wesentlichen verhält sich dies wie eine Schleife. Es schleift buchstäblich durch die Daten eine Straße der Zeit und für jedes dieser Dinge und fügt der Bühne einen Kreis hinzu , der super cool und mächtig ist. Und so werde ich jetzt für diesen Kreis sagen, ich will, dass du ein Attribut hast. So funktionieren die verketteten Methoden, richtig? Und jetzt arbeite ich an diesem Kreis, weil ich etwas angehängt habe. Und für jeden von denen tun Sachen, und ich werde sagen, ich muss ihm sagen, wo das Zentrum davon sein sollte. Und ich werde das hauptsächlich auf 100 Arten einstellen, wie wir es vorher getan haben. Ich muss den c y-Wert setzen. Machen Sie die 100. Außerdem werde ich den Radius auf,sagen wir, fünf setzen sagen wir, , und ich werde neue Attribute haben, die ich nennen werde. Nun, ich werde nicht anrufen. Es ist Phil. Und was das ist, ist die Füllfarbe jetzt ein paar Notizen darüber. Zuallererst musst du das Wort Phil benutzen. Weißt du, wenn du das in CSS tust, was du übrigens tun kannst, anstatt Attribut Philzu sagen , Phil könnte ich Attributklasse sagen und ihm einen Klassennamen geben und dann eine Klasse hier oben setzen in meinem CSS und etablierte, dass Füllfarbe dort oben, und ich muss nach dem Aufruf Phil hinzufügen, sie sind nicht Farbe, weil dies SPG ist. Und das ist das Wort, das spg für Phil Auto verwendet. Aber kurz gesagt, ich kann ein CSS produzieren, aber in diesem Fall mache ich es absichtlich als manuell eingestellte Füllfarbe im JavaScript. Denn später werde ich mich anpassen. Ich fühle mich Farbe basierend auf den Daten. Deswegen mache ich es so. Du könntest es auf jeden Fall tun, hängt davon ab, was du zu tun versuchst. Also, wenn ich das Ding speichere und jetzt gehe und ich die Seite, an der wir gerade arbeiten, neu lade, aber was passiert? Ich habe, was wie ein Kreis aussieht. Und so bin ich in meinem Webinspektor. Neben der Konsole habe ich dieses Ding namens Elemente und Elemente. Ich sollte Ihnen alle Elemente auf der Seite zeigen, das gesamte Dokumentobjektmodell. Also habe ich mein div mit der Idee des Diagramms hier drin. Wenn ich das aufmache, habe ich mein SPG. Und wenn ich das aufmache, sieh dir das an. Ich kann meine Kreise sehen und es ist nicht nur ein Kreis. Es sind viele, viele, viele Kreise. Aber natürlich haben sie alle das gleiche c x und sehen warum. Also, im Wesentlichen, ich habe 500 Kreise, die direkt übereinander sitzen. Also, mit anderen Worten. Der Code tut genau das, was er tun soll, er tut genau das, was ich will . Also machen wir es wirklich großartig. Nichts zu tun, bevor wir hier weggehen, ist, dass ich nur eine Sache hinzufügen werde, die Kreise gleich diesem Zeug ist. Ich setze eine Variable. Und der Grund, warum ich das mache, ist, weil ich auf diese Kreise verweisen möchte, die ich später schnell und einfach erstellt habe , sie jetzt im Wesentlichen an ein Objekt gebunden habe. Wie ich schon sagte, du weißt schon, s V G entspricht diesem Zeug, und ich könnte später auf SPG verweisen und damit arbeiten. Deshalb mache ich Kreise gleich, so dass ich später nur Zugriff darauf habe. Und bis zu diesem Punkt werde ich erklären, dass Kreise Variable hier oben, was eine andere wirklich wichtige Idee in der Programmierung einführt, die als Umfang bezeichnet wird . Und so werde ich nicht wirklich hier, um Umfang und Tiefe zu erklären. Aber die Grundidee ist, dass, wenn ich sage, du weißt, Kreise gleich etwas sind und ich es nicht außerhalb dieser Funktion deklariere, dann sind Variablennamen Kreise nur für mich verfügbar, solange ich in diesen geschweiften Klammern bin . Also, anderen Worten, wenn ich versucht habe, etwas mit Kreisen hier draußen zu machen , weißt du, später und mein Skript wird es nicht funktionieren, weil das Skript nicht weiß, dass es existiert. Aber wenn ich es hier oben deklariere, sage ich, es gibt eine Variable. Es wird Kreise rufen, und du hältst deine Ausschau darauf. Dann, wenn ich Sachen damit mache und du weißt schon, es ist irgendwie ein Wert hier drin, dann steht es mir später noch zur Verfügung. Deshalb haben wir diese globalen Variablen, wie in Höhe und Kreisen. Und, äh, SPG ist auch globale Variable. Also werden wir später mit denen arbeiten. Also, als nächstes werden wir anfangen, mehr Attribute auf die Kreise anzuwenden, die tatsächlich datengesteuert werden, und damit anfangen, dieses Ding wirklich zum Leben zu erwecken. 4. Datengesteuerte Grafiken in D3 erstellen: Alles klar, damit wir jetzt anfangen können, Dinge mit diesen Kreisen zu machen, basierend auf den Daten, die wir laden und arbeiten, das erste Mal tatsächlich tun, ist, dass ich wieder hier reingehe . Und ich wollte diesen Kreisen etwas hinzufügen. Und wenn ich hinzufügen werde, ist diese Klasse, weil, weißt du, ich mache dies alle Punktklassen-Dinge hier oben und sie existieren noch nicht. Ich mache sowieso Sachen mit ihnen, aber sie wollen das. Adam, ich könnte genauso gut sicherstellen, dass sie diese Klasse haben, denn dann später, wenn ich jemals auf sie zurückverweisen wollte, mit einem select all, Sie kennen Klassenpunkt-Dinge, dann werden sie sie haben. Das dient momentan keinem Zweck, außer zu wissen, dass es für den späteren Gebrauch da ist . Ich werde das auch tun. Ich füge noch etwas hinzu. Darüber hinaus können Attribute, die wir Stile direkt hinzufügen und ein Stil-Attribut wird dem Objekt direkt in das Tag hinzugefügt werden, wie Sie in einer Sekunde sehen werden. Also der Stil, den ich hinzufügen werde, ist Deckkraft. Meldet die Deckkraft auf 0,5, und so kann die Kapazität irgendwo zwischen Null und einer Null sein, ist unsichtbar. Einer ist 100% undurchsichtig, und so ist ein 0,5 50% durchscheinend. Also werde ich schlagen, sparen. Ich werde die Seite aktualisieren und Sie werden sehen, dass sie genau so aussieht, weil ich immer noch 506 Punkte übereinander laufen habe. Auch wenn sie halb trans zugehört werden, sieht es aus wie ein einzelner Punkt immer noch sein. Aber ich sehe hier unten im Inspektor, dass sie eine Art Pass haben. Es e 0.5 jeder von ihnen. Und übrigens haben sie die Klasse gleich dot, also wird alles entsprechend hinzugefügt. Der Code tut, was er tun soll. Also, weißt du, es ist offensichtlich ein großartiger Ort, um anzufangen. Das nächste, was ich tun werde, das ist, weißt du, wirklich, was wir hier tun wollen, wie am wichtigsten in D drei, ist auch. Ändern Sie die Platzierung dieser Objekte basierend auf Daten, rechts. Ein Streudiagramm ist Punkte auf einem Diagramm platziert in der X-Achse horizontal in einer bestimmten Position, basierend auf der Zahl, Warum Zugang zu einem Keller bestimmte Position, und in unserem Fall werden wir Thea die DOT-Größe verwenden, auch auf der Grundlage von Daten. Lassen Sie uns zuerst den X-Wert machen. Also hier setze ich die Mitte auf der horizontalen Achse manuell. 200 Pixel von links. Das ist großartig. Was auch immer. Es ist jedoch nicht wirklich datiert Visualisierung . Anstatt es manuell und statisch zu senden, kann ich eine Funktion verwenden. Und so sieht die Funktion so aus und Sie wissen, also ist es irgendwie wie die Funktion früher, wo wir eine Funktion und dann einen Parameter haben. Also was ist dieser Parameter D jetzt, übrigensnoch einmal, noch einmal, ich muss diesen d nicht nennen. Ich könnte diesen Fred Joe oder X Y Z nennen, spielt keine Rolle, aber ich nenne es, weil das eine Art Norm in D drei ist. Und was wirklich mächtig und erstaunlich an D drei ist, dass jeder Kreis zur Bühne hinzugefügt wird , weil ich sagte, du weißt schon, wähle die verwendeten Daten aus, und für alle, die in einem Kreis hinzugefügt werden, es hat nicht nur die Kreise hinzugefügt. Es hat auch die Daten für jeden Kreis an jeden Kreis gebunden, was bedeutet, dass jede Datenreihe, die diese Kreise Existenz antreibt, auch an dieses Objekt gebunden ist . Also D drei ist sich der Daten bewusst, die mit jedem dieser Objekte verbunden sind. Also, wenn ich sage, lassen Sie uns die Funktion verwenden, anstatt dies manuell zu sagen, und ich sage nur Konsole sieht, dass Protokoll D Ich traf, aktualisieren Sie auf der Seite, speichern und aktualisieren und beobachten, was passiert. Zunächst einmal bleiben alle Kreise hier drüben stecken, weil ich ihm keinen Wert gesagt habe, den ich verwenden muss. Ja, nur damit du es weißt. Aber wenn ich zurück zu meiner Konsole gehe, schau dir an, was ich jetzt hier habe, wie wir früher jede Datenreihe gesehen haben. Wenn ich weg scrolle, nach oben ist jetzt in der Konsole sichtbar, weil ich gebeten habe, es dort geschrieben zu werden. Und so ist dies die erste Zeile von Daten. Denken Sie daran, Verbrechen sind 0,63 bis, äh, schädliches Lachgas ist 0,5379 usw. Und damit Daten daran gebunden sind. Also kann ich diese Daten jederzeit verwenden, wenn ich mich auf dieses Objekt verweise. Also lass mich das einfach loswerden. Und was, wenn ich das tat? Also die Funktion jetzt, um diesen C X-Wert zu setzen, muss ich return verwenden, weil das , was dies tut, ist, dass ich sagen muss, dass 200 tatsächlich ist. Ich sage, sagte, die Attribute das C X-Attribut zu den Ergebnissen dieser Funktion, und Sie müssen das Wort zurückgibt verwenden. Wenn ich nur sage, dass diese Rückkehr 100 und ich Refresh klicke, schau zu, was passiert. Es ist genau das, was wir vorher hatten, wo ich Hunderte von Punkten habe, alle in der gleichen Position. Sex ist 100 c weise 100. Also ist es nichts hat sich geändert von dem, was ich früher getan habe, außer statt zu sagen, setzen Sie die c x 200 Sie alle an einer Stelle. Ich sage, Verwenden Sie eine Funktion, aber ich kehre immer noch zurück. Äh, statische Werte. Das ist übrigens nicht so interessant, wenn ich die Rückkehr abnehme . Also habe ich hier 100 sicher und ich habe zugeschlagen. Aktualisieren Sie die Kreise und hier oben, weil es kein C X gibt, das gesetzt wird D drei ist verwirrt. Und wenn Sie also einen Fehler wie diesen treffen , den Sie wahrscheinlich neunmal so tun werden, dass es anwesend ist, weil Sie vergessen haben, das Wort zurück hier zu verwenden , also stellen Sie sicher, dass es sich um einen Rückgabewert handelt, aber ich möchte dies nicht festlegen -Wert, der statisch sein soll. Das ist hier nicht der Sinn. Ich möchte festlegen, dass es von den Daten gesteuert wird. Also, stattdessen werde ich sagen, Verwenden Sie diesen D-Parameter und verwenden Sie d dot arm. Und so verweisen Sie auf Jason-Werte in JavaScript. Es ist D, weil das der Objektname ist, den wir hier Punktfeldname zugewiesen haben und denken Sie daran, wir haben ein Feld, das schlecht genannt wird, richtig? Der Prozentsatz der armen Menschen in diesem Bezirk. Also, wenn ich sage Rückkehr d Punkt schlecht, es heißt, verwendet dieses Feld für diesen Kreis-Wert, der an ihn gebunden wurde. Einer hat eine Zeit geschrieben. Also, wenn ich schlaffe, erfrischen, sehen, was passieren wird? Ich habe nicht mehr 500 Punkte übereinander, aber sie sind alle hell hier drüben stecken. Und warum ist das so? Nun, weil der Prozentsatz der armen Menschen in diesem ersten Punkt 4,98% ist, was bedeutet, dass ich d 3 gebeten habe , diesen Punkt 4,98 Pixel von links zu platzieren. Die nächsten neun Pixel von links. Nächste für die nächsten. Etwa drei, etcetera, etcetera , etc. Diese schlechten Werte sind sehr klein, also sind sie alle da drüben und auf der linken Seite stecken . Also, nur damit ich sie alle sehen kann. Was ist, wenn ich multipliziere sie alle mit Sagen 50 jetzt traf ich, aktualisieren und schauen, Jetzt kann ich sie sehen. Und weil sie ausgebreitet sind, sehe ich jetzt die Transluzenz. Es gibt nur einen Punkt Hier ist ein ganzes Haufen übereinander,genau hier , usw. Jetzt rennen sie vom Bildschirm. Also werde ich vorerst hauptsächlich zu einer 30 wechseln, nur damit ich sie sehen kann. Dies ist nicht die Art und Weise, wie Sie Datenvisualisierung verursachen Skalierungsangelegenheiten, oder? Du würdest nie manuell meine Nummer multiplizieren. Ähm, aber ich will nur sehen, wo sie leben und sehen, wie es sich anfühlt. Und es scheint zu funktionieren. Also ist es gut genug für den Moment. Nun, ich würde etwas sehr Ähnliches tun. Wo, anstatt ah zu verwenden, setzen Sie den Wert ah, harten Wert für die sehen, warum ich das mit einer Funktion setzen werde. auch Anstatt das arme Feld zu verwenden, möchte ichauchdas Zimmerfeld verwenden. Ich bin ein neuer Sagen Besen mal 50 in diesem Fall und ich bin ein Hit Refresh und Wow. Siehe, sieh mal, wir haben etwas, das wie eine Streuhandlung aussieht. Und so ist es wieder einmal, die Parameter manuell einzustellen, wissen Sie, in Bezug auf wie, wie viel auf die Multiplikation von Zahlen, mit denen seltsam ist. Aber es ist gut genug, um ein Gefühl davon zu bekommen, wie diese Daten aussehen. Und so habe ich arm. Du bist armer rechts. Und das haben Sie. Vergiss nicht, das ist eine andere seltsame Sache. Null auf der Y-Achse ist hier oben und hoch. Warum die Nummer hier unten ist. Also, mit anderen Worten, je armer Sie sind, desto weniger Zimmer haben Sie in Ihrer Wohnung, was Sinn macht. Aber natürlich geht es vertikal nach oben, was sich ein wenig seltsam anfühlt. Das werden wir später erledigen. Nun, endlich, werde ich auch für meinen Wert hinzufügen, genau die Größe der Blase, eine andere Funktion, und ich werde das Wertefeld verwenden, richtig. Der Preis für jede Wohnung Hit, aktualisieren. Und ich habe riesige Punkte und kleinere Punkte. Aber die Luft ist wirklich riesig. Sie sind alle übereinander, und ich könnte die leichten noch kleiner machen. Also werde ich mich wieder durch zwei teilen, nur um zu sehen, wie das aussieht. Und das ist gut. Also jetzt habe ich ein wenig nette Teeny Dots und ich habe schöne große Punkte Clustering. Und noch einmal, nur aus Sicht der Daten, macht alles Sinn. Weniger arm ist hier drüben, was bedeutet mehr wohlhabende, viel größere Punkte, was bedeutet höherer Wert, armer, kleinere Punkte, niedrigerwertige Häuser. Das ist nur, es macht Sinn konzeptionell, wenn wir darüber nachdenken, wie diese Art von Dingen aus Sicht der Daten funktionieren . Also das Letzte, was ich tun werde, weil ich meinem CSS hier oben nur einen Stil hinzufügen werde, weil ich möchte, dass meine Punkte, meine Sachen mit Klassenpunkt zwei Attribute mit ihnen verbunden sind. Die 1. 1 ist ein Strich, und ich setze die Strichfarbe manuell auf Schwarz ein. Aber ich werde auch einen Schlaganfall mit hinzufügen und das ist die Syntax dafür und der Schlaganfall mit ich auf ah eins setzen werde. Und ich glaube, es ist eins. Eigentlich eine Minute. Ich denke, ich muss ein PX machen und so denke ich, dass es standardmäßig ein Pixel in SPG macht. Und wenn ich das sage und ich traf, aktualisieren wir es wirklich nicht sehen, weil die Punkte bereits schwarz sind und die Kapazität 50% des Schlaganfalls ist, dass Sie wirklich den Unterschied nicht sagen können, aber wir werden das dynamisch später verwenden. Deswegen habe ich es auf dem Azaz so gesagt. Eine Klasse mit Stil. Ordnung, als nächstes werden wir anfangen, mit der richtigen Skalierung dieser Dinge zu arbeiten , mit einem anderen wirklich mächtigen Werkzeug, das in D drei integriert ist. 5. D3-Skalen verwenden: Alles klar, das wird ein großer. Das wird eine ziemlich komplizierte Lektion, eine Menge Code, aber ein Großteil seiner sich wiederholenden Lektion. Sobald Sie also die Konzepte bekommen, wird es relativ einfach zusammenkommen. Aber hier gibt es viel zu durchgehen. Sagen Sie einfach, Sie wissen also die letzte Lektion, die Sie kennen, haben wir diese Punkte auf dem Bildschirm platziert, indem wir die Dinge richtig multiplizieren. Wir hatten kleine Werte für die Armen, also ist er irgendwie mit 30 multipliziert, nur um ihn manuell auszubreiten. Und das ist einfach nicht der richtige Weg, es zu tun. Ähm, was wir wirklich tun müssen, ist ein Werkzeug zu verwenden, das in zwei D drei gebaut ist, um unsere Waagen dynamisch basierend auf den Daten und basierend auf der Menge an Speicherplatz, die uns zur Verfügung steht, und D drei hat diese erstaunlichen Werkzeuge dazu eingebaut. Und so sind das D drei Skalen, und es gibt eine Reihe von verschiedenen Möglichkeiten, Skalen und d drei zu tun. Ich werde nur einen von ihnen hier machen, tatsächlich ein Paar in dieser Lektion machen. Aber ich werde anfangen, eine zu verwenden, die Sie wahrscheinlich selbst ziemlich viel verwenden werden, was eine lineare Skala ist. Also das erste, was ich tun werde, ist, dass ich nur eine Variable namens X Scale erstellen werde, weil dieser Gail für unsere X-Achse horizontale Platzierung verwendet wird. Und ich sah Miss acht X Skala gleich d drei Punkte Skala linear. Und das liegt daran, dass dies eine lineare Skala ist, was bedeutet, dass es im Wesentlichen einen Startpunkt und einen Endpunkt haben wird. Und wenn Sie Werte irgendwo zwischen diesen beiden Zahlen übergeben, wird es im Wesentlichen etwas auf dem Bildschirm setzen, basierend auf irgendwo zwischen diesen beiden Zahlen das gleiche Verhältnis, das alle eine Sekunde rasieren begann. Eine Skala besteht also aus zwei Dingen. Da ist die Domäne, und dann gibt es auch die Reichweite. Und so wird die Domäne auch oft als Eingabewerte bezeichnet, und die Bereiche beziehen sich auf den Ausgabewert. Also wollte ich meine Domain und Reichweite manuell einstellen und einfach erklären, was sie sind. Die Grundidee hier ist, dass ich sage, ich werde eine Skala verwenden, und ich werde Werte und die Vergangenheit in Werten oder den Eingabewerten übergeben, und dann wird das diese magisch in X-Koordinaten umwandeln. auf der X-Achse zwischen Null und 500. Es ist die Art, wie Sie es tatsächlich verwenden, ist, anstatt zu sagen, dass d Punkt schlechte Zeiten 30 zurückkehren, wie wir es früher getan haben. Stattdessen sagen wir zurück ex Skala Didot schlecht. Und jetzt, wenn ich sage, ist in Ordnung, herauszufinden, wo die Dinge auf den X-Wert setzen, verwenden Sie diese Funktion namens X-Skala, mit diesem Kreise schlechten Wert. Und so ist das der Eingabewert. Irgendwo zwischen Null und 30 schätze ich. Oder vielleicht die Minimal- und Maximalwerte, die in diesem Feld verfügbar sind. Und so, anderen Worten, wenn es war, wenn d Punkt arm war 15 für diesen Kreis wird direkt in der Mitte sein. Zwischen diesen beiden linearen die Skala, die linearen Werte und daher wird zurückkehren und auf der X-Achse platzieren, dass genau ein 250 wieder ein halber Weg zwischen Null und 500. Der Eingabewert ist also der Datenwert und der Bereich, in dem der Ausgabewert die Platzierung in den X-Koordinaten ist . Also mal sehen, was passiert, wenn ich einfach hier speichern und Aktualisieren klicke. Sieh dir das an. So geht es den ganzen Weg potenziell von seiner kleinen Null bis es 500 sein sollte was etwa auf halbem Weg sein sollte. Warum geht es über 500 hinaus? Vielleicht muss ich Werte haben, die über 30 liegen und das ist, was eine lineare Skala ist. Es wird irgendwo zwischen diesen beiden Werten tun und Handle-Nummern verlassen, die über diese beiden Werte hinausgehen. Werfen wir einen Blick auf unsere Daten hier. Wenn ich hier rüber gehe und mein armes Feld betrachte und ich sortiere vom größten zum kleinsten. Sicher genug, der höchste Wert ist eigentlich etwa 38. Und deshalb erstrecken sich die Dinge über die Rechtshänder hinaus. Also, wenn ich uns ändere , ist es das. Ich dachte, Gast war das Maximum 40 Treffer, Speichern, Schlagen, Aktualisieren, Beobachten. Es passiert. quetscht alles vorbei. Jetzt gibt es keine Werte höher als 500. In der Tat ist das ein bisschen kleiner als 500, weil ein wenig unter 40, wenn das Sinn macht. Eine Sache, die Sie bemerken werden, ist, dass sowohl die Domäne als auch der Bereich, den Sie in einem Array übergeben, nachdem diese kleinen Klammern also ein Array mit dem ersten Wert und einem zweiten Wert ist. Wenn Sie Waagen machen und Fehler haben, funktioniert es einfach nicht, richtig? Oder vielleicht wirft es sogar einen tatsächlichen Fehler. Die Chancen sind ziemlich gut. Sie haben vergessen, dass die Klammern in diesen Klammern das Komma oder so etwas waren . Dies ist ein sehr häufiger Fehler, besonders wenn Sie gerade erst anfangen. Also haben wir noch , einige Probleme hier, nämlich, dass ich zuerst, wissen Sie, meinen Maximalwert bei 500 sitze, wenn ich meine Reichweite schreibe, richtig. Der tatsächliche Ausgabewert, wo es tatsächlich auf dem Bildschirm geht, dass Sie wirklich ein Tausender sein. Lassen Sie mich das vorerst ändern. Auch hier einfach manuell aktualisiert werden. Und sicher genug, um zu schauen, breitet es sich aus. Das ist die Macht der Waagen, richtig? Es macht es so viel einfacher, solche Sachen zu machen. Aber schlimmer als das ist, dass ich eine Vermutung mache. Ich vermute, der Mindestwert für dieses Feld könnte Null sein. Der Maximalwert kann 40 sein. , Die erste Vermutung,die ich hatte, war falsch, oder? Perfektes Beispiel für einen Fehler. Dies ist auch ein schlechter Weg, dies zu tun. Was wäre, wenn ich einen riesigen Datensatz habe und ich nicht wusste, dass die Minimal- und Maximalwerte noch schlimmer sind. Was wäre, wenn ich mit dynamischen Daten arbeite und diese Daten sich änderten. Und daher könnte sich das minimale Maximum im Laufe der Zeit verschieben, also kann ich diese Zahlen nicht manuell einstellen. Es macht einfach keinen Sinn, das zu tun. Was mich zum nächsten wirklich großen, mächtigen, wichtigen, hilfreichen Werkzeug bringt mächtigen, wichtigen, , das in D drei eingebaut ist, wo ich tatsächlich,wissen Sie, die Minimal- und Maximalwerte berechnen kann wissen Sie . Also noch einmal, ich werde eine Variable erstellen. Ich werde nur X Männer anrufen, Max, Max, weil das mir das Min Max für die X-Platzierung wieder geben, und ich werde d drei Punkt-Ausdehnung und d drei Punkt-Ausdehnung genau das tun, was ich sage. Es ist tatsächlich nur findet die Minimal- und Maximalwerte. Das ist nur die Syntax. So mache ich es. Während ich die Daten noch einmal übergebe, habe ich diese Variable namens data. Also übergebe ich das, und dann muss ich eine Funktion verwenden, um daraus herauszukommen. Was ich da rauskriegen will. Es ist eine gute Zeitverwendungsfunktion d nur weil das eine gute Norm ist. Aber ich könnte das d nennen, was ich wollte, und der Grund, warum ich eine Funktion tun muss, ist , weil diese Daten im Wesentlichen eine Sammlung von einer Reihe von Feldern sind. Ich muss d drei Punkt Ausdehnung sagen, welches Feld mir wichtig ist. Also möchte ich sagen, zurück d dot arm Nun, wenn ich einfach d dot schlecht zurückgegeben habe, wird es sehr verwirrt, weil in einer C S V-Datei alle diese Daten tatsächlich als Text gespeichert werden. Und so drei Dinge. All diese Werte, auch diejenigen , die sind wir kennen ihre Zahlen, weil wir ihn oder Menschen betrachten, können wir sagen, was die Zahl ist. D drei denkt, es ist Text es etwas. Es denkt, dass die Zeichenfolge 0.632 Also tatsächlich, um dies in eine Zahl zu konvertieren, und ich werde nur eine eingebaute JavaScript-Funktion namens Geldbörse float verwenden . Und so parse float verwendet buchstäblich JavaScript, um zu sagen, Nehmen Sie diese Zeichenfolge und geben Sie den schwebenden Wert zurück. Die tatsächliche Dezimalzahl, die diese Zeichenfolge 0,632 darstellt Wenn ich parse in I nt verwende, werden wir die Zahlen auf oder unten zwei ganze Zahlen runden, die wir nicht wollen, weil wir die tatsächlichen Werte wollen. Also Portemonnaie Float macht das einfach. Alles klar, jetzt habe ich den min max Wert. Und lasst uns das einfach , an die Konsole bringen,damit ich sehen kann, wie es aussieht. Und stellen Sie sicher, dass ich keine seltsamen Fehler sehe. Einige zu sagen, Konsolenpunktprotokoll min Max, gehen Sie zurück hier, gehen Sie zu meiner Konsole Hit, aktualisieren, und schauen Sie, ich habe kein Array. Sehen Sie die kleinen Klammern und mein Mindestwert ist ein 1,73 was auch immer. Und mein Maximalwert ist, dass 37,97 usw. Und so kann ich jeden einzelnen Wert sehen. Es funktioniert. Also habe ich diese Zahlen. Was mache ich mit ihnen? Nun, Sie könnten raten, anstatt manuell mein Minimum und Maximum für meine Domain zu setzen, werde ich stattdessen diese Variable verwenden. Einige Essay verwendeten die X Männer Max. Verwenden Sie den ersten Wert für die Eingabe als Minimum und verwenden Sie den zweiten Wert für das Maximum. Und so werden Sie feststellen, dass der erste Wert diese Null-Indexposition in einem Array und JavaScript ist Und der zweite Wert an der ersten Indexposition. Ein wenig verwirrend, wenn Sie kein Programmierer sind, aber das hatte nur Job-Skript funktioniert. Er verwendet Nullindizierung für den Zugriff auf das erste Element in einem Array. Und jetzt, wenn ich trage, aktualisieren Sie noch einmal, werden Sie jetzt sehen, dass es den ganzen Weg von Null jetzt geht, weil mein, wenn ich nicht, was mein Minimum ist, es wird es auf Null setzen. Was auch immer mein Maximum ist, es wird es bei 1000 platzieren und alles dazwischen wird alles dazwischen platzieren. Und so ist es Null. Aber vergessen Sie nicht, dies ist das Zentrum der Kreise bei Null. Daher läuft es von der linken Kante ab oder in diesem Fall läuft in diesem Fallvon der rechten Kante. Aber es ist genau auf Null oder 1000 für die kleinsten Ende größten Punkte platziert. Also funktioniert meine Ex-Skala wunderschön. Also werde ich genau dasselbe für mein Warum tun. Und meine r Summe würde dies einen Lyman nennen zurück Simon Collison oder Min Max. Und für mich, warum Min Max Werte. Ich will das arme Feld nicht. Ich will das Zimmer Feld und für meinen Arm und maximalen Wert wieder. Ich will die Armen nicht. Ich möchte den Wert, weil die Felder, die in diesem Fall die Y-Position steuern, und die Größe der Blase in diesem Fall. Und dann noch einmal, werde ich etwas Ähnliches benutzen. Ich werde zwei weitere Skalen erstellen. Ich werde eine Y-Skala erstellen und in unserer Skala und statt der X Men, Max, werde ich den Wyman Max benutzen. Also für meinen Wyman Max werde ich 0 bis 300 sagen. Wir werden sehen, wie das vorerst aussieht. Und sie für meine Waage. Ich werde den Arm und Max anstelle der X Men benutzen. Max. Und ich werde nur manuell sagen, dass ich will, dass meine Kreise nicht kleiner als zwei sein sollen oder sagen wir, dass sie größer als 10 Radius von zehn Durchmesser von 20 sind. Und so mache ich wieder dasselbe, was ich hier unten getan habe. Ich sage, verwenden Sie die y-Skala mit diesem Wert. Und ich benutzte unsere Waage mit diesem Wert. Und ich brauche diesen Divisor nicht mehr. Wenn ich also speichere, traf ich, aktualisiere und schau dir an, was wir haben. Also gehen wir den ganzen Weg von ganz oben runter, bis ich es nur zu 300 gesagt habe. Ich schätze, meine Höhe ist Was ist das? 500. Es ist nur ändern, um 500 sehen, was passiert. Ja, jetzt geht es den ganzen Weg nach unten von den ganzen Weg nach oben, den ganzen Weg nach links den ganzen Weg nach rechts, und so verbraucht den ganzen Raum, den ich mir zur Verfügung habe, was ein toller Ausgangspunkt. Aber, weißt du, es läuft von der Kante. Das ist komisch. Es gibt also eine einfache Möglichkeit, das zu beheben . Weißt du, ich sage es, bei Null zu beginnen und bei 500 zu enden, hat Null angefangen und 1000 eingegeben. Aber warum setze das nicht wirklich so, dass es diesen Mawr elegant behandelt und wie ich das tun werde , da ich meine Breite und Höhe als Variablen hier oben habe, werde ich eine neue Variable namens Margin auf meinem Set That auf 30 hinzufügen. Sagen wir es. Die 30 Pixel der Marge in meinem Diagramm sind das, was ich suche. Und so will ich jetzt nicht, dass mein Mindestwert auf Null setzen. Ich will es am Rand setzen. Mit anderen Worten, 30 Pixel von links und dann mein Maximalwert statt 1000. Ich möchte das mit minus dem Rand löschen, also wird es 970 Pixel sein. Aber der Grund, warum ich das mache, ist, was, wenn ich die Größe verdoppeln wollte, könnte ich diese Zahl einfach ändern und es würde automatisch herausfinden, wie ich alle meine Anpassungen hier unten vornehmen kann. Und so ähnlich werde ich für meine warum Werte sagen, die ich wollen, dass der Mindestwert, anstatt wieder bei Null zu sein, die Marge in diesem Fall anstelle von meinem Hintern Marge ist, werde ich sagen, Höhe, meine höchste Marge weil ich nicht davon rede, mit meinem Weisen so zu gehen. Es ist der ganze Weg von hier nach hier. So hatte Hit gespeichert, aktualisieren. Und jetzt wird alles um 30 Pixel von den verschiedenen Rändern verschoben. Aber das bringt eine wichtige Art interessanter Sache auf sich. Und das habe ich schon kurz erwähnt. Ich denke, wo , wo wir weniger arm haben, so wohlhabender, armer nach rechts, und je Armer haben weniger Zimmer. Aber es geht hoch, und das fühlt sich irgendwie seltsam für die Leute an. Sogar es ist eine niedrigere Zahl, weil die Y Null hier oben und hoch weise hier unten. Also, wie beheben wir das? Wissen Sie, die Verwendung von Waagen wird so einfach, es zu beheben, weil ich nur sagen muss, weißt du was? Für meine Eingabewerte, anstatt meinen Minimalwert zu haben, und das ist mit dem weitesten, den Sie kennen, dem niedrigsten verbunden . Warum, was an der Spitze und mein Maximalwert mit dem höchsten Y ist. Ich kann diese einfach austauschen. Ich kann sagen, setzen Sie maximal eins an der Spitze und die minimale an der Unterseite. Und ich hätte diese gleich lassen und sagen können, Tauschen Sie diese beiden. Aber entweder einer arbeitet. Wenn ich auf „Aktualisieren“ klicke,wird die ganze Sache vertikal umkehren. Wenn ich auf „Aktualisieren“ klicke, Und jetzt, ja, ärmer ich bekomme, desto weniger Räume, richtig, weil normalerweise die Skala für die Weisen lesen, ausgehend von einer niedrigen Zahl Zehe, eine hohe Zahl. So hat es das einfach automatisch sehr einfach für mich gemacht. Also sind Waagen nicht nur für die Platzierung, Sie können andere Dinge mit Skalen machen, und ich werde hier eine andere Art von Skala verwenden, und ich werde diese eine siehe Skala nennen, weil ich diese für die Farben verwenden werde Also anstatt eine lineare Skala zu verwenden, werde ich uns ungewöhnliche Skala verwenden. Das ist also Skala Punkt-Skala orginal. Und das hat auch eine Domäne und peitscht ein Bereich hat immer noch Eingabe- und Ausgabewerte. In diesem Fall ist die Domäne im Wesentlichen hartbeschichtete Einzelwerte. In meinem Fall, was ich wieder diese Dynamik machen könnte. Ich wollte, aber es gibt keine Notwendigkeit, und die Ausgabewerte sind im Wesentlichen direkt mit jedem von ihnen verbunden. Eine lineare Skala geht also überall von hier nach hier. In der Tat, wie Sie bereits gesehen haben, wird es sogar außerhalb der Grenzen der Nachfrage gehen, die Sie bieten. Während eine gewöhnliche Skala buchstäblich den ersten Wert und dann den Bereich mit dem ersten Wert in der Domäne und den zweiten Wert mit zweiten Werten des direkt gebundenen. Das ist, was ich hier tun werde, ist, dass ich ihm nur einen Hexi-Dezimalwert des Farbwerts geben werde . Und ich habe für meinen maximalen Wert, den ich die Dinge orange für den Minimalwert drehen werde. Sie werden diese Farbe grau sein. Und so werde ich das hier benutzen, ist zu bilden. Ich fülle Farbe, und so werde ich dies in eine Funktion ändern, Andi, Andi, wie Sie sich vorstellen können, geben C-Skala zurück. Und in diesem Fall werde ich den D Dot Charles benutzen. Und was hier passiert, ist, dass ich sage, wenn du dich daran erinnerst, dass das Charles Field, wenn ich hier zurück zur Tabelle gehe, das hier die Hecken, Nullen und Einsen ist . und wieder sehen Sie eine, was bedeutet, dass dieser Bezirk in der Nähe des Charles River ist. Und so sage ich buchstäblich, entweder zur oder eins von diesem Feld zu übergeben, wenn es mir Null einen grauen Wert übergab, wenn es ein Eins ist, übergeben Sie mir einen orangefarbenen Wert. Und so jetzt, das jemals unterschrieben, dass ich zurückgehe, ich traf, erfrischen und boom. Da haben wir es. Wir haben orangefarbene Punkte, wir haben graue Punkte. Jetzt sind die orangefarbenen Punkte aus zwei Gründen ein wenig schwer zu sehen. Eins gibt es Deckkraft. Und das ist einfach genug, um einen zu reparieren. Fügen Sie etwas anderes hinzu, anstatt dies manuell festzulegen. Wieder einmal kann ich eine Funktion verwenden. Und so werde ich wieder die gebundenen Daten verwenden. Und anstatt in einem Lamm zu sitzen, um zu sagen, dass Dida zurückkehren, Charles gleich eins. Wenn ja, geben Sie eins zurück, wenn nicht zurück, sagen wir 0,3. Wenn Sie also nicht mit der Abkürzung, wenn else Anweisung in JavaScript vertraut sind, sieht es so aus. Das sagt wörtlich, wenn das wahr ist, Dita Charles gleich eins. Dies sagt Ihnen, dass es eine if-Anweisung ist. Dann tun Sie dies andernfalls und wird diesen Wert zurückgeben. Basierend auf was? Weißt du, was hier wahr ist? Also, jetzt noch einmal, Hit, Auffrischen und Boom diese Luft perfekt undurchsichtig Während diese sind schön und verblasst zurück Sehr wenig ein Pass ity Aber wie Sie sehen können, Ich habe immer noch ein Problem, weil diese orange Punkte sind hinter einigen dieser schwarzen Punkte und ich möchte wirklich, dass die orangefarbenen auffallen. Und vor allem, wenn wir einen wirklich kleinen orangefarbenen Punkt hinter wie mehrere schwarze Punkte hätten, könntest du ihn vielleicht gar nicht sehen. Das ist also auch flexibel und die Art und Weise, wie es flexibel ist, besteht darin, eine sehr wichtige Sache über svg zu verstehen . SPG dreht sich alles um die Bestellung. Die Elemente werden im Dom auf der Seite angezeigt. Also hat die erste Datenreihe dieses erste Dotnet es hier abgelegt, die 2. 1 ist hier. Die 3. 1 ist da. Und wenn alle drei übereinander wären, wäre diese 3. 1 hier buchstäblich oben auf diesem hier. Dieser wäre nicht sichtbar, wohingegen dieser sichtbar wäre. Und so geht es um die Platzierung in der Bestellung. Also, das sagt mir, was, wenn ich die Daten sortiere, so dass alle Daten vom Charles River Feld bestellt wurden und alle Nullen zuerst kommen, alle grauen und alle orangefarbenen später kommen, also werden die orangefarbenen dann oben auf sein Diese grauen. So Sortierung und Java-Skript ist ein wenig seltsam, die Syntax. Aber es ist nicht schwer. Es ist nur ein bisschen komisch und manchmal etwas verwirrend. Der schnelle und einfache Weg zur Sortierung besteht also darin, einfach die eingebauten Jobs zu verwenden, Funktion zu erhalten. Ich gehe nur zu ihnen, um zu sagen, dass Daten gleich Datenpunktsortierung sind, und was Sie hier tun, ist noch einmal, Sie verwenden eine Funktion und sie sind zwei Parameter, die in der Funktion verwendet werden. Und im Wesentlichen liest es sich einfach so und ich erkläre es einfach. Charles, minus hat Charles geschlagen. Also im Wesentlichen, was datiert Sortierung tut und JavaScript ist. Es geht durch die Daten eine Zeile, ein Element der Zeit, tatsächlich Art von zwei Elementen zu der Zeit, die erste Anzahl von Treffern und dann die zweite oder das erste, was es die erste Zeile der Daten trifft . Lassen Sie uns es in der zweiten Datenreihe nennen und indem Sie sagen, Rückkehr acht aus, Charles minus geschlagen Charles erzählte nur Javascript. Wenn es die niedrigen Zahlen sind, machen Sie ihn zuerst. Wenn es die großen Zahlen können an zweiter Stelle kommen. Wenn ich umkehre, dass Charles minus acht Charles ausschlagen würde, würde ich es tatsächlich umdrehen. Es mag also ein wenig verwirrend erscheinen. Auf jeden Fall. Suchen Sie in einem anderen Tutorial nach Sortierung und JavaScript, um mehr darüber zu erfahren. Aber im Moment, mach dir keine Sorgen darüber. Dies ist die Syntax ist, wie es funktioniert. Also noch einmal, jetzt für diese, , schauen Sie sich diese Punkte hier drüben an, die irgendwie hinter diesen anderen Punkten liegen. Wenn ich auf Aktualisieren klicke. Jetzt sind sie an der Spitze, weil sie später kommen, wenn sie von d drei auf den Campus auf die Bühne gedrängt , wurden,und ich wollte eine andere Sache im Code sehr schnell machen . Wir haben hier ein bisschen über den Variablenbereich gesprochen, und wir haben unsere globalen Variablen hier oben. Wir haben hier ein bisschen über den Variablenbereich gesprochen, und wir haben unsere globalen Variablen hier oben. Wir haben hier ein bisschen über den Variablenbereich gesprochen, Ich werde eigentlich meine Ex-Skala hinzufügen. Und warum Variablen hier skalieren? Weil ich die später außerhalb dieser Funktion verwenden muss. Das sind nur zukünftige Beweise. Ich weiß, ich will eine Referenz, die anderswo haben. Und jetzt, wenn ich ihn hier oben deklariere , dann werden sie mir später zur Verfügung stehen. 6. D3-Achsen verwenden: In Ordnung. Also haben wir noch einige andere Dinge, die wir in diesem Projekt optimieren wollen. Und, ähm, tatsächlich bemerkte ich einen Fehler, den ich vorhin gemacht habe. Wenn Sie sich erinnern, wenn wir uns den Code ansehen, ansehen, , ich hatte diese Klasse diese Punktklasse hinzugefügt, und ich hatte den Strich auf diese Farbe gesetzt. Aber ich habe Anführungszeichen um den Farbwert, und Sie bemerken, dass wir den Strich hier nicht sehen. Und so klassisches Beispiel für die Art von Fehler, die ich die ganze Zeit machen. Weißt du, wenn ich es nicht tue, brauchst du keine Anführungszeichen um diesen Farbwert, also muss ich die herausnehmen. Jetzt, wenn ich auf Aktualisieren klicke. Und jetzt können wir diesen schönen schwarzen Umriss um unsere orangefarbenen Punkte sehen. Und weil ihre 100% Deckkraft sehe ich sie, diese anderen, die, du weißt schon, im Wesentlichen geringere Rapazität sind du weißt schon, . Man merkt es nicht wirklich, aber es ist eigentlich sehr subtil da, weil nicht vergessen, das ist eigentlich eine graue Farbe, glaube ich. Lange Geschichte kurz. Ich wollte das nur schnell reparieren. Also, was wir in dieser Lektion tun werden, ist die Zugangsleitung hinzuzufügen. Also hier ist die fertige Version und wir haben, wissen Sie, unseren Maximalwert Minimalwert. Wir haben unsere kleinen vertikalen und horizontalen Linien. Weißt du, wir haben Äxte. Und wie erstellen Sie einen Zugriff? Nun, wissen Sie, wir könnten es einfach manuell erstellen, richtig? Ich könnte buchstäblich manuell eine horizontale Linie zeichnen, die hier beginnt und hier manuell endet. Zeichnen Sie diese kleine Linie hauptsächlich. Lassen Sie diese kleine Linie fallen, zeichnen Sie hauptsächlich die Etiketten. Es wird gesagt, es ist eins nach dem anderen. Das wäre irgendwie ein Schmerz im Hintern. Warum würdest du es so machen? Das ist einfach verrückt. Zum Glück natürlich sagen, werde ich natürlich sagen,D drei hat Werkzeuge eingebaut, um dies sehr leicht zu tun. So ähnlich wie die letzte Lektion. Das hier wird ziemlich involviert sein. Es wird eine Weile dauern. Äxte sind Es ist ein großartiges Werkzeug. In zwei gebaut. D drei macht ein paar Schritte, aber wieder, kopieren Sie einfügen. Es ist eigentlich ziemlich unkompliziert Konzept. Es dauert nur ein paar verschiedene Schritte in ein paar verschiedenen Codezeilen, um es zu tun. Also lassen Sie mich zurück zu unserem Arbeitsdokument hier und unserem Code, und das erste, was ich tun muss, ist, dass ich eine Variable erstellen werde, die ich einfach X-Achse nennen werde . Und so werde ich sagen, X Zugang gleich D drei Punkt Hoffnungen Zugang unten und was ist nicht Boston unten. Und ich wollte meine Ex-Skala verwenden. Also, was passiert hier? Ich erstelle ein Objekt, und ich sage, ich möchte D drei eingebaute Zugriffs-Bottom-Methode verwenden und ein Zugriffs-Boden ist buchstäblich nur ein unterer Zugriff. Das ist die Art von Zugang, die normalerweise am Ende der Diagramme lebt, was es ist eine X-Achse, oder? So beziehen wir uns auf sie. Und Sie werden sehen, dass es standardmäßig nicht am unteren Rand der Seite endet. Wir müssen es bewegen. Aber wir müssen auch sagen, welche Skala zu verwenden ist, denn dann wird D drei es automatisch richtig machen mit der Verwendung dieser Domäne und des Bereichs , die wir oben in der Skala eingerichtet haben. So hilft es irgendwie wirklich, Ihre Achsen auf der Straße zu optimieren, wenn sich Ihre Daten ändern, und das werde ich Ihnen in einem Moment zeigen. Das nächste, was ich tun muss, ist, dass ich ein anderes Objekt erstellen muss, das ich X SG nennen werde und was die X-Achse G ist und was das enthält, ist ein SPG-Gruppenelement. So spg dot upend G und so gruppierte Elemente. G-Elemente sind wirklich gute Dinge wissen, wie man benutzt. Im Wesentlichen, wenn Sie Dinge in ein Gruppenelement in SPG einfügen, dann können Sie irgendwie auf dieses einzelne gruppierte Element als ein einzelnes Element handeln. Beispiel zumBeispiel Wenn ich zumBeispielhierher zurückgehe, besteht diese Achse im Wesentlichen aus zwei Etiketten. Einer der oberen der unteren zu Häkchen, eine der unteren eine der oberen und die vertikale Linie, die sie verbindet. Es ist Das sind fünf verschiedene Objekte, wenn Sie sie hauptsächlich erstellen wollen. Und selbst wenn Sie eine manuell erstellen möchten, könnten Sie. Aber Sie möchten ihn in ein G ein gruppiertes Element einfügen, so dass Sie sie dann tatsächlich als ein einzelnes Objekt verschieben können. Vielmehr haben alle einzeln zu entfernen. Das wäre einfach verrückt, oder? So lange Geschichte kurz, ich erstelle mein gruppiertes Element. Ich werde dieser Gruppe tatsächlich ein paar genaue geben, also gib es sogar auf i d. Und ich wollte die X-Achse für mein i d anrufen, damit ich später darauf verweisen kann, und ich werde auch eine Klasse und die Klasse hinzufügen. Ich rufe einfach Zugang an. Und das liegt daran, dass ich keine X-Achsenklasse haben muss. Das unterscheidet sich von meiner y-Achsenklasse, weil sie beide die gleiche Farbe und visuelle Behandlung haben usw., sowohl für die Etiketten als auch für die Linien. Eine Share-Klasse wird also den Trick dafür tun. Und dann muss ich das letzte, was ich tun muss, im Wesentlichen das Gruppenelement nehmen, das ich dieses Objekt erstellt habe, und den Zugriff aufrufen, den ich auch erstellt habe. Es gibt nur diese Syntax ist, wie es funktioniert. Lass dich nicht zu aufhängen. Das ist nur, wie funktioniert es so jetzt, wo ich die Achse erstellt habe? Hinzugefügt werden, wissen Sie, auch ein Gruppenelement mit ein paar Attributen erstellt und dann dieses Gruppenelement verwenden, um den Zugriff aufzurufen. Wenn ich hier zurück gehe, drücken Sie aktualisieren Hoffnungen, dass die neue auf sorry Hit, aktualisieren und Boom. Wir haben ein Zitat unquote Bottom Access, obwohl es an der Spitze ist und Sie werden feststellen, dass ein D drei einige ziemlich coole Dinge gemacht hat, wissen Sie. Zunächst einmal hat es automatisch die Skala verwendet, so dass es bei allem beginnt. Dieser Mindestwert ist 1,7 und geht den ganzen Weg bis zu 38 ish, bei dem Sie richtig sagen können Dies geht von 30 zu 35. Es ist so breit. Das ist weniger, warum dies eine Lüge wie drei ist, nicht fünf Unterschied. Es hat auch automatisch Teilstriche in einigen regelmäßigen Abständen hinzugefügt und sogar die Werte rechts hinzugefügt. Es macht also Dinge, die auf Algorithmen basieren, die sehr intelligent sehr mächtig sind. Ich möchte die eingebauten Standardwerte nicht verwenden, die wir später beheben werden. Aber es ist ziemlich gut, oder? Dies ist ein wirklich guter Anfang, Also das nächste, was ich tun möchte, ist, dass ich den Zugang zum unteren Rand des Diagramms verschieben wo es hingehört. Ich will einfach nicht wirklich, wirklich an der Spitze leben. Es ist eine Norm, dass Ihr Ex-Zugriff am unteren Rand des Diagramms lebt und Ihre Y-Achse links vom Diagramm liegt. Der Weg, dies zu tun, besteht darin, etwas namens Transform zu verwenden, weil wir im Wesentlichen wollten, dass wir diese ganze Gruppe verschieben wollen . Nachdem wir den Zugriff aufgerufen haben, können wir einfach ein anderes Attribut hinzufügen, das eine Transformation ist Attribute und was ich die Übersetzungsmethode innerhalb der Transformationsattribute und Übersetzungsmethode verwende, sieht so aus. Jetzt wirst du es bemerken. Zuallererst ist dies eine Zeichenfolge. Also nenne ich Transformationsattribute und übersetze es und übersetze im Wesentlichen übersetzt dass ich es verschiebe Null Pixel auf der X-Achse und 100 Pixel auf der Y-Achse. Also sage ich, bewegen Sie nicht alles horizontal, sondern verschieben Sie es 100 Pixel nach unten. Wenn ich also auf Aktualisieren klicke, diese ganze Zugriffsgruppe, sollte sich das Ganze 100 Pixel nach unten bewegen. Wenn ich also auf Refresh Boom dort klicke, hat iss richtig genau das getan, was ich tun wollte. Also, wie Sie sich vorstellen können, möchte ich es nicht wirklich manuell verschieben. 100 Pixel Ich könnte es manuell verschieben. 470 Pixel, rechte Mitgliederhöhen, 500 Meilen, 30 Rand, und es würde genau hier gehen. Aber warum sollte ich hart codierte Werte verwenden, wenn sich einige dieser Werte auf den Straßen ändern können und sagte, ich ändere tatsächlich diese hart codierte Zahl und verwende die Variablen, die bereits so festgelegt sind, wie ich das tun werde, Wenn Sie mit Java-Skript vertraut sind, schwächen Sie tun, was String-Verkettung genannt wird, was ein großes Wort ist, nur um zu bedeuten, dass ich meine Zeichenfolge nehmen und sie mit Variablen kombinieren und ihn irgendwie als String wieder zusammensetzen möchte . Und der Weg, dies zu tun, ist im Wesentlichen, wissen Sie, ich habe ein öffnendes Zitat und ein unendliches Zitat, und was ich tun möchte, ist, das Zitat zu beenden und das Zitat erneut zu öffnen und dann mit Pluszeichen getrennt und dann in der Mitte hier, werde ich die Variable hinzufügen. Also, wenn Sie sich erinnern, die Variable ist, dass wir unsere Höhe minus Marge haben. Sie werden also bemerken, dass ich in Klammern setze, denn wenn ich es versucht habe, kann Cat eine Schnur machen und nicht die Klammern um sie herum setzen? Manchmal wird es seltsame Dinge machen, wo es sein wird, du weißt schon, Höhe minus Marge. Und es wird tatsächlich enden. Sind diese zwei Zahlen irgendwie zusammengesetzt, und es wird am Ende eine große Zahl sein, anstatt die Subtraktion zuerst durchzuführen, dann diese 470 Pixel in diese Zeichenfolge zu setzen. Sie ProbierenSiees aus, experimentieren Sie damit und Sie werden sehen, wovon ich rede. Die lange Geschichte kurz. Wenn ich das jetzt mache, wenn ich gespeichert und auf Aktualisieren geklickt hätte, geht meine Zugangslinie nach unten, es ist genau dort, wo ich es will. Jetzt habe ich ein Problem, bei dem ich einen Kreis habe, der ihn kreuzt , denn wieder einmal wird dieser genau hier zentriert platziert, und wir werden uns später damit befassen. Was ich jetzt tun möchte, ist, dass ich dieses Problem beheben möchte, wo ich wo ich interessante Teilstriche habe. D drei tut einfach automatisch für mich, was großartig ist, aber es gibt ein paar Probleme hier. Eins ist, dass du weißt, es gibt keinen Grund für diesen Tick-Markt 15 Wie wen kümmert sich, wo 15 standardmäßig ist? Ich empfehle, dass Sie bei Datenvisualisierungen als ein paar Teilstriche verwenden, da Sie möglicherweise davonkommen können. Meine Standardposition ist also immer, die untere Nummer und die obere Nummer und nichts anderes dazwischen zu haben. Sie müssen mich davon überzeugen, zusätzliche Häkchen und zusätzliche Werte einzubeziehen , denn wenn sie keinen Zweck erfüllen, dann sollten sie nicht da sein, weil sie wirklich eine visuelle Ablenkung sind. Sie nehmen den Blick weg von den Daten , wo Sie Ihre Zielgruppe konzentrieren möchten. Es gibt also eine Reihe von verschiedenen Möglichkeiten, dies zu tun. Eine Sache istnatürlich in zwei D-drei Achsen gebaut, natürlich in zwei D-drei Achsen gebaut, weil sie so toll sind, ich Dinge tun kann, sagen wir, um diese, wissen Sie, X-Achse hinzuzufügen wissen Sie, . Er geht d drei Punkt überschüssige Böden x Skala. Ich könnte einfach sagen Zecken Null. Und wenn ich speichere und drücke, aktualisieren Sie Jetzt sehen, was passiert. Ich habe keine Ticks, keine Etiketten, keine zusätzlichen Häkchen, nur das Anfangs- und Endestrichen so und dass ich manuell die untere und die obere Nummer hier platzieren konnte . Aber das ist nicht der nützlichste Weg. Stattdessen kann ich etwas namens Tick-Werte verwenden. Und so Tick-Werte ist irgendwie, weil ich manuell sagen kann, ich will Tickets Werte bei, sagen wir, drei Peitschen drei und 12 und Sie werden feststellen, dass diese Luft in einem Array Okay, also nur, Sie wissen Sie , wieder, wenn Sie das tun und etwas Seltsames passiert, vergessen Sie wahrscheinlich die Klammern im Komma. Und wenn ich sage, setzen, nehmen Sie Werte bei drei und 12 und ich drücke Refresh Look, gibt es ein Häkchen, das bei drei ankreuzt. Und dann gibt es 1 bis 12 Sie wissen, und Aiken, weil es ein Array so viele von denen ich will, dass ich 33 wollte. Bumm! Es sind jetzt 33 Jahre alt. Natürlich ich keine zufällig platzierten Tick-Werte. Das ist irgendwie seltsam. Stattdessen möchte ich nur eine der unteren und eine an der oberen Nummer haben. Und vergessen Sie nicht, dass wir bereits eine Variable haben, die unsere unteren und oberen Zahlen enthält. Rechts sind Minimal- und Maximalwerte, also kann ich diese Variable kopieren. Anstatt dies manuell zu tun, kann ich sagen, Verwenden Sie mein Zelt X Men Max, First Value und My X Men Max Wert, zweiten Wert speichern. Und jetzt habe ich eine unten und eine von oben, und Sie werden feststellen, dass es standardmäßig ganze Zahlen verwendet. Das ist es, was du weißt. Die D D D drei Zugriffsmethoden verwenden. Es gibt eine Möglichkeit, es zu ändern, um den Float-Wert zu verwenden, aber ich werde es jetzt nicht stören. Wir können diese Art von Dingen später immer optimieren, so dass das nächste, was ich beheben möchte, um visuelle Ablenkung zu reduzieren, ist dieKolonialplayer, weil ich auch dringend empfehlen, dass Sie nie schwarz vor einem weißen Hintergrund verwenden Ihre Zugangslinien oder Etiketten wieder verwenden, möchten Sie den Kontrast reduzieren, Ablenkung reduzieren. Sie möchten nicht, dass sich Ihre Zielgruppe auf Ihre Zugangslinien und Beschriftungen konzentriert. Sie müssen ihn lesen können, aber sie müssen nicht auf sich aufmerksam machen. Also wurde ich empfohlen, einen ähnlichen Regen zu verwenden, den wir bereits ah Stil erstellt haben. Wir haben diesen Objekten eine Klasse hinzugefügt und so kann ich eine Klasse in meinem CSS mit Punktzugriff erstellen. Und wenn ich tun muss, muss ich Punktzugriffslinie und Punktzugriffspfad sagen. Und ich werde den Ach Schlaganfall für beide so ein netter wie Ray sein. Also, warum habe ich Don Access Line gemacht und Zugriffspfad bekommen? Nun, wenn wir uns den tatsächlichen Zugriff im Inspektor rechts ansehen, die Elemente hier das Gruppenelement, das alle richtigen Dinge enthält. Und wenn ich die Lippen öffne und du siehst, hat es die Klassenachse. Wenn ich das öffne, gibt es einen Pfad, so erstellt D drei die horizontale Linie und es gibt auch jedes Häkchen und jedes Häkchen ist eine Gruppe, die aus einer Linie besteht, die der vertikale Verbinder und der Text ist. Und so aus welchem Grund auch immer, D drei schafft Pfade und Linien. Und so müssen beide diese, wie, Anmut, Anmut, Strichfarbe haben. Und da ist auch der Text, der das eigentliche Label selbst enthält. Und so, während ich dabei bin, könnte ich auch Punktachsen-Text sagen. Und ich möchte, dass die Füllfarbe verwendet wird. Und denk dran, ich muss Phil benutzen, nicht das Wort Farbe hier. Wenn ich Farbe benutze, wird nichts passieren. Also wieder, guter Ort, um Ihren Code zu debuggen. Sie werden wahrscheinlich Farbe standardmäßig verwenden, wenn Sie es viel HTML und CSS tun, können Sie nicht. Du musst Phil benutzen. So füllen Sie mit dem gleichen grauen gehen zurück drücken Sie aktualisieren. Und jetzt sind sie nett, wie Preise lesbar, aber es ist nicht ablenkend. Also lasst uns jetzt dasselbe für die Y-Achse tun, richtig? Also werde ich zurück zu meinen Achsen gehen und ich werde Oh, warum Access-Objekt erstellen ? Und anstelle einer unteren Skala verwendete es eine sogenannte linke Skala. Und anstatt die x-Skala zu verwenden, werde ich das Y-Skala-Objekt verwenden. Wie viele sind meine warum Min Max Werte? Und ich werde ein anderes Objekt erschaffen, das heißt „Warum Access G , und das natürlich benutzt natürlichmeinen Arm in einem Bruder. Weisen Sie ihm eine Vorstellung davon zu, warum Zugriff und wieder die gleiche Klasse hat. Und dann werde ich das benutzen. Warum? Gruppe zugreifen? Ich rufe das Y-Achsenobjekt an. Und anstatt Null horizontal und 470 oder was auch immer es in diesem Fall vertikal ist , möchte ich dieses Ding haben, anstatt hier drüben am Nullpunkt zu sein , wo es standardmäßig sein würde. Ich will mich überhaupt nicht vertikal bewegen. Ich möchte es horizontal bewegen. 30 Pixel Also, wenn ich hierher zurückgehe, anstatt die Verunreinigung auf diesen Wert und Lachs zu tun, um es auf dem ersten Wert zu tun, also jetzt wird es es horizontal und nicht vertikal bewegen. Aber natürlich will ich es nicht bewegen. Höhe minus Rand Ich möchte es nur 30 Pixel von links bewegen. Und so werde ich nur sagen, verschieben Sie es über den gleichen Betrag wie die Margenvariable. Ich könnte Hagit hart Code um 2 30, wenn ich wollte, aber ich werde es nur als Marge für jetzt tun. Also jetzt, wenn ich traf, Refresh Dort es ISS. Jetzt werden Sie bemerken, dass Sie wissen, ich habe wieder Kreise, die Linien kreuzen, weil sie wieder genau die gleiche Stelle platziert sind , die wir später reparieren werden. Und die Achsen selbst kreuzen einander, was nicht unbedingt ein Problem ist. Aber wir werden das beheben, wenn wir einige der anderen Dinge beheben. Und das ist ein weiterer Fall, in dem die Achsen , wissen Sie, es viel einfacher machen, als Sie vielleicht anders denken. Und was ich tun werde, ist, dass ich eigentlich wissen Sie, wir haben unsere Variablen hier oben mit Höhenmarge. Es sagte, ich werde eine weitere Variable hinzufügen, die ich nur unsere Werte nennen werde. Und ich werde das einfach als ein Array aus einer Liste von zwei Dingen in diesem Fall zuweisen, die zwei und zehn sein wird . Wenn Sie sich erinnern, haben wir unsere minimale und maximale Blasengröße gemeint. Die kleinste ist zwei Pixel und Radius. Der größte ist 10 Pixel. Und so möchte ich diese Werte an ein paar verschiedenen Stellen verwenden. Der erste Ort, an dem ich es benutzen werde, ist meine Skala festzulegen. Also, wenn Sie sich für unseren Bereich rechts erinnern, unsere Ausgabewerte, sagten wir, setzen Sie es von links. Wissen Sie, der Mindestwert wird genau 30 Pixel von links sein, und der Maximalwert wird die volle Breite von minus 30 sein. So 1001 ist eine 30, die 9 70 ist und das ist in Ordnung. Aber wenn ich alles richtig schieben will, will ich, dass ich diesen Kerl nicht hier will. Ich will, dass er ein bisschen rüber geschoben wird. Und wie viel will ich, dass er rüber geschoben wird? Warum man buchstäblich über geschoben, genau die gleiche Menge wie der Radius rechts die Hälfte der Breite des Kreises. Denn dann wird es hier drüben sein, und der Rand davon wird genau am Rand des Zugriffs selbst sein. Also kann ich das mit unseren Werten tun. Also kann ich sagen, setzen Sie den minimalen X-Wert auf die X-Koordinaten am Rand, plus unsere Werte, das Ding, das ich Maximum erstellt habe. Also, mit anderen Worten, es wird immer leid sein. Nicht 10 nur eine. Es wird immer in diesem Fall sein, weil es Werte auf 10 gesetzt sind. Es wird ein 30 plus Dutzend von 40 Pixeln über und dasselbe die Breite minus Marge minus unsere Werte sein. Maximaler Wert. Und jetzt, wenn ich treffe , wird alles nur ein bisschen auftauchen, oder? Also buchstäblich schlägt dieser Typ jetzt den Rand und ich könnte das optimieren. Ich kann ein oder zwei Pixel hinzufügen, wenn ich wollte, aber das ist etwas, das Sie sich später anpassen können. Also habe ich meine Werte. Ich füge es diesem Jahr hinzu, und ich werde das Gleiche unten tun, weil ich es nicht von oben will. Ich wollte die Spitze plus den maximalen Radius, und ich will es wieder. Die Höhe minus Rand minus diesem Radius. Also nochmal, wenn ich jetzt auf „Aktualisieren“ klicke, wird alles ein bisschen vertikal hineinschieben und du wirst bemerken, dass einige diesen Kerl schließen würden . Also nicht immer, äh, Hervorhebung, wenn ich hin und her gehe. Und ich könnte diese auch ändern, weil warum, sagte Thies, hart codiert, wenn diese manuell eingestellt werden könnten oder dynamische Daten missbrauchen, also werde ich den minimalen und maximalen Wert verwenden, den ich von meinen Variablen Hier unten. Also noch einmal, speichern Sie Treffer, aktualisieren. Nichts sichtbar. Ändern Sie ihre Ursache. Wir haben schon gesehen, was wir früher getan hatten. , Eines der Dinge,die Sie bemerken werden, ist, dass dieser Kreis, wissen Sie, nicht einmal bis zum Rand ist, weil dieser Kreis kleiner ist. Wir schieben alles um 10 herein. Dieser hat einen kleinen Radius. Das ist der Grund, warum das hier am Rande ist. Aber das hier ist es nicht. Und weißt du, während ich hier mit meinen Zahlen rummache, werde ich den größten Kreis ein bisschen größer machen. Ich werde es 15 nennen. Wenn ich nun sage, dass die größten Kreise ein bisschen größer sind, werden die Dinge immer noch automatisch hineingestoßen, bewegt, genau dort platziert, wo sie sein müssen. Und das ist der Wert, Variablen zu verwenden, anstatt Dinge manuell zu setzen. Wenn ich eine Reihe von Orten hätte, an denen ich die r-Werte manuell festlegen würde, müsste ich mich ändern. Dann ist jeder Ort, wo ist jetzt? Ich ändere es einfach an einem Ort und in Updates überall, wo ich musste. In Ordnung. Dinge sehen ziemlich gut aus. Ich denke, alles, was jetzt noch zu tun ist, ist, dies zu animieren und ein wenig Interaktivität hinzuzufügen , und wir werden gut gehen. 7. Animation in D3: In Ordnung. Also unser Scatter Plot Blasendiagramm hier sieht ziemlich gut aus. Ich bin wirklich glücklich damit. Und, ähm, als nächstes, was ich tun möchte, ist es zu animieren, es zum Leben zu erwecken, weil erwecken, wir JavaScript verwenden. Wir erstellen eine dynamische Sache, die in einem Webbrowser lebt, und wir haben uns die Werkzeuge zur Verfügung, um es zumindest visuell zum Leben zu erwecken, ein bisschen mehr, anstatt nur dieses Ding zu laden und es eine statische Grafik zu schwächen. Geben Sie einfach ein wenig Eye Candy, was eigentlich eine sehr wichtige Sache ist. Ästhetik ist wichtig in der Kommunikation, und das ist es, was das ist. Ästhetik ist wichtig in der Kommunikation, Das ist Kommunikation. Und so, wenn Sie es schön machen könnten und eine Animation zu engagieren ist eine gute Möglichkeit, dies zu tun, können wir es genauso gut tun. Also gehe ich einfach zum Code hier drüben. Und das erste, was ich tun werde, ist, dass du weißt, dass wir diese Kreise erschaffen haben. Wir gaben den Kreisen Attribute wie ihre X- und Y-Position dort, Radius , Größe , Füllung , Farbe , Rapazität usw. Also, was ich zuerst tun werde, ist, dass ich den Radius dieser Kreise ändern werde. Ich werde nur die Funktion löschen. Ich werde es tatsächlich mit dem Befehl X auf dem Mac Control Exxon PC schneiden , damit ich es später einfügen kann. Und ich werde es einfach manuell ändern, zurück zu einer Null. Etwas Hit, speichern und aktualisieren und laden Sie es. Und was sehen wir? Was sehen wir? Nichts, stimmt's? Weil alle Kreise, die übrigens noch da sind. Wenn ich also ins CO gehe, die Elemente hier und vielleicht das Diagramm und das SPG öffne, dann haben wir immer noch Kreise. Sie haben immer noch X- und Y-Attribute. Und es ist immer noch genau dort positioniert, wo sie auf dem Bildschirm sein sollen, wie Sie sehen können, wenn ich über diese rolle, aber sie alle haben einen Radius von Null. Und so sind es Objekte, die keine Breite und Höhe haben, so dass sie im Wesentlichen unsichtbar sind. Aber sie sind da. In Ordnung, also existieren sie noch. Sie sind immer noch auf dem Bildschirm, sie haben einfach keine Sichtbarkeit. Und wir werden das in der Animation ändern. Also der Weg, das zu tun, sind diese zwei schnellen Dinge Erste, was ich tun werde, ist, dass ich hier unten einen Funktionsaufruf hinzufügen werde . Sobald mein Skript fertig ist, habe ich, wissen Sie, wissen Sie mein SPG-Objekt erstellt Sets von Variablen erstellen das SPG-Objekt. Lesen Sie die Daten, sortieren Sie es mein Maßstabsmaterial, fügte die Kreise aus den Achsenlinien hinzu. Und jetzt werde ich sagen: Bitte führen Sie ein Update durch. Und das ist eine Funktion, die ich als Update erstellen werde. Ich könnte das Ding nennen. Was immer ich wollte, ich wollte es aktualisieren nennen und dann eine neue Funktion hier unten erstellen und Sie werden feststellen, dass es außerhalb dieser Funktion ist, an der wir oben gearbeitet haben. Denken Sie daran, diese geschweiften Klammern, die die Funktion beendet, die mit D drei Punkt CS Gebühr begann , die hier eine sehr ähnliche Idee zu variablem Umfang in den Vordergrund bringt. Im Wesentlichen haben Funktionen Geltungsbereich zu. Und wenn ich also den Code schreiben würde, um alles auszuführen, was ich in diesem Update geschehen möchte, die Animation innerhalb dieser Funktion, wie wo der Rest dieses Zeugs ist, dann hätte ich keinen Zugriff darauf außerhalb dieser Funktion. Nun, in dieser Lektion, die ich auf d drei unterrichte, werden wir nichts damit tun, aber es ist eine gute Vorgehensweise, um Ihre Updates, Sachen außerhalb dieser Datenaufruffunktion zu setzen , weil dann später sagen, ich hatte einen Knopf auf der Seite. Ich möchte auf diese Schaltfläche klicken, die möglicherweise neue Daten lädt oder Dinge ändert, die ich wiederbeleben möchte . Wenn es außerhalb dieser ursprünglichen Funktion ist, habe ich Zugriff darauf, wenn ich Dinge wie Klicken auf Schaltflächen mache. Es ist also nur eine gute Best Practice, dies auf diese Weise zu tun. Also werde ich eine Funktion namens Update aufrufen, und dann muss ich diese Funktion erstellen. Und das ist die Syntax, um das zu tun. Und jetzt wird diese Funktion aus dem Code bestehen, um Animation zu ermöglichen. Und so, wie ich gerade sagte, wie ich gerade sagte, wir haben sein Objekt namens Kreise, das unsere Kreise enthält, die wir erstellt und an Daten gebunden haben und Attribute hinzugefügt haben, um das, was ichtun kann. wir haben sein Objekt namens Kreise, das unsere Kreise enthält, die wir erstellt und an Daten gebunden haben und Attribute hinzugefügt haben, um das, was ich Diese Update-Funktion wird auf dieses Objekt verwiesen. Deshalb haben wir diesen Variablennamen, diesen Objektnamen, hinzugefügt . Es ist eine Minute Anruf ist, ich werde sagen, nur Kreise Punkt Übergang und das ist nur eine andere großartige Methode. Bauen Sie in D drei, die Sie Animationen erstellen können passieren. Sie wollen einen Übergang Dinge auf der Bühne und machen Sachen passieren. Und was ich will, ist, dass ich meinen Radius auf Null geändert habe. Und so möchte ich den Radius im Laufe der Zeit animieren. Und so ist der Weg, das zu tun, zu sagen, eingekreist Übergangspunkt-Attribut Weil was ich einen Übergang will, die Attribute selbst . Und so möchte ich das sind Attribut übergehen, der Radius geht hier zurück und fügt in diese Funktion ein, die ich zuvor kopiert habe, und so wörtlich sage ich, nehmen Sie meine Kreise animieren die Attribute und animiert zu diesem Wert, den wir früher verwendet. In Ordnung, also werde ich retten und ich bin ein Hit Refresh und beobachten, was passiert. Sie alle animierten auf die Bühne, und es passiert sehr schnell, weil die Standardgeschwindigkeit der Animation ziemlich schnell ist. Ähm und so wollte ich es wieder laden. Nur du kannst es noch einmal sehen. Es ist das Animieren auf. Es ist in Ordnung. Es ist besser, als nicht zu animieren, schätze ich. Aber es ist wirklich schnell. Und anstatt sie alle auf einmal zu animieren, möchte ich sie verzögern und ich werde nur die Syntax zeigen, um Dinge zu verzögern und Ihnen nur eine schnelle Sache zu zeigen. Bevor Sie also die Attribute ändern, möchten Sie ihm mitteilen, dass die Verzögerung erfolgt. Und so sagen wir, ich ging hier rein und sagte: „ Verzögerung 1000 Millisekunden und die Verzögerung. Der Wert ist immer in Millisekunden, so dass 1000 Millisekunden eine Sekunde sind. Wenn ich also auf Speichern klicke, klicke ich auf Aktualisieren. Was wird passieren, oder? Wir werden einen Blakes leeren Bildschirm für eine Sekunde sehen, und dann animiere ich immer noch sehr, sehr schnell, so leer und dann animiere ich. Also, das ist OK. Das ist zumindest ich sehe, dass sie sich getrennt von den Achsen animieren. Es ist schon etwas besser als es war. Aber was ich wirklich tun möchte, ist, dass ich jeden Punkt einzeln nacheinander in der Reihenfolge animieren möchte , in der sie auf der Bühne auf dem Bildschirm erscheinen. Also der Weg, das zu tun, da ich diese Verzögerung auch noch einmal in eine Funktion ändern kann. Und was ich tun werde, ist, dass ich Funktion sagen werde, vielleicht etwas anderes hier. Zusätzlich zum Übergeben des Datenwerts selbst, was Sie in jeder Funktion tun können, wie wir oft getan haben, wo wir die gebundenen Daten übergeben und dann können wir auf die Feldnamen verweisen, um Dinge damit zu tun. Sie können in jeder dieser Funktionen auch auf die Indexnummer von allem verweisen, was passiert. Und was bedeutet das? Ich habe über Indizes gesprochen, bevor bevor ich einen Strahl namens X Men Max erstellt habe, und es war ein, wissen Sie, ein Array mit zwei Elementen darin. Das erste Element ist also diese Indexposition Null, und das zweite Element ist eine Indexposition eins. Also nur die Reihenfolge, in der diese Dinge in diesen Funktionen gespeichert sind, wo gebundene Daten haben , die 506 Elemente darin haben? Wenn ich sage, Dinge zu tun und Dinge zu tun, basierend auf dem Indexwert, der immer der zweite Parameter ist, der Ihnen in diesen Strahlen zur Verfügung steht , bedeutet das im Wesentlichen, dass es diese 506-Werte durchlaufen wird. Und ich habe Zugang zu dieser Nummer 12345 überall nach 506. Also, in der Tat, wenn ich Zweifel tröste, protokollieren, dass ich jetzt, wo ich darauf Bezug habe. Ja, ich habe es hier unten nicht erwähnt, aber ich könnte dasselbe in jeder dieser Funktionen tun. Aber ich beziehe mich hier darauf. Deshalb kann ich hier darauf zugreifen. Konsul, Dialog es getroffen, erfrischen und beobachten, was passiert? Es schreibt ihn aus. Siehst du, all diese Zahlen sind einfach ausgeschrieben, weil ich Zugang zu all diesen Nummern habe von 0 bis 505, richtig? Nicht fünf oder sechs. Gutes fängt bei Null an. Und was ich jetzt tun werde, ist nicht OK zu sagen. Anstatt 1000 Millisekunden zu verzögern, möchte ich verzögern. Und wieder, ich muss dieses Rückwort verwenden. Ich möchte genau diese Nummer verzögern. Also wird der erste Kreis, der erscheint, Null Millisekunden verzögern. Es wird sich überhaupt nicht verzögern, weil es Nullindex ist, der zweite 1, der ist, dass der eine Index eine Millisekunde verzögern wird. Der dritte wird auf Millisekunden liegen. Und ein Fünf-Lauf im 6. 1 wird 505 Millisekunden etwas mehr als eine halbe Sekunde legen. Wenn ich also meinen Bildschirm aktualisiere, wirst du sehen, dass sie eins nach dem anderen ziemlich schnell animieren. Es sieht an dieser Stelle ziemlich süß aus, aber es ist wenig zu schnell. Ich werde jetzt nur manuell, nur manuell, , multiplizieren Sie sagen wir mal, multiplizieren Siees mit 10 und jetzt wird es langsamer werden. So wird der 506. Punkt wird 5000 und 60 Millisekunden verzögert. Also etwas mehr als fünf Sekunden. Und so werden diese ganzen Animationen fünf Sekunden dauern. Und jetzt sieht es wirklich elegant und schön und sauber und einfach aus. Und ich kann sehen, wie es über den gesamten Datensatz aufbaut. Es sieht einfach wunderschön aus. Es ist wirklich eine schöne Art, Dinge zu betrachten. Eine andere Sache, die erwähnenswert ist, dass Übergänge, du weißt schon, Animationen und D drei wirklich passieren können, weißt du, fast alles. Richtig? Also hier bin ich, wissen Sie, was zu einem Übergang führt. Ich verzögere es. Und dann ist die Sache, die ich tatsächlich übergehe, die sind Attribute, richtig, der Radius der Kreise. Wenn ich wollte, könnte ich den Feind ändern den . Jedes der anderen Attribute habe ich die Exposition, die Y-Position, die Füllfarbe, die Kapazität usw. festgelegt. Und so wissen Sie, zum Beispiel, Was ist, wenn ich den X-Wert standardmäßig auf Null ändere und dann den X-Wert in dieses Ding übergehe ? Was würde passieren, ist, dass alle Punkte hier anfangen und an Ort und Stelle rutschen, richtig? Oder wenn ich die Opazität und nicht den PR-Wert übertrage Anstatt dass die Punkte winzig sind und größer von unsichtbarem Teoh-Null-Radius zu einem größeren Radius werden, wären sie einfach unsichtbar und werden etwas undurchsichtiger. Aziz, die Kapazität fühlt sich in, so dass Sie alles animieren können. Es ist wirklich großartig. Und D drei macht es ziemlich einfach, es zu tun. Also kommt dieses Ding wirklich gut zusammen. Alles, was ich jetzt tun muss, ist ein wenig Interaktivität hinzuzufügen und was ich in der nächsten Lektion tun werde , ist zu zeigen, wie man einen sehr einfachen Rollover-Effekt hinzufügt. 8. Interaktivität in D3: In Ordnung. So sieht unsere Streuhandlung gut aus. Es ist animierend. Alles, was wir jetzt tun wollen, ist etwas Interaktivität hinzuzufügen, nur um Ihnen zu zeigen, wie das funktioniert. Und was ich tun werde, Simon und ein Hover-Ereignis, ein Tool-Tip, um die Daten zu zeigen, die mit Punkten oder etwas wirklich Einfaches verbunden sind. Und das erste, was Sie tun müssen, ist tatsächlich ein div zu erstellen, das im Wesentlichen meine Tooltip-Elemente enthält. Und einige wollten ein div erstellen. Und ich werde eine Vorstellung von Tool-Tipps geben, damit ich später darauf verweisen kann. Und während ich dabei bin, könnte ich genauso gut Thesis es s Klasse hinzufügen, die, weil ich sicherstellen möchte, dass das Ding so aussieht, wie ich es richtig aussehen wollte. Also werde ich einen Tipp erstellen, eher eine CSS-Klasse. Nur dafür, dass ich d Tooltip für Lachs tun ist, werde ich sagen Position Absolute. Also für diejenigen von Ihnen, die CSS kennen, bedeutet absolute Positionierung nur, dass, wo immer ich mich entscheide, Javascript zu sagen, dieses div zu setzen, es in einer absoluten Position platziert wird, was bedeutet, relativ zur oberen linken Ecke des gesamten Browsers nicht innerhalb der Parameter von etwas, in dem es sich befindet, nur macht es einfacher genaue Positionierung zu verwalten. Ich werde ihm eine Hintergrundfarbe von Weiß geben, und ich werde ein wenig Polsterung hinzufügen. Ähm, ich denke den ganzen Weg herum, nur 20 Pixel Polsterung. Dies ist nur so, wenn ich Inhalt in den Tooltip,wissen Sie, Text und was auch immer ich dort hineinfüge wissen Sie, , wird es nicht bis zu den Rändern dieses Div zerquetscht. Ich gebe ihm eine Grenze. Ähm, und ich denke, ichwerde vorerst einen soliden schwarzen Rand mit einem Pixel machen , ich , wir sind nicht, dass ich das nicht wirklich entwerfe. Ich mache es nur irgendwie sichtbar, damit wir die Kanten sehen können, damit wir es irgendwie in Bezug auf den Erfolg beurteilen können , dass es funktioniert. Also lassen Sie mich einfach hier sparen. Ich werde die Seite aktualisieren und was passieren wird, und lassen Sie mich bei meinem Inspektor schließen . Da ist mein Tooltip, oder? Es steckt hier drüben fest, weil es ein Tag ist, der nach diesem Gerät kommt, einfach hier unten zu sitzen. Ich habe ihr nicht gesagt, sie solle nirgendwo leben. Es ist sichtbar, obwohl es wegen der Polsterung keinen Inhalt enthält. Natürlich ist das großartig. Es existiert. Aber jetzt muss ich etwas damit machen. Und so ist das erste Mal, dass ich tatsächlich eine Anzeige in der Klasse bin, dass es keine Deckkraft hat, ist genug. Ich erfrischen das Unsichtbare. Es ist immer noch da. Aber es ist unsichtbar, weil ich nur will, dass das sichtbar wird. Wenn ich über einen Punkt rolle und wenn ich Inhalte hinzufüge, macht das Sinn. Okay, also wollte ich zum Leben erwecken, wenn ich den Punkt überbringe. Wie soll ich das machen? Nun, lassen Sie uns gehen, um unsere Kreise sind Punkte und, wissen Sie, wir haben diese verketteten Ereignisse. Zuerst habe ich alle Dinge mit der Klasse ausgewählt. Ich habe es zum Handeln gemacht, weißt du, irgendwie passierte Zeug basierend auf Daten. Das Zeug, das ich gemacht habe, war ein Stift Kreise und die Kreise haben Attribute einmal alle diese Attribute hinzugefügt . Es gibt andere Dinge, die ich tun kann, wie das Hinzufügen von Maus über Punkt auf der Maus über Ereignis. Und so, wenn Sie Jake müde verwenden, sind Sie vertraut mit diesem Konzept Punkt auf Maus über Punkt auf Maus bewegt auf Maus aus ist wie es in D drei bezeichnet. Wenn ich also Punkt auf der Maus über sage und eine Funktion benutze, dann sage ich, dass ich es tun soll, wenn ich mit der Maus darüber gehe, wie du es erwarten würdest. Also, was ich hier tun werde, ist, dass ich einfach hier anfangen würde, und Sie werden feststellen, dass ich die gebundenen Daten weitergebe, übrigens, richtig. Also werde ich das sagen, ich werde eine Variable erstellen. Ich rufe HTML an. Ich werde sagen, html ist gleich d dot arm. Also sage ich buchstäblich nur, dass der arme Prozentsatz der armen Leute in diesem Wohnbezirk in diese Variable gesetzt wird und dann werde ich sagen, dass ich irgendwie entscheiden muss, wo der Tooltip auf dem Bildschirm sein soll. Eigentlich, bevor ich das tue, machen wir einfach diesen HTML gleich d so schlecht. Und dann muss ich nur sagen, um d drei wählen Sie das Tooltip div, das wir erstellt haben, und geben Sie ihm HTML, das dot-html ist. In diesem Fall übergebe ich den Variablennamen Alter noch einmal an. Ich könnte dies einen Variablennamen nennen? Alles, was ich will, hat Infos gemacht. Im Moment, solange ich HTML über eine sie männliche Info sage, wird es funktionieren. Aber ich verwende nur eine einfache Variable namens HTML. Hoffentlich ist das nicht verwirrend. Also habe ich die Variable zugewiesen. Ich wähle den Tooltip aus. Ich sage, Setzen Sie diesen HTML als HTML hinein. Und jetzt, wenn ich die Seite wieder aktualisiere, ist sie nicht sichtbar. Aber wenn ich wieder zu meiner Klasse gehe und diese Zeile auskommentiere, wird es jetzt sichtbar sein, dass Sie sehen können, wie sich diese Zahlen ändern, wenn ich über verschiedene Punkte rolle , richtig? Also lassen Sie mich, dass eine Passage wieder einfacher machen, denn das nächste, was ich dio werde, ist eigentlich Platz und machen Sie sichtbar diesen Tool-Tipp, nachdem ich Sachen zu ihm hinzugefügt habe. Also habe ich mein HT Männchen hinzugefügt. Es ist unsichtbar, weil ich es wieder unsichtbar gemacht habe. Das nächste, was ich tun möchte, ist, dass ich sagen möchte, Lassen Sie uns die Stil-Peitschen für dieses Tooltip div setzen. Und wenn ich will, ist vor allem, machen Sie die linke Position, sagen wir, nur 100 Pixel. Ok? Vom linken Rand werde ich diesen Stil auch festlegen. Ich sage, setze es 100 Pixel von oben. muss diese Zahlen hauptsächlich so einstellen, dass sie beginnen, und ich muss sie sichtbar machen. Also muss ich die Deckkraft des Stils hinzufügen, und ich werde das hinsetzen, ich werde keines machen. Ich werde es irgendwie leicht durchscheinend machen, damit du die Punkte dahinter sehen kannst. Aber meistens, wissen Sie, meist undurchsichtiger von in transluzenten speichern. Geh zurück getroffen, Aktualisieren. Mein Tooltip ist also unsichtbar, weil ich über nichts gerollt bin. Sobald ich Masse über etwas bin, wird es sichtbar und es ist da drüben. Genau 100 Pixel von dieser Ecke, 100 über und 100 verdammt links oben, rechts. ich über die verschiedenen rolle, können Sie sehen, dass sich die Größe davon ändert, basierend auf der Zahl ist, wie viele Dezimalstellen es usw. gibt. Das sind also Waren. Guter Anfang. Aber das nächste, was ich tun möchte, ist, dass ich diese Platzierung dynamischer machen werde. Ähm, ich werde das nicht perfekt machen, aber ich zeige dir, was ich tue, und dann kannst du es immer selbst anpassen. später, anstatt nur manuell zu sagen, Platzieren Sie es 100 Pixel von links, was irgendwie seltsam ist, wie, Warum sollte ich es dort setzen wollen? Ich bin meiner Maus nicht gefolgt. Ich wollte wirklich genau dort sein, wo immer ich über den Punkt rolle, ich möchte, dass der Tooltip dort erscheint. Also hat D drei darin eingebaut. D drei Punkt Ereignisse Punkt Seite x. Also lassen Sie mich einfach sagen, dass Hit aktualisieren. Nun, was es tun wird, wird sagen, D drei mir sagen, wo die Maus gerade in Bezug auf ihre Exposition ist , und setzen Sie den Tooltip direkt dort. Und so dort ist es ISS. Jetzt werden Sie feststellen, dass es an der linken Kante der Werkzeugspitze ausgerichtet ist. Es ist nicht zentriert mit meinem Punkt meiner Maus, sondern, also muss ich das wirklich manuell tun, damit ich sagen könnte D dreitägigen Ereignis aus Seite X. Ich werde nur sagen, vielleicht ist das 200 Pixel breit. Ich weiß nichts. Subtrahieren Sie 100, also machen Sie es erneut manuell. Nicht der beste Weg, es zu tun. Aber jetzt ist es in Ordnung. Und jetzt ist es ein bisschen zu weit nach links. Aber wie ich hinzufügen könnte, mehr Inhalte, die Mai besser zentrieren. Darum werde ich mir jetzt keine Sorgen machen. Ich möchte es nur allgemein in der richtigen Position sortieren, ish für den Moment. Also fragte ich mich das Gleiche für die warum Positionierung. Und so werde ich sagen, D 3-Punkt-Ereignis diese Seite, warum ich jetzt minus 100 sparen werde. Erneut aktualisieren. Und jetzt folgt es meinem Chaos auf und ab, genau den ganzen Weg herum, nicht perfekt positioniert, aber das kann ich später twittern. Das ist also großartig. Wir machen hier gute Fortschritte. Das Einzige, was Sie bemerken werden , ist, dass, obwohl es das tut, was ich tun wollte, die einzige Sache, die es nicht tut, ist, wenn ich wegziehe, es nicht verschwindet. Das ist also komisch. Das ist nicht gut. Das muss ich auch reparieren . Wie Sie sich vorstellen können, wenn Sie vorher mit Hickory programmiert haben, muss ich auch einen Punkt auf Maus-Out-Ereignis hinzufügen, der in der Funktion übergeben wird, und in diesem Fall muss ich die Daten nicht einmal binden. Ich meine, ich muss diese gebundenen Daten nicht an den Dysfunktions-Islam weitergeben. Es ist nur zu sagen, Hey, wähle den Tooltip und verstecke ihn für mich. Also d drei wählt den Tooltip Div und lasst uns den Stil einstellen und ich gehe einfach zu etwas wirklich Einfaches. Ich werde nur sagen, bewegen Sie es 1000 Pixel nach links, Negative 1000 rechts vom Bildschirm und während ich dabei bin, aber ich muss nicht wirklich beides tun, aber ich weiß nicht warum. Lassen Sie uns die Kapazität zurück auf Null setzen und so, wenn ich einfach tun, das hatte Hit Refresh gespeichert. Jetzt folgt es meiner Maus und ihrer aktiven, sobald die Punkte auf dem Bildschirm verfügbar sind, auch während es rechts animiert. Und wenn ich wegziehe, verschwindet es. Jetzt habe ich einen funktionierenden Tooltip, wirklich so ziemlich das tut, was ich tun wollte. Aber ich denke, ich möchte dem Tooltip mehr Inhalte hinzufügen. Das ist funktional genug, aber ich möchte nur eines der Konzepte hier zeigen. Sie müssen nicht einfach einen Wert übergeben, von dem Sie wissen, dass wir String-Verkettung Mitglied tun können. Wir haben vorhin darüber geredet. Was wäre, wenn ich Ihnen irgendwie mehr Informationen in der Tool-Tipp geben wollte. Nun, eine Sache, die ich tun könnte, ist, dass ich sagen könnte , OK, HTML gleich Text zuerst. Ich möchte, dass Sie wissen, das ist der X-Wert. Also wollte ich X sagen, ich werde dir sagen, dass das die Pore ist, ähm , Feld. Und das ist großartig. Also, wenn ich jetzt aktualisieren Jetzt kannst du schauen, denken, ich habe etwas kaputt gemacht. Oh, ich habe vergessen, die Pluswissenschaft hinzuzufügen, zu sehen, dass ich vergessen habe, diese Stämme nicht zu einer anderen großartigen, uh, Code Debugging Sache machen können uh, , wo Sie etwas getan haben Alles, was bricht und Dinge wie Pluszeichen dazwischen zu vergessen, ist ein klassisches Beispiel für einen Fehler, den Sie machen werden. Also jetzt sehe ich die vollständige Zeichenfolge, die beide Dinge zusammen verunreinigt haben, und ich könnte Ihnen genauso gut alle Feldwerte geben. Richtig? Wir haben Ford. Hier geht alles vor sich. Ich habe das X, das warum der Radius des Kreises und auch die Farbe, richtig? Lassen Sie mich das alles ändern. Ich versichere Ihnen, warum die sind und die Farbe und das Warum ist die Lippen Crooms Feld. Also lassen Sie uns das hier sagen, das R ist der Medianwert jeder Eigenschaft, und dann basiert die Farbe auf dem Charles River Feld. Also, wenn ich das mache, wenn ich keine schnelle Änderung vornehme, was Sie bemerken werden, sage ich, dass HTML das gleich ist. Und dann sage ich, dass HTML gleich ist. Also setze ich im Wesentlichen die zusätzliche Meile Variable jedes Mal hier zurück. Das ist nicht gut. Was ich tun muss, ist tatsächlich plus gleich für diese nachfolgenden zu tun. Und wenn Sie mit dieser Kurzschrift nicht vertraut sind, sage ich, HTML ist etwas für diese erste Zeile und ich sage:Fügen Sie jetzt das hinzu, Fügen Sie jetzt das hinzu, dann fügen Sie das hinzu und fügen Sie es dann hinzu. Also füge ich es nur auf dem Weg hinzu. Also jetzt, wenn ich sage, sogar drücken Sie aktualisieren jetzt alle Informationen sind da drin, aber es ist alles in den gleichen Zeilen. Ich habe keine Zeilenumbrüche hinzugefügt oder ein anderes Styling gemacht, nicht den besten Weg, es zu tun, sondern eine einfache Möglichkeit, es zu tun. Ich kann buchstäblich nur Zeilenumbrüche hinzufügen. Es gibt andere Möglichkeiten, dies zu tun, aber ich wollte den schnellen und einfachen Weg hier vorerst machen, also werde ich Zeilenumbrüche zu den ersten 3 hinzufügen Ich brauche es nicht für den letzten Treffer Refresh, und jetzt habe ich alle meine Informationen drin und es ist blinkt und blinkt, weil es im Wesentlichen hinter meiner Maus liegt, die über einem Punkt ist. Aber sobald es jetzt erscheint, bin ich mit der Maus auf dem Punkt, an dem ich vorbei bin. Also muss ich hauptsächlich diese y-Position ändern. Ich werde nur sagen, minus 1 50 für jetzt und sehen, ob das aus dem Weg kommt. Das ist also großartig. Es ist, weißt du, es ist vorerst in Ordnung, diese Werte hart zu codieren. Es ist erwähnenswert, dass der richtige Weg, dies in der Art zu tun, wie ich dies normalerweise tun würde und Sie dies tun sollten, anstatt manuell zu sagen, minus 100 minus 1 50 Für diese beiden Dinge können Sie stattdessen die mit diesem Div, nachdem Sie den HTML hinzugefügt haben und dann Ereignistyp Ajax sagen, minus das mit dividiert durch zwei rechts, Sie möchten die Hälfte mit subtrahieren, weil Sie auf Ihrer Maus zentriert sein wollen und dasselbe für die Höhe . Erkennen Sie die Höhe, sobald Sie das extreme el hinzugefügt haben, und sagen Sie dann Subtrahieren Sie die Höhe und dann vielleicht ein paar zusätzliche Pixel. So wollen Sie, dass das Quadrat Art rutschte die leicht über der Maus geneigt nur schnelle und einfache Möglichkeiten, es zu tun. Sie wissen, dass es andere Wege gibt, aber das ist eine ziemlich schnelle und effektive und genaue Art, dies zu tun. Das ist gut. So haben wir Tool-Tipps dort nach der Maus. Das Tun, weißt du, so ziemlich, was ich will, ist sicherlich eine Menge Arbeit, die getan werden muss, in Bezug auf Styling und machen schön aussehen, um die Dinge ein wenig dynamischer zu machen. Aber es funktioniert gut genug für unsere Zwecke heute, also sind wir ziemlich fertig, außer als eine kleine Sache, die mich über dieses Blasendiagramm stört, an dem wir gearbeitet haben , und ich werde das in unserem nächsten und letzte Lektion. 9. D3 - Ein zusätzliches Thema: Also haben wir alles getan, was wir mit unserer Streuhandlung gemacht haben. Alles funktioniert großartig. Es wird zum Leben erweckt. Es animiert all diese Dinge. Aber es gibt eine Sache an dieser Streuhandlung, die mich seit dem Moment, als wir anfingen, sie zu erschaffen. , Wenn Sie sich erinnern,dass wir ein Problem hatten, bei dem ich die ganze Sache senkrecht umgedreht habe, oder? Weil ich wollte, ähm, diese Typen hier oben gegen hier unten, weil es seltsam war, einen hohen Wert zu haben ähm, diese Typen hier oben gegen hier unten, weil es seltsam war, einen hohen Wert zu haben,unten zu leben, genau in niedrigem Wert,an den Spitzen zu leben. , unten zu leben, genau in niedrigem Wert, Wir haben es vertikal umgedreht. Denken Sie daran, dass ich ein ähnliches Problem mit unserer horizontalen Skala habe, weil ich hier eine geringe Zahl habe, was einen niedrigen Prozentsatz von armen Menschen in einer hohen Zahl bedeutet, einen hohen Prozentsatz von armen Menschen. Aber pour nous geht es um einen Mangel an etwas. Und wenn ich es bin, wenn ich mehr arme Leute in einem Bezirk habe, habe ich weniger wertvolle Häuser, kleinere Punkte und weniger Räume genau dort, wo sie am unteren Ende dieser Skala auf der Y-Achse waren, und so dass es sich einfach falsch anfühlt. In der Tat ist es eine bekannte Sache. Forscherprobte Menschen erwarten, dass hohe Werte an der Spitze stehen, was wir früher getan haben, wurden vertikal reflektiert, aber auch irgendwie nach rechts. Ähm, also haben wir einen hohen Wert, äh, hohen Prozentsatz armer Leute. Aber es sind Leute mit weniger Reichtum hier drüben, und so fühlt es sich einfach falsch an. Und was ich tun möchte, ist, dass ich unsere X-Achse drehen möchte, genau wie wir die RY-Achse früher drehen. Und so ist es genau der gleiche Prozess, den wir früher verfolgt haben, wo wir, anstatt unseren Wyman max niedrigeren Wert zu haben, einen höheren Wert, wissen Sie, niedrigeren Wert beiseite, verbunden mit der niedrig, warum die an der Spitze ist, wir buchstäblich nur schwitzen mit tauschen sie. Das Maximum ist jetzt hier und das Minimum ist hier vorbei. Wo genau das Gleiche tun? Ich werde sagen, Verwenden Sie den Maximalwert auf der linken Seite und den Minimalwert auf der rechten Seite. Also, wenn ich jetzt nur speichern Treffer, aktualisieren Knochen jetzt ist es umgedreht. Und so, als Chartleser, fühlt sich das für mich natürlicher an, dass hoher Reichtum, was bedeutet, dass weniger pour nous, aber hoher Reichtum hier oben rechts ist. Jetzt habe ich ein ähnliches Problem, bei dem ich eine hohe Zahl auf der linken Seite in einer niedrigen Zahl auf der rechten Seite habe. Das ist technisch korrekt, denn das sind die Zahlen. Wir messen den Prozentsatz der armen Leute, aber es fühlt sich immer noch irgendwie falsch an. Und was ich tun möchte, ist, diese Zahlen loszuwerden und manuell verschiedene Etiketten einzufügen. Es wird nur mehr Sinn für den Diagrammleser machen. Und so, wenn Sie sich früher erinnern, als wir unsere Achsen erstellt haben, setzen wir manuell die Tick-Werte, die wir sagten, verwenden Sie die niedrigste und die höchste Zahl, höchste, und das funktioniert großartig. Das ist eine wirklich gute Möglichkeit, es für viele Charts zu tun. Aber anstatt das mit der eingebauten Tick-Werte-Funktion zu tun, gehe ich zurück und setze die Ticks. Wenn du dich daran erinnerst, als ich dir das erste Mal die Achse gezeigt habe, wollte ich sagen, weißt du was? Ihr Nullticks setzt keine Zecken da drin. Und so, wenn ich drücken aktualisieren meine Etiketten verschwinden, so muss ich sie vor allem jetzt in mich selbst setzen. Der schnelle und einfache Weg, das zu tun, ist, dass ich einfach manuell Text hinzufügen werde. Ich werde es hier setzen, nachdem ich meine Achsen erstellt habe, bevor ich mein Update anrufe. Ich werde nur sagen, dass du was weißt? Lassen Sie uns Text zu unserem SPG hinzufügen. Ich werde keinen Variablennamen verwenden. Ich werde das nicht auf die perfekteste Art und Weise tun, die es je gab. Aber nur sehr schnell, lassen Sie uns etwas Text hinzufügen und ich brauche diesen Text, um auf der X-Achse zu leben. Ich werde diese Waage benutzen, weil ich genau dort platziert werden wollte, wo ich sie will. Ich möchte, dass Sie zuerst diesen Text dieses erste Stück Text auf der X. äh, Expedition mit der X-Skala, die wir vorhin eingerichtet haben. Und ich möchte diese X Männer Max Variable verwenden und ich möchte den Minimalwert in ihre erste setzen . Also ist die Ausstellung auf dieser Skala für diese Mindestzahl, und dann sage ich für die weiße Opposition, lasst uns auch , dasselbe sagen. Ich werde die y-Skala benutzen und ich bin benutzt. Das warum Min Max und ich Moschee verwenden den Minimalwert, weil jetzt vergessen Sie nicht, dass wir unsere niedrigste weise sind oder am unteren Rand unseres Diagramms, das ist, wo ich möchte, dass dieses Häkchen existieren. Und dann sage ich Ihnen, dass Sie es sagen müssen, was der Text lesen soll. Und die Art, wie du das machst, ist hier. Wissen Sie, wenn Sie ein Textelement hinzufügen, das im Text oben ist, sagen Sie tatsächlich, dass Punkttext gleich ist, was auch immer oder Punkttext, Klammern, was auch immer. Und so werde ich für den Minimalwert sagen, was der niedrige Prozentsatz armer Leute ist, werde ich das wohlhabender nennen, denn das ist wirklich das, was wir hier betrachten. Also, wenn ich zurückgehe und auf Erfrischen klicke, habe ich jetzt die Worte mehr wohlhabend hier drüben, weil das ist, was das ist. Es ist mehr Reichtum, Les pour nous, und das macht mehr Sinn, nur für unser Publikum. Aber natürlich habe ich ein paar Probleme. Zunächst einmal ist der Text ein perfekt ausgerichtet mit dieser Position hier drüben, aber es ist auf der linken Seite des Textes ausgerichtet und läuft vom Bildschirm. Also, was ich tun möchte, ist es zentrieren und auch das Aussehen eher wie Etikett so aussehen würde, wie ich empfehlen würde , was kleiner grau Weniger Kontrast e einfacher, etc.. Also werde ich das auf ein paar verschiedene Arten tun. Zuerst werde ich reparieren, ist die Positionierung. Also wollte ich zentriert sein und D drei hat sich darin eingebaut. Nun, SPG hat sich wirklich darin eingebaut. Daher tut d drei auch den Textanker AC Tribut. Und so kann ich die Verankerung dieses Textes entweder auf den Anfang, die Mitte oder das Ende setzen. Und wenn ich sage, das ist es gesagt, zu beginnen, was es standardmäßig ist, bedeutet es, dass linke Linie in diese Position, die ich gewählt habe. Wenn ich sage Ende ital richtig viel und durch sagen Mitte, wird es Mittellinie. Also, wenn ich jetzt aktualisiere, ist es zentriert, also ist das gut. Das ist ein guter Anfang. Aber jetzt möchte ich die Formatierung dieses Textes ändern. Und danach werde ich es auch vertikal verschieben, weil ich nicht weiß, warum. Das weiß ich, warum. Aber es sitzt hier oben, während ich hier unten sein wollte. Aber zuerst, lasst uns das eigentliche Aussehen machen, also werde ich eine Klasse hinzufügen und das haben wir schon mal gemacht. Ich sage Attribut, Klasse und ich werde nur dieses Klassenzugriffs-Etikett nennen. Und jetzt, wenn ich wieder nach oben gehe und die CSS-Klasse für das Zugriffslabel hinzufüge, lege ich es neben diese Jungs. Also ist es leicht, später zu finden, werde ich die gleiche helle, graue Füllfarbe machen. Und ich möchte eine Schriftart von einem netten auf Sarah Font verwenden. Ich werde sagen, lustige Größe von 10 Pixeln. Ich wollte nett und klein sein, im Idealfallmöchte ich so aussehen wie dieser Typ hier drüben, und das ist also ziemlich gut. Idealfall möchte ich so aussehen wie dieser Typ hier drüben, Ziemlich nah dran. Gut genug für jetzt. Ich werde es nicht verrückt für diese Lektion optimieren, aber ich möchte die Tatsache beheben, dass es hier oben steckt, richtig? Es ist perfekt ausgekleidet mit der Unterseite unserer Waage , wo dieser Typ positioniert ist, oder? Der niedrigste Wert lebt genau dort, weshalb er hier oben ist. Also wissen Sie, es gibt ein paar verschiedene Möglichkeiten, das zu tun. Ein einfacher, schneller und einfacher Weg ist, anstatt es zu sagen, es in die Y-Position genau unten zu setzen, den Minimalwert Tun Sie das. Und sagen wir mal, unsere Marge ist richtig, denn das wird es runterdrücken. Denken Sie daran, wir haben alles in 30 Pixel geschoben. Wenn ich es 30 Pixel zurückschiebe, ist es vielleicht genau da, wo ich sein wollte. Und siehe, siehe, die ISS. Manchmal muss man das etwas twittern. Manchmal sollte es nicht perfekt genau dort sein, wo Sie es mit ein paar Pixeln wollen, wenn Sie müssen . Aber weißt du, das funktioniert gut. Und ich will dasselbe tun. Aber für die linke Most Label. Also werde ich es einfach duplizieren, richtig? Ein Stifttext. Nun, die Ex-Positionierung wird auf dem Maximalwert basieren, was in diesem Fall der weniger wohlhabende ist, oder? Ich wollte in der gleichen Weise Position sein. Ich wollte immer noch zentriert sein und dieselbe Klasse verwenden. Aber in diesem Fall ist das Etikett weniger wohlhabend, sicher, erfrischend. Und jetzt ist es genau so, wie ich sein wollte. Ich hoffe also, dass dieser Kurs auf D drei hilfreich und interessant war. Wirklich. Wir haben gerade einige grundlegende Fähigkeiten eingerichtet, wissen Sie, es wird jetzt relativ einfach für Sie sein, hoffentlich zu gehen und nach drei Syntax zu suchen und mehr Fähigkeiten hinzuzufügen und zwei Projekte , die an dem du arbeitest. Weißt du, wenn du mit Jake, Jake Weary oder anderen Jobs gearbeitet hast , die sich gerade in der Vergangenheit beschweren, war viel davon wahrscheinlich noch einfacher für dich zu lernen. Wenn nicht, wissen Sie, haben Sie hier viele wichtige Dinge gelernt, die Sie in der Lage sein werden, zu replizieren und auf neue Erkenntnisse anzuwenden, während Sie mit D drei vorwärts gehen . Was ich auf jeden Fall empfehle, ist, d drei Js dot org ist die d drei Website. Gehen Sie auf die Beispielseite und Sie werden endlose Beispiele für großartige D drei Projekte finden, in denen Sie Quellcode sehen und damit spielen können. Einige Konzepte und die Angst komplexer und andere, um sicher zu sein. Aber das sollte ein guter Ausgangspunkt für dich sein, Mike, ich sagte, ich hoffe, dass dir der Kurs gefallen hat. Natürlich hoffe ich, dass du viel gelernt hast und ich wünsche dir glücklich. D drei ng in Zukunft