Umsetzung

Durch meine Entwürfe aus Figma hatte ich nun eine grobe Vorstellung davon, wie ich die Screens visuell aufarbeiten möchte. Als nächstes habe ich dann damit angefangen zu programmieren.

Grundstruktur

Zunächst habe ich versucht, die Punkte der Passagiere nach ihrem Alter zu ordnen und diese dann zu gruppieren.

Nachdem die Punkte bereits nach Altersgruppen sortiert waren, musste ich nun die X- und Y-Positionen näher definieren. Dazu habe ich den gruppierten Datensatz in einer Schleife durchlaufen und die Grundpositionen festgelegt, die sich erhöhen sollten, sobald ein Punkt gezeichnet wurde.

Um den Unterschied zwischen den Klassen zu verdeutlichen, habe ich dann damit begonnen, die Strichstärken der Kreise anzupassen, wie ich es zuvor geplant hatte.

Erste Änderungen

Nachdem die Punkte wie gewünscht gezeichnet wurden, musste ich mir Gedanken darüber machen, wie viele Punkte nebeneinander gezeichnet werden sollen. Durch den ersten Zwischenstand wurde mir klar, dass es Platzprobleme geben würde, wenn ich die Punkte in 5er Reihen anordnen würde, da nicht genug Platz vorhanden wäre.

Daraus entstand die Idee, die Balken breiter zu zeichnen und somit mehr Punkte nebeneinander anzuordnen. Dadurch wurde das Platzproblem gelöst.

Als nächstes ging es darum, die verschiedenen Filteroptionen zu implementieren. Hierzu habe ich vorläufig Toggle-Buttons an der rechten Seite des Screens platziert.

Layout Varianten

Nachdem die Buttons nun funktionstüchtig waren, habe ich mich damit befasst, diese an das Layout anzupassen: