In diesem Artikel m?chte ich Sie durch ein Beispielprojekt führen, das ich kürzlich erstellt habe - ein v?llig originales -Sputzentyp mithilfe der D3 -Bibliothek, in der zeigt, wie jede dieser Komponenten dazu addiert, D3 zu machen Eine gro?artige Bibliothek zu lernen.

d3 steht für datengesteuerte Dokumente. Es handelt sich um eine JavaScript -Bibliothek, mit der alle m?glichen wundervollen Datenvisualisierungen und -diagramme erstellt werden k?nnen.

Wenn Sie jemals eine der fabelhaften interaktiven Geschichten aus der New York Times gesehen haben, werden Sie D3 bereits in Aktion gesehen haben. Sie k?nnen auch einige coole Beispiele für gro?artige Projekte sehen, die hier mit D3 gebaut wurden.

Die Lernkurve ist ziemlich steil für den Einstieg mit der Bibliothek, da D3 ein paar spezielle Macken hat, die Sie wahrscheinlich zuvor noch nicht gesehen haben. Wenn Sie jedoch die erste Phase des Lernens von D3 überschreiten k?nnen, um gef?hrlich zu sein, k?nnen Sie bald in der Lage sein, wirklich coole Sachen für sich selbst zu erstellen.

Es gibt drei Hauptfaktoren, die D3 wirklich von allen anderen Bibliotheken abheben:

1. Flexibilit?t. Mit D3 k?nnen Sie alle Arten von Daten aufnehmen und diese direkt mit Formen im Browserfenster assoziieren. Diese Daten k?nnen absolut alles sein , was eine riesige Reihe interessanter Anwendungsf?lle erm?glicht, um vollst?ndig originelle Visualisierungen zu erstellen.
2. Eleganz. Es ist einfach, interaktive Elemente mit reibungslosen überg?ngen zwischen Updates hinzuzufügen. Die Bibliothek ist wundersch?n geschrieben und sobald Sie den Dreh der Syntax erhalten, ist es einfach, Ihren Code sauber und ordentlich zu halten.
3. Community. Es gibt bereits ein gro?es ?kosystem fantastischer Entwickler, die D3 verwenden, die ihren Code leicht online teilen. Sie k?nnen Websites wie Bl.ocks.org und blockbuilder.org verwenden, um schnell vorgeschriebenen Code von anderen zu finden und diese Snippets direkt in Ihre eigenen Projekte zu kopieren.

Key Takeaways

• D3, das für datengesteuerte Dokumente steht, ist eine leistungsstarke JavaScript -Bibliothek zum Erstellen verschiedener und interaktiver Datenvisualisierungen, wie aus ihrer umfassenden Verwendung in Plattformen wie der New York Times gezeigt.
• Die Bibliothek bietet eine beispiellose Flexibilit?t und erm?glicht es Entwicklern, alle Arten von Daten an grafische Darstellungen direkt im Browser zu binden und die Kreativit?t in Visualisierungsdesigns zu f?rdern.
• D3 zeichnet sich aus, um interaktive und dynamische Elemente mit reibungslosen überg?ngen hinzuzufügen, die visuelle Erfahrung und das Benutzerbetrieb durch elegante Programmierung und Syntax zu verbessern.
• Eine robuste Gemeinschaft von Entwicklern unterstützt D3 und bietet eine reichhaltige Ressource von gemeinsam genutztem Code und Beispielen auf Plattformen wie Bl.ocks.org, die für das Lernen und die Projektentwicklung genutzt werden k?nnen.
• In dem Tutorial wurde die Erstellung einer innovativen Visualisierung der Einkommensverteilung beschrieben, wobei die Funktionen von D3 zum Manipulieren und Pr?sentieren von Daten dynamisch verwendet werden, wobei visuelle Elemente wie Kreisdiagrammradii basierend auf realen Datenwerten angepasst werden k?nnen.
• Das Projekt wurde iterativ durch das Ausleihen und Anpassen des vorhandenen Codes entwickelt, wodurch die Anpassungsf?higkeit von D3 und die Bedeutung der Community für die Codierung demonstriert werden, bevor sie sich in dynamische und interaktive Verbesserungen wenden.
• Die endgültige interaktive Visualisierung enthielt Funktionen wie eine Spiel-/Pause -Taste und ein Schieberegler für die Jahrauswahl, in der veranschaulicht wird, wie D3 verwendet werden kann, um Datenvisualisierungen nicht nur informativ, sondern auch ansprechend zu machen.

Das Projekt

Als Wirtschaftswissenschaftler im College war ich immer an Einkommensungleichheit interessiert. Ich nahm ein paar Klassen zu diesem Thema und es fiel mir als etwas an, das nicht vollst?ndig in dem Ma?e verstanden wurde, in dem es sein sollte.

Ich habe angefangen, die Einkommensungleichheit mithilfe von Googles ?ffentlichem Data Explorer zu untersuchen…

Wenn Sie sich auf die Inflation einstellen, ist das Haushaltseinkommen für die unteren 40% der Gesellschaft ziemlich konstant , obwohl die Produktivit?t von pro Arbeiter in die H?he geschossen hat. Es war erst wirklich die Top 20%, die mehr von den Vorteilen erzielt haben (und innerhalb dieser Halterung ist der Unterschied noch schockierender, wenn Sie sich die Top 5%ansehen).

