Boost d3.js-Diagramme mit SVG-Gradienten

Nadieh Bremer wird an sein London generieren Im September, wo sie demonstrieren wird SVG jenseits bloßer Formen Verwenden Sie JavaScript, CSS und D3.js, um Datenvisualisierungen noch mehr lustiger und aufregender zu machen. Buchen Sie jetzt Ihr Ticket Schnitte

D3.js hat die Welt der interaktiven Datenvisualisierung übernommen. Es kann eine enorme Anzahl von Beispielen gefunden werden, wobei jeder seine eigenen spaßigen und nützlichen Twist in der Bibliothek zeigt. Sie sehen, D3 ist keine Chartbibliothek, aber etwas besser. Es gibt nur die grundlegenden Tools, um Datenvisualisierungen zu erstellen, und dabei können Sie praktisch alles erstellen, an das Sie denken können. Obwohl einige Ideen mehr Zeit dauern als andere, kommen Sie irgendwann dort. Und diese Freiheit ist genau das, was ich über D3 liebe.

In seinem Kern ist jedes D3-Visual aus SVG-Elementen ausgebaut. Zum Beispiel für jeden Datenpunkt in einem Scatterplot-Diagramm, um ein Balkendiagramm als Achse, parallele Koordinaten oder Neigungsgraphen als Etiketten als Etiketten und die äußerst nützliche für praktisch alles andere zu erstellen. Darüber hinaus sind SVGs auflösung unabhängig, somit auf jeder Anzeige oder Zoomstufe großartig aussehen.

Selbst wenn Sie nur SVGs für ihre Formen verwenden, können Sie wunderbare Visualisierungen schaffen. Sie können jedoch viel mehr tun - zum Beispiel an SVG-Filter denken. In diesem Tutorial tauchen wir einen tiefen Tauchgang in einen bestimmten Aspekt ein und sehen einige verschiedene Möglichkeiten an, um eine Visualisierung aufzuhellen. Lassen Sie mich Ihnen SVG-Gradienten vorstellen!

Finden Sie alle Dateien, die Sie für dieses Tutorial benötigen Hier .

Lineare Gradienten

Manchmal, wenn ich ein Zeilendiagramm mit einer einzigen Zeile erstelle, fühlt er sich einfach ein bisschen zu leer und kann auf dem weißen Hintergrund verloren gehen. Um es mehr auszurichten, lege ich einen leichten Gradienten unter IT mit D3 d3.svg.area. Funktion, gefüllt mit einem SVG-Gradienten (siehe Abb. 1).

Ich möchte, dass der Farbverlauf vertikal von oben ausläuft (wo es die gleiche Farbe ist wie die Linie, aber ein leichterer Farbton) nach unten (wo es weiß oder transparent werden sollte). Dies ist das, was als linearer Gradient bekannt ist; etwas, das die Farbe entlang einer geraden Linie ändert.

Wir beginnen mit einem SVG. Dies ist die Leinwand, auf der unser Liniendiagramm gezogen wird. Wir erstellen dann eine echt Element, auf das wir a anhängen können Lineargradient Element. Es ist sehr wichtig, dem Gradienten eine eindeutige ID zu geben - wir werden dies später verwenden, wenn wir den Bereich unterhalb der Linie ergeben müssen, um seine Füllung zu geben.

 var areargradient = svg.append ("defs")
