Matthias Edler-Golla
matthias.edler-golla@hm.edu
http://matthias-edler-golla.de

• CSV-Dateien
• Einlesen von CSV-Dateien in p5.js
• Darstellung von CSV-Dateien als Tabelle
• Darstellung von CSV-Dateien als Graphen
• Aktuelles Beispiel mit COVID-19 Zahlen weltweit

CSV-Dateien sind super praktisch, um Daten in Programme wie p5.js einzulesen. Im hintereren Teil des Scripts zeige ich noch ein paar aktuelle Beispiele!

CSV-Datei im Text-Editor (z.B. Brackets)

Die einzelnen Werte werden durch ein Komma getrennt – es gibt aber auch CSV-Dateien, bei denen der Strichpunkt als Trenner eingesetzt wird.

Datum,Uhrzeit,Messung zu,Wert
2019-05-27,09:30:01,Helligkeit,354
2019-05-27,09:45:01,Helligkeit,371
2019-05-27,10:00:01,Helligkeit,329
2019-05-27,10:15:01,Helligkeit,131
2019-05-27,10:30:01,Helligkeit,144
2019-05-27,10:45:01,Helligkeit,138

die erste Zeile enthält hier die Erklärungen, um was es sich in der jeweiligen Spalte handelt

CSV-Export aus Numbers, Excel oder ähnlichem

Dieser Export ist in praktisch allen *Tabellen-Kalkulations-Programmen möglich!

Schaut Euch die Demo an – und ladet das komplette Paket herunter

p5.js

Einlesen der CSV-Datei "data_log.csv"

let data_log;

function preload() {
  // einlesen der Werte in die Variable "data_log"
  // relativen Pfad beachten!
  data_log = loadTable("data_log.csv", "csv", "header");
}

p5.js

Darstellen der Werte aus der CSV-Datei – bitte die jeweiligen Kommentare beachten!

function setup() {
  const meinCanvas = createCanvas(600, 260);
  meinCanvas.parent("canvasContainer");
  background(255);

  fill(130);
  textFont("Roboto Slab"); 
  textSize(14);

  const anzahlReihen = data_log.getRowCount();
  text(
    "Die Datei 'data_log.csv' enthält " +
      anzahlReihen +
      " waagrechte Zeilen (ohne den 'Header')",
    10,
    30
  );

  const anzahlSpalten = data_log.getColumnCount();
  // alternative Schreibweise!
  text(
    `Die Datei 'data_log.csv' enthält ${anzahlSpalten} senkrechte Spalten`,
    10,
    50
  );

  // oberster, linker Eintrag
  const eintrag_0_0 = data_log.get(0, 0);
  text("Eintrag_0_0: " + eintrag_0_0, 10, 70);

  // 4. Eintrag aus der 4. Zeile
  const eintrag_3_3 = data_log.get(3, 3);
  text("Eintrag_3_3: " + eintrag_3_3, 10, 90);

  // 2. Eintrag aus der 6. Zeile
  const eintrag_6_1 = data_log.get(7, 1);
  text("Eintrag_6_1: " + eintrag_6_1, 10, 110);
}

Tabellendarstellung der Datei "data_log.csv"

In dem Screenshot ist dargestellt, welche „Zellen“ mit eintrag_0_0, eintrag_3_3 und eintrag_6_1 angesprochen werden:

Beachtet, das sich der 1. Wert jeweils in der Zeile/Spalte 0 befindet!

Schaut Euch die Demo an – und ladet das komplette Paket herunter

Die hier auf dem Screenshot grün markierten Elemente der Spalte 3 werden mit einem for-loop auf dem Canvas dargestellt

p5.js

let data_log;

function preload() {
  // einlesen der Werte in die Variable "data_log"
  // relativen Pfad beachten!
  data_log = loadTable("data_log.csv", "csv", "header");
}

