Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Registrieren Einloggen
Impressum Kontakt Datenschutz Barrierefreiheit
Datenvisualisierungen | Sebastian Sadowski

Datenvisualisierungen | Sebastian Sadowski

Experimenteller Kurs rund um interaktive Datenvisualisierungen im Web.

1. CHALLENGE: DEMOGRAFISCHE ENTWICKLUNG IN DEUTSCHLAND

Screen Shot 2013-07-07 at 20.04.53.png
©Sebastian Sadowski
Screen Shot 2013-07-07 at 20.04.53.pngScreen Shot 2013-07-07 at 20.04.53.png

_Prozess

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.

_Wo leben polnische Bürger in Berlin?

Screen Shot 2013-07-07 at 19.58.06.png
©Sebastian Sadowski
Screen Shot 2013-07-07 at 19.58.06.pngScreen Shot 2013-07-07 at 19.58.06.png

Problem: Im Datensatz waren nicht alle Stadtviertel aufgelistet.

_Wo kommen die Zuwanderer aus der EU nach Berlin her?

Screen Shot 2013-07-07 at 19.56.25.png
©Sebastian Sadowski
Screen Shot 2013-07-07 at 19.56.25.pngScreen Shot 2013-07-07 at 19.56.25.png

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.

2. CHALLENGE: TEAM SPORT

Bildschirmfoto 2013-04-23 um 03.44.12.png
©Sebastian Sadowski
Bildschirmfoto 2013-04-23 um 03.44.12.pngBildschirmfoto 2013-04-23 um 03.44.12.png

_Prozess

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.

_Daten

Screen Shot 2013-07-07 at 23.41.01.png
©Sebastian Sadowski
Screen Shot 2013-07-07 at 23.41.01.pngScreen Shot 2013-07-07 at 23.41.01.png

Die Daten akquirierten wir durch das Coden eines eigenen Webcrawlers für die Seite transfermarkt.de.

Screen Shot 2013-04-15 at 23.33.17.png
©Sebastian Sadowski
Screen Shot 2013-04-15 at 23.33.17.pngScreen Shot 2013-04-15 at 23.33.17.png

Wir versuchten die Daten direkt in ein Force-Directed-Graph Layout zu visualiseren. Die Dicke der Striche symbolisiert die Höhe der Transfersumme.

Screen Shot 2013-04-16 at 04.39.46.png
©Sebastian Sadowski
Screen Shot 2013-04-16 at 04.39.46.pngScreen Shot 2013-04-16 at 04.39.46.png

Im weiteren Prozess versuchten wir mehr Ordnung in die Visualisierung zu bringen, entfernten alle Labels und versuchten mit den Vereinsfarben zu arbeiten.

3. CHALLENGE: VISUALIZING METEORITES

Screen Shot 2013-07-01 at 15.35.19.png
©Sebastian Sadowski
Screen Shot 2013-07-01 at 15.35.19.pngScreen Shot 2013-07-01 at 15.35.19.png

http://fireball.ahoi.in

_Prozess

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.

_Geo Circle

Screen Shot 2013-05-23 at 13.24.29.png
©Sebastian Sadowski
Screen Shot 2013-05-23 at 13.24.29.pngScreen Shot 2013-05-23 at 13.24.29.png

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.

_Projektion

Screen Shot 2013-05-27 at 16.15.26.png
©Sebastian Sadowski
Screen Shot 2013-05-27 at 16.15.26.pngScreen Shot 2013-05-27 at 16.15.26.png

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.

Screen Shot 2013-05-29 at 17.19.46.png
©Sebastian Sadowski
Screen Shot 2013-05-29 at 17.19.46.pngScreen Shot 2013-05-29 at 17.19.46.png

Screen Shot 2013-05-31 at 11.47.28.png
©Sebastian Sadowski
Screen Shot 2013-05-31 at 11.47.28.pngScreen Shot 2013-05-31 at 11.47.28.png

_SVG Filter

Screen Shot 2013-05-28 at 12.16.33.png
©Sebastian Sadowski
Screen Shot 2013-05-28 at 12.16.33.pngScreen Shot 2013-05-28 at 12.16.33.png

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)");

_Performance

Screen Shot 2013-05-30 at 00.33.34.png
©Sebastian Sadowski
Screen Shot 2013-05-30 at 00.33.34.pngScreen Shot 2013-05-30 at 00.33.34.png

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.

_UI

Screen Shot 2013-07-07 at 23.14.14.png
©Sebastian Sadowski
Screen Shot 2013-07-07 at 23.14.14.pngScreen Shot 2013-07-07 at 23.14.14.png

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.

4. CHALLENGE: GOOGLE TRANSPARENCY REPORT

Screen Shot 2013-07-11 at 23.52.43.png
©Sebastian Sadowski
Screen Shot 2013-07-11 at 23.52.43.pngScreen Shot 2013-07-11 at 23.52.43.png

http://transparencyreport.ahoi.in/

_Prozess

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.

google transparency(1).png
©Sebastian Sadowski
google transparency(1).pnggoogle transparency(1).png

In der ersten Phase versuchte ich die Frage zu beantworten: „Welche Google Produkte am meisten betroffen sind und warum“.

Screen Shot 2013-06-16 at 13.29.09.png
©Sebastian Sadowski
Screen Shot 2013-06-16 at 13.29.09.pngScreen Shot 2013-06-16 at 13.29.09.png

Jede Löschanfrage könnte durch einen Kreis dargestellt werden. Farbe symbolisiert das Google Produkt. Damit könnte man auch eine Bar Chart erstellen.

censorship.ahoi.in-sc-index.html(8).png
©Sebastian Sadowski
censorship.ahoi.in-sc-index.html(8).pngcensorship.ahoi.in-sc-index.html(8).png

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.

censorship.ahoi.in-slic-index.html.png
©Sebastian Sadowski
censorship.ahoi.in-slic-index.html.pngcensorship.ahoi.in-slic-index.html.png

Andere Art der Visualisierung über die ganze Zeit.

censorship.ahoi.in-sc-index.html(11).png
©Sebastian Sadowski
censorship.ahoi.in-sc-index.html(11).pngcensorship.ahoi.in-sc-index.html(11).png

Die Visualisierung über eine einfache Linienverbindung führte ich weiter, nun mit anderen Daten, wie hier die Bevölkerung.

censorship.ahoi.in-sc-index.html(6).png
©Sebastian Sadowski
censorship.ahoi.in-sc-index.html(6).pngcensorship.ahoi.in-sc-index.html(6).png

Vergleich zu dem BIP des Landes.

censorship.ahoi.in-sc-index.html(3).png
©Sebastian Sadowski
censorship.ahoi.in-sc-index.html(3).pngcensorship.ahoi.in-sc-index.html(3).png

Vergleich zu der Internetverbreitung im Land.

censorship.ahoi.in-sc-index.html(14).png
©Sebastian Sadowski
censorship.ahoi.in-sc-index.html(14).pngcensorship.ahoi.in-sc-index.html(14).png

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.

Screen Shot 2013-07-11 at 23.53.04.png
©Sebastian Sadowski
Screen Shot 2013-07-11 at 23.53.04.pngScreen Shot 2013-07-11 at 23.53.04.png

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.

FAZIT

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.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Marcus Paeschke foto:

Entstehungszeitraum

Sommersemester 2013

zusätzliches Material

Links