Blog

Data Sketches - Ein vielversprechendes Projekt von Nadieh Bremer und Shirley Wu

One had just quit her job to try freelancing, and wanted to use the extra time to experiment and explore. The other wanted to create more actual projects; she had only made one standalone project in the past year that wasn’t a tutorial example. And while bemusing these situations one day in June, Shirley came up with the idea of a twelve-month collaboration.
— datasketch|es

Nadieh Bremer und Shirley Wu möchten jeden Monat eine Visualisierung zu diversen Themen auf Ihrer Projektseite Datasketch|es veröffentlichen. Zwei Mal haben sie Ihre eigene Vorgabe schon erfüllt und schon jetzt tolle Werke erschaffen. 

Source: http://www.datasketch.es/

Uber gewährt Einblick in deren Datenvisualisierungen

Quelle: Uber

At Uber, data is our biggest asset. We generate insight by using data to create visual exploratory data analysis tools, but data exposition of our business metrics also enables managers in all of our cities to make informed decisions about the business.
— Uber Engineering Blog

Erfreulich, dass das Unternehmen Uber einen sehr schönen Einblick in deren Datenvisualisierungen gewährt. 

Source: https://eng.uber.com/data-viz-intel/

D3js Version von Stephen Fews Dashboard

Stephen Few hat zusammen mit Robert Monfera eine interaktive D3js Version seines Studenten Dashboards erstellt. Die Daten stammen aus einem Design Wettbewerb, der im Jahr 2012 stattfand. Besonders wichtig fand ich die folgende Aussage zur interaktiven Spaltensortierung in Dashboards, die sich jeder merken sollte:

When I introduced my version of the Student Performance Dashboard, which appears in the second edition of my book Information Dashboard Design, I acknowledged that the ability to sort the rows of student information in various ways could be useful. However, I suggested that this should be implemented in a way that always automatically reverts back to the original sort order immediately after viewing the data. This is because dashboards will only work for rapid performance monitoring if they present the data in the same manner from day to day, without alteration. Otherwise, people will never learn to use them rapidly because of the disorientation that is caused when anything other than the data changes, including the way in which items are sorted.
— Stephen Few
Source: http://www.perceptualedge.com/blog/?p=2138

D3.js und Scrolling - Storytelling mit Scrollern

I started to produce more D3 graphics for my journalistic stories. Last year some of the narratives received some criticism. Among the advice I got was that some graphics would have too many buttons, options and possibilities. One of the issue people brought forward in particular was that some of the button, handles, and clickable dashboard interfaces are cool, but still too complicated and that these extra interactive features would distract from the story.
— Ben Heubl

Sogenannte "Scroller" können eingesetzt werden, wenn eine Geschichte - ein zeitlich definierter Ablauf - erzählt werden soll, und der Leser eigentlich nur wie gewohnt die Seite weiterscrollen soll. Traditionelle, interaktive Grafiken und Visualisierungen haben immer das Problem, dass der Leser damit interagieren muss. Es ist zwingend notwendig, dass eine Benutzeroberfläche erdacht wird, in der Knöpfe, Links und Schalter dafür dienen, die Interaktion zu starten und fortzuführen.

Das ist bei Scrollern nicht notwendig. Der Leser scrollt durch das Dokument und die Visualisierungen werden passend zum Abschnitt animiert und transformiert. Einen tollen Überblick, wie dieses mit D3js und anderen Bibliotheken zu realisieren ist, bietet dieser Artikel.

Source: http://datacandy.co.uk/scroller/index.html

STACKED BUMP CHARTS - Schon einmal gesehen?

"Stacked Bump Charts" sind eine frische Visualisierungsmethode mit einer klaren Aufgabe: Die Anzahl einzelner Objekte über einen vergleichbaren Zeitverlauf darzustellen.  Zu jeder Koordinate ist klar, wie viele Objekte noch im Rennen sind und welche es sind. Auch die Dauer der Objekte wird deutlich dargestellt. Das sind auf jeden Fall die Vorteile gegenüber eines Balken- oder Liniendiagrammes. Bei vielen Objekten/Kategorien leidet bei diesen die Übersichtlichkeit oder Konsistenz.

Stacked Bump Charts bei der New York Times

Die New York Times nutzt diese Visualisierungsmethode um die verschiedenen Präsidentschaftskandidaten und die Dauer ihrer Kampagnen auf der Zeitachse abzutragen. Man sieht sehr schön, wer einen langen Atem bewiesen hat, und wer schon vorher aufgegeben hat. Wichtige Ereignisse sind zusätzlich auf der Zeitachse vermerkt. Um die Wahlperioden untereinander vergleichbar zu gestalten, hat man die Zeitachse auf die Wochen bis zur Wahl normiert. 

Quelle: New York Times

Stacked Bump Charts mit D3

Wer ebenfalls ein Stacked Bump Chart mit D3 nachbauen und einsetzen möchte, dem sei dieses ausführliche Tutorial empfohlen.

Source: http://www.nytimes.com/interactive/2015/06...

Data Scrolling - Geschichten mit Daten erzählen

Jim Vallandingham gibt Hilfestellung bei der Erstellung sogenannter Scroller. Diese Technik, unter anderem eingesetzt von Bloomberg und den New York Times, erlaubt es, ganze Geschichten und Zusammenhänge von Daten darzustellen, und das nur, indem der Leser an den Daten vorbei scrollt. Jim geht auf das HTML und Javascript Konstrukt ein, gibt Tips für den Einsatz von Ereignissen, Animationen und Übergängen. Wenn man diese Technik beherrscht oder adaptiert, bekommt man Visualisierungen wie die Folgenden hin:

Quelle: New York Times -  The Clubs That Connect The World Cup

Quelle: New York Times - The Clubs That Connect The World Cup

Source: http://vallandingham.me/scroller.html

Textures.js - Mehr Mut zu Texturen!

Muster und/ oder Texturen werden eigentlich selten für Datenvisualisierungen eingesetzt. Meiner Meinung nach zu unrecht. Sie unterstreichen die visuelle Unterscheidbarkeit von Grafikelementen und helfen dabei, ohne überflüssige Farben aus zukommen.

Im Github Repository http://riccardoscalco.github.io/textures/ findet sich eine Javascript Bibliothek, mit dessen Hilfe man einfach Texturen in d3js Visualisierungen verwenden kann. Die Resultate können sich wirklich sehen lassen. Also: Farben sind nicht Alles. Mehr Mut zu Texturen!

Quelle: http://riccardoscalco.github.io/textures/

Source: http://riccardoscalco.github.io/textures/