function setup() {
  const meinCanvas = createCanvas(600, 230);
  meinCanvas.parent("canvasContainer");
  background(255);

  // …

  // wieviele Zeilen enthält die CSV-Datei
  const anzahlReihen = data_log.getRowCount();

  // mit dem for-Loop geht man Zeile für Zeile durch alle Werte
  for (let i = 0; i < anzahlReihen; i++) {

    // 4. Eintrag jeder Zeile
    helligkeit = data_log.get(i, 3); 

    let zeile = 18; // der Zeilenabstand

    fill(255, 0, 0);
    textAlign(RIGHT);

    // Ausgabe der jeweiligen Zeile
    // durch "55 + i * zeile" jeweils eine Zeile weiter unten
    // 55 ist die Pos. der obersten Zeile,
    // nächste Zeile dann um 1 * zeile nach unten versetzt
    // weil i ja dann 1 ist
    text(helligkeit, 190, 55 + i * zeile);
  }
}

Schaut Euch die Demo an – und ladet das komplette Paket herunter

• Das Beispiel verwendet die gleiche CSV-Datei wie das vorherige Beispiel
• auch hier wird die 4. Spalte der CSV-Datei in einem Loop abgefragt
• die dort gespeicherten Werte werden zur Darstellung der Breite eines Rechtecks genutzt

p5.js

let data_log;

function preload() {
  data_log = loadTable("data_log.csv", "csv", "header");
}

function setup() {
  const meinCanvas = createCanvas(600, 230);
  meinCanvas.parent("canvasContainer");
  background(255);

  // Angaben zur Schrift
  textFont("Roboto Slab"); // hier auch der Webfont von Google!
  textSize(11);
  text("Darstellen aller Werte der Spalte 3 (Helligkeitswerte):", 20, 30);

  line(20, 35, width - 20, 35);

  // wieviele Zeilen enthält die CSV-Datei
  const anzahlReihen = data_log.getRowCount();

  // mit dem for-Loop geht man Zeile für Zeile durch alle Werte
  for (let i = 0; i < anzahlReihen; i++) {
    helligkeit = data_log.get(i, 3); // 4. Eintrag jeder Zeile

    let zeile = 18; // der Zeilenabstand

    fill(160);
    textAlign(LEFT);
    text("Helligkeitswert in Zeile " + i + ": ", 20, 55 + i * zeile);

    fill(255, 0, 0);
    textAlign(RIGHT);
    text(helligkeit, 190, 55 + i * zeile);

    noStroke();

    // jeweilige vertikale Position
    let yWert = 55 + i * zeile - 10;

    // Höhe der Balken
    let hoehe = 12;

    // der jweilige Wert "helligkeit" wird dazu verwendet
    // um die Breite des Rechtecks zu definieren
    fill(255, 0, 0);
    rect(210, yWert, helligkeit, hoehe);
  }
}

Schaut Euch die Demo an – und ladet das komplette Paket herunter

Praktisch identisch mit dem vorherigem Beispiel, nur die Darstellung der Helligkeitswerte findet schrittweise in der draw-Funktion statt, so dass dies animiert dargestellt wird…

p5.js

let data_log;
let zaehler = 0;
let anzahlReihen;

function preload() {
  // einlesen der Werte in die Variable "data_log"
  // relativen Pfad beachten!
  data_log = loadTable("data_log.csv", "csv", "header");
}

function setup() {
  const meinCanvas = createCanvas(600, 230);
  meinCanvas.parent("canvasContainer");
  background(255);

  // Angaben zur Schrift
  textFont("Roboto Slab"); // hier auch der Webfont von Google!
  textSize(12);

  // wieviele Zeilen enthält die CSV-Datei
  anzahlReihen = data_log.getRowCount();

  frameRate(2);
}

