5. Daten visualisieren mit p5.js

Anhand der openSenseMap hast du jetzt schon einige klassische Möglichkeiten der digitalen Daten-Visualisierung kennengelernt – aber es gibt noch viel mehr! Im nächsten Video gehen wir noch einmal näher darauf ein, was der Sinn und Zweck von Daten-Visualisierung ist und stellen dir eine Möglichkeit genauer vor, mit der du ein eigenes Projekt umsetzen kannst: die grafische Visualisierung von Umweltdaten der Map mit dem JavaScript-Online-Editor p5.js.

Die Idee der JavaScript-Bibliothek p5 basiert auf der quelloffenen Programmiersprache Processing. Es ist eine Art Software-Skizzenbuch, mit dem Künstler*innen, Designer*innen und anderen Menschen mit Ideen das kreative Gestalten mit Programmierung einfach gemacht wird. Man kann damit grafische und interaktive Anwendungen für das Web direkt im Browser erschaffen! P5 ist Open Source und wurde von Lauren McCarthy in die Welt gebracht.

Bitte einen Moment Geduld. Das Video wird geladen.
Bitte einen Moment Geduld. Das Bild wird geladen.

Das hat es mit der Daten-Visualisierung auf sich.

Jetzt bist du dran: dein Forschungsprojekt!

  • Stelle eine Frage, die sich mit den Daten der openSenseMap beantworten lässt. Was möchtest du herausfinden und darstellen?
  • Recherchiere die Daten, die du zur Beantwortung deiner Frage benötigst und hinterfrage sie kritisch!
  • Beginne dein Projekt erstmal mit einem Sensor von einer Box!
  • Überlege dir, wie du die Daten bewertest und wie sich das grafisch darstellen lässt: Zeige deine Gefühle und deine Meinung mit der Visualisierung der Daten!
  • Tipp: Bedenke dabei: Farbe, Form, Bewegung und die Position im Raum!

Wir haben ein einfaches Beispielprojekt programmiert, das die aktuelle Temperaturmessung einer senseBox anzeigt. Anhand der Lernkarten kannst du es nachbauen und dabei Grundlagen der JavaScript-Programmierung lernen. Danach kannst du das Projekt umprogrammieren und deine eigenen Ideen damit umsetzen. Falls dir die Möglichkeiten auf den Lernkarten nicht ausreichen: Ein Verzeichnis aller Befehle findest du auf Englisch in der p5-Referenz.