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

Armstrade - Map Interfaces

Eine Datenvisualisierung welche die Daten des sipri Institutes, über den globalen Waffenhandel, im Web-Format darstellt.

Idee

In einem vorigen Semester habe ich eine Datenvisualisierung des weltweiten Waffenhandels für den Dome erstellt. Nun wollte ich im Rahmen des Map-Interface Kurses dieses Projekt auf das Web-Format übersetzen und das Interface für diese Umgebung optimieren.

Referenzprojekte

main view-smal.jpgmain view-smal.jpg

Dieses Projekt entsandt in starker Anlehnung an die vorangegangene [Armstrade-Dome](http://incom.org/projekt/1877 „Amstrade-Dome“) Visualisierung. Jedoch während des Dome Projektes stand eine effektvolle Inszenierung über den Köpfen des Zuschauers im Vordergrund. Der User konnte nicht mit der Visualisierung interagieren, sondern sollte als Zuschauer mit einer massiven Datenvisualisierung unterhalten werden. Für die Webumsetzung sollte genau diese Interaktivität geschaffen werden. Ein Interface sollte entstehen, welches dem Nutzer mehr Kontrolle gibt und ein tieferen Einstieg in die Daten ermöglicht.

Entwicklungsprozess des Prototyps

1.PNG1.PNG

Zunächst habe ich das Processing Skript in Javascript übersetzt. Zur Darstellung wurde das Canvas Element verwendet. Um die geringere Performance von Javascript auszugleichen, musste die Kollisionsabfrage optimiert werden, was sich allerdings als so variable herausstellte, dass noch eine kleine auffächer Animation der Bubbles drin war. Für das Web-Format musste auch die Karte von der Azimutal zur Miller Projektion geändert werden und die Positionen der Bubbles wurden angepasst.

Armstrade.pngArmstrade.png

Dank Feedback aus dem Kurs wurde die Visualisierung noch um eine Zeitleiste erweitert und das Farbschema überarbeitet. Der jetzige stand der Anwendung ist im nachfolgenden Link zu betrachten.

Anwendung: (den Ladeprozess bitte vollständig abwarten) Armstrade-Web

Finaler Entwurf

design-1.pngdesign-1.png

Der Finale Entwurf zeigt die volle Funktionsweise der Zeitleiste mit Zusatz Informationen zu jedem Jahr, Verlinkungen zu entsprechenden Handelspartnern und detaillierte Anzeige der Handelsdaten.

design-1.pngdesign-1.png
design-2.pngdesign-2.png
design-3.pngdesign-3.png
design-4.pngdesign-4.png

Ausblick

  • Vollständige Umsetzung des Time-Sliders
  • Selektion einzelner Handelsjahre
  • Anordnung der Beziehungslinien zwischen den Ländern (edge-bundling)
  • Anordnung der Länderbubbles

Fazit

Auch wenn ich immer noch nicht mit diesem Projekt fertig bin, hat mir dieser Kurs geholfen das Konzept dieses Projekts ein ganzes Stück voranzubringen. Und das nicht nur durch das Feedback, sondern auch durch den Kursabschnitt über das Gestalten von Karten mit TileMill und anderen Tools, welches ich mit Sicherheit noch einmal ein eigenes Projekt widmen werde.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Marcus Paeschke

Entstehungszeitraum

Wintersemester 2012 / 2013