THU | Reading Data

THU | Reading Data

  • October 31, 2024
  • 9:15–12:00
  • Room 2420 (Marsio)

Inspiration #

Reading data with p5.js #

We are going to jump right into reading JSON files, but I have also provided some information and examples for how to read text files, CSV files, and XML files.

Reading text files #

Here is a sample text file that you could use

let result;
let sentence;
let btn;
function preload() {
  result = loadStrings('shalli.txt');
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	textAlign(CENTER,CENTER);
	textSize(16);
	textFont('monospace')
	sentence = random(result);
	btn = createButton("Click for a new sentence");
	btn.mousePressed(pickNew);
	btn.size(200,50);
	btn.position(width/2-100,100);
}

function draw() {
	background(100);
	text(sentence,width/2,height/2);
}

function pickNew(){
	sentence = random(result);
}

Reading tables (CSV files) #

See the loadTable example

Reading XML files #

See the loadXML example

JSON #

JSON (JavaScript Objct Notation) is a file-format that stores data in a human-readable way but it is also very easy and convenient for machines to parse and generate.

JSON is built on two structures:

  1. A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  2. An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

It was originally derived from JavaScript so it works really well with p5.js. JSON files look a lot like JavaScript Objects. However, it is not tied to just being used with JavaScript. Many other programming languages are able to work with JSON files.

How does a JSON file look like? #

This is an example of a JSON representation describing a person.

{
  "firstName": "Matti",
  "lastName": "Niinimäki",
  "isAlive": true,
  "age": 21,
  "liar": true,
  "address": {
    "street": "Imaginary Avenue",
    "apartment": "20 A 5",
    "postalCode": 99999,
    "city": "Helsinki"
  },
  "pets": [
    {
      "animal": "dog",
      "name": "Kimchi"
    },
    {
      "animal": "cat",
      "name": "Pancake"
    },
    {
      "animal": "duck",
      "name": "Tale"
    }
  ]
}

As you can see, a JSON file is one object that can contain other objects, arrays and values.

We could try to parse the data with p5.js in the following way:

let person;
function preload() {
  person = loadJSON("person.json");
}
function setup() {
  noCanvas();
  noLoop();

  let name = person.firstName + " " + person.lastName;
  createElement("h2", name);

  createElement("p", name + " has the following pets:");
  let pets = person.pets;
  let list = createElement("ul");
  for (let i = 0; i < pets.length; i++) {
    let p = createElement("li", pets[i].name + ", " + pets[i].animal);
    list.child(p);
  }
}

Examples #

These examples show you how to parse and access data from a .json file.

Where to get data? #

We are going to work with Corpora, a collection of different corpus. A wonderful resource of json files on all kinds of topics.

Creating HTML elements from the data #

This example reads data from a json file and creates html elements (headings and lists) from the data.

let data;
function preload() {
  data = loadJSON("data.json");
}

function setup() {
  noCanvas();
  noLoop();
  let bg = select("body");
  bg.style("background-color", "#ffffff");

  let cards = data.tarot_interpretations;
  for (let i = 0; i < cards.length; i++) {
    createElement("h1", cards[i].name);
    let fortunes = cards[i].fortune_telling;
    let list = createElement("ul");
    for (let j = 0; j < fortunes.length; j++) {
      let item = createElement("li", fortunes[j]);
      list.child(item);
    }
  }
}

Pick random tarot cards # 

let data;
let button;
let resetButton;
let cards;
function preload() {
  data = loadJSON("data.json");
}

function setup() {
  noCanvas();
  button = createButton("Pick a card");
  button.mousePressed(pickACard);
  resetButton = createButton("Reset");
  resetButton.mousePressed(resetCards);
  let bg = select("body");
  bg.style("background-color", "#ffffff");
  cards = data.tarot_interpretations;
}

function pickACard() {
  let r = floor(random(cards.length));
  createElement("h1", cards[r].name);
  let fortunes = cards[r].fortune_telling;
  let list = createElement("ul");
  for (let j = 0; j < fortunes.length; j++) {
    let item = createElement("li", fortunes[j]);
    list.child(item);
  }
}

function resetCards(){
  removeElements();
  button = createButton("Pick a card");
  button.mousePressed(pickACard);
  resetButton = createButton("Reset");
  resetButton.mousePressed(resetCards);
}

Crayon Colors #

This example visualizes Crayola crayon colors from the json file.

References and Resources #

Courses in Aalto: