Wie erstellt man interaktive Diagramme?

Was sind interaktive Diagramme?

Die Zielgruppe kann selbst auswählen, welchen Datenausschnitt sie sehen möchte und in welcher Form – meistens stehen Liniendiagramme, Säulendiagramme, Tabellen oder sogar eine Weltkarte zur Auswahl.

Warum lohnt es sich, interaktive Diagramme zu erstellen?

Laut dem Bericht von MarketingLTB:

• 62 % der Nutzerinnen und Nutzer bevorzugen interaktiven Content,
• 72 % der Zielgruppe erinnert sich besser an Marken, die interaktive Inhalte einsetzen,
• 91 % der Käuferinnen und Käufer bevorzugen visuelle, dynamische Inhalte gegenüber einem statischen Textblock.

Darüber hinaus ergeben sich praktische Vorteile:

1. Interaktive Diagramme können mit einer Datenquelle verbunden werden und aktualisieren sich dadurch automatisch. Der Artikel bleibt dauerhaft aktuell, und das Unternehmen muss weder Zeit noch Budget aufwenden, um die Anpassung der Inhalte zu überwachen.
2. Die Urheberin oder der Urheber eines Diagramms kann Farben und den Standarddiagrammtyp einfach an das eigene Unternehmen anpassen. Einmalige Einstellungen genügen, um schnell konsistente und attraktive Diagramme zu erstellen.
3. Bei umfangreicheren Lösungen können Nutzerinnen und Nutzer Daten exportieren, Änderungen verfolgen und sogar auf eine API zugreifen. Die Möglichkeiten lassen sich kontinuierlich erweitern.

Es ist wichtig zu beachten, dass diese Vorteile nicht nur für Visualisierungen gelten – auch statische Inhalte können mit einer Datenquelle verbunden werden. Dadurch aktualisiert der Artikel nicht nur Grafiken, sondern auch ganze Sätze.

Wie erstellt man interaktive Diagramme?

Je nach Kenntnisstand stehen drei Lösungen zur Verfügung:

Fertige Tools wie Canva

Das bekannteste Beispiel ist Canva, aber die Funktionsweise ist bei den meisten Plattformen dieser Art ähnlich.

Wie sieht das in der Praxis aus?

1. Auswahl einer Diagrammvorlage – nach der Anmeldung wählen Sie den Visualisierungstyp aus (Linien-, Balken-, Kreisdiagramm usw.). Die Interaktivität ist vorgegeben und umfasst meistens Hover-Effekte (Hinweise beim Bewegen des Mauszeigers) oder das Umschalten zwischen Datenvarianten.
2. Eingabe der Daten – die Daten werden leider manuell hinzugefügt (durch Einfügen einer Tabelle) oder aus einer CSV-Datei importiert. Diese Lösung eignet sich für einfache Übersichten, wird bei größeren Datenmengen oder häufigen Aktualisierungen jedoch schnell problematisch.
3. Individuelle Gestaltung – Sie können Farben, Schriftarten, Achsenbeschriftungen und Legende ändern.
4. Einbettung des Diagramms – das interaktive Diagramm wird als iframe oder als Einbettungslink exportiert.

Diese Lösung ist schnell, hat aber klare Grenzen: keine automatische Aktualisierung der Daten über eine API, keine fortgeschrittene Logik (Filter, Abhängigkeiten zwischen Datenreihen) sowie eine eingeschränkte Kontrolle über Barrierefreiheit und Performance. Für einfache Marketinginhalte ist sie gut geeignet, für skalierbaren, effektiven und wartungsarmen Content jedoch weniger.

Datenplattformen wie Monitly

In diesem Fall müssen Sie nur die Daten auswählen, die Sie in den Artikel aufnehmen möchten:

Nachdem Sie den Datensatz ausgewählt haben, können Sie das Erscheinungsbild individuell gestalten und anschließend auf „Export“ klicken. Für einen Artikel wählen Sie „Embed“, um das interaktive Diagramm einfach einzufügen und automatisch aktualisieren zu lassen.

Sie können das Diagramm auch für andere Zwecke exportieren:

• PNG – als statisches Bild für ein Dokument oder eine Präsentation,
• CSV – für eine vertiefte Datenanalyse, beispielsweise mit KI,
• API – um die Daten in Ihrer eigenen Anwendung zu nutzen,
• Animation – um eine Animation für YouTube oder TikTok zu erstellen.

Monitly bietet eine fertige Lösung für die Visualisierung von Diagrammen und aktualisiert die Daten automatisch. Dadurch können jedoch nur Daten verwendet werden, die auf der Plattform verfügbar sind. Zur Auswahl stehen mehrere Millionen Statistiken von Anbietern wie Eurostat, OECD, WHO oder daten.gov.pl.

Wenn Sie eigene Daten visualisieren möchten, müssen Sie hingegen ein Tool wie Canva wählen oder zur nächsten Lösung übergehen.

Wie sieht der Prozess technisch aus?

1. Aufbereitung der Daten – die Daten müssen strukturiert sein, meistens im JSON- oder CSV-Format. Bei großen Datenmengen kommen häufig die Bereinigung, Aggregation und Normalisierung der Daten hinzu (sogenannte ETL-Prozesse). Gute Diagramme beginnen mit einer soliden Grundlage, also einer gut vorbereiteten Datenbank, beispielsweise in PostgreSQL.
2. Auswahl der Bibliothek – Chart.js wird aufgrund seiner einfachen und schnellen Implementierung besonders häufig eingesetzt. D3.js ist flexibler, aber anspruchsvoller, während Recharts einen Kompromiss darstellt (und für die interaktiven Diagramme in diesem Artikel verwendet wurde). Jede dieser Optionen setzt JavaScript-Kenntnisse und grundlegende Frontend-Kenntnisse voraus, wobei KI den Einstieg inzwischen deutlich erleichtert.
3. Interaktionslogik – dabei wird selbst definiert, was nach einem Klick oder einer Mausbewegung geschieht, wie sich Daten nach dem Filtern verändern und welche Elemente Nutzerinnen und Nutzer visuell anpassen können.
4. Integration von Live-Daten – damit sich das Diagramm aktualisiert, muss es direkt mit der API der eigenen Datenbank verbunden werden.

Der letzte Punkt ist besonders wichtig: Ein Diagramm ist nur so gut wie die Datenbank, auf der es basiert. Wenn Sie Daten aus einer externen Quelle beziehen, empfiehlt es sich daher, ein Skript, beispielsweise in Python, einzurichten, das täglich ausgeführt wird (etwa über die kostenlose Plattform GitHub Actions) und aktuelle Daten abruft.

Eigene Diagramme bieten die größtmögliche Autonomie, doch jede Änderung – selbst die kleinste – erfordert einen Eingriff in den Code. Hinzu kommen die Pflege der Datenbank sowie die kontinuierliche Überwachung ihrer Aktualisierung und Datenqualität. Deshalb sollten Sie sich für diese Lösung erst bei einer größeren Projektgröße entscheiden.