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.
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.
Mehr zu p5.js:
- Einführungsvideo der Entwickler*innen
- p5-Tutorials als Youtube-Playlist von Dan Shiffman
- noch mehr Tutorials
- ausführlicher Programmierkurs p5
- p5.js-CheatSheet mit einigen wichtigen Befehlen auf einem Blatt:
Projektbeispiele mit p5js:
- Sammlung unserer openSenseMap-Beispiele
- Audio-Visualisierung und der Code dazu
- Verkehrsfluss in Santiago, Chile
- Windrichtung und -geschwindigkeit
Mehr zu Umweltphänomenen:
- Wikipedia-Artikel zum UV-Index
- Umweltbundesamt zu Feinstaub
- Weltkarte mit Echtzeit-Luftqualitätsindex