In unseren Seminar „Web Science“ befassen wir uns im kommenden Wintersemester 26/27 unter anderem wieder mit Creative Coding. Wir schauen uns p5.js genauer an und wollen anhand von Code-Snippets bzw. Sketches auch die Möglichkeiten für Datenvisualisierungen testen. Ein Ziel ist, über den praktischen Zugang zu p5.js JavaScript Grundlagen zu lernen. KI begleitet uns dabei als Tutor, beantwortet unsere Fragen und hilft uns, Probleme zu lösen. Wichtig ist aber, dass wir generierten Quellcode verstehen und nicht unreflektiert übernehmen. Daher starten wir mit einfachen Beispielen im p5.js Webeditor – erst einmal ganz ohne JavaScript Build Tools wie Vite oder Frameworks wie z.B. React.

Da in vielen Kursen immer mal wieder die Frage aufkommt, welche Formen der Datenvisualisierung es eigentlich gibt uns wofür man sie gut einsetzten kann (oder eben auch nicht), habe ich eine Sammlung von p5.js Beispielen als „Formen der Datenvisualisierung“ begonnen:

Die Sammlung ist nicht nach Aussehen geordnet, sondern nach kommunikativer Absicht: Was soll die Grafik zeigen?

Zu jeder Form gehört ein lauffähiges p5.js-Beispiel – Mouseover zeigt es, Klick öffnet Code und Erläuterung. Bisher sind 11 Kategorien aufgeführt von Magnitude über Zeitverlauf bis hin zu Unsicherheit oder Raum. Ein Punkt oben rechts in jeder Beispielkachel zeigt an, was Bewegung hier leisten kann. 22 der 89 Formen können Bewegung als Bedeutungsträger nutzen, bei allen anderen ist Animation Dekoration.

Die Sammlung wird nach und nach erweitert, falls uns etwas fehlen sollte.