TOC

Erste Schritte mit der Datenvisualisierung mit JavaScript und der D3-Bibliothek

Einführung

  • D3.js * oder D3 ist eine JavaScript-Bibliothek. Der Name steht für D ata - D riven D ocuments (3 "D" s) und ist als interaktive und dynamische Datenvisualisierungsbibliothek für das Web bekannt.

Die erste Veröffentlichung von D3 im Februar 2011 erfolgte im Juni 2016. Zum Zeitpunkt des Schreibens ist die neueste stabile Version 4.4 und wird ständig aktualisiert.

D3 nutzt das Format * Scalable Vector Graphic * oder * SVG *, mit dem Sie Formen, Linien und Füllungen rendern können, die vergrößert oder verkleinert werden können, ohne an Qualität zu verlieren.

Dieses Tutorial führt Sie durch die Erstellung eines Balkendiagramms mit der JavaScript D3-Bibliothek.

Voraussetzungen

Um dieses Tutorial optimal nutzen zu können, sollten Sie mit der Programmiersprache JavaScript sowie mit CSS- und HTML-Kenntnissen vertraut sein.

Obwohl Sie CSS verwenden, um D3 zu formatieren, ist es erwähnenswert, dass viele Standard-CSS, die in HTML funktionieren, in SVG anders funktionieren + Fülle + anstelle von + Farbe + `. Weitere Informationen finden Sie im Mozilla Developer Network-Artikel zu SVG und CSS.

Wir verwenden einen Texteditor und einen Webbrowser. Zu Testzwecken wird empfohlen, ein Tool zum Überprüfen und Debuggen von JavaScript, HTML und CSS zu verwenden, z. B. Firefox Developer Tools oder https: / /developer.chrome.com/devtools[Chrome DevTools].

Schritt 1 - Dateien und Referenz erstellen D3

Beginnen wir mit der Erstellung eines Verzeichnisses, in dem alle unsere Dateien gespeichert werden. Sie können es so nennen, wie Sie möchten. Wir nennen es hier. Wechseln Sie in das Verzeichnis, sobald es erstellt wurde.

mkdir
cd

Um die Funktionen von D3 nutzen zu können, müssen Sie die Datei "+ d3.js +" in Ihre Webseite einfügen. Es ist ungefähr 16.000 Zeilen lang und 500 KB groß.

Verwenden Sie "+ curl", um die Datei in Ihr Verzeichnis herunterzuladen.

Geben Sie Folgendes ein, um eine komprimierte Version herunterzuladen, die sich besser für die Einbindung in Ihr Projekt eignet:

curl https://d3js.org/d3.v4.min.js --output d3.min.js

Wenn Sie den D3-Code lesen möchten, ist es wahrscheinlich besser, die unkomprimierte Version mit menschlichem Leerzeichen zu erhalten, indem Sie Folgendes eingeben:

curl https://d3js.org/d3.v4.js --output d3.js

In diesem Lernprogramm wird die Datei "+ d3.min.js" verwendet. Wenn Sie sich jedoch für die lesbare Version entscheiden, geben Sie stattdessen "+ d3.js" in Ihrer HTML-Datei an.

Da D3 Version 4 modular aufgebaut ist, können Sie alternativ die Dateigröße reduzieren, indem Sie nur die Module einbeziehen, die Sie verwenden werden.

Nachdem D3 heruntergeladen wurde, richten wir unsere CSS- und HTML-Dateien ein. Sie können den Texteditor auswählen, mit dem Sie diese Datei bearbeiten möchten, z. B. "+ nano ". Wir beginnen mit der CSS-Datei " style.css +", damit wir aus unserer HTML-Datei sofort darauf verlinken können.

nano style.css

Wir beginnen mit einer Standard-CSS-Deklaration, um die Seite auf 100% Höhe und ohne Rand zu formatieren.

html, body {
 margin: 0;
 height: 100%;
}

Sie können die CSS-Datei jetzt speichern und schließen.

Als Nächstes erstellen wir unsere JavaScript-Datei mit dem Namen "+ barchart.js", da wir für dieses Beispiel ein Balkendiagramm erstellen werden. In dieser Datei wird der Großteil unserer D3-Arbeit gespeichert, an der wir im nächsten Schritt arbeiten werden. Da wir die Datei jetzt nicht öffnen müssen, können wir den Befehl "+ touch +" verwenden.

touch barchart.js

Verbinden wir zunächst alle diese Elemente mit einer HTML-Datei, die wir "+ barchart.html +" nennen:

nano barchart.html

Wir können diese Datei wie die meisten anderen HTML-Dateien einrichten und darin verweisen wir auf die soeben erstellten Dateien "+ style.css " und " barchart.js " sowie auf das Skript " d3.min.js +" .

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>
   <link rel="stylesheet" type="text/css" href="style.css">

   <!-- Alternatively use d3.js here -->
   <script type="text/javascript" src="d3.min.js"></script>

 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

Die HTML-Datei kann vorerst gespeichert und geschlossen werden.

Schritt 2 - Einrichten der SVG in JavaScript

Wir können jetzt die Datei "+ barchart.js +" mit unserem Texteditor Ihrer Wahl öffnen:

nano barchart.js

Beginnen wir mit dem Hinzufügen einer Reihe von Zahlen, die wir als Grundlage für unser Balkendiagramm verwenden:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Als nächstes müssen wir das SVG-Element erstellen. Hier werden wir alle unsere Formen platzieren. In D3 verwenden wir "+ d3.select +", um den Browser anzuweisen, nach Elementen zu suchen.

Wir können dies mit der einzelnen Zeile + d3.select (" body "). Append (" svg "); + tun, aber es wäre besser, wenn wir sie als Variable deklarieren, damit wir sie in unserem Code leicht referenzieren können später.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Wenn wir jetzt "+ barchart.html +" in den Webbrowser Ihrer Wahl laden, sollten wir in der Lage sein, die DOM oder zu überprüfen * Dokumentieren Sie das Objektmodell * mit unseren Entwicklertools und bewegen Sie den Mauszeiger über die SVG-Box. Abhängig von Ihrem Browser kann es recht klein sein.

Bild: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-svg-dom.png [D3 SVG sichtbar in DOM]

Zurück in unserer JavaScript-Datei können wir * Attribute * an die SVG-Datei ketten, um sie auf die volle Höhe und Breite der Webseite zu bringen. Wir verwenden "+ .attr () +" für das Attribut. Obwohl wir dies alles in einer Zeile halten können, ist es ein wenig lesbarer, dies aufzubrechen. Stellen Sie sicher, dass Sie Ihr Semikolon nach unten an das Ende der Variablendeklaration verschieben.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")

Wenn Sie die Seite in Ihrem Browser neu laden, sollte ein Rechteck angezeigt werden, das den gesamten Bildschirm einnimmt, wenn Sie mit der Maus über das DOM fahren.

Schritt 3 - Hinzufügen von Rechtecken

Mit unserer SVG können wir Rechtecke unseres Datensatzes zur JavaScript-Datei hinzufügen.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

Wie bei + d3.select oben weisen wir den Browser an, nach Elementen zu suchen. Diesmal handelt es sich um ein Array von Rechtecken. Da es sich um ein Array handelt, verwenden wir "+ d3.selectAll " und " d3.selectAll (" rect ") +", da es sich um ein Array von Rechtecken handelt. Wenn der Browser Rechtecke findet, werden diese in einer Auswahl zurückgegeben. Wenn sie leer sind, werden sie leer zurückgegeben. Mit D3 müssen Sie zuerst die Elemente auswählen, auf die Sie einwirken möchten.

Wir binden dieses Rechteckarray an die in + dataArray + gespeicherten Daten mit + .data (dataArray) +.

Um tatsächlich ein Rechteck für jedes Element in der Auswahl hinzuzufügen (das dem Datenarray entspricht), fügen wir außerdem "+ .enter (). Append (" rect "); +" hinzu, um die Rechtecke anzuhängen. In diesem Beispiel gibt es 9 Rechtecke, die den 9 Zahlen im Array entsprechen.

Wenn Sie Ihre Seite jetzt neu laden, werden noch keine Rechtecke angezeigt. Wenn Sie jedoch das DOM aktivieren, werden dort 9 Rechtecke definiert.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-rectangles.png [In DOM gezeigte D3-Rechtecke]

Wir haben noch keine Attribute für die Rechtecke festgelegt, um sie sichtbar zu machen. Fügen Sie diese also hinzu.

Festlegen von Attributen für Formen

Wir können Formen Attribute hinzufügen, so wie wir Attribute für die SVG definiert haben, indem wir "+ .attr () +" verwenden. Jede Form in D3 weist unterschiedliche Attribute auf, je nachdem, wie sie definiert und gezeichnet wurden.

Unsere Rechtecke enthalten 4 Attribute:

  • + (" height "," ") + für die Höhe der Rechtecke

  • + (" width "," ") + für die Breite der Rechtecke

  • + (" x "," ") + für den Abstand von der linken Seite des Browserfensters

  • + (" y "," ") + für den Abstand vom oberen Rand des Browserfensters

Wenn wir also Rechtecke möchten, die beispielsweise 250 Pixel hoch, 40 Pixel breit, 25 Pixel von der linken Seite des Browsers und 50 Pixel von oben entfernt sind, schreiben wir unseren Code wie folgt:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

Wenn wir den Browser aktualisieren, werden alle Rechtecke überlappend angezeigt:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-overlapping-rectangles.png [D3-Rechtecke überlappen sich in Standardschwarz]

Standardmäßig sind Formen in D3 schwarz ausgefüllt. Dies können wir jedoch später ändern, wenn wir zuerst die Position und Größe der Rechtecke festlegen müssen.

Die Rechtecke spiegeln die Daten wider

Derzeit haben alle Rechtecke in unserem Array dieselbe Position entlang der X-Achse und stellen die Daten nicht in Bezug auf die Höhe dar.

Um die Position und Größe der Rechtecke zu ändern, müssen wir für einige unserer Attribute functions einführen. Durch Hinzufügen der Funktionen wird der Wert dynamischer als manuell.

Beginnen wir mit dem Ändern des Attributs "+ x +". Derzeit sieht diese Codezeile folgendermaßen aus:

       .attr("x","25")

Wir werden die Zahl von 25 Pixeln durch eine Funktion ersetzen. Wir übergeben zwei durch D3 definierte Variablen an + function () +, die für Datenpunkt und Index stehen. Der Index gibt die Position des Datenpunkts innerhalb des Arrays an. Es ist üblich, "+ d " für den Datenpunkt und " i " für den Index zu verwenden, wie in " function (d, i) +", aber Sie können beliebige Variablen verwenden.

JavaScript durchläuft "+ d " und " i ". Fügen Sie für jeden Index, über den iteriert wird, einen Abstand hinzu, sodass jedes Rechteck einen Abstand aufweist. Um dies zu erreichen, können wir den Index " i +" mit einer bestimmten Anzahl von Pixeln multiplizieren. Wir werden vorerst 60 verwenden, aber Sie können entscheiden, welcher Abstand für Sie am besten geeignet ist. Unsere neue Zeile für das X-Achsen-Attribut sieht jetzt so aus:

       .attr("x", function(d, i) {return i * 60;})

Wenn wir den Code jetzt ausführen, werden wir jedoch feststellen, dass die Rechtecke an der linken Seite des Browsers ausgerichtet sind. Fügen Sie dort also einen zusätzlichen Abstand hinzu, z. B. 25 Pixel vom Rand entfernt. Jetzt sollte unser vollständiger Code so aussehen:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("height","250")
         .attr("width","40")

         .attr("y","50");

Wenn wir den Browser zu diesem Zeitpunkt aktualisieren, sehen wir Folgendes:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/9-d3-rectangles.png [D3-Rechtecke mit Abstand]

Jetzt haben wir unsere Rechtecke entlang der X-Achse verteilt, die für jedes der Elemente in unserem Array repräsentativ sind. Lassen Sie als Nächstes die Höhe der Rechtecke die Daten im Array widerspiegeln.

Wir arbeiten jetzt mit dem Attribut "+ height " und werden eine Funktion hinzufügen, die der Funktion ähnelt, die wir dem Attribut " x " hinzugefügt haben. Beginnen wir mit der Übergabe der Variablen " d " und " i " an " function " und geben " d " zurück. Denken Sie daran, dass " d +" für Datenpunkt steht.

         .attr("height", function(d, i) {return (d)})

Wenn Sie den Code jetzt ausführen, werden Sie zwei Dinge bemerken. Erstens, dass die Rechtecke eher klein sind und zweitens, dass sie eher am oberen als am unteren Rand des Diagramms angebracht sind.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-chart-top-to-bottom.png [D3-Balkendiagramm von oben nach unten]

Um die geringe Größe der Rechtecke zu beheben, multiplizieren wir das zurückgegebene "+ d +":

         .attr("height", function(d, i) {return (d * 10)})

Die Rechtecke sind jetzt größer, werden jedoch weiterhin von oben nach unten angezeigt.

Browser lesen Webseiten im Allgemeinen von links oben nach rechts unten, während wir Balkendiagramme von unten nach oben lesen. Um die Rechtecke neu zu positionieren, ändern wir das Attribut "+ y +", um das Leerzeichen oben zu subtrahieren.

Auch hier verwenden wir die Funktion "" (d, i) + "und geben einen Y-Wert zurück, der größer als der höchste Wert unseres Balkendiagramms ist, z. B. 400. Wir subtrahieren die zurückgegebene Höhe von " (d * 10) +" von 400, sodass unsere Zeile jetzt so aussieht:

         .attr("y", function(d, i) {return 400 - (d * 10)});

Schauen wir uns unseren vollständigen JavaScript-Code an:

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})

Zu diesem Zeitpunkt sehen wir beim Neuladen unserer Seite ein Balkendiagramm, das wir von unten nach oben lesen können:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-black.png [D3-Balkendiagramm in Schwarz]

Jetzt können wir daran arbeiten, das Diagramm zu gestalten.

Schritt 4 - Styling mit D3

Wir werden mit unserer CSS-Datei arbeiten, um unsere D3-Formen zu gestalten. Um diese Arbeit jedoch zu vereinfachen, geben wir unseren Rechtecken in der JavaScript-Datei einen Klassennamen, auf den wir in unserer CSS-Datei verweisen können.

Das Hinzufügen einer Klasse entspricht dem Hinzufügen eines beliebigen anderen Attributs in Punktnotation. Wir nennen die Klasse "+ bar +", da es sich um ein Balkendiagramm handelt. Sie kann jedoch beliebig aufgerufen werden, solange sich alle Referenzen auf denselben Namen beziehen. Unsere Syntax sieht folgendermaßen aus:

         .attr("class", "bar")

Wir können dieses Attribut hinzufügen, wo immer wir möchten. Wenn Sie es als erstes Attribut beibehalten, können Sie in unserer CSS-Datei leichter darauf verweisen.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Wechseln wir nun zu unserer Datei "+ style.css +", die derzeit so aussieht:

style.css

html, body {
 margin: 0;
 height: 100%
}

Wir können beginnen, unsere Rechtecke zu ändern, indem wir ihre Füllfarbe ändern und dabei auf die soeben erstellte Klasse + bar + verweisen:

style.css

html, body {
 margin: 0;
 height: 100%
}

Hier haben wir die Rechtecke blau gemacht und können ihnen alternativ einen hexadezimalen Farbcode zuweisen, wie in:

.bar {
 fill: #0080FF
}

Zu diesem Zeitpunkt sehen unsere Rechtecke folgendermaßen aus:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-blue-fill.png [D3 Balkendiagramm blau füllen]

Wir können den Rechtecken zusätzliche Werte zuweisen, z. B. "+ Strich ", um die Rechtecke in einer bestimmten Farbe zu skizzieren, und " Strichbreite +":

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF;


}

Dadurch erhalten unsere Rechtecke einen schwarzen Umriss mit einer Breite von 5 Pixel.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/bar-chart-blue-fill-black-stroke.png [D3 Balkendiagramm blau füllen schwarz 5px Strich]

Zusätzlich können wir unserem Diagramm einen Hauch von Interaktivität hinzufügen, indem wir das Styling für die Balkenfarbe hinzufügen, die sich beim Bewegen der Maus ändert:

.bar:hover {
 fill: red
}

Wenn wir nun mit der Maus über eines der Rechtecke fahren, ändert sich dieses Rechteck in Rot:

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-red-hover-bar-chart.png [D3 Balkendiagramm Farbe interaktiv]

Alternativ können Sie die Formen in Ihrer JavaScript-Datei formatieren, indem Sie zusätzliche Attribute hinzufügen. Im Rechteckblock schreiben wir diese wie die anderen Attribute + .attr () +. Das Hinzufügen eines schwarzen Strichs um die Rechtecke wird also als "+ .attr (" stroke "," black ") " geschrieben. Fügen wir außerdem ein " Strichbreite +" von 5 Pixeln hinzu und achten Sie darauf, das Semikolon nach unten zu verschieben.

barchart.js

...
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)})

         ;

Die Wahl liegt bei Ihnen, wie und in welcher Datei Sie Ihre Formen stylen möchten. In diesem Beispiel arbeiten wir in der Datei "+ style.css +" und beschränken uns darauf, die Farbe zu füllen und den Mauszeiger zu bewegen:

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

Wenn Sie mit Farben im Web arbeiten, ist es wichtig, dass Sie Ihr Publikum im Auge behalten und daran arbeiten, Farben einzubeziehen, die so universell wie möglich zugänglich sind. Weitere Informationen zu Überlegungen zur Farbzugänglichkeit finden Sie unter Acessibility & Me.

Schritt 5 - Etiketten hinzufügen

Unser letzter Schritt besteht darin, unserem Diagramm einige quantifizierbare Marker in Form von Beschriftungen hinzuzufügen. Diese Bezeichnungen entsprechen den Nummern in unserem Array.

Das Hinzufügen von Text ähnelt dem Hinzufügen der oben beschriebenen Rechteckformen. Wir müssen den Text auswählen und dann an die SVG anhängen. Wir binden es auch an das von uns erstellte "+ dataArray ". Anstelle von "" rect "" verwenden wir "" text "", aber das allgemeine Format ist ähnlich wie beim Hinzufügen der obigen Rechtecke. Wir werden diese Zeilen am Ende unserer Datei ` barchart.js +` einfügen.

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

Wenn wir Ihren Browser aktualisieren, wird kein Text auf der Seite angezeigt, aber in Ihrem DOM wird er erneut angezeigt:

Bild: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-text.png [D3-Text in DOM angezeigt]

Wenn Sie mit der Maus über die Textzeilen im DOM fahren, sehen Sie, dass sich der gesamte Text oben auf der Seite befindet, wobei X und Y gleich 0 sind. Wir werden die Position ändern, indem wir dieselben Funktionsformeln verwenden, die wir für die Rechtecke verwendet haben, indem wir Attribute hinzufügen.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         ;

Wenn Sie die Webseite jetzt laden, werden Zahlen über den Balken angezeigt.

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-labels-bar-chart.png [D3-Textbeschriftungen mit Balkendiagramm]

Beachten Sie, dass Sie den Text wie bei jedem anderen Text auf einer Seite auswählen können, da es sich um SVG und nicht um ein Bild handelt.

Von hier aus können Sie die Zahlen neu positionieren, indem Sie die Funktionsformeln ändern. Sie können sie über den Balken schweben lassen, zum Beispiel:

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
         .attr("x", function(d, i)
         .attr("y", function(d, i) ;

Alternativ können Sie die Zahlen selbst über die Rechtecke schweben lassen, indem Sie ihre Position in Bezug auf die Y-Achse ändern. Wir möchten dies auch lesbarer machen. Fügen wir also eine Klasse hinzu, auf die wir über unsere Datei "+ style.css +" zugreifen können.

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         .attr("x", function(d, i) {return (i * 60) + 36})
         .attr("y", function(d, i) ;

In unserer Datei "+ style.css +" machen wir den Text weiß und serifenlos, indem wir die folgenden Zeilen am Ende unserer Datei einfügen.

style.css

...
.text {
 fill: white;
 font-family: sans-serif
}

image: http: //assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-white-text-labels.png [D3-Textetiketten in Weiß mit Balkendiagramm]

Sie können den Text durch Positionieren und Stylen beliebig verändern. Beispielsweise möchten Sie möglicherweise auch das Attribut "+ font-size" in der Datei "+ style.css" ändern.

Fertiger Code und Code-Verbesserungen

Zu diesem Zeitpunkt sollten Sie ein voll funktionsfähiges Balkendiagramm in der JavaScript D3-Bibliothek haben. Sehen wir uns alle unsere Codedateien an.

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>

   <!-- Reference style.css -->
   <link rel = "stylesheet" type="text/css" href="style.css">

   <!-- Reference minified version of D3 -->
   <script type="text/javascript" src="d3.min.js"></script>
 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

style.css

html, body {
 margin: 0;
 height: 100%
}

/*Rectangle bar class styling*/

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

/*Text class styling*/

.text {
 fill: white;
 font-family: sans-serif
}

barchart.js

// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
          .attr("class", "text")
          .attr("x", function(d, i) {return (i * 60) + 36})
          .attr("y", function(d, i) {return 415 - (d * 10)});

Dieser Code ist voll funktionsfähig, aber Sie können eine Menge tun, um den Code zu verbessern. Sie können beispielsweise das SVG-Gruppenelement nutzen, um SVG-Elemente zu gruppieren, sodass Sie Ihren Text und Ihre Rechtecke in weniger Codezeilen ändern können.

Sie können auch auf verschiedene Arten auf Daten zugreifen. Wir haben ein Array verwendet, um unsere Daten zu speichern. Möglicherweise möchten Sie jedoch Daten visualisieren, auf die Sie bereits Zugriff haben, und es kann sich um erheblich mehr Daten handeln, als in einem Array funktionieren würde. Mit D3 können Sie mit verschiedenen Datendateitypen arbeiten:

  • HTML

  • JSON

  • Klartext

  • CSV (kommagetrennte Werte)

  • TSV (tabulatorgetrennte Werte)

  • XML

Sie können beispielsweise eine JSON-Datei im Verzeichnis Ihrer Website haben und diese mit der JavaScript-Datei verbinden

d3.json("myData.json", function(json) {
// code for D3 charts in here
});

Sie können die D3-Bibliothek auch mit anderen interaktiven Funktionen kombinieren, die Sie möglicherweise bereits von Vanilla JavaScript kennen.

Fazit

In diesem Tutorial wurde ein Balkendiagramm in der JavaScript D3-Bibliothek erstellt. Weitere Informationen zu d3.js finden Sie unter D3 API auf GitHub.

Andere Programmiersprachen bieten andere Möglichkeiten zur Visualisierung von Daten, die nicht auf Webbrowser beschränkt sind. Hier erfahren Sie, wie Sie https://www.digitalocean.com/community/tutorials/how-to-plot-data-in-python-3- using-matplotlib[matplotlib zum Plotten von Daten mit Python] verwenden.

Related