Lernen Sie, D3.JS -Datenvisualisierungen mit Beispiel zu erstellen

d3.js: Dynamische Datenvisualisierung mit JavaScript

zeichnen

In diesem Artikel wird D3.JS, eine leistungsstarke JavaScript -Bibliothek zum Erstellen von dynamischen und interaktiven Datenvisualisierungen erläutert. Es verwendet HTML, SVG und CSS, um Daten in Webbrowsern zu rendern.

Kernpunkte:

• d3.js ist eine vielseitige JavaScript -Bibliothek, mit der Entwickler dynamische, interaktive Datenvisualisierungen in Webbrowsern mithilfe von HTML, SVG und CSS erstellen können.
• Die Bibliothek bietet eine Fülle von Tools für die Datenverarbeitung, die Rohdaten in aussagekräftige visuelle Darstellungen konvertieren und kann weithin auf eindeutige kreative Ideen angepasst werden.
• d3.js verwendet Skalierungsbalken, um Datenwerte in visuelle Anzeigeeigenschaften wie Größe oder Farbe zuzuordnen und Diagramme und andere visuelle Elemente zu erstellen, die die Daten genau widerspiegeln.
• Dieser Artikel enthält praktische Beispiele für Balkendiagramme, Zeilendiagramme und Animationsvisualisierungen, in denen gezeigt wird, wie einfache und komplexe Datendiagramme mithilfe von D3.Js.
• d3.js unterstützt erweiterte Funktionen wie Übergänge und Animationen, sodass Entwickler visuell ansprechende, dynamisch aktualisierte Visualisierungen erstellen können, die die Benutzererfahrung und die Dateninteraktion verbessern.

d3.js ist eine datenbasierte Dokumentoperation JavaScript Library. Es hilft Ihnen, Ihre Daten mithilfe von HTML, SVG und CSS zum Leben zu erwecken. Die drei JavaScript -Bibliotheken, die jeder Webentwickler lernen sollte, sind: JQuery, Undercore und D3. Mit diesen Bibliotheken können Sie auf neue Weise über Code nachdenken: JQuery ermöglicht es Ihnen, mit weniger Code (oder Lodash) für DOM zu tun. Datenverarbeitung und grafische Programmierung. Wenn Sie neu in D3 sind, nehmen Sie sich einen Moment Zeit, um in der beeindruckenden Bibliothek mit Beispielen zu durchsuchen, um zu sehen, was es kann. Dies ist keine Diagrammbibliothek aus der Zeit Ihres Vaters. William Playfair erfand das -Bali -Diagramm, Zeilendiagramm und Area -Chart im Jahr 1786 und erfand 1801 die -Kartenkarte. Dies sind nach wie vor die Hauptmethoden, wie die meisten Datensätze heute präsentiert werden. Diese Diagramme sind ausgezeichnet, aber D3 bietet Ihnen die Tools und die Flexibilität, um eindeutige Webdatenvisualisierungen zu erstellen, und Ihre Kreativität ist der einzige einschränkende Faktor. D3 ist eine äußerst flexible Visualisierungsbibliothek mit niedriger Ebene mit einer JQuery-ähnlichen API zum Zuordnen von Daten in HTML- und SVG-Dokumente. Es enthält eine große Anzahl nützlicher mathematischer Funktionen für die Datentransformation und die physikalischen Berechnungen, obwohl die meisten seiner Funktionen aus der Manipulation geometrischer Figuren und Pfade in SVG stammen. Dieser Artikel zielt darauf ab, Ihnen einen hochrangigen Überblick über die D3-Funktionen zu geben. In jedem Beispiel können Sie Eingabe Daten, um konvertieren und Ausgabe konvertieren Unterlagen. Ich würde nicht erklären, was jede Funktion tut, sondern Ihnen den Code anzeigen, sollten Sie in der Lage sein, eine grobe Vorstellung davon zu bekommen, wie er funktioniert. Ich gehe nur in die wichtigsten Konzepte ein: scale und select .

Balkendiagramm

Erstellen einfacher Balkendiagramme mit HTML ist eine der einfachsten Möglichkeiten, um zu verstehen, wie D3 Daten in Dokumente umwandelt. Der Code ist wie folgt:

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

Dieser Code ordnet die Eingabedaten [4, 8, 15, 16, 23, 42] in die Ausgabe -HTML ab.

GitHub -Beitragsdiagramm

Mit nur wenigen zusätzlichen Codezeilen kann das obige Balkendiagramm in ein Beitragskarte ähnlich wie GitHub konvertiert werden.

Wir setzen die Höhe nicht mehr nach dem numerischen Wert der Daten, sondern die Hintergrundfarbe.

Anfänger von SVG

Die meisten Funktionen von D3 beruhen aus der Tatsache, dass es mit SVG funktioniert, das Etiketten zum Zeichnen von 2D -Grafiken wie Kreisen, Polygonen, Pfaden und Text enthält.

kreisförmige

d3 kann komplexere Datentypen verarbeiten.

Zeilendiagramm

Ein Zeilendiagramm in SVG ist sehr einfach.

scale

Skala ist eine Funktion, die die Eingangsdomäne in den Ausgangsbereich ordnet.

Animationsflug Visualisierung

Dies ist ein Beispiel für eine Animationsvisualisierung, die Flüge zwischen Melbourne und Sydney zeigt.

Schlussfolgerung

Dieser Artikel deckt nur einen kleinen Teil der D3.JS -Bibliothek ab. Hoffentlich gibt Ihnen dieser erweiterte Überblick und einige praktische Beispiele eine Vorstellung davon, wie Sie Auswahl, Skalen und Transformationen verwenden können. Denken Sie über den besten Weg nach, um Daten darzustellen und Ihre eigene eindeutige Datenvisualisierung zu erstellen.

(die Bildposition bleibt unverändert)

Das obige ist der detaillierte Inhalt vonLernen Sie, D3.JS -Datenvisualisierungen mit Beispiel zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!