Hier war eine Nachricht, die ich auf überzeugende Weise vermitteln wollte, was eine perfekte Gelegenheit bot, einige D3.Js zu verwenden, also habe ich angefangen, ein paar Ideen zu skizzieren.

skizzieren

Da wir mit D3 arbeiten, k?nnte ich mehr oder weniger einfach anfangen, absolut alles zu skizzieren, an das ich denken k?nnte. Ein einfaches Zeilendiagramm, ein Balkendiagramm oder ein Blasendiagramm w?re einfach genug gewesen, aber ich wollte etwas anderes machen.

Ich finde, dass die h?ufigste Analogie, die die Menschen als Gegenargument für Bedenken hinsichtlich der Ungleichheit nutzten, "Wenn der Kuchen gr??er wird, dann gibt es noch mehr zu gehen". Die Intuition lautet, dass, wenn der Gesamtanteil des BIP schafft, um einen gro?en Teil zu erh?hen, selbst wenn einige Leute ein

dünneres Stück Kuchen erhalten, werden sie immer noch besser fern besser dran,

. Wie wir jedoch sehen k?nnen, ist es für den Kuchen absolut m?glich, gr??ere

und

zu werden, damit die Leute insgesamt weniger davon bekommen.

Meine erste Idee zur Visualisierung dieser Daten sah ungef?hr so ??aus:

Die Idee w?re, dass wir dieses pulsierende Kreisdiagramm haben würden, wobei jede Scheibe ein Fünftel der US -Einkommensverteilung darstellt. Die Fl?che jedes Kuchenscheibens würde sich darauf beziehen, wie viel Einkommen dieses Segments der Bev?lkerung einnimmt, und die Gesamtfl?che des Diagramms würde sein Gesamt -BIP darstellen.

Ich bin jedoch bald auf ein Problem gesto?en. Es stellt sich heraus, dass das menschliche Gehirn in der Gr??e der verschiedenen Bereiche

au?ergew?hnlich schlecht ist. Als ich dies konkreter kartierte, war die Nachricht nicht ann?hernd so offensichtlich, wie sie h?tte sein sollen:

Hier sieht es tats?chlich so aus, als würden die ?rmsten Amerikaner im Laufe der Zeit

reicher

, was best?tigt, was intuitiv wahr zu sein scheint. Ich dachte noch mehr über dieses Problem nach, und meine L?sung bestand darin, den Winkel jeder Bogen konstant zu halten, wobei sich der Radius jedes Bogens dynamisch ?nderte.

So sah dies in der Praxis aus:

Ich m?chte darauf hinweisen, dass dieses Bild hier immer noch dazu neigt, den Effekt zu untersch?tzen. Der Effekt w?re offensichtlicher gewesen, wenn wir ein einfaches Balkendiagramm verwendet h?tten:

Ich war jedoch entschlossen, eine einzigartige Visualisierung vorzunehmen, und ich wollte diese Nachricht nach Hause h?mmern, dass der pie gr??ere erhalten kann, w?hrend ein teilen davon kann kleinere erhalten. Jetzt, wo ich meine Idee hatte, war es Zeit, sie mit D3 zu bauen.

Kreditcode

Jetzt, wo ich wei?, was ich bauen werde, ist es Zeit, in das wahre Fleisch dieses Projekts einzusteigen und zu beginnen, ein Code zu schreiben .

Vielleicht denken Sie, dass ich damit beginnen würde, meine ersten Codezeilen von Grund auf neu zu schreiben, aber Sie würden sich irren. Dies ist D3, und da wir mit D3 arbeiten, k?nnen wir immer einen vorgeschriebenen Code von der Community finden, um uns zu starten.

Wir erstellen etwas v?llig Neues, aber es hat viel mit einem regul?ren Kreisdiagramm zu tun, also habe ich mich kurz auf Bl.ocks.org angesehen und mich für diese klassische Implementierung von Mike Bostock entschieden. Einer der Sch?pfer von D3. Diese Datei wurde wahrscheinlich schon tausend Male kopiert, und der Typ, der sie geschrieben hat

Diese Datei ist in D3 V3 geschrieben, das jetzt zwei Versionen veraltet ist, da Version 5 schlie?lich letzten Monat ver?ffentlicht wurde. Eine gro?e ?nderung in D3 V4 war, dass die Bibliothek in einen flachen Namespace umgestellt wurde, sodass diese Skalierungsfunktionen wie d3.scale.ordinal () stattdessen wie d3.ScaleOrn () geschrieben werden. In Version 5 war die gr??te ?nderung, dass Datenladungsfunktionen jetzt als Versprechen strukturiert sind, was es einfacher macht, mehrere Datens?tze gleichzeitig zu verarbeiten.

Um Verwirrung zu vermeiden, habe ich mich bereits die Mühe gemacht, eine aktualisierte V5 -Version dieses Codes zu erstellen, die ich auf blockbuilder.org gespeichert habe. Ich habe auch die Syntax so konvertiert, dass sie mit ES6 -Konventionen passen, z.