.Append ("lineargradient")
.attr ("ID", "aregradient")
.attr ("x1", "0%"). Attr ("y1", "0%")
.attr ("x2", "0%"). Attr ("y2", "100%"; 

Die letzten beiden Zeilen des oben definierten Codes definieren, wie der Gradienten ausgeführt wird. Denken Sie an es als unsichtbare Linie: X1. und y1. sind die Startpositionen der unsichtbaren Linie und der X2. und y2. Geben Sie seinen Endpunkt an, um die Richtung des Gradienten zu geben. Es ist oft am einfachsten, diese als Prozentsätze zu definieren, obwohl genaue Pixelorte verwendet werden können. Standardmäßig beziehen sich die Standorte auf den Begrenzungskasten des Elements, auf das der Gradient angewendet wird. Wir möchten, dass der Farbverlauf vertikal ausgeläuft X1. und X2. sollte gleich sein ( 0% ist gut), y1. muß sein 0% und y2 100% .

Jetzt können wir die Farben des Gradienten definieren. Für einen Gradienten sind mindestens zwei Farben erforderlich, aber Sie können so viele verwenden, wie Sie möchten. Für jede Farbe in dem Gradienten fügen Sie a hinzu Stop Element. In diesem Fall geben Sie den Schatten mit an Haltelfarbe und der Standort (entlang der unsichtbaren Linie), wo Sie diese Farbe reinen möchten (die genaue Farbe) mit versenklich. .

Optional können wir auch die Deckkraft jeder Farbe mit einstellen Stop-Deckkraft . Hier mache ich den Farbton an der Spitze leicht leichter und am Boden völlig transparent.

 egalgradient.append ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", "# 21825c")
.attr ("Stop-Opazität", 0,6);
aregradient.append ("STOP")
.attr ("offset", "80%")
.attr ("stop-color", "weiß")
.attr ("Stop-Opazität", 0); 

Nun ist der lineare Gradienten eingerichtet, wir können ein Bereichsdiagramm erstellen und mit dem Gradienten füllen. Um dies zu tun, verwenden Sie URL (# Gradient-ID) Im Füllstil, zusammen mit der einzigartigen ID, die wir früher einsetzten.

 SVG.APPEND ("Pfad")
.style ("Fill", "URL (#areagentradient)")
.attr ("d", Bereichsfunktion (Dataset); 

Zeichnen Sie danach die Linie oben in diesem Bereich des Diagramms, sodass der Betrachter die Ergebnisse von Ihrer Grafik lesen kann. In meinem Diagramm habe ich auch Kreise platziert, um die Standorte bestimmter Datenpunkte hervorzuheben.

Eine glatte Legende.

Legenden sind in Datenvisualisierungen sehr häufig. Wenn Sie Farben verwenden, um einen bestimmten Aspekt Ihrer Daten darzustellen, müssen Sie erklären, was jede Farbe bedeutet. Hier kommt eine Legende herein.

In einigen Diagrammen verwenden Sie Farbe, um zwischen diskreten Fällen (z. B. unterschiedlichen Ländern) zu diskriminieren, in diesem Fall sind die Farben oft sehr unterschiedlich. Sie können jedoch auch Farbe verwenden, um einen quantitativen Wert anzuzeigen.

Hier repräsentieren wir die Temperatur außerhalb (siehe Abb. 2). Die Farbe ändert sich allmählich, um die Temperatur von niedrig bis hoch anzuzeigen. Um dies in einer Legende zu zeigen, schaffen wir ein langes Rechteck und füllen ihn mit einem Farbverlauf von links nach rechts. Wir können den Gradienten wiederverwenden, den wir für unser Liniendiagramm erstellt haben, jedoch um 90 Grad (so X2. jetzt rennt an. 100% , eher, als y2. ). Obwohl im Allgemeinen eine Regenbogen-Palette in der Datenvisualisierung nicht empfohlen wird, werden die Menschen dazu verwendet, bunte Temperaturkarten zu sehen, und ich habe neun Farben in unserem Beispiel gewählt.

Anstatt jeden zu schreiben Stop Um anzugleichen, können wir alle Farben in einem Datensatz stellen und D3 nifty verwenden Daten Schritt, um den Prozess schneller zu machen. Mit D3 ist es möglich, in den nachartigen Verkettungsschritten mithilfe einer anonymen Funktion auf eine Eigenschaft des Datensatzes zuzugreifen, sodass wir die Farbe und den Versatz in nur zwei Zeilen einstellen können.

 svg.append ("defs")
.Append ("lineargradient")
.attr ("ID", "LegendgradientMulti")
.attr ("x1", "0%"). Attr ("y1", "0%")
.attr ("x2", "100%"). Attr ("y2", "0%")
.selektall ("STOP")
.Daten([
{Offset: "0%", Farbe: "# 2c7bb6"},
{Offset: "12,5%", Farbe: "# 00A6ca"},
{Offset: "25%", Farbe: "# 00ccbc"},
{Offset: "37,5%", Farbe: "# 90EB9D"},
{Offset: "50%", Farbe: "# ffff8c"},
{Offset: "62,5%", Farbe: "# F9D057"},
{Offset: "75%", Farbe: "# F29E2E"},
{Offset: "87,5%", Farbe: "# E76818"},
{Offset: "100%", Farbe: "# D7191C"}])
.ENTER (). ANHANG ("STOP")
.attr ("offset", function (d) {return d.Offset;})
.attr ("stop-color", function (d) {return d.color;}); 

Wie zuvor ist der letzte Schritt, um a zu erstellen reflektieren und füllen Sie dies mit der einzigartigen Gradienten-ID.

 svg.append ("rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("Breite", 500) .attr ("Höhe", 20)
.style ("Fill", "URL (#Gendgradientmulti)"); 

Die Charts, mit denen diese Legenden gehen, werden nach der fantastischen Arbeit von erstellt www.weather-radials.com. Die Temperatur in New York oder Peking im Jahr 2015 zeigt. Die Durchschnittstemperatur täglich wird durch eine farbige Linie angezeigt, und diese Linien sind so angeordnet, dass sie ein kreisförmiges Diagramm bilden. Die Legende unten erläutert, was jede Farbe bedeutet. Eine Grafik verwendet einen Gradienten von einer Farbe zur anderen, und der andere schreitet durch alle neun Farben fortschreitet.

Datenbasierte Gradienten

In ähnlicher Weise können wir dem vorherigen Beispiel mehrere Farbverläufe erstellen. Wir könnten für jeden Datenpunkt einen einzigartigen Farbverlauf erstellen, basierend auf einem bestimmten Aspekt der Daten. Ich habe diesen Ansatz in einem verwendet Exoplanet-Visualisierung. , wobei jeder Planeten einen Farbverlauf auf der Basis der Sternklasse der Sterne-IT-Umlaufbahnen erhielt. Ich habe einen subtilen Kugel-Effekt benutzt, um den Eindruck zu geben, der jeweils vom Stern in der Mitte beleuchtet wurde.

Gehen wir also in die 90er Jahre zurück und machen Sie eine Sammlung von flachen Kreisen, die die Planeten in unserem eigenen Sonnensystem in 3D-aussehende Kugeln mit radialen Gradienten darstellen (Abb. 4). Ich habe ein kleines Datensatz erstellt, das den Namen und den Durchmesser des Planeten enthält. Jeder wird von einer Farbe verallgemeinert, mit der wir für jeden Planeten einen einzigartigen Gradienten erstellen können.

 var gradientradial = svg.append ("defs")
. selectall ("radialgradient")
.Data (Planeten)
.ENTER (). ANHANG ("radialgradient")
.attr ("ID", Funktion (d) {Return "Gradient -" + D.Planet;})
.attr ("cx", "15%")
.attr ("cy", "50%")
.attr ("r", "85%"; 

Der Code ist hier etwas anders: Anstelle eines ersten Anhangs eines Gradientenelements hängen wir jetzt sofort an Planeten Dataset und erst nach dem eingeben Erstellen wir ein Gradientenelement (in diesem Fall) radialgradient ). Auf diese Weise wird ein Gradient für jeden Punkt in der Datenmenge erstellt. Halten Sie die ID jedes Punktes eindeutig, indem Sie ihn auf den Daten basieren. Der Index ich Wirklich funktionieren, aber hier ist der Planetenname sicherer. Dies stellt sicher, dass wir später auf den richtigen Gradienten zugreifen können.

Ein radialer Gradient unterscheidet sich geringfügig mit einem linearen. Wir schaffen es auf ähnliche Weise mit einem SVG-Kreis: liefern Sie das Zentrum des Gradienten in Bezug auf die Objektgrenze, an die es angewendet wird, verwenden kombinen und Zy . Diese Werte sind default 50% , das ist das Zentrum des Objekts.

Um das Erscheinungsbild eines Sterns auf den Planeten von einer Seite zu simulieren, bewegen wir die Mitte des Gradienten nach links nach links kombinen zu 15% . Der Radius des Gradienten (wo ein Gradientanschlag von 100% sollte enden) angezeigt durch R. . Es ist auch standardmäßig 50% , aber aufgrund unserer kombinen Offset, das ist jetzt 85% So füllt es den gesamten Kreis.

Wir können die Planetendaten verwenden, um die Farbstopps anzuhängen. Um das Erscheinungsbild einer Kugel zu schaffen, die an der Farbe gezinert wird, ist die Farbe bei 0% sollte leichter sein. Durch die Nutzung d3.rgb (). heller (k) Ich muss keine separate Farbe angeben, da D3 diese Berechnung für mich erledigen wird. Der Wert K. Legen Sie fest, wie viel leichter ich möchte, dass die Farbe wird. Um ungefähr 50% Ich habe die wahre Farbe in der Datenmenge eingestellt. Am Rand möchte ich eine Farbe, die etwas dunkler ist, und gibt das Erscheinungsbild des Schattens. Logisch gibt es auch a d3.rgb (). dunkler (k) das wir verwenden können.

 GradientraDial.Append ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", function (d) {
Rückgabe d3.rgb (d.color) .bleder (1); });
GradientraDial.Append ("STOP")
.attr ("offset", "50%")
.attr ("stop-color", function (d) {return d.color;});
GradientraDial.Append ("STOP")
.attr ("offset", "100%")
.attr ("stop-color", function (d) {
Rückgabe d3.rgb (d.color) .darker (2.5); }); 

Wenn Sie das HTML nach dem Laufen inspizieren würden, ergibt sich acht verschiedene radiale Farbverläufe. Zuletzt müssen wir acht Kreise erstellen, ihnen einen Radius wie die Daten definiert, und füllen sie mit dem richtigen Gradienten aus.

 svg.selectall (". Planeten")
.Data (Planeten)
.ENTER (). Anhängen ("Kreis")
/ * Setzen Sie die Klasse, den Standort- und Radiusattributen ... * /
.style ("Füllen", Funktion (d) {
Return "URL (# Gradient- + D.Planet +") "; }); 

Ich habe auch die Sonne hinzugefügt, die einen eigenen radialen Farbverlauf hat, aber ich bin gegangen kombinen , Zy und R. mit der Standardeinstellung von 50% Um es auszusehen, wie die Sonne aus der Mitte nach außen glüht.

Ein Haftungsausschluss: Obwohl die Durchmesser aller Kugeln relativ zueinander korrekt sind, sind die Entfernungen natürlich völlig falsch. Und es tut mir leid, dass Saturn keine Ringe hat

Mit den Orientierungen spielen

Wir haben jetzt untersucht, wie Farbaspekte basierend auf Daten festgelegt werden, aber es gibt viel mehr Möglichkeiten. Wir können praktisch alles auf der Grundlage von Daten einstellen - sogar die Orientierungen jedes Gradienten.

Um dies auszuprobieren, machen wir ein D3-Akkorddiagramm, das die Kooperationen zwischen den Avengers im Marvel-Cinematischen Universum zeigt (Abb. 5). Die Chords, die zwischen den sechs Rächern laufen, sind gemäß der Anzahl der Filme, in denen beide erscheinen. Wir werden diese Akkorde mit einem einfachen linearen Gradienten füllen, der von der Farbe des Avengers zu einem anderen wechselt.

Ein Akkord ist normalerweise nicht genau horizontal oder vertikal. Wir müssen also den X1 einstellen, X2. , y1. und y2. Werte basierend auf den Standorten jedes Avgers Außenbogens. Diese Daten befinden sich nicht in unserem ursprünglichen Datensatz, aber nachdem wir es an D3 geliefert haben d3.layout.chord. Funktion, wir erhalten einen neuen Datensatz zurück, der den Start- und Endwinkel jedes ARC enthält (als d.source.startCLECHE. und d.target.endangle. ). Dies ist der Dataset, den wir bereitstellen, während Sie die Gradienten erstellen.

Wir müssen die Pixelpositionen der unsichtbaren Linie kennen, die von einem Ende eines Akkords zum anderen verläuft. Diese werden dann verwendet, um das zu geben x1, .., y2 Attribute jedes Gradienten. Wir können ein paar Trigonometrie mit dem Radius des Akkorddiagramms und der Lage auf halbem Weg entlang jedes Avengers Bogens anwenden, um diese Positionen zurückzunehmen. Die volltrigonometrische Formel wurde aus dem folgenden Code entfernt, aber Sie finden es in Der Github-Repo, der diesen Artikel begleitet .

Um eine eindeutige ID für jeden Akkord zu erstellen, erstellen wir eine Zeichenfolgekombination des Indexwerts des Avengers an jedem Ende eines Akkords. D3. d3.layout.chord. legt immer einen (der Avengers) an Quelle und der andere zu Ziel , was ein einzigartiges Paar macht. Später, wenn Sie die Akkorde ziehen, können wir dieselbe Technik verwenden, um den richtigen Gradienten aufzurufen.

 VAR Grads = svg.append ("defs"). SELECTALL ("lineargradient").
.Data (chord.chords ())
.ENTER (). ANHANG ("lineargradient")
.attr ("ID", Funktion (d) {Return "Gradientchord- + D.Source.
Index + "-" + d.target.index; })
.attr ("Gradientunits", "UserSpaceNonuse")
// Die Pixellage eines Endes eines Akkords
.attr ("x1", Funktion (d, i) {return / * ... Trigonometrie basierend auf
d.Querce-Werte ... * /; })
.attr ("y1", funktion (d, i) {return / * ... * /})
// der Pixelort des anderen Ende eines Akkords
.attr ("x2", funktion (d, i) {return / * ... * /})
.attr ("y2", funktion (d, i) {return / * ... * /}); 

Da jeder Avenger durch seine eigene Indexnummer definiert ist, können wir eine Farbfunktion erstellen, Farben , das gibt jede Avenger-Farbe pro Indexwert zurück. Dadurch können Sie sich leicht auf die richtige Farbe beziehen, während Sie die beiden Farbstopps anhängen.

 Grads.Append ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", function (d) {Return Colors (d.source.index);
});
Grads.Append ("STOP")
.attr ("offset", "100%")
.attr ("stop-color", function (d) {Return Colors (d.target.index);
}); 

Alles, was übrig bleibt, ist, die richtige Gradienten-ID aufzurufen, während Sie den Fill-Stil der Akkorde einstellen (mit derselben Funktion, wie wir die Gradienten-ID eingestellt haben).

Aufrunden

Während dieses Tutorials haben wir vier verschiedene Möglichkeiten angesehen, SVG-Gradienten in Datenvisualisierungen zu verwenden, aber es gibt immer mehr Dinge, die Sie tun können. Mit Gradientenanimationen können Sie beispielsweise einen Ablauf von einem Teil der Datenvisualisierung zum anderen simulieren.

Wenn Sie also das nächste Mal eine Datenvisualisierung entwerfen, lassen Sie Ihre Kreativität frei laufen. Mit d3.js müssen Sie nicht von dem eingeschränkt werden, was Sie denken, sind die Grenzen des Werkzeugs. Mit einem kleinen Denken und Mühe von Box können Sie die erstaunlichsten Dinge machen.

Verpassen Sie nicht die Sitzung von Nadieh, SVG jenseits bloßer Formen, bei Generieren Sie London, 21-23. September. Buchen Sie jetzt Schnitte

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 280; Kaufen Sie es hier. Schnitte