Zum Inhalt springen
UI Kit
Accent

Datengeschichten

Infografiken und Scroll-Geschichten, die Zahlen als Bilder erzählen.

2 Components · 10 Variants
Kategorie wechseln

data-story

Datengeschichte

Geschichten, erzählt mit einem Diagramm. Ein Diagramm, das stehen bleibt, während der Text vorbeizieht, eine Linie mit nummerierten Anmerkungen, eine Linie, die sich beim Scrollen zeichnet, kleine Vielfache auf einer Skala und eine Hochrechnung mit Regler.

Props und Details · Datengeschichte

Stehendes Diagramm

Das Diagramm bleibt stehen, während die Schritte vorbeiziehen. Jeder Schritt lässt seinen Abschnitt der Linie aufleuchten, auf dem Telefon fährt das Diagramm oben mit.

Im Studio öffnen

Kommentierte Linie

Eine Linie mit nummerierten Anmerkungen zu den wichtigen Momenten. Eine Anmerkung leuchtet im Diagramm und in der Liste auf, ein Fadenkreuz folgt dem Zeiger oder den Pfeiltasten.

Im Studio öffnen

Linie, die sich zeichnet

Die Linie zeichnet sich beim Scrollen, die Zahl in der Ecke folgt ihrer Spitze, und Meilensteine erscheinen, wenn die Linie sie erreicht.

Im Studio öffnen

Kleine Vielfache

Sechs kleine Diagramme auf einer gemeinsamen Skala, damit der Vergleich ehrlich bleibt. Der Zeiger bewegt sich durch alle zugleich, und die Werte folgen.

Im Studio öffnen

Was wäre, wenn

Eine Hochrechnung, die Lesende selbst steuern. Der Regler setzt die jährliche Veränderung, Linie und Ergebnis folgen, die gestrichelte Linie behält die Ausgangsannahme.

Im Studio öffnen

infographic

Infografik

Zahlen als Bilder erzählt. Von 100 in einem Feld aus Marken, Größen als echte Kreise, wohin ein Ganzes geht, vorher und nachher je Kategorie und Ströme von Quellen zu Verwendungen. Alles in Akzent und Textfarben.

Props und Details · Infografik

Von 100

Ein Feld aus 100 Marken. Jede Aussage daneben lässt ihren Anteil Reihe für Reihe aufleuchten, Pfeiltasten wechseln.

Im Studio öffnen

Größen im Vergleich

Kreise, deren Fläche der Wert ist, damit der Vergleich ehrlich bleibt. Sie wachsen beim Hereinscrollen von der Grundlinie, der größte im Akzent.

Im Studio öffnen

Wohin es geht

Ein Balken aus Anteilen, der sich von links füllt, und eine Liste mit Betrag und Anteil. Ein Anteil leuchtet in beiden auf, die anderen treten zurück.

Im Studio öffnen

Vorher und nachher

Zwei Zeitpunkte je Kategorie. Der Punkt wandert beim Hereinscrollen vom alten zum neuen Wert, die Veränderung steht neben der Beschriftung.

Im Studio öffnen

Ströme

Von Quellen zu Verwendungen in Bändern, deren Breite die Menge ist. Sie zeichnen sich von links nach rechts, ein Name lässt seine Bänder aufleuchten.

Im Studio öffnen

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Datengeschichten stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert