Datenvisualisierung im Webdesign: 12 atemberaubende Beispiele
Daten, Daten, überall. Aber was machst du damit? Heute haben wir 12 beeindruckende Beispiele für Datenvisualisierungen im Website-Design zusammengestellt, um Ihre Überlegungen zum Umgang mit Daten zu beschleunigen.
Wir leben in einer Zeit, in der die Fähigkeit, Daten auf neue und interessante Weise zu präsentieren, als Designer von großem Vorteil sein kann.
Egal, ob Sie eine riesige Sammlung von Zahlen oder nur Informationen haben, die Sie präsentieren möchten, dieser Designstil kann ein großartiges Werkzeug in Ihrem Kit sein.
Entdecken Sie Envato-Elemente
1. Geschichte der NFL
Mit jahrzehntelangen Daten aus 32 Teams stehen zahlreiche Informationen zu Spielen in der NFL zur Verfügung. FiveThirtyEight hat alles in einer Reihe interaktiver Grafiken zusammengefasst, die Sie nach Team anzeigen können, um die Ebbe und Flut der Fußballgeschichte zu sehen.
Das Beste an dieser Datenvisualisierung ist, dass sie sehr einfach ist. Die Linien zeigen Gewinne und Verluste. Mit Klicks und Hovers werden die Daten jedoch lebendig: Sie können Ergebnisse, Daten und Aufzeichnungen für jedes einzelne Spiel abrufen, das auf einer Karte der Durchschnittswerte für die gesamte Liga überlagert ist. (So können Sie sehen, ob Ihr Team vor oder hinter dem Rudel steht.)
2. Selfiecity
Selfies sind mehr als nur eine lustige Sammlung von Fotos. Selfiecity verwendet Rich Media-Visualisierungen, um Tausende von Fotos zusammenzustellen und demografische Informationen über die Personen zu finden, die sie aufnehmen.
Das Coole an diesem Datensatz ist, dass Sie, obwohl alles visuell ist - Tausende von Fotos - Muster erkennen können, z. B. den Stil von Selfies, die Menschen an verschiedenen Orten aufnehmen, unabhängig davon, ob Frauen oder Männer mehr Fotos machen, und das Alter von Selfies. Abnehmer. Obwohl es hier einige Statistiken und Zahlen gibt, werden diese Daten mithilfe von Fotos in einem riesigen Raster dargestellt.
3. Größter Wortschatz im Hip Hop
Dieses Projekt von ThePudding zeigt, dass Daten nicht immer nummeriert werden müssen. Es analysiert die Anzahl der in Hip-Hop-Texten verwendeten eindeutigen Wörter und zeichnet die größten Vokabeln anhand der Anzahl der Wörter mit Bildern des Künstlers auf.
So funktioniert es: „Es vergleicht die Anzahl der einzigartigen Wörter, die von einigen der bekanntesten Hip-Hop-Künstler verwendet werden (dh ein Beispiel für eine quantitative Sichtweise der Lyrik, die einst von Tahir Hemphill vorgeschlagen wurde). Ich habe die ersten 35.000 Texte jedes Künstlers verwendet. Auf diese Weise können produktive Künstler wie Jay-Z mit neueren Künstlern wie Drake verglichen werden. “
Das einfache Schwarz-Weiß-Design des Diagramms ist visuell interessant und macht es leicht zu erkennen, welche Künstler dem Rudel voraus sind. (Oder Sie können die interaktiveren Tools verwenden und nach bestimmten Künstlern suchen.) Sie können auch nach Epochen sortieren, wobei die 2000er die lyrisch robustesten sind.
4. Shopify Jahr im Rückblick
Peppen Sie eine Reihe von jährlichen Daten mit einer Website auf, die darauf basiert, alles visuell zu gestalten. Shopify's 2016 in Review ist eine Sammlung von Geschäftsberichtsdaten in einem einfach zu lesenden Paket.
Die Site scrollt in seitenähnlichen Blöcken mit Fakten und Informationen. Die Visualisierung im Timeline-Stil führt einen tieferen Bildlauf in Verknüpfungen mit Diagrammen und anderen numerischen Diagrammen durch. Diese Seite zeigt, dass Sie auch mit vielen Zahlen etwas Atemberaubendes und Trendiges kreieren können.
5. Tägliche Routinen berühmter kreativer Menschen
Lassen Sie sich nicht davon täuschen, dass Balken oder Liniendiagramme langweilig sind. Diese erstaunlichen Zeilen zeigen coole Daten, die zeigen, wie einige ziemlich berühmte Kreative ihre Tage verbracht haben. (Und es gibt viel Essen und Freizeit.)
Was diese Datenvisualisierung funktioniert, ist Farbe. Jede Zeile bedeutet etwas. Jede Farbe steht in starkem Kontrast zu den Farben um sie herum, sodass jede Information leicht zu sehen und zu verstehen ist.
6. Durch die Lücke fallen
Diese interaktive Datenvisualisierung der BBC ist brillant. Eine Reihe von Änderungen an animierten Punkten beim Scrollen zeigen komplexe Informationen auf einen Blick.
Die Animationen und Ideen hinter dieser interaktiven Infografik sind gut geplant und ausgeführt.
7. Jede totale Sonnenfinsternis
Diese Datenvisualisierung kombiniert ein wenig coole Zauberei, Animation und wissenschaftliche Daten, um benutzerdefinierte Informationen darüber bereitzustellen, wann (und ob) Sie möglicherweise eine Sonnenfinsternis sehen.
Es beginnt mit Ihrem Geburtsjahr für einen benutzerdefinierten Bericht. Hier ist meine (beachten Sie, dass der Datenabruf aus dem Jahr 2017 stammt): „Wenn Sie 1980 geboren wurden, sind (oder werden) Sie dieses Jahr 37 Jahre alt. Wenn Sie 100 Jahre alt werden, gibt es in Ihrem Leben weltweit 43 weitere Sonnenfinsternisse. Viele werden über Südamerika sein. Man wird nur über Wasser verdunkeln. “
Die Daten werden weiter ausgebaut, um zu erklären, wie eine Sonnenfinsternis funktioniert und welche Pfade für das Ereignis 2017 vorgesehen sind.
8. Windkarte
Wo weht der Wind?
Diese Karte zeigt Windgeschwindigkeiten und Durchschnittswerte für die Vereinigten Staaten in Echtzeit. Wetterdaten werden in eine einfache Schwarz-Weiß-Karte portiert, die sich bewegende Windmuster im ganzen Land zeigt. (Ich muss zugeben, nur die Animation anzusehen ist ziemlich süchtig ... und beruhigend.)
9. Wie jedes Mitglied zum Kongress kam
Die Datenzuordnung ist eine umfassende und äußerst informative Erfahrung. Diese interaktive Datenkarte zeigt den Weg jedes Kongressabgeordneten und jeder Kongressabgeordneten in den USA
Sie können Bildung, Jobs und andere politische Erfahrungen verfolgen. (Es ist erstaunlich, wie viele ähnliche Pfade es gibt.) Tauchen Sie tiefer in die Daten ein, indem Sie nach einzelnen Pfaden von Politikern suchen.
10. Die weltweit größten Datenverletzungen und Hacks
Wenn Sie nach Daten suchen, die gut aussehen, ist Information is Beautiful ein guter Ausgangspunkt. Dieses Kreisdiagramm zeigt Datenverletzungen von 30.000 Datensätzen oder mehr von 2008 bis heute.
Kreisgrößen geben an, wie groß ein Verstoß war, und es ist leicht zu erkennen, wo Ihre Informationen möglicherweise von einem Datenhack erfasst wurden. Bewegen Sie den Mauszeiger über einen Kreis, um mehr über die Verletzung zu erfahren. Das Design im Timeline-Stil zeigt noch etwas anderes - die schiere Zunahme von Verstößen pro Jahr.
11. Warum Ihr Smartphone das "Text Neck" -Syndrom verursacht
Einige der besten Datenvisualisierungen verweben Fakten und eine Geschichte, um ein vollständigeres Bild der Informationen zu erhalten. Dies ist bei dieser Anleitung zum Thema „Texthals“ der Fall.
Kleine Datenplots - unter Verwendung von Fakten und Zahlen - werden mit animierten Daten gemischt, die Haltungsänderungen zeigen, um genau zu zeigen (nicht zu sagen), was in diesem Phänomen passiert, das mit einer Anzahl von Fällen mit „Texthals“ begann. Es ist eine großartige Möglichkeit, etwas visuell zu erklären, das sonst möglicherweise nicht viel Sinn ergibt.
12. Illustrierter Leitfaden zu 2.339 Todesfällen in 'Game of Thrones'
Verwenden Sie Abbildungen, um auch eine ansprechende Datenvisualisierung zu erstellen. Die Washington Post dokumentierte jeden Tod in der beliebten Show „Game of Thrones“ mit einem illustrierten Leitfaden.
Abbildungen und Symbolcodierungen zeigen Todesfälle auf einen Blick mit Klickaktionen, die noch detaillierter sind. Außerdem ist alles nach Saison organisiert (und Ort und Charaktertyp, wenn Sie interessiert sind). Um zu beweisen, dass dies mehr als nur Spaß macht, gibt es eine vollständige Methodik, wie es funktioniert und was als Tod „zählt“.
Fazit
Die Verwendung von Datenvisualisierungen ist praktisch überall. Wir leben in einem datengetriebenen Zeitalter, in dem Menschen von Informationen und Wissen angezogen werden.
Die Möglichkeit, große Datenmengen in ein verwendbares Design umzuwandeln, ist eine wertvolle Fähigkeit, die Sie bei einer Reihe von Projekten unterstützen kann. Und wenn Sie noch nicht dazu aufgefordert wurden, werden Sie es wahrscheinlich bald sein.