Hier ist was wir bereits beginnen:

Ich habe diese Dateien dann in mein Arbeitsverzeichnis kopiert und dafür gesorgt, dass ich alles auf meinem eigenen Computer replizieren konnte. Wenn Sie dieses Tutorial selbst folgen m?chten, k?nnen Sie dieses Projekt aus unserem Github -Repo klonen. Sie k?nnen mit dem Code in der Datei starter.html beginnen. Bitte beachten Sie, dass Sie einen Server (wie diesen) ben?tigen, um diesen Code auszuführen, da er unter der Haube auf der Fetch -API angewiesen ist, um die Daten abzurufen.

Lassen Sie mich Ihnen einen kurzen überblick darüber geben, wie dieser Code funktioniert.

durch unseren Code gehen

Zun?chst einmal erkl?ren wir ein paar Konstanten oben in unserer Datei, mit denen wir die Gr??e unseres Kreisdiagramms definieren:

Dies macht unseren Code super wiederverwendbar, da wir ihn jemals gr??er oder kleiner machen m?chten, müssen wir uns nur um diese Werte machen.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Als n?chstes geben wir eine SVG -Leinwand an den Bildschirm an. Wenn Sie nicht viel über SVGs wissen, k?nnen Sie über die Leinwand als den Speicherplatz auf der Seite nachdenken, auf dem wir Formen zeichnen k?nnen. Wenn wir versuchen, ein SVG au?erhalb dieses Bereichs zu zeichnen, wird es einfach nicht auf dem Bildschirm angezeigt:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Wir ergreifen einen leeren DIV mit der ID der Chart-Fl?che mit einem Anruf bei D3.Select (). Wir haben auch eine SVG -Leinwand mit der Methode d3.Append () an und setzen einige Abmessungen für die Breite und H?he mit der Methode d3.Attr () fest.

Wir haben auch ein SVG -Gruppenelement an dieser Leinwand angeh?ngt, was eine spezielle Art von Element ist, mit der wir Elemente miteinander strukturieren k?nnen. Dies erm?glicht es uns, unsere gesamte Visualisierung in die Mitte des Bildschirms zu verlagern, indem wir das Transformationsattribut des Gruppenelements verwenden.

Danach richten wir eine Standardskala ein, mit der wir für jedes Stück unseres Kuchens eine neue Farbe zuweisen werden:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Als n?chstes haben wir ein paar Zeilen, in denen das Pie -Layout von D3 eingerichtet ist:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

In D3 sind Layouts spezielle Funktionen, die wir auf einen Datensatz aufrufen k?nnen. Eine Layoutfunktion nimmt ein Array von Daten in einem bestimmten Format auf und spuckt ein transformiertes Array mit einigen automatisch erzeugten Werten aus, mit denen wir dann etwas tun k?nnen.

Wir müssen dann einen Pfadgenerator definieren, mit dem wir unsere B?gen zeichnen k?nnen. Mit Pfadgeneratoren k?nnen wir Pfad -SVGs in einem Webbrowser zeichnen. Alles, was D3 wirklich tut, ist, Datenstücke mit Formen auf dem Bildschirm zu assoziieren, aber in diesem Fall m?chten wir eine kompliziertere Form definieren als nur einen einfachen Kreis oder Quadrat. Pfad -SVGs funktioniert, indem eine Route definiert wird, in der eine Linie gezogen wird, die wir mit ihrem D -Attribut definieren k?nnen.

So k?nnte dies aussehen:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Das D -Attribut enth?lt eine spezielle Codierung, mit der der Browser den gewünschten Pfad zeichnen kann. Wenn Sie wirklich wissen m?chten, was diese Zeichenfolge bedeutet, k?nnen Sie in der SVG -Dokumentation von MDN darüber erfahren. Für die Programmierung in D3 müssen wir nichts über diese besondere Codierung wissen, da wir Generatoren haben, die unsere D -Attribute für uns ausspucken, die wir nur mit einigen einfachen Parametern initialisieren müssen.

Für einen Bogen müssen wir unserem Pfadgenerator einen Innerradius und einen Au?enradius -Wert in Pixel geben, und der Generator sortiert die komplexen Mathematik aus, die in die Berechnung jeder der Winkel für uns berechnet werden:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Für unser Diagramm verwenden wir einen Wert von Null für unseren Innerradius, der uns ein Standardkreisdiagramm gibt. Wenn wir jedoch stattdessen ein Donut -Diagramm zeichnen wollten, müssten wir nur einen Wert anschlie?en, der kleiner als unser ?u?erer Wert ist.

Nach ein paar Funktionserkl?rungen laden wir unsere Daten mit der Funktion d3.json ():

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

In D3 Version 5.x gibt ein Aufruf an d3.json () ein Versprechen zurück, was bedeutet, dass D3 den Inhalt der JSON -Datei abruft, die sie auf dem relativ Wir rufen die dann () -Methode an, sobald sie geladen wurde. Wir haben dann Zugriff auf das Objekt, das wir im Datenargument unseres Rückrufs betrachten.

