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
Teil des Kurses ANALYSE – Informationsarchitektur und Visualisierung war die Gestaltung eines Plakates im Format DIN A1, das hier im folgenden dokumentiert wird. Der Sourcecode zu dem Projekt wird hier auf GitHub veröffentlicht werden.
Erste der beiden Aufgaben des Kurses war es, eine Woche lang Daten aus dem persönlichen Alltag zu sammeln und diese in Form eines Plakates im Format DIN A1 zu visualisieren.
Mein erster Ausgangspunkt in der Ideenfindungsphase war, die Themen Privatheit, Datensparsamkeit und Selbstoptimierung zu behandeln. Diese boten sich als Triple an, da ich mich persönlich mit ihnen beschäftige und es über die Form der Aufgabe einige Anknüpfungspunkte gegeben hätte. Mir war klar, dass die Frage danach welche Daten ich sammle und wie ich sie veröffentliche, eine wichtige Rolle spielen würde. Es sollte möglichst ein klar definierter Bereich meines Alltags werden, den es sich zu visualisieren lohnt und der dennoch keine zu tiefen Einblicke zulässt.
Digitale personenbezogene Daten haben das Potenzial, genau diese scharf abgegrenzte Domäne zu sprengen, in dem sie, mit anderen Methoden ausgewertet, deutlich mehr Aussagen zulassen, als es zuerst scheint; Ein Beschleunigungssensor im Telefon kann in Kombination mit einem genauen Fahrplan der anfahrenden und haltenden Züge zum Generator eines Bewegungsprofils werden, Standortdaten lassen sich, mit dem Adressbuch kombiniert, zum Aufbau eines social graph nutzen.
Die Gefahr der Korrelation ist in personenbezogenen Daten also grundsätzlich vorhanden. Um dieses Dilemma etwas zu umschiffen, beschloss ich, Daten zu verwenden die sowieso quasi-öffentlich sind – nämlich den gesamte Internetverkehr, den meine digitalen Geräte (Laptop und Smartphone) verursachen. Die privaten Informationen wie zum Beispiel der Inhalt meiner Nachrichten liegen in diesen Daten zwar grundsätzlich vor, allerdings sind sie in der Regel durch starke Verschlüsselung geschützt. Außerdem bot mir diese Wahl der Datenart, einen tieferen Einblick in einen Bereich zu bekommen der mir bisher verborgen geblieben war.
Einen full take des eigenen Netzwerkverkehrs zu bekommen, erwies sich als schwieriger als erwartet. Das Problem liegt darin, dass die „mitlauschende” Komponente tief genug im Betriebssystem verankert sein muss um wirklich jedes Paket mitlesen zu können, auch die Allerersten während des Bootvorganges. Außerdem muss die Speicherung der erhobenen Daten komplett lokal auf dem Gerät erfolgen. Die erhobenen Daten übers Netzwerk zu schicken würde einen positiven feedback loop verursachen.
Nach einigen missglückten Versuchen entschied ich mich dann auf meinem Laptop (unter NixOS) für einen per systemd gestarteten Service, der mit tcpdump
auf dem Wlan-Interface des Systems mitlauscht. Auf dem Smartphone, das mit LineageOS läuft, scheiterte ich daran, einen Service zu starten der allen Verkehr mitschneidet. Die Bastellösung sah dann so aus, dass ich auf einem eigenen Server einen VPN-Endpunkt (Wireguard) einrichtete und mein Handy mit der Wireguard-App für Android so konfigurierte, dass es allen ins Internet gerichteten Verkehr durch das VPN tunneln sollte. Auf dem Server konnte ich dann Internet Provider spielen und allen Verkehr des Smartphones wieder mit tcpdump
mitschneiden. So gelang der Mitschnitt zwar nicht auf dem Gerät selbst, aber immerhin so nah dran, dass fast aller Verkehr mitgenommen wurde. Was fehlen dürfte ist DHCP-Traffic (benötigt damit sich mein Smartphone in das Wlan einloggen kann) und eventuell die ersten Pakete beim Boot des Telefons, da die VPN-App nicht als erstes startet.
# Beispielhafte Konfiguration für eine systemd unit.
[Unit]
After=network-pre.target
Before=network.target dhcpcd.service
Description=Capture laptop
ExecStart=/bin/sh -c 'tcpdump -i any -w - > /var/lib/capture/$(date --rfc-3339=s)-capture.pcap'
Restart=always
RestartSec=1s
Nach einer Woche hatte ich dann 37GB Daten in Form von mehreren Pcap-Dateien zusammen. Ich bemühte mich in der Zeit, mein Verhalten nicht bewusst zu ändern, allerdings war ich mir meistens der laufenden Sammlung bewusst.
Die grundlegende Form stand relativ schnell fest. Erste Ziele der Visualisierung die mir bis zum Schluss wichtig waren, waren
Die Ziele wollte ich erreichen durch mehrere die ganze Seite füllende Zeitleisten, die durch Textboxen mit Kontext unterfüttert werden. Eine große Überschrift sollte aus der Ferne einen ersten Eindruck geben, ein einleitender Text in der oberen Hälfte zusätzlichen Kontext.
Mir gefällt die Idee, ein Plakat durch Code zu gestalten und diesen Code später zu teilen (ohne die gesammelten Daten). Meine ursprüngliche Zielvorstellung hinsichtlich der Werkzeuge war, dass eine andere Person jederzeit meinen Code nehmen können sollte und mit den eigenen Netzwerkdaten ein Plakat generieren könnte, das meinem bis auf die dargestellten Daten gleicht.
Gleichzeitig wollte ich in der Lage sein, mit einem grafischen Tool am Schluss „Pixel schubsen„ zu können. Als Grundlage für die Representation der Grafik, die sowohl durch Code als auch durch ein grafisches Programm manipulierbar sein sollte, hatte sich schon einmal SVG für mich bewährt.
Als Programmiersprache für den generativen Teil der Arbeit wählte ich Rust. Der erste Grund für die Sprache ist, dass ich sie seit Jahren lernen will, aber immer wieder im Versuch mangels Projekt steckengeblieben bin. Der zweite ist, dass Rust als Systemprogrammiersprache den Anspruch hat sehr schnell zu sein, was mir bei 37GB Datenbasis sehr entgegen kommen sollte.
Für die grafische Bearbeitung der SVG-Datei benutzte ich die freie Vectorsoftware Inkscape. Kein Tool, das besonders viel Freude beim arbeiten macht, aber es reichte für meine Zwecke.
Im Ergebnis sind dann viel weniger Arbeitsschritte in Code abgelaufen als ich mir vorgenommen hatte. Das hatte mehrere Gründe. Einer war sicherlich, dass ich nach wie vor Schwierigkeiten damit habe, Rust als Sprache effektiv einzusetzen, auch wenn ich schon viel schneller geworden bin. Ein anderer ist, dass ich mich ziemlich viel mit der Optimierung des Toolings aufgehalten habe und gegen Ende des Projektes unter Zeitdruck einige Entscheidungen zugunsten der schnellen und schmutzigen Lösung treffen musste. Zum Beispiel hätte ich gerne die Beschriftungen der Diagramme im fertigen Plakat komplett programmatisch erledigt, habe sie dann aber doch von Hand platziert.
Das fertige Ergebnis besteht aus den drei im Konzept bereits angelegten Elementen – der Überschrift mit Einleitungstext, mehreren Histogrammen die die Verteilung der Pakete über die Zeit anzeigen und einigen erläuternden Texten zu den einzelnen Histogrammen.
Das Plakat ist komplett in schwarz-weiß gehalten, was nicht geplant war. Eigentlich hätte eine Farbauswahl Übersicht über die einzelnen Histogramme geben sollen und die erläuternden Texte durch gleiche Farben mit den jeweiligen Histogrammen verknüpfen sollen.
An einigen Stellen sind IP-Pakete in Binärform sichtbar. Die Darstellung mit hellen und dunklen Pixeln soll den Zugang zu den Daten ermöglichen, ohne die Hürden, die Darstellung in Code häufig mit sich bringt.
Die verschiedenen Grautöne in den Schriften sollen dafür sorgen, dass der Eindruck eines reichen Plakates entsteht, vor dem man einige Minuten verweilen kann, ohne dass die visuelle Klarheit verloren geht. Ich hoffe, hier einen gangbaren Weg fürs Auge ohne zu viele Stolpersteine zu ermöglichen.
Rückblickend hätte ich gerne noch viel mehr Möglichkeiten ausprobiert um Inhalte aus dem Netzwerkbereich über das Plakat zu transportieren. Zum Beispiel hätte man sehr schön den Unterschied zwischen HTTP und HTTPS erklären können, in dem man die Pakete in der binär-Pixelform nebeinander stellt und zeigt, dass man bei HTTP-Paketen noch sehr viel Struktur erkennen kann, während bei HTTPS-Paketen nur noch (verschlüsseltes) Rauschen zu sehen ist.
Alles in allem funktioniert das Plakat aber als erster Versuch, das Thema Internet Protocol mit einfachen grafischen Mitteln zu transportieren. Ich freue mich auf die nächste Gelegenheit, die erlernten Techniken anzuwenden.