In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Experimenteller Kurs rund um interaktive Datenvisualisierungen im Web.
Tim Pulver, Paul Heinicker und ich haben uns mit der Zuwanderung und Bevölkerungsentwicklung in Berlin beschäftigt. Jährlich wächst Berlin um 40 000 Menschen (Quelle: Tagesspiegel) und wir haben uns gefragt, wer diese 40 000 Menschen sind. Wir analysierten den Migrationsbericht des Bundesamtes für Migration und Flüchtlinge und den Statistischen Bericht der EinwohnerInnen im Land Berlin. Aus diesen Daten entstanden viele, schnelle Entwürfe zu verschiedenen Fragestellungen.
Problem: Im Datensatz waren nicht alle Stadtviertel aufgelistet.
Aus Polen kommen die meisten Zuwanderer.
Die meisten Einwanderer kommen aus Polen. Als nächstes fragten wir uns, was uns mit den Bürgern aus Polen verbindet? Wir stellten fest, das wir alle noch nie in Polen waren, trotz der geringen Distanz und wir auch kaum Polen kennen. Im Süden Europas waren wir jedoch alle schon oft und kennen auch Freunde aus der Region. Diese Tatsache nahmen wir als Ausgangslage, um eine Informationsgrafik zu erstellen, die darstellen sollte, wie viele Berliner schon einmal in Polen waren und wie das Verhältnis zwischen Urlaubsland und die Herkunft der Zuwander ist. Wir entschieden uns für eine Slopegraph, da man dort sehr gut Querschläger und Tendenzen sieht.
Für das Thema Team Sport wollten wir im Team eine spannende Visualisierung erstellen, die das Netzwerk und die Fußballwelt gut abbildet. Wir hatten uns für den Transfer von Spielern in der 1. Bundesliga entschieden, um somit das Machtverhältnis in der Liga zu visualisieren, sprich wer kauft alle guten Spieler ein, oder wer die meisten Spieler/Talente.
Die Daten akquirierten wir durch das Coden eines eigenen Webcrawlers für die Seite transfermarkt.de.
Wir versuchten die Daten direkt in ein Force-Directed-Graph Layout zu visualiseren. Die Dicke der Striche symbolisiert die Höhe der Transfersumme.
Im weiteren Prozess versuchten wir mehr Ordnung in die Visualisierung zu bringen, entfernten alle Labels und versuchten mit den Vereinsfarben zu arbeiten.
Bei diesem von visualizing.org ausgeschriebenen Wettbewerb ging es um die Visualisierung von Meteoriten anhand der Daten von der „Meteoritical Society“. Der Datensatz ist leider sehr schwierig, da Meteoriten, die im Wasser aufgeschlagen sind, nicht protokoliert werden (können) und die Fundlage je nach dem Forschungsaufkommen in dem jeweiligen Land abhängt. Ich entschied mich daher für eine sehr grafische, ästhetische Visualisierung, die anhand von verschiedenen Filtermöglichkeiten einen schnellen Überblick über die Einschläge der letzten 100 Jahre geben sollte.
Zu Anfang sollten alle Meteoriteneinschläge auf einem Globus dargestellt werden, um dies zu ermöglichen, benutzte ich die d3.geo.circle. Ein sehr gutes Beispiel von Mike Bostock ist hier zu finden.
Die Meteoriten wurde zunächst in einem Orbit dargestellt. Dadurch wurde die Darstellung jedoch sehr unübersichtlich. Besser war es, die Projektion zu dublizieren und die beiden Geo-Circles ebenfalls zu dublizieren und durch eine Linie zu verbinden.
Der Pseudo 3D Effekt konnte mit ein paar SVG Filter erreicht werden. Hier ein Code Auszug für den „Glow Effect“:
In d3.js: var backgroundCircle = graphic.svg.append(„circle“) .attr('cx', width / 2) .attr('cy', height / 2) .attr('r', projection.scale()) .attr("filter", "url(#glow)") .attr("fill", "url(#gradBlue)");
Leider war gegen Ende die Zeit zu knapp, um noch die Performance zu verbessern. Wenn die Erdkugel im Canvas anstatt mit SVG's gerendert werden würde, wäre es um einiges schneller. Hierzu gab es ein paar schnelle Tests, die jedoch nicht mehr umgesetzt werden konnten. Die Länder auf der Erdkugel sollte auch einfach anwählbar sein, was mit SVG's wesentlich einfacher war.
Es sollten mehrere Filtereinstellungen gleichzeitig möglich sein. Die Anzeige der Meteoriten sollte nach Zeit und Land gefiltert werden. Die Crossfilterung wurde ermöglicht durch die Lib Crossfilter von Square die Select box für die Länderauswahlt mit der Lib Select2.
Bei diesem von visualizing.org ausgeschriebenen Wettbewerb ging es um die Visualisierung des Google Transparency Reports. Der Bericht besteht aus den Löschungsanfragen von Öffentlichen Domains und Regierungen. Ich fand den Datensatz der Regierungen interessant und wollte eine einfache, übersichtliche Visualisierung erstellen, die die Exploration in einer einfachen und tieferen Interaktion ermöglicht.
In der ersten Phase versuchte ich die Frage zu beantworten: „Welche Google Produkte am meisten betroffen sind und warum“.
Jede Löschanfrage könnte durch einen Kreis dargestellt werden. Farbe symbolisiert das Google Produkt. Damit könnte man auch eine Bar Chart erstellen.
Ich wollte noch einen weiteren Datensatz hinzu nehmen, um evtl. Patterns zu finden oder eine interessante Aussage treffen zu können. Hier wurde die Anfragen von der ersten Hälfte 2012 mit der zweiten Hälfte verglichen.
Andere Art der Visualisierung über die ganze Zeit.
Die Visualisierung über eine einfache Linienverbindung führte ich weiter, nun mit anderen Daten, wie hier die Bevölkerung.
Vergleich zu dem BIP des Landes.
Vergleich zu der Internetverbreitung im Land.
Die Visualisierung sollte vor allem auf dem Desktop Computer, die immer breiter werden, gut funktionieren. Daher entschied ich mich für eine stark horizontale Darstellung. Dementsprechend drehte ich die Visualisierungen um 90Grad.
Als letzter Step wurden die weiteren Interaktionsmöglichkeiten umgesetzt, wie die Länder-Filterung bei Hover über das Land und der Verlinkung mit dem Bericht auf Click. Die Farben in den Balken wurden den jeweiligen Google Produkten angepasst, um noch schneller die Zuordnung herzustellen.
Der Kurs war gut organisiert und am Ende ist auch viel bei rum gekommen. Leider hatte ich etwas ganz anderes erwartet, nämlich dass viel mehr um die Erstellung von guten Datenvisualisierunge geht. Ich hätte mir mehr Diskussion um die Visualisierungsarten gewünscht, um die Darstellung und Kritik am Prozess des Visualisierens, sowie der Freiheit der Darstellung. Ich empfand den Kurs mehr als ein D3.js / Javascript Einsteiger Kurs anhand von Datenvisualisierungen. Auch die sehr knappe Zeit von teilweise nicht mehr als sieben Tagen für eine Visualisierung war fordernd und fand ich zu Anfang sehr gut, gegen Ende hätte ich mir ein bisschen mehr Zeit für eine gute Visualisierung gewünscht. Zusammengefasst: ein spannender Kurs mit Erweiterungspotential.