Datenvisualisierung mit Python und JavaScript, 2.

Kapitel 21. Die Menüleiste

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

In den vorangegangenen Kapiteln wurde gezeigt, wie die visuellen Komponenten unserer interaktiven Nobelpreisvisualisierung aufgebaut werden: das Zeitdiagramm zur Anzeige aller Nobelpreisträger nach Jahr, eine Karte zur Darstellung der geografischen Verteilung, eine Liste zur Anzeige der aktuell ausgewählten Preisträger und ein Balkendiagramm zum Vergleich der absoluten und Pro-Kopf-Gewinne nach Land. In diesem Kapitel werden wir sehen, wie der Nutzer mit der Visualisierung interagiert, indem er Selektoren und Schaltflächen verwendet (siehe Abbildung 21-1), um einen gefilterten Datensatz zu erstellen, der dann von den visuellen Komponenten wiedergegeben wird. Wenn du zum Beispiel in der Kategorieauswahlbox Physik auswählst, werden in der Nobelpreis-Visualisierung (Nobel-viz) nur Physik-Preisträger angezeigt. Die Filter in unserer Menüleiste sind kumulativ, so dass wir z. B. nur die Chemikerinnen aus Frankreich auswählen können, die den Nobelpreis gewonnen haben.¹

Abbildung 21-1. Die Zielmenüleiste dieses Kapitels

In den folgenden Abschnitten zeige ich dir, wie du mit D3 die Menüleiste erstellst und wie JavaScript-Callbacks verwendet werden, um auf nutzergesteuerte Änderungen zu reagieren.

HTML-Elemente mit D3 erstellen ...