function draw() {
  background(255);

  stroke(0);
  line(20, 35, width - 20, 35);

  textAlign(LEFT);
  noStroke();
  fill(0);
  text("Darstellen aller Werte der Spalte 3 (Helligkeitswerte):", 20, 30);

  // mit dem for-Loop geht man Zeile für Zeile durch alle Werte
  for (let i = 0; i < zaehler; i++) {
    helligkeit = data_log.get(i, 3); // 4. Eintrag jeder Zeile

    let zeile = 18; // der Zeilenabstand

    fill(160);
    textAlign(LEFT);
    text("Helligkeitswert in Zeile " + i + ": ", 20, 55 + i * zeile);

    fill(255, 0, 0);
    textAlign(RIGHT);
    text(helligkeit, 190, 55 + i * zeile);

    noStroke();

    // jeweilige vertikale Position
    let yWert = 55 + i * zeile - 10;

    // Höhe der Balken
    let hoehe = 12;

    // Füllfarbe abhängig vom Helligkeitswert
    if (helligkeit < 150) {
      fill(0, 0, 255);
    } else {
      fill(255, 0, 0);
    }

    // der jweilige Wert "helligkeit" wird dazu verwendet
    // um die Breite des Rechtecks zu definieren
    rect(210, yWert, helligkeit, hoehe);
  }

  // solange der zaehler kleiner als die Anzahl der Reihen in der CSV ist,
  // wird jeweils um eins hochgezählt,
  // ansonsten wird dieser auf 0 gesetzt
  if (zaehler < anzahlReihen) {
    zaehler = zaehler + 1;
  } else {
    zaehler = 0;
  }
}

Bitte versucht, folgende Sachen selbst nachzubauen!

Beim nächsten Mal könnt Ihr Euch dann gerne meine Lösungen ansehen…

p5-Template

Verwendet dazu das p5-template, das Ihr ja schon aus der vorherigen Vorlesung kennt!

CSV-Datei "klassenliste.csv"

Klassen,Schüler*innen
1,23
2,28
3,41
4,15
5,19
6,22
7,33
8,17
9,38
10,30
11,27
12,25

Die gleiche Datei in Numbers dargestellt

• der Graph steht jetzt auf einer Grundlinie, die beschriftet ist
• es gibt waagrechte Linien, die Orientierung geben und mittels Beschriftung Auskunft über den jeweiligen Wert anzeigen
• die Balken sind farbkodiert: Kleine Klassengrößen werden grün dargestellt, große Klassen dagegen rot

CSV-Datei

Importiert auch hierzu die CSV-Datei klassenliste in p5.js!

p5-Template

Verwendet dazu das p5-template, das Ihr ja schon aus der vorherigen Vorlesung kennt!

• mit den orangen Buttons am unteren Rand des Canvas kann man die Graphen waagrecht skalieren
• zusätzlich kann man hier waagrecht scrollen

Demo

Schaut Euch die Demo an – und ladet das komplette Paket herunter

Abbildung der Daten bei der Süddeutschen Zeitung

CSV-Datei

Land,Staat,Bestä­tigte Fälle,Neu,Todes­fälle,Verdopp­lung,Ver­dopp­lung,Trend,Doubling_Color
:us:,USA,189633,1461,4081,4.3,4.3 ●○○,●○○,orange
:it:,Italien,105792,0,12428,12.7,12.7 ●●○,●●○,gelb
:es:,Spanien,102136,6213,9053,6.8,6.8 ●○○,●○○,orange
:cn:,China,82361,82,3316,—,—, ,grün
:de:,Deutschland,69301,3693,775,8.2,8.2 ●○○,●○○,gelb
:fr:,Frankreich,52836,9,3532,6,6 ●●○,●●○,orange
:ir:,Iran,47593,2988,3036,8.3,8.3 ●●○,●●○,gelb
:gb:,Großbritannien,25504,23,1793,4.5,4.5 ●○○,●○○,orange
:ch:,Schweiz,16605,0,433,10.2,10.2 ●●○,●●○,gelb
:be:,Belgien,13964,1189,828,4.8,4.8 ●○○,●○○,orange
:nl:,Niederlande,13696,1029,1175,6.6,6.6 ●○○,●○○,orange
:tr:,Türkei,13531,0,214,2.6,2.6 ●○○,●○○,rot
:at:,Österreich,10444,264,146,8.9,8.9 ●○○,●○○,gelb
:kr:,Südkorea,9887,101,165,60.5,60.5 ●●○,●●○,grün
:ca:,Kanada,8591,64,102,4.6,4.6 ●○○,●○○,orange
:pt:,Portugal,8251,808,187,4.7,4.7 ●○○,●○○,orange

Baut die oben gezeigte Info-Grafik in p5.js nach und ladet dazu von der Süddeutschen Zeitung die aktuelle CSV-Datei herunter – siehe Screenshot unten

Wir hören/sehen uns nächsten Donnerstag (9.4.2020)!

Bleibt gesund!