I am starting a project that I want to be able to do/be the following:
A single web page with three columns and many (thousands) of rows and many cells.
the text based information in each cell will be from one .csv file.
this information will be of different lengths.
user will be able to scroll down through all rows
So far, I can call the information but there is overlapping between cells if the information is very long.
I am wondering how to stop this - perhaps treat each column differently and scale if necessary?
For now I am using the mammals.csv file from references to test/develop
Any suggestions or pointers would be great.
// Print all rows and columns
// Given the following CSV file called "mammals.csv"
// located in the project's "assets" folder:
//
// id,species,name
// 0,Capra hircus,Goat
// 1,Panthera pardus,Leopard
// 2,Equus zebra,Zebra
let table;
function preload() {
//my table is comma separated value "csv"
//and has a header specifying the columns labels
table = loadTable('mammals.csv', 'csv', 'header');
//the file can be remote
//table = loadTable("http://p5js.org/reference/assets/mammals.csv",
// "csv", "header");
}
function setup() {
createCanvas(windowWidth, windowHeight);
//count the columns
print(table.getRowCount() + ' total rows in table');
print(table.getColumnCount() + ' total columns in table');
print(table.getColumn('name'));
//["Goat", "Leopard", "Zebra"]
//cycle through the table
for (let r = 0; r < table.getRowCount(); r++)
for (let c = 0; c < table.getColumnCount(); c++) {
print(table.getString(r, c));
}
}
function draw() {
background(0);
textSize(32);
fill(255);
for (let r = 0; r < table.getRowCount(); r++){
for (let c = 0; c < table.getColumnCount(); c++) {
text(table.getString(r, c),
10 + c * 200, 300 + r * 300);
}
}
}
It depends on what you are trying to do next, but I recommend to use DOM instead of drawing on the canvas (especially you have many rows). It may be not as intuitive as drawing on canvas, but it will be so much easier for the layout. Unfortunately p5.js doesn’t have createTable (as in DOM) so you have to do it by yourself
or you can use div elements to make a grid, but this also requires knowledge of HTML and CSS.
you’re welcome! I made another one that uses p5.js’ createElement with styles added. You may notice that p5.js’ DOM library is in fact not so different from the native web API, and sometimes it’s better to stick to the native API as it’s (almost) bug free.
Hey micaut - I just tried this second version - it works fine with smaller csv files - but with my bigger one (with 3,500 rows), it times out. Is there a way to avoid this? If not, I will revert to your original sketch, thanks again!
Interesting. Do you mean the first example (from MDN, native DOM API) works and the second example (converted to p5.js DOM) doesn’t work? Do you want to share your sketch with the csv?
Hey Micaut - I actually can’t put my csv online as it has some private info - but I tried something with your extended mammals/csv - also I should say I’m using P5.js locally with ‘web server for chrome’
Anyway, I duplicated your rows - at around 2000 rows it became very slow to load - at 4000 it timed out completely -
I wonder should I just use your first sketch (adaped from MDN) as it seems to be more reliable?
Also (totally different question!) I am trying to figure out a way that when the webpage loads, it automatically scrolls down through page at X speed.
I just tested it and you are right, p5.js version is super slow. I’m guessing that p5.js’ createElement appends the element to the body by default (while the native API doesn’t - meaning that the element is invisible until you explicitly append to another element) and this seems to add extra process. You can do the following to avoid it, but then why not using the native API instead. I wouldn’t open an issue on github as p5.js is not made for creating thousands of elements - I guess.
var cell = new p5.Element(createElement("td"));
For the scroll, you can do it by
window.scrollTo(0,y);
to move to y. I will leave it to you how to implement it - you can use that function in draw loop (make sure you take noLoop() out) and either increment y every frame or use frameCount
thanks again 
