Bei Datengrafiken geht es darum, interessante Zusammenhänge in größeren Datenmengen sichtbar zu machen. In diesem Projekt durften keine alphanumerischen Zeichen (Text, Zahlen) oder bildhafte Elemente verwendet werden. Umso wichtiger wird die gezielte Verwendung von Farbe, Form, Position, Animation und Interaktion, um die Information zu kodieren und zu strukturieren.
Dieses Projekt wird begleitet vom Fach Programmiersprachen 2 (Dozent: Fabian Rauch). Die Studierenden sollten die interaktive Datengrafik so komplett und funktionsfähig wie möglich mit Web-Technologien, insbesondere Javascript, umsetzen.
Screen Stadtkarte: Dargestellt sind die Position und Größe der 73 Gegenden Barcelonas sowie deren Bevölkerungsdichte durch die Outline. Die Farben zeigen die Seite angrenzend zum Meer (blau) und Inland (gelb) auf. Mit Klick auf eine Kreislinie gelangt man zum nächsten Screen.
Screen Größenordnung und Immigration: Wenn die Maus nach rechts und links bewegt wird, zeigt die Spirale zurerst eine Darstellung der Größen in geordneter Reihenfolge und dann mit Immigration, welche prozentual zur jeweiligen Population der Gegend als Transparenz innerhalb der Kreise dargestellt wird. Beim Klicken auf ein Element gelangt man zum nächsten Screen, mit Doppelklick kommt man zurück zur Karte.
Screen Alter: Zu sehen ist die Altersverteilung der einzelnen Gegenden in fünf Altersgruppe (innen jung, außen alt). Mit Klick auf den jeweils inneren Kreis gelangt man wieder zum 2. Screen und mit Doppelklick zurück zur Stadtkarte.
