D3.js ist eine populäre Javascript-Bibliothek, die Daten optisch aufbereitet, mit HTML, SVG und CSS. Die neue Version 5.0 vereinfacht die Programmierung, indem sie auf asynchrone Callbacks verzichtet.
Stattdessen setzen die Entwickler der D3.js-Bibliothek nun auf Promises. Als Hauptgrund geben sie in den Release Notes an, dass Promises den asynchronen Code vereinfachen, vor allem im Umgang mit modernen Browsern, die “async” und “await” unterstützen. Und sie liefern auch gleich ein Beispiel beim Laden einer CSV-Datei:
d3.csv("file.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
Das ist der Code von D3.js in Version 4. Die neue Version 5 vereinfacht ihn mit Hilfe von Promises:
d3.csv("file.csv").then(function(data) {
console.log(data);
});
Der Entwickler muss dank der neuen Methode den Fehler nicht werfen, weil der Promise das Ausführen automatisch verhindert. Ein Nachteil: Die Änderung im D3.js-Code ist nicht rückwärtskompatibel.
Nebenwirkungen
Im Schlepptau der Änderung haben die Entwickler auch weiteren Code modifiziert. D3.js setzt nun nicht mehr auf XMLHttpRequest, sondern auf das Fetch API mit “d3-fetch”. Das erlaubt es auch, neue Funktionen einzuführen, wie Streaming Responses. Mit Promise.all lassen sich asynchrone Tasks parallel betreiben, wobei Hilfsbibliotheken wie “p-queue” die Konkurrenz ordnen.
D3.js 5.0 führt unter anderem Dichte-Konturen ein.
Neben dieser größeren Änderung verzichtet D3.js auf Twenty-Color-Schemas, weil sie in gruppierter Anordnung falsche Verbindungen zwischen bestimmten Daten suggerieren konnten. Sie lassen sich mit “d3-scale-chromatic” ersetzen. Neu an Bord sind zudem Implementierungen von Dichte-Konturen (Abbildung 1) und Konturen sowie zwei Auswahlmethoden (“selection.clone” und “d3.create”). Sämtliche Änderungen verraten die Release Notes, den Code gibt es auf Github.