Wir übergeben hier auch eine Funktionsreferenz - Typ -, die alle Werte, die wir in Zahlen laden, umwandeln, mit denen wir sp?ter arbeiten k?nnen:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Wenn wir eine Konsole.log (Daten) hinzufügen; Erkl?rung an die Spitze unseres D3.json -Rückrufs, wir k?nnen uns die Daten ansehen, mit denen wir jetzt arbeiten:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Unsere Daten werden hier in zwei verschiedene Arrays aufgeteilt, die unsere Daten für ?pfel bzw. Orangen darstellen.

Mit dieser Zeile werden wir die Daten wechseln, die wir ansehen, wenn eine unserer Optionsfelder klickt:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Wir müssen auch die Funktion update () auf dem ersten Lauf unserer Visualisierung aufrufen und einen Anfangswert (mit unserem "?pfel -Array) übergeben.

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Schauen wir uns an, was unsere Update () -Funktion macht. Wenn Sie neu in D3 sind, kann dies zu Verwirrung führen, da es einer der schwierigsten Teile von D3 ist, um zu verstehen ...

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

Erstens verwenden wir einen Standardfunktionsparameter für Wert. Wenn wir ein Argument an unsere Funktion update () übergeben (wenn wir sie zum ersten Mal ausführen), werden wir diese Zeichenfolge verwenden, oder sonst erhalten wir den Wert, den wir vom Klickereignis gewünscht haben Unsere Funkeing?nge.

Wir verwenden dann das allgemeine Update -Muster in D3, um das Verhalten unserer B?gen zu bew?ltigen. Dies beinhaltet normalerweise die Ausführung eines Datenverbindungen, des Verlassens der alten Elemente, der Aktualisierung vorhandener Elemente auf dem Bildschirm und dem Hinzufügen neuer Elemente, die zu unseren Daten hinzugefügt wurden. In diesem Beispiel müssen wir uns keine Sorgen um das Verlassen von Elementen machen, da wir immer die gleiche Anzahl von Kuchenscheiben auf dem Bildschirm haben.

Zuerst sind unsere Daten miteinander verbunden:

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

Jedes Mal, wenn unsere Visualisierungsaktualisierungen eine neue Daten mit unseren SVGs auf dem Bildschirm verbinden. Wir übergeben unsere Daten (entweder das Array für "?pfel" oder "Orangen") in unsere PIE () -Layout -Funktion, die einige Start- und Endwinkel berechnet, mit denen wir unsere B?gen zeichnen k?nnen. Diese Pfadvariable enth?lt nun eine spezielle

virtuelle Auswahl aller B?gen auf dem Bildschirm.

Als n?chstes aktualisieren wir alle SVGs auf dem Bildschirm, die in unserem Datenarray noch vorhanden sind. Wir fügen hier einen übergang hinzu - eine fantastische Funktion der D3 -Bibliothek -, um diese Updates über 200 Millisekunden zu verbreiten:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Wir verwenden die Antrkter -Methode () auf dem Aufruf von D3.Transition (), um einen benutzerdefinierten übergang zu definieren, mit dem D3 die Positionen der einzelnen B?gen aktualisieren sollte (übergang mit dem D -Attribut). Wir müssen dies nicht tun, wenn wir versuchen, einen übergang zu den meisten unserer Attribute hinzuzufügen, aber wir müssen dies für den übergang zwischen verschiedenen Pfaden tun. D3 kann nicht wirklich herausfinden, wie man zwischen benutzerdefinierten Pfaden wechselt. Daher verwenden wir die Funktion arctween (), um D3 zu informieren, wie jeder unserer Pfade zu jedem Zeitpunkt gezogen werden sollte.

So sieht diese Funktion aus:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Wir verwenden d3.Interpolat () hier, um einen sogenannten Interpolator zu erstellen. Wenn wir die Funktion nennen, die wir in der I -Variablen mit einem Wert zwischen 0 und 1 speichern, erhalten wir einen Wert, der irgendwo zwischen diesem liegt. In diesem Fall ist dies._Current ein Objekt, das den Start- und Endwinkel der Kuchenscheibe enth?lt, die wir betrachten, und A repr?sentiert den neuen Datenpunkt, auf den wir aktualisieren.

Sobald wir den Interpolator einrichten haben, aktualisieren wir den Wert this._current, um den Wert zu enthalten, den wir am Ende haben (i (a)), und dann geben wir eine Funktion zurück, die berechnet wird Der Pfad, den unser Bogen enthalten sollte, basierend auf diesem t -Wert. Unser übergang wird diese Funktion auf jeder Tick seiner Uhr ausführen (in einem Argument zwischen 0 und 1), und dieser Code bedeutet, dass unser übergang zu jedem Zeitpunkt wei?, wo unsere B?gen gezogen werden sollen.

Schlie?lich muss unsere Funktion update () neue Elemente hinzufügen, die nicht im vorherigen Datenarray waren:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Dieser Codeblock setzt die Anfangspositionen jeder unserer B?gen, das erste Mal, dass diese Aktualisierungsfunktion ausgeführt wird. Die Methode Enter () gibt uns hier alle Elemente in unseren Daten, die dem Bildschirm hinzugefügt werden müssen. Anschlie?end k?nnen wir jedes dieser Elemente mit den ATTR () -Methoden überschreiten, um die Füllung und Position jedes unserer einzelnen zu setzen B?gen. Wir geben jedem unserer B?gen auch einen wei?en Grenze, wodurch unser Diagramm ein wenig ordentlich aussieht. Schlie?lich setzen wir die this._current -Eigenschaft jedes dieser B?gen als Anfangswert des Elements in unseren Daten ein, den wir in der Funktion "ARCTween () () verwenden.

Machen Sie sich keine Sorgen, wenn Sie nicht genau befolgen k?nnen, wie dies funktioniert, da es sich um ein ziemlich fortgeschrittenes Thema in D3 handelt. Das Tolle an dieser Bibliothek ist, dass Sie nicht all seine inneren Arbeiten kennen müssen, um ein paar leistungsstarke Dinge damit zu erstellen. Solange Sie die Bits verstehen k?nnen, die Sie ?ndern müssen, ist es in Ordnung, einige der Details abstrahieren, die nicht vollst?ndig wesentlich sind.

Das bringt uns zum n?chsten Schritt im Prozess…

Anpassungscode

Jetzt, da wir einen Code in unserer lokalen Umgebung haben und wir verstehen, was es tut, werde ich die Daten ausschalten, die wir uns ansehen, damit es mit den Daten funktioniert, an denen wir interessiert sind .

Ich habe die Daten aufgenommen, mit denen wir im Daten/ Ordner unseres Projekts zusammenarbeiten werden. Da sich diese neue Datei in CSV -Format in einem CSV -Format befindet (es ist die Art von Datei, die Sie mit Microsoft Excel ?ffnen k?nnen), werde ich die Funktion d3.csv () anstelle des D3.json verwenden (D3.json ( ) Funktion:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Diese Funktion macht im Grunde dasselbe wie d3.json () - und konvertiert unsere Daten in ein Format, das wir verwenden k?nnen. Ich entferne auch die Funktion type () initializer als zweites Argument hier, da dies für unsere alten Daten spezifisch war.

Wenn Sie eine Anweisung von Console.log (Daten) oben im D3.CSV -Rückruf hinzufügen, k?nnen Sie die Form der Daten sehen, mit denen wir arbeiten:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Wir haben eine Reihe von 50 Elementen, wobei jedes Element ein Jahr in unseren Daten darstellt. Für jedes Jahr haben wir dann ein Objekt mit Daten für jede der fünf Einkommensgruppen sowie einige andere Felder. Wir k?nnten hier für eines dieser Jahre ein Kreisdiagramm erstellen, aber zuerst müssen wir unsere Daten ein wenig umgehen, damit es im richtigen Format ist. Wenn wir einen Daten schreiben m?chten, verbinden wir mit D3 ein Array, wobei jedes Element an eine SVG gebunden ist.

Erinnern Sie sich daran, dass wir in unserem letzten Beispiel ein Array mit einem Gegenstand für jede Kuchenscheibe hatten, die wir auf dem Bildschirm anzeigen wollten. Vergleichen Sie dies mit dem, was wir im Moment haben, was ein Objekt mit den Schlüssel von 1 bis 5 ist, die jede Kuchenscheibe darstellen, die wir zeichnen wollen.

Um dies zu beheben, füge ich eine neue Funktion namens Prepectata () hinzu, um die zuvor von uns geladene Art () -Funktion zu ersetzen, die wir über jedes Element unserer Daten iterieren:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Für jedes Jahr gibt diese Funktion ein Objekt mit einem Wertearray zurück, das wir in unsere Datenverbindung übergeben. Wir kennzeichnen jeden dieser Werte mit einem Namensfeld und geben ihnen einen numerischen Wert, der auf den Einkommenswerten basiert, die wir bereits hatten. Wir verfolgen auch das durchschnittliche Einkommen in jedem Jahr zum Vergleich.

Zu diesem Zeitpunkt haben wir unsere Daten in einem Format, mit dem wir arbeiten k?nnen:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Ich werde zun?chst ein Diagramm für das erste Jahr in unseren Daten generieren, und dann werde ich mir Sorgen machen, es für den Rest der Jahre zu aktualisieren.

Im Moment beginnt unsere Daten im Jahr 2015 und endet im Jahr 1967, sodass wir dieses Array umkehren müssen, bevor wir etwas anderes tun:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Im Gegensatz zu einem normalen Kreisdiagramm m?chten wir für unser Diagramm die Winkel jeder unserer B?gen reparieren und nur die ?nderung der Radius durch unsere Visualisierungsaktualisierungen durchführen. Dazu ?ndern wir die Value () -Methode in unserem Kuchenlayout, so dass jeder Kuchenscheiben immer die gleichen Winkel erh?lt:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Als n?chstes müssen wir unseren Radius jedes Mal aktualisieren, wenn unsere Visualisierungsaktualisierungen. Dazu müssen wir eine Skala erstellen, die wir verwenden k?nnen. Eine Skala ist eine Funktion in D3, die ein Eingabe zwischen zwei Werten nimmt, die wir als Dom?ne übergeben, und dann ein Ausgangs zwischen zwei verschiedenen Werten ausspuckt, die wir darin übergeben als Reichweite. Hier ist die Skala, die wir verwenden werden:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Wir fügen diese Skala hinzu, sobald wir Zugriff auf unsere Daten haben, und wir sagen, dass unsere Eingabe zwischen 0 und dem gr??ten Wert in unserem Datensatz liegen sollte, was das Einkommen der reichsten Gruppe im letzten Jahr ist in unseren Daten (Daten [49]. Werte [4] .Value). Für die Dom?ne stellen wir das Intervall fest, dass unser Ausgangswert zwischen.

liegen sollte.

Dies bedeutet, dass eine Eingabe von Null uns einen Pixelwert von Null ergeben sollte, und eine Eingabe des gr??ten Werts in unseren Daten sollte uns einen Wert von der H?lfte unserer Breite oder H?he geben - je nachdem, welcher Wert kleiner ist.

Beachten Sie, dass wir hier auch eine Quadratwurzelskala verwenden. Der Grund, warum wir dies tun, ist, dass wir m?chten, dass der Bereich unserer Kuchenscheiben eher zum Einkommen jeder unserer Gruppen als zum Radius ist. Da Fl?che = πr ² , müssen wir eine Quadratwurzelskala verwenden, um dies zu berücksichtigen.

Wir k?nnen diese Skala dann verwenden, um den ?u?erenradius -Wert unseres ARC -Generators in unserer Funktion update () zu aktualisieren:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Wenn sich unsere Daten ?ndert, wird der Radiuswert bearbeitet, den wir für jedes unserer B?gen verwenden m?chten.

Wir sollten unseren Anruf auch nach ?u?erlich entfernen, wenn wir unseren ARC -Generator anf?nglich einrichten, damit wir dies nur ganz oben in unserer Datei haben:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Schlie?lich müssen wir ein paar ?nderungen zu dieser Update () -Funktion vornehmen, damit alles mit unseren neuen Daten übereinstimmt:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Da wir unsere Optionspunkte nicht mehr verwenden werden, überschreite ich nur im Jahr-Objekt, das wir verwenden m?chten, indem wir anrufen:

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

Schlie?lich werde ich den Ereignish?rer entfernen, den wir für unsere Formulareing?nge festlegen. Wenn alles in Planung gegangen ist, sollten wir für das erste Jahr in unseren Daten ein wundersch?n aussehendes Diagramm haben:

dynamisch

Der n?chste Schritt besteht darin, unseren Visualisierungszyklus zwischen verschiedenen Jahren zu haben und zeigt, wie sich das Einkommen im Laufe der Zeit ver?ndert hat. Wir werden dies tun, indem wir den Anruf in die SetInterval () -Funktion von JavaScript hinzufügen, mit der wir einen wiederholten Code ausführen k?nnen:

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

Wir setzen einen Timer in dieser Zeitvariable ein, und alle 200 ms werden dieser Code die Funktion Step () ausführen, die unser Diagramm auf die Daten des n?chsten Jahres aktualisiert und den Timer um 1 erh?ht. Wenn der Timer ist zu einem Wert von 49 (dem letzten Jahr in unseren Daten), es wird sich selbst zurücksetzen. Dies gibt uns jetzt eine sch?ne Schleife, die kontinuierlich laufen wird:

, um die Dinge etwas nützlicher zu machen. Ich werde auch einige Etiketten hinzufügen, die uns die rohen Figuren geben. Ich ersetze den gesamten HTML -Code im Gremium unserer Datei durch:

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Wir strukturieren unsere Seite hier mit dem Grid -System von Bootstrap, mit dem wir unsere Seitenelemente in K?stchen ordentlich formatieren k?nnen.

Ich werde das alles mit JQuery aktualisieren, wenn sich unsere Daten ?ndert:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Ich werde auch ein paar ?nderungen an den CSS oben in unserer Datei vornehmen, die uns eine Legende für jedes unserer B?gen geben und auch unsere überschrift zentrieren:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Was wir am Ende haben, ist etwas ziemlich Pr?sentierbares:

Da es ziemlich schwierig ist zu sehen, wie sich diese B?gen hier im Laufe der Zeit ver?ndert haben, m?chte ich einige Grid -Linien hinzufügen, um zu zeigen, wie die Einkommensverteilung im ersten Jahr unserer Daten aussah:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Ich verwende die Methode Array.foreach (), um dies zu erreichen, obwohl ich auch mit D3s üblichem Allgemeines Update -Muster vergehen kann (Join/Exit/Update/Eingabetaste).

Ich m?chte auch eine Linie hinzufügen, um das durchschnittliche Einkommen in den USA zu zeigen, das ich jedes Jahr aktualisieren werde. Zun?chst füge ich zum ersten Mal die durchschnittliche Zeile hinzu:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Dann werde ich dies am Ende unserer Update () -Funktion aktualisieren, wenn sich das Jahr ?ndert:

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>

Ich sollte beachten, dass es für uns wichtig ist, jeden dieser Kreise nach unserem ersten Aufruf zum Update () hinzuzufügen, da sie sonst zwischen jeweils wiedergegeben werden Unsere ARC-Pfade (SVG-Schichten werden durch die Reihenfolge bestimmt, in der sie dem Bildschirm hinzugefügt werden, und nicht durch ihre Z-Index).

Zu diesem Zeitpunkt haben wir etwas, das die Daten vermittelt, mit denen wir etwas klarer arbeiten:

IT interaktiv

Als letzter Schritt m?chte ich, dass wir einige Steuerelemente hinzufügen, damit der Benutzer in ein bestimmtes Jahr streichen kann. Ich m?chte eine

-Spiele/Pause -Taste sowie einen Jahrschieberegler hinzufügen, sodass der Benutzer ein bestimmtes Datum ausw?hlen kann.

Hier ist das HTML, mit dem ich diese Elemente auf dem Bildschirm hinzufügt:

d3<span>.json("data.json", type).then(data => {
</span>  <span>// Do something with our data
</span><span>});
</span>

Wir müssen einige Ereignish?rer zu diesen beiden Elementen hinzufügen, um das Verhalten zu entwickeln, das wir suchen.

Zuerst m?chte ich das Verhalten unserer

spiele/pause definieren. Wir müssen den Code, den wir früher für unser Intervall geschrieben haben, ersetzen, damit wir den Timer mit der Taste starten k?nnen. Ich gehe davon aus, dass die Visualisierung in einem "Pause" beginnt und dass wir diese Taste drücken müssen, um die Dinge zu starten.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

Wenn unsere Schaltfl?che klickt, wird unser If/sonst -Block hier ein anderes Verhalten definieren, je nachdem, ob unsere Schaltfl?che eine Schaltfl?che ?Spielen“ oder eine Schaltfl?che ?Pause“ ist. Wenn auf der Schaltfl?che, auf die wir klicken, lautet "Spielen", wechseln wir die Schaltfl?che auf eine "Pause" -Taste und beginnen unsere Intervallschleife. Wenn die Schaltfl?che eine Schaltfl?che "Pause" ist, ?ndern wir den Text in "Spielen" und verwenden die Funktion clearInterval (), um die Schleife vom Ausführen zu verhindern.

Für unseren Schieberegler m?chte ich den Schieberegler verwenden, der mit der Jquery UI -Bibliothek geliefert wird. Ich füge dies in unser HTML ein und werde ein paar Zeilen schreiben, um dies dem Bildschirm hinzuzufügen:

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

Hier verwenden wir die Folienoption, um einen Ereignish?rer an den Schieberegler anzubringen. Immer wenn unser Schieberegler auf einen anderen Wert verschoben wird, aktualisieren wir unseren Timer auf diesen neuen Wert und führen in unseren Daten in diesem Jahr unsere Funktion update () aus.

.

Wir k?nnen diese Zeile am Ende unserer Update () -Funktion hinzufügen, sodass unser Schieberegler zum richtigen Jahr weitergeht, wenn unsere Schleife ausgeführt wird:

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

Ich füge auch eine Zeile zu unserer Funktion updateHTML () hinzu (die ausgeführt wird, wenn sich unsere Visualisierung ?ndert), die den Wert des Etiketts basierend auf dem aktuellen Jahr in den Daten anpassen kann:

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

Ich werde noch ein paar Zeilen in unser CSS einwerfen, damit alles ein wenig ordentlicher aussieht:

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

Und da haben wir es - unser fertiges Produkt - eine voll funktionsf?hige interaktive Datenvisualisierung, wobei alles wie erwartet funktioniert.

Hoffentlich hat dieses Tutorial die wahre Kraft von D3 gezeigt, sodass Sie absolut alles erstellen k?nnen, was Sie sich vorstellen k?nnen.

Beginn mit D3 von Grund auf ist immer ein schwieriger Prozess, aber die Belohnungen sind es wert. Wenn Sie lernen m?chten, wie Sie eigene visuelle Visualisierungen erstellen m?chten, finden Sie hier einige Online -Ressourcen, die Sie m?glicherweise hilfreich finden:

• Ein überblick über den D3.JS -Inhalt von SitePoint.
• Die Einführung in die Bibliothek auf der Homepage von D3. Dies l?uft durch einige der grundlegendsten Befehle und zeigt Ihnen, wie Sie Ihre ersten Schritte in D3 ausführen.
• "Lass uns ein Balkendiagramm erstellen" von Mike Bostock - dem Sch?pfer von D3 - zeigt Anf?nger, wie man eines der einfachsten Grafiken in der Bibliothek erstellt.
• d3.js in Aktion von Elijah Meeks (35 US -Dollar), ein solides Einführungsschild, das in viele Details geht.
Der Slack -Kanal von
• D3 ist sehr willkommen für Newcomer von D3. Es hat auch einen Abschnitt ?Lernmaterialien“ mit einer Sammlung gro?artiger Ressourcen.
• Dieser Online -Udemy -Kurs (20 US -Dollar), der alles in der Bibliothek in einer Reihe von Videovorlesungen abdeckt. Dies richtet sich an JavaScript -Entwickler und umfasst vier coole Projekte.
• Die Vielzahl von Beispielvisualisierungen, die unter bl.ocks.org und blockbuilder.org erh?ltlich sind.
• Die D3 -API -Referenz, die eine gründliche technische Erkl?rung für alles gibt, was D3 zu bieten hat.

Und vergessen Sie nicht, wenn Sie die fertige Version des Codes sehen m?chten, den ich im Artikel verwendet habe, k?nnen Sie ihn in unserem Github -Repo finden.

h?ufig gestellte Fragen (FAQs) zur interaktiven Datenvisualisierung mit JavaScript und D3

Welche Bedeutung hat D3 für die interaktive Datenvisualisierung? Sie k?nnen beliebige Daten an ein DOMR-Modell (Dokumentobjektmodell) binden und dann datengesteuerte Transformationen in das Dokument anwenden. D3 ist kein monolithischer Rahmen, der versucht, jedes denkbare Merkmal zu liefern. Stattdessen l?st es den Kern des Problems: Effiziente Manipulation von Dokumenten basierend auf Daten. Dies vermeidet eine propriet?re Repr?sentation und bietet au?ergew?hnliche Flexibilit?t, wobei die vollst?ndigen Funktionen von Webstandards wie HTML, SVG und CSS aufgedeckt werden. ist einzigartig, da es Ihnen die Flexibilit?t bietet, Datenvisualisierungen zu erstellen, die mit anderen Bibliotheken nicht m?glich sind. Sie k?nnen das DOM direkt manipulieren, was bedeutet, dass Sie die vollst?ndige Kontrolle über das endgültige Erscheinungsbild Ihrer Visualisierung haben. D3 verwendet auch einen deklarativen Ansatz, was bedeutet, dass Sie definieren, wie das Endergebnis aussehen soll, und D3 zeigt, wie Sie dorthin gelangen.

Kann ich D3 für gro?e Datens?tze verwenden? Ja, D3 kann gro?e und komplexe Datens?tze umgehen. Es verfügt über leistungsstarke Datenmanipulationsfunktionen, mit denen Sie in jedem Format mit Daten arbeiten k?nnen. D3 verfügt au?erdem über integrierte Funktionen zum Laden von Daten aus verschiedenen Quellen, um die Integration in Ihre vorhandene Dateninfrastruktur zu vereinfachen.

Wie kann ich meine D3 -Visualisierungen interaktiv machen? Sie k?nnen Event -H?rer verwenden, um auf Benutzeraktionen wie Klicks oder Mausbewegungen zu reagieren, und Sie k?nnen überg?nge zu animierten ?nderungen Ihrer Daten verwenden. D3 unterstützt auch Zooming und Schwung, was nützlich sein kann, um gro?e Datens?tze zu erforschen. Wissenschaft zu Gesch?ft. Einige h?ufige Anwendungsf?lle umfassen das Erstellen interaktiver Karten, das Erstellen dynamischer Diagramme und Grafiken, das Visualisieren komplexer Netzwerke und das Erstellen benutzerdefinierter datengesteuerter Animationen. Ein grundlegendes Verst?ndnis von JavaScript ist erforderlich, um D3 effektiv zu verwenden. D3 ist eine JavaScript -Bibliothek, daher müssen Sie JavaScript -Code schreiben, um Ihre Visualisierungen zu erstellen. Die API von D3 ist jedoch intuitiv und leicht zu erlernen. Selbst wenn Sie kein JavaScript -Experte sind, k?nnen Sie dennoch leistungsstarke Visualisierungen mit D3 erstellen. ? Sie k?nnen beispielsweise D3 verwenden, um die Visualisierungskomponente einer gr??eren Anwendung zu erstellen, die mit einem Framework wie React oder Winkel erstellt wurde.

Ist D3 für die Visualisierung von Echtzeitdaten geeignet? ist gut geeignet für die Echtzeit-Datenvisualisierung. Es verfügt über einen flexiblen Daten -Update -Mechanismus, mit dem Sie Ihre Visualisierungen nach dem Eintauchen neuer Daten einfach aktualisieren k?nnen. Dadurch ist D3 eine gro?artige Wahl für Anwendungen wie Dashboards oder Live -Daten -Feeds.

Wie kann ich D3 lernen?

Es stehen viele Ressourcen zum Lernen D3 zur Verfügung. Die offizielle D3 -Website verfügt über eine Fülle von Dokumentationen und Beispielen, und es gibt zahlreiche Online -Tutorials und Kurse, die D3 ausführlich abdecken. Praxis ist auch der Schlüssel - je mehr Sie D3 verwenden, desto komfortabler werden Sie mit seinen Konzepten und API.

Was sind die Grenzen von D3? Es hat einige Einschr?nkungen. Es erfordert ein gutes Verst?ndnis von JavaScript- und Webstandards, was für Anf?nger ein Hindernis sein kann. D3 überl?sst auch viele Entscheidungen dem Entwickler, was überw?ltigend sein kann, wenn Sie nicht sicher sind, wo Sie anfangen sollen. W?hrend D3 in der Lage ist, gro?e Datens?tze zu bearbeiten, kann die Leistung zu einem Problem mit sehr gro?en oder komplexen Visualisierungen werden.

Das obige ist der detaillierte Inhalt vonInteraktive Datenvisualisierung mit modernem JavaScript und D3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!