So erstellen Sie Datenvisualisierungen mit D3
D3 ist ein Toolkit für Erstellen von Datenvisualisierungen von Grund auf neu. Es ist ein dünner Wrapper um das DOM, sodass Sie mit HTML, CSS und JavaScript bereits auf halbem Weg sind. Es ist unglaublich mächtig und macht vor allem großen Spaß. Nie wieder werden Sie Ihren Designer enttäuschen, indem Sie sein fachmännisch abgestimmtes Dribbble-Futter in eine langweilige Tabelle stecken.
D3 wird am besten anhand eines Beispiels gelehrt, also werden wir es tun Erstellen Sie die 'Money'-Visualisierung von xkcd neu . Wir nehmen Daten über das Einkommen von Menschen, Unternehmen und Ländern und visualisieren sie in breiten Größengruppen. D3 ermöglicht es uns, sehr unterschiedliche Einkommen in dieselbe Visualisierung einzubeziehen.
Alle Dateien, die Sie für dieses Tutorial benötigen, können sein von hier heruntergeladen .
Hässlichen Code neu gestalten
Unsere Aufgabe ist zwischen Daten und Präsentation aufgeteilt. Eine häufige Quelle für hässlichen D3-Code ist, dass Ihre Daten nicht in die richtige Form gebracht werden. Wenn Sie versuchen, Ihre Daten zu visualisieren, bevor Sie sie in die richtige Form gebracht haben, kommt es zu einem Durcheinander.
Wir werden den Datenteil in das einpacken, was D3 als 'Layout' bezeichnet. Layouts klingen visuell, sind jedoch die Daten-Wrangling-Seite einer bestimmten Visualisierung. Dies sind Standard-JavaScript-Funktionen, die mit Eingabedaten aufgerufen werden und neue Daten zurückgeben, die für die Anzeige formatiert sind. Ein Histogramm-Layout kann an ein Array von 1.500 Objekten übergeben werden und 10 Arrays mit jeweils 150 Objekten zurückgeben. Die Anzeige der Ausgabe liegt ganz bei Ihnen. Dadurch wird der wiederverwendbare Datenverarbeitungsalgorithmus von einer bestimmten Präsentation getrennt.
Wir müssen die Einkommen in Größengruppen aufteilen und sie dann als Blöcke visualisieren. Unsere Einkommensdaten haben das Format {Wert: 2500000, Titel: 'Jimmy Carr'} Unser Zielformat ist unten. Es spiegelt die Visualisierung wider: Die vorherige Gruppe wird zum Vergleich in die nächste aufgenommen, und wir haben die Anzahl der anzuzeigenden Einheitsblöcke berechnet.
[ { key: '1000000', total: 2124000000000, values: [ { title: 'Jimmy Carr', value: 2500000, units: 25 }, /* ... more salaries */ { fromLast: true, value: 105000, units: 1 }, /* total of previous group */ ] }, /* ... more groups of salaries */ ];Implementierung
Lassen Sie uns implementieren! Unsere Daten sind also hierarchisch d3.nest () ist das richtige Werkzeug: Es nimmt ein Array und gruppiert es nach einer Schlüsselfunktion.
function blockLayout() { var grouper = Math.log; layout.group = function(x) { grouper = x; return this; }; return layout; function layout(data) { data.sort(function(a,b) { return b.value – a.value; }); var nested = d3.nest() .key(function(d) { return grouper(d.value) }) .entries(data) .map(function(group) { group.values.forEach(function(v) { v.units = getUnits(v.value,group); }); group.total = group.values.reduce(sumValues,0); return group; }); d3.pairs(nested).forEach(function(pair) { var group = pair[0], total = pair[1].total; group.values.push({ value: total, group: group, fromLast: true, units: getUnits(total,group) }); }); return nested; } function getUnits(value,group) { return Math.ceil(value/parseInt(group.key)); } function sumValues(a,s) { return a + s.value; } }Da Layouts nur JavaScript-Funktionen und Funktionen Objekte sind, stellen wir unsere Konfigurationsfunktion als Layout zur Verfügung Gruppe Eigentum. Um unser Layout zu konfigurieren, rufen wir an. Gruppe (keyFunction) auf dem Layout in einem Verkettungsstil. Um es zu verwenden, rufen wir es in unserem Originaldatensatz auf, um es zu erstellen Gehaltsgruppen bereit zum Binden.
var layout = blockLayout() .group(function(value) { if(value < 1e6) return 1000; if(value < 1e9) return 1e6; if(value < 1e12) return 1e9; return 1e12; }); var salaryGroups = layout(listOfSalaries);Visualisieren
Zu diesem Zeitpunkt haben wir noch nichts auf dem Bildschirm angezeigt. Diese Arbeitsteilung ermöglicht die Wiederverwendung unseres Layouts mit verschiedenen Datensätzen, Schlüsselfunktionen und endgültigen Visualisierungen. Jetzt haben wir unsere Daten bereinigt, wir können sie visualisieren.
Hier ist eine Skizze der HTML / CSS-Implementierung - wir fügen die Gruppen der obersten Ebene hinzu, um die zu repräsentieren Gehaltsgruppen aus unserem Layout:
var groups = d3.select('#viz').selectAll('.group') .data(salaryGroups) var groupsEntering = groups.enter() .append('div').attr('class','group')Als nächstes präsentieren wir die einzelnen Gehaltselemente. Unsere Daten sind verschachtelt: Wir haben Elemente für die Gruppendaten der obersten Ebene angehängt, die die Form haben {Schlüssel: '1000', Werte: [/ * Gehälter * /]} . Wir treffen daher eine Auswahl von .Gehalt Elemente innerhalb jeder Gruppe und übergeben eine Funktion herausziehen .Werte zu Daten() um die Hierarchie für die Gehälter zu graben:
var salaries = groups.selectAll('.salary') .data(function(x) { return x.values; }); var salariesEntering = salaries.enter() .append('div').attr('class','salary');Schließlich müssen wir unsere Einheiten betrachten. Wir erstellen Track-Elemente pro Gehalt und verwenden dann unsere verschachtelten Daten() Trick noch einmal, um aus jedem Gehalt viele Einheiten zu machen.
var units = salariesEntering .append('div').attr('class','track') .selectAll('.unit').data(createBlocks) .enter() .append('div').attr('class','unit')createBlocks () ist einfach: Wenn ein Gehalt 10 Einheitsblöcke benötigt, geben Sie ein Array mit der Länge 10 zurück:
[//]: # article-code.js:7 function createBlocks(salary) { var blockCount = salary.units, blocks = []; while(blockCount--) blocks.push(salary); return blocks; }Es ist einfacher, alle statischen Stile über CSS zu definieren. Wir möchten, dass die Einheiten innerhalb einer eingeschränkten Spur fließen. Den Rest des Stylings überlasse ich dir.
.unit { float: left; width: 10px; height: 10px; background: red; } .track { overflow: auto; width: 200px; }Mit etwas mehr Styling und Titeln sind wir fertig. Jetzt geh raus und visualisiere!
Wörter: Tim Rüschen
Zeit Rüschen ist Experte für JavaScript und Trainer. Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 257.
