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

Wer kauft die Bundesliga leer ?

Wer kauft die Bundesliga leer ?

DataViz Challenges: Team-Sport

Diese Visualisierung entstand im Rahmen des Kurses DataViz Challenges im Sommersemester 2013.

Das Ziel des Kurses war es, sich als Gruppe in relativen kurzen Zeitintervallen einem vorgegeben Thema anzunähern, um danach eine Datenvisualisierung im ersten Schritt unter datenjournalistischen Leitsätzen zu konzipieren und danach auch technisch, bevorzugt mit der Javascript-Library D3, umzusetzen.

Daten-Recherche

Bildschirmfoto 2013-07-12 um 19.59.15.pngBildschirmfoto 2013-07-12 um 19.59.15.png

Das große Thema über allem lautete bei diesem Projekt Team-Sport. Im Kurs entstand dann die Regelung, aufgrund der Erfahrungen aus dem ersten Projekt Demografie, sich einem kleineren Themengebiet zu widmen, sodass es sich dann um den populärsten Team-Sport in Deutschland drehen sollte: Fußball.

Da wir innerhalb unserer Gruppe alles andere als affin für diese Sportart waren, suchten wir uns schnell einen zweiten Themenbereich für eine spannende Kombination. Natürlich liegt bei der kommerziellsten Sportart überhaupt der Faktor Finanzen nahe, sodass wir uns schnell mit den Transfermärkten in der Bundesliga beschäftigten.

Die Daten akquirierten wir dann durch das Coden eines eigenen Webcrawlers für die Seite transfermarkt.de. Aus Gründen der Vollständigkeit verwendeten wir die Daten der Saison 2010/2011.

Visualisierung

Bildschirmfoto 2013-04-23 um 03.44.19.pngBildschirmfoto 2013-04-23 um 03.44.19.png

Wir versuchten die Daten direkt in ein Force-Directed-Graph Layout zu visualiseren, da uns diese Methode erstens eine passende Darstellung im Groben für die Prozesse mit interaktiven Möglichkeit für Detailinformationen erschien und zweitens eine technische Umsetzung mit D3.js auch uns sehr interessierte.

Wir entwickelten nach und nach ein System, wie wir die Daten innerhalb eines solchen Graphs darstellen konnten. Am Ende symbolisiert die Dicke der Striche die Höhe der Transfersumme und die Größe der Kreise zeigen die gesammten Transferausgaben des jeweiligen Vereins. Mehr Informationen erfolgen bei einem Klick auf das jeweilige Element.(Strich für Transfer oder Kreis für Verein)

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

Bildschirmfoto 2013-07-12 um 20.45.52.pngBildschirmfoto 2013-07-12 um 20.45.52.png
Bildschirmfoto 2013-07-12 um 20.46.04.pngBildschirmfoto 2013-07-12 um 20.46.04.png
Screen Shot 2013-04-16 at 04.39.46.pngScreen Shot 2013-04-16 at 04.39.46.png
Screen-Shot-2013-04-16-at-05.15.23.pngScreen-Shot-2013-04-16-at-05.15.23.png

Fazit

Insgesamt war diese Visualisierung, trotz bzw. sogar wegen des für uns unspektakulären Ausgangsthemas, eine sehr schöne Übung, um sich näher mit D3.js auseinanderzusetzen und die Problematik eines Force-Directed-Graph zu verstehen und sogar ein wenig einzudämmen.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: foto: Marcus Paeschke

Entstehungszeitraum

Sommersemester 2013