Datenvisualisierung mit Python und JavaScript, 2.

Kapitel 18. Einzelne Preise visualisieren

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

In Kapitel 17 hast du die Grundlagen von D3 gelernt, wie du DOM-Elemente auswählst und änderst, wie du neue Elemente hinzufügst und wie du das Datenaktualisierungsmuster anwendest, die Achse, um die sich das interaktive D3 dreht. In diesem Kapitel werde ich das bisher Gelernte vertiefen und dir zeigen, wie du ein ganz neues visuelles Element erstellst, das alle einzelnen Nobelpreise nach Jahren anzeigt(Abbildung 18-1). Diese Nobelpreis-Zeitleiste ermöglicht es uns, das Wissen aus dem letzten Kapitel zu erweitern und eine Reihe neuer Techniken zu demonstrieren, darunter auch eine fortgeschrittene Datenmanipulation.

Abbildung 18-1. Das Zieldiagramm dieses Kapitels, eine Zeitleiste der Nobelpreise

Beginnen wir damit, zu zeigen, wie wir das HTML-Gerüst für unser Zeitachsendiagramm erstellen.

Der Aufbau des Rahmens

Unser Zieldiagramm ist ähnlich aufgebaut wie das Balkendiagramm für den Nobelpreis, das wir im letzten Kapitel ausführlich behandelt haben. Zunächst wählen wir mit D3 unseren Container <div> mit der ID nobel-time aus und verwenden dann die Breite und Höhe des Containers zusammen mit und unseren angegebenen Rändern, um unsere Diagrammgruppe svg zu erstellen:

import nbviz from './nbviz_core.mjs'