Machine-Learning-basierte Überwachung von Fischbeständen des Rheins

KW 49

Sortieren der Daten

Als Erstes habe ich mich damit beschäftigt, wie ich die Daten visualisieren kann. Hierfür habe ich Google Charts verwendet. Zuerst musste ich jedoch meine Test-Spreadsheet-Datei so umstrukturieren, dass die Daten ausgelesen werden können. Ich habe Daten wie den Zeitpunkt auf die volle Stunde gerundet, um die angezeigten Säulen in einer überschaubaren Anzahl zu halten. Zusätzlich habe ich eine Funktion erstellt, die mir in einer neuen Tabelle bei einer Erkennung die Zahl 1 beim erkannten Fisch einträgt, um mit der Anzahl der Fische rechnen zu können. Dies habe ich zweimal gemacht, da für die Tagesansicht die Stunden im Vordergrund stehen sollen und für die Monatsansicht das Datum.

Hier ist das Spreadsheet:

https://docs.google.com/spreadsheets/d/1lfOq4ARrJq2gbmiyFhC1PFGZP8u_oXbKGkLZj2xRbnw/edit?usp=sharing

Abbildung1: Eingabe der Saten in die csv durch python code

Abbildung2: Ordnung der Daten für 24h Ansicht 

Abbildung3: Ordnung der Daten für Monats Ansicht

© Tom Gromann

QUERY Abfragen Testen

Im nächsten Schritt habe ich an den Query-Abfragen gearbeitet:

Vereinfacht gesagt, habe ich bei der täglichen Ansicht eine Abfrage verwendet, die mir alle Daten für ein bestimmtes Datum liefert.

1. Für die monatliche Ansicht musste ich einen Zeitraum festlegen und mir somit alle Daten anzeigen lassen, die innerhalb des ausgewählten Monats liegen.

2. Für die jährliche Ansicht habe ich nur nach dem Jahr sortiert, indem ich lediglich die ersten vier Ziffern (in diesem Fall 2024) ausgewertet habe.

3. Diese Query-Abfragen habe ich in meinem Spreadsheet auf ihre Funktionsfähigkeit geprüft, musste sie jedoch im Code der Google-Charts-Visualisierung noch anpassen.

Beispiel query für Abfrage nach den Daten vom 02.12.2024:

\=QUERY(A1:AP, „SELECT Z, SUM(AA), SUM(AB), SUM(AC), SUM(AD), SUM(AE), SUM(AF), SUM(AG), SUM(AH), SUM(AI), SUM(AJ), SUM(AK), SUM(AL), SUM(AM), SUM(AN), SUM(AO), SUM(AP) WHERE F = '2024-12-02' GROUP BY Z ORDER BY Z LABEL SUM(AA) 'Aal', SUM(AB) 'Neunauge', SUM(AC) 'Maifisch', SUM(AD) 'Brachse', SUM(AE) 'Zobel', SUM(AF) 'Güster', SUM(AG) 'Rapfen', SUM(AH) 'Aland', SUM(AI) 'Ukelei', SUM(AJ) 'Wels', SUM(AK) 'Nase', SUM(AL) 'Barbe', SUM(AM) 'Lachs', SUM(AN) 'Forelle', SUM(AO) 'Döbel', SUM(AP) 'Karpfen'“, 1) 

Output in folgendem Bild

Tests mit Google Charts

Im nächsten schritt habe ich mich bei ersten Visualisierungen versucht, mit den getesteten QUERYS. 

Versuch mit Teils Variabler Query (Datum über DatePicker gewählt): Abbildung unten.

QUERY für tag:

var dateFilter = `WHERE F = '${selectedDate}'`

query.setQuery(`SELECT G , SUM(H), SUM(I), SUM(J), SUM(K), SUM(L), SUM(M), SUM(N), SUM(O), SUM(P), SUM(Q), SUM(R), SUM(S), SUM(T), SUM(U), SUM(V), SUM(W) ${dateFilter} GROUP BY G ORDER BY G LABEL SUM(H) „Aal“, SUM(I) „Neunauge“, SUM(J) „Maifisch“, SUM(K) „Brachse“, SUM(L) „Zobel“, SUM(M) „Güster“, SUM(N) „Rapfen“, SUM(O) „Aland“, SUM(P) „Ukelei“, SUM(Q) „Wels“, SUM(R) „Nase“, SUM(S) „Barbe“, SUM(T) „Lachs“, SUM(U) „Forelle“, SUM(V) „Döbel“, SUM(W) „Karpfen“`);

Query für Monat:

Vorbereitung in JS:

const [year, month] = selectedDate.split('-');

const startOfMonth = `${year}-${month}-01`

const endOfMonth = new Date(year, month, 0).toISOString().split('T')[0]

var monthFilter = `WHERE F >= '${startOfMonth}' AND F < = '${endOfMonth}'`

QUERY: query.setQuery(`SELECT Z, SUM(AA), SUM(AB), SUM(AC), SUM(AD), SUM(AE), SUM(AF), SUM(AG), SUM(AH), SUM(AI), SUM(AJ), SUM(AK), SUM(AL), SUM(AM), SUM(AN), SUM(AO), SUM(AP) ${monthFilter} GROUP BY Z ORDER BY Z LABEL SUM(AA) „Aal“, SUM(AB) „Neunauge“, SUM(AC) „Maifisch“, SUM(AD) „Brachse“, SUM(AE) „Zobel“, SUM(AF) „Güster“, SUM(AG) „Rapfen“, SUM(AH) „Aland“, SUM(AI) „Ukelei“, SUM(AJ) „Wels“, SUM(AK) „Nase“, SUM(AL) „Barbe“, SUM(AM) „Lachs“, SUM(AN) „Forelle“, SUM(AO) „Döbel“, SUM(AP) „Karpfen“`);

Diese Tests habe ich so lange weitergeführt, bis ich meine vier geplanten Visualisierungen erstellt hatte:

- Ausgewählter Tag (Bar Chart)

- Ausgewählter Monat (Bar Chart)

- Ausgewählter Monat (Line Chart)

- Ausgewähltes Jahr (Pie Chart)

Als ich alle Visualisierungen erstellt hatte, begann ich damit, die Queries weiter variabel zu gestalten, indem ich die Zeilen durch Checkboxen steuern ließ.

Prototyp

Ich habe auf Figma einen Prototypen meiner Web-App mithilfe von Material 3 erstellt. Das Design wollte ich farblos und im Dark Mode gestalten, um nicht zu viele Farben einzusetzen, da ich ohnehin 16 verschiedene Farben für die Charts verwende. Mithilfe von https://projects.susielu.com/viz-palette habe ich ein Farbsystem für meine Charts erstellt. Dabei hat sich herausgestellt, dass ein barrierefreies Farbsystem nicht möglich ist, da ich zu viele Farben benötige. Hier bietet mir der Hover-State der Charts eine Lösung, da er dennoch die Anzahl und die Art des Fisches anzeigt.

Bei der Gestaltung habe ich mich außerdem für Chips entschieden, die sich im aktivierten Zustand passend zu den jeweiligen Fischen einfärben und somit meine Legende ersetzen. Zusätzlich dienen sie als Filter: Beim Deaktivieren eines Chips wird der entsprechende Fisch ausgeblendet.

Bei der Umsetzung hatte ich anfangs einige Probleme, da Komponenten wie die Side-Nav nicht für das Web verfügbar sind. Also entschied ich mich, das Ganze in Next.js mit Next UI umzusetzen. Auch hier hatte ich jedoch Schwierigkeiten, die Packages korrekt zu laden, und entschied mich schließlich, alles in Vanilla JavaScript umzusetzen.

Außerdem wollte ich die einzelnen Charts großflächig untereinander anordnen. Die Side-Nav soll dabei die aktuelle Position anzeigen.