Das World Wide Web legt eine Fülle von Daten zu unseren Fingerspitzen. Aufgrund des bloßen Volumens dieser Daten kann es sich oft als schwierig erweisen, sie auf eine Weise zu präsentieren oder auf eine Weise zu erbringen, die Ihre Botschaft vermittelt. Hier kommen Datenvisualisierungen ins Spiel.
In diesem Artikel werde ich Sie durch die Erstellung einer Datenvisualisierung führen, nämlich das US -amerikanische Fahrzeug -Rückruf für den Monat Januar 2015 unter Verwendung der JavaScript -Bibliothek von Dimple.js JavaScript
Key Takeaways/odi Bereitstellung einer Rückrufdatei (die über ihre Website zugänglich ist), die alle NHTSA-Sicherheitsfehler- und Compliance-Kampagnen seit 1967 enthält. Unser Ziel ist es, die Daten für einen bestimmten Monat (( Januar 2015) und um ein Balkendiagramm daraus zu erstellen, das die Gesamtzahl der Fahrzeuge des Herstellers darstellt. Sehen Sie sich Visualisierung von Daten mit D3.JS an Veranschaulichen Sie Ihre Daten mit JavaScript
Sehen Sie sich diesen Kurs an Sehen Sie sich diesen Kurs an Diese Datenvisualisierung wird nicht erklärend sein (wir werden Rohdaten zeigen) und kaum explorativ (es gibt nicht viel Erzählungen für die Zuschauer, um aus diesen Daten zu erstellen). Ich beabsichtige jedoch, neben dem Diagramm zusätzliche Informationen anzuzeigen, wenn ein Benutzer über einer der Balken schwebt. Das ist, was wir am Ende haben:
Sie können eine (kleinere) Live -Demo am Ende des Artikels sehen oder das Original auf Codepen anzeigen. Arbeiten mit Daten
Die ursprüngliche Datei flat_rcl.txt (link) ist eine von Tab-tisch getrennte Wertedatei, die ein Lot von Daten enthält-109.682 Datensätze, um genau zu sein. Es gibt eine begleitende Datei rcl.txt (Link), in der die auf diese Daten bezogenen Spalten beschrieben werden.
Da wir nur an den Daten für Januar 2015 interessiert sind - oder eher die Aufzeichnungen, für die das Datum der Datensatzerstellung Januar 2015 ist - kann der Rest der Aufzeichnungen entfernt werden. Dazu verwende ich das OpenOffice -Calc -Tabellenkalkulationsprogramm (obwohl jede andere Tabellenkalkulationssoftware ausreicht). Die resultierende Datei, rcl_january_2015.csv (Link), zählt nur 201 Datensätze.
Wir müssen nun die Spalten auf eine Teilmenge der verfügbaren Personen reduzieren, nämlich:
Datum der Aufzeichnung erstellen, Hersteller, Modell, Modelljahr, Beginn der Herstellung, Enddatum der Herstellung, potenzielle Anzahl betroffener Einheiten, Mangelübersicht, Konsequenzübersicht und Korrekturzusammenfassung. Wir können dann die Spaltennamen in die erste Zeile der resultierenden CSV -Datei hinzufügen, rcl_january_2015_clean.csv (Link).
Dies gibt uns die Rohdaten, die wir für unsere Visualisierung benötigen.
Jetzt müssen wir die Rückrufe von Maker manuell gruppieren und die Datensätze mit demselben Defekt kombinieren. Wir müssen sicherstellen, dass die kombinierten Datensätze nach dem Datum sortiert werden, dann nach Modell und dass sie eine kumulative potenzielle Gesamtzahl der betroffenen Einheiten haben.
Wir werden eine JSON -Datenstruktur für diese Gruppierung verwenden.
Um dies zu veranschaulichen, verarbeiten wir die ersten drei Einträge der Datei rcl_january_2015_clean.csv. Diese können in eine Zeile unterteilt werden, in der die J4500 des MCI aus den Jahren 2013, 2014 und 2015, die die gleichen Herstellungsjahre haben, den gleichen Defekt aufweisen. Die potenzielle Anzahl der betroffenen Einheiten gruppiert diese drei Modelle bereits im Datensatz zusammen.
Hier ist die JSON -Datenstruktur, die wir verwenden werden:
<span>{
</span> <span>"items": [
</span> <span>{
</span> <span>"item": {
</span> <span>"date": "",
</span> <span>"models": [
</span> <span>""
</span> <span>],
</span> <span>"units": "",
</span> <span>"defect": "",
</span> <span>"consequence": "",
</span> <span>"corrective": ""
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>}</span>Nachdem wir diesen Prozess iteriert haben (und den Doppelzitaten entkommen) haben wir jetzt die CSV -Datei rcl_january_2015_json.csv (Link). Aus Gründen der Kürze zeigt unser Arbeitsbeispiel nur die ersten drei Hersteller der Originaldatei (3 von 46).
d3 bietet außergewöhnliche Unterstützung für Datendateiformate wie CSV, TSV oder JSON. Ein Ajax -Aufruf wird ausgeführt, um die Datei abzurufen, dann wird er analysiert und in ein JavaScript -Array umgewandelt. Die von uns erstellte CSV -Datei kann mit dem folgenden Code abgerufen werden:
d3<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>Wir können das JavaScript -Array auch direkt im Code definieren, das wir hier für die Zwecke unserer Codepen -Demo tun werden. Die Datenstruktur wurde so nah wie möglich an das Array D3 aus der CSV -Datei erstellt.
data <span>= [
</span> <span>{
</span> <span>'Record creation date':'20150105',
</span> <span>'Maker':'MCI',
</span> <span>'Potential number of units affected':'109',
</span> <span>'JSON data': '{
</span> <span>"items":[
</span> <span>{
</span> <span>"item": {
</span> <span>"date":"January, 5 2015",
</span> <span>"models":[
</span> <span>"J4500 (years 2013, 2014, 2015) ..."
</span> <span>],
</span> <span>"units":"109",
</span> <span>"defect":"...",
</span> <span>"consequence":"...",
</span> <span>"corrective":"..."
</span> <span>}
</span> <span>}
</span> <span>]
</span> <span>}'
</span> <span>},
</span> <span>...
</span><span>];</span><span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>
Die HTML ist unkompliziert: zwei Divs, eine für das Diagramm (Rückrufschart), der andere, um zusätzliche Details anzuzeigen, wenn der Benutzer über einen der Balken (Rückrufdetails) schwebt.
<span>{
</span> <span>"items": [
</span> <span>{
</span> <span>"item": {
</span> <span>"date": "",
</span> <span>"models": [
</span> <span>""
</span> <span>],
</span> <span>"units": "",
</span> <span>"defect": "",
</span> <span>"consequence": "",
</span> <span>"corrective": ""
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>}</span>Wir fügen dem Div -Element zuerst ein SVG -Objekt hinzu und verweisen auf seine ID. Dann verknüpfen wir unsere Daten mit unserem neuen Diagramm, das in der SVG gerendert wird. Schließlich setzen wir die Diagrammgrenzen manuell, um sie in seinem übergeordneten Div.
richtig zu positionierend3<span>.csv("RCL.csv", function (data) {
</span> <span>// process the data
</span><span>});</span>Wir setzen die x-Achse des Diagramms auf das Maker-Feld unserer Daten-wir verwenden die addCategoryaxis-Methode, da die Hersteller kategoriale Daten darstellen. Wir bestellen die Macher alphabetisch mit der AddorderRule-Methode und verbergen den X-Achse-Titel (der der Macher gewesen wäre), da die Namen der Macher selbsterklärend sind.
data <span>= [
</span> <span>{
</span> <span>'Record creation date':'20150105',
</span> <span>'Maker':'MCI',
</span> <span>'Potential number of units affected':'109',
</span> <span>'JSON data': '{
</span> <span>"items":[
</span> <span>{
</span> <span>"item": {
</span> <span>"date":"January, 5 2015",
</span> <span>"models":[
</span> <span>"J4500 (years 2013, 2014, 2015) ..."
</span> <span>],
</span> <span>"units":"109",
</span> <span>"defect":"...",
</span> <span>"consequence":"...",
</span> <span>"corrective":"..."
</span> <span>}
</span> <span>}
</span> <span>]
</span> <span>}'
</span> <span>},
</span> <span>...
</span><span>];</span>Wir setzen die y-Achse des Diagramms auf die potenzielle Anzahl der Einheiten betroffenen Bereiche unserer Daten. Wir hätten die addMeasureAxis . In diesem Fall gibt eine logarithmische Skala mehr Raum für kleinere Werte. Daher verwenden wir die Addlogaxis -Methode, die standardmäßig Basis 10.
<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span> </span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>
Jetzt, da wir unsere Achsen definiert haben, können wir sie zusammenbinden, um eine Grafik zu machen. Zu diesem Zweck wählen wir ein Balkendiagramm über Dimple.Plot.BAR und binden es an das Feld Maker -Daten. Das zweite Array -Element, JSON Data, wird den JSON -Teil unserer Daten an jede Balken verbinden und es uns ermöglichen, auf die richtigen Daten zuzugreifen, wenn sie mit der Maus über die Balken schweben.
<span>var svg = dimple.newSvg("#RecallsChart", 800, 560);
</span><span>var myChart = new dimple<span>.chart</span>(svg, data);
</span>myChart<span>.setBounds(60, 30, 710, 355)</span>Die GetToolTipText -Funktion wird hier überladen, um die JSON -Daten zu verarbeiten und sie in einer anderen DIV zur Seite anzuzeigen. Es gibt ein Array der Daten zurück, die wir als Tooltip anzeigen möchten, nämlich den Namen des Herstellers (das erste aggregierte Feld unserer Datenlinie) und die Anzahl der betroffenen Einheiten (die wir aus der Y-Achse erhalten und die wir lokalisieren, Das generische englische Zahlformat über die integrierte tolocalestring JavaScript-Methode).
Aber kehren wir zur Analyse der JSON -Daten zurück.
Die beiden aggregierten Felder, auf die wir auf (Aggfield [0] und Aggfield [1]) zugreifen des zugrunde liegenden Elementobjekts.
Wir analysieren die JSON -String mit der Parsejson -Funktion von Jquery, setzen eine Reihe von Titeln in voller Länge, die den Schlüssel unseres JSON -Objekts entsprechen, und bauen dann durch das Iterieren über das JSON -Objekt eine HTML Relastdetails.
<span>var x = myChart.addCategoryAxis("x", "Maker");
</span>x<span>.addOrderRule("Maker");
</span>x<span>.title = '';</span>
myChart<span>.addLogAxis("y", "Potential number of units affected");</span>standardmäßig werden die X-Achsenbezeichnungen horizontal geschrieben. Aber sie können sich leicht überlappen, also werden wir sie stattdessen vertikal schreiben. Hier ist die Exposition seiner zugrunde liegenden D3 -Objekte durch Dimple nützlich. Bitte beachten Sie, dass wir es nur ändern können, sobald das Diagramm gezogen wurde, daher nach dem Aufruf von mychart.draw ().
Um dies zu tun, wählen wir zuerst jeden Labeltext oder vielmehr die mit der X-Achse verknüpfte passende SVG-Form für jedes Etikett aus. Die Methode getBbox () gehört zu den Schnittstellenvegel-VGlocatable und gibt ein SVGRECT -Objekt zurück, das das Begrenzungsfeld definiert und seine Koordinaten, Höhe und Breite freigibt. Wir führen dann eine Rotation der SVG-Box und eine leichte vertikale Übersetzung durch, um sie der x-Achsenlinie näher zu bringen.
Und hier ist das Endergebnis:
Siehe die Pen -Fahrzeuge für Januar 2015 von SitePoint (@sinepoint) auf CodePen.
Die Breite dieses Stifts wurde reduziert, um ihn in den Artikel zu passen. Sie können den ursprünglichen Codepen hier sehen
In diesem Artikel haben wir gesehen, wie Daten für die Datenvisualisierung aufräumen und vorbereitet werden und speziell eine Datenstruktur definieren, die dem Endergebnis entspricht, das wir berücksichtigen. Wir haben sowohl die Bibliotheken dimple.js als auch d3.js mit einigen begrenzten Aufrufen von JQuery (hauptsächlich mit der JSON -Verarbeitung) verwendet. Wir haben das Balkendiagramm aus unseren Daten mit ein wenig explorativen Interaktion gezogen, indem wir die Tooltip -Funktion von Dimple überladen. Wir haben auch auf das zugrunde liegende D3-Objekt zugegriffen, um die X-Achse-Bezeichnungen zu manipulieren.
Als Randnotiz ist SVG jetzt weit verbreitet, aber es ist eine gute Praxis, es vorher zu überprüfen (zum Beispiel mit Modernizr) und einen Fallback wie ein PNG -Bild überall dort zu liefern. Natürlich sollte auch die bedingte Belastung von D3.js und dimple.js berücksichtigt werden.
Wenn Sie tiefer in die Datenvisualisierung eintauchen möchten, bietet Udacity ein selbstgepaartes MOOC mit dem Titel Datenvisualisierung und D3.Js, die Visualisierungskonzepte, die Verwendung von D3.Js und Dimple.js, narrative Strukturen und Animationen abdecken. Außerdem ist die Website von Mike Bostock (der Schöpfer von D3.JS) die perfekte Quelle, wenn Sie die Konzepte hinter dieser Bibliothek verstehen möchten, während sowohl Dimple als auch D3 eine Liste von Beispielen angeben, aus denen Sie lernen können.
Umgang mit fehlenden oder inkonsistenten Daten ist ein wichtiger Bestandteil der Datenvisualisierung. Dimple bietet verschiedene Methoden für den Umgang mit solchen Daten. Sie können die Methode von Dimple.FilterData () verwenden, um unerwünschte Werte herauszufiltern, oder Sie können die Methode von Dimple.addmeasureAxis () verwenden, um Daten zu aggregieren und fehlende Werte auszufüllen. Sie können auch die Datenmanipulationsfunktionen von D3 verwenden, um Ihre Daten zu reinigen und vorzuarbeiten, bevor Sie sie visualisieren.
Wie kann ich mein Dimple -Diagramm animieren? Sie können die Übergangsmethoden von D3 verwenden, um Änderungen in den Daten oder im Erscheinungsbild des Diagramms zu animieren. Sie können beispielsweise die Zeilen in einem Zeilendiagramm animieren, um einen reibungslosen Übergang von einem Zustand in einen anderen zu übergeben, wenn sich die Daten ändert. Ein Streudiagramm mit Dimple und D3 beinhaltet ähnliche Schritte beim Erstellen einer Linie oder eines Balkendiagramms. Sie müssen Ihre Daten laden, ein SVG -Objekt erstellen und ein neues Dimple -Diagramm erstellen. Anstatt Linien oder Balken hinzuzufügen, fügen Sie jedoch Punkte mit der Methode von Dimple.addSeries () hinzu. Sie können auch das Erscheinungsbild der Punkte anpassen und die Interaktivität bei Bedarf hinzufügen. zum Erstellen anderer Arten von Diagrammen. Sie müssen Ihre Daten laden, ein SVG -Objekt erstellen und ein neues Dimple -Diagramm erstellen. Anstatt jedoch Linien, Balken oder Punkte hinzuzufügen, fügen Sie jedoch einen Kuchen mit der Methode von Dimple.AdSeries () hinzu. Sie können auch das Erscheinungsbild des Kuchens anpassen und nach Bedarf Interaktivität hinzufügen.
Das obige ist der detaillierte Inhalt vonErstellen Sie Datenvisualisierungen in JavaScript mit Dimple und D3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist es legal, Bitcoin auf Huobi.com zu kaufen und zu verkaufen?
So überprüfen Sie den Download-Verlauf auf TikTok
Kernelpanic-Lösung
Konfigurieren Sie die Java-Laufzeitumgebung
regulärer Perl-Ausdruck
So lösen Sie Probleme beim Parsen von Paketen
So beheben Sie einen Skriptfehler
So funktioniert der TCP-Drei-Wege-Handshake
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
