Data

In p5js we can easily load data. The easiest to load is either JSON or CSV.

JSON

The JSON-syntax is exactly as we would structure an object in JavaScript. We can create arrays and attributes as we like and nest them:

{
"data": [
{
"timestamp": "2021-12-03",
"temperature": {
"max":4.162572,
"min":-2.337428,
"avg":0.66673845
}
},
...
]
}

If you have a very small and simple JSON structure, you could simply add it directly to your code, without any need to load it:

const data = {
"array": [0,1,2,3,4],
"nest": {
"attribute": "Hello World"
}
};

If you are building an object directly in code, you can also leave out the surrounding quotes of the keys:

const data = {
array: [0,1,2,3,4],
nest: {
attribute: "Hello World"
}
};

For both data types, we load the data in the preload function. To access the data later on, make sure to define the variables in the global scope:

let json;

function preload() {
json = loadJSON('test.json');
}

function draw() {
text(json.data[0].timestamp, 10, 10);
}

CSV

A csv file is the most simple version of tabular data. While the header is optional, it makes it a lot easier to work with the data. As the name says (comma separated values), the columns are separated by commas. But sometimes (especially Excel) other separaters (often semicolons) are used:

id,timestamp,max,min,avg
1,2021-12-03,4.162572,-2.337428,0.66673845
2,2021-12-04,3.022572,0.3425719,1.4954885

If you want to add a text that includes a comma, add quotes around it:

1,"Hello, World!",2,3

To load the csv simply use the loadTable function in the preload function:

let table;

function preload() {
table = loadTable('test.csv', 'csv', 'header');
}

Sadly it isn't as simple as with the JSON object to access the data in the table:


const numberOfRows = table.getRowCount();
const numberOfColumns = table.getColumnCount();

// Get an array of all values of a column
const timestamps = table.getColumn('timestamp');
// timestamps[0]

const rows = table.getRows();
for (let r = 0; r < rows.length; r += 1) {
const timestamp = rows[r].getColumn('timestamp');
}

Unlike JSON, in a CSV table, all values are strings, so you might need to convert them to numbers:

const num = parseInt(intString);
const num = parseFloat(floatString);

All the functions can be found here.

Full example

The example JSON and CSV files can be found here:

const sketchWidth = 400;
const sketchHeight = 400;

function preload() {
json = loadJSON('test.json');
table = loadTable('test.csv', 'csv', 'header');
}

function setup () {
createCanvas(sketchWidth, sketchHeight);
}

function draw() {
background(255);

noStroke();
for(let j = 0; j < json.data.length; j += 1) {
fill('black');
rect(0, j, json.data[j].temperature.max * 10, 1);
}

const temperature_max = table.getColumn('temperature_max');
for (let t = 0; t < temperature_max.length; t += 1) {
fill('red');
rect(0, t + 200, parseInt(temperature_max[t]) * 10, 1);
}

noLoop();
}

Back to top