Avoid csv overlaps for website project

p5.js Coding Questions
1

Hi everybody,

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);
      
    }
   }
}
2

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.

3 Likes
3

Thanks @micuat

recommend to use DOM instead of drawing on the canvas (especially you have many rows)

I wonder then should I not use p5.js at all and just attempt this via html/css?

4

You can use p5.js to load the table. Here is an example I adapted from MDN
https://editor.p5js.org/micuat/sketches/pCh2ZcoVg

1 Like
5

Oh wow! I wasn’t expecting this - thank you!

1 Like
6

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.

https://editor.p5js.org/micuat/sketches/ThfhbPnfD

1 Like
7

Brilliant, so useful - I think i might have some questions based on this - but will ‘play’ for a while first :smile: thanks again :slight_smile:

1 Like
8

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!

9

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?

10

Just replying quickly - I mean the second one

Do you want to share your sketch with the csv?

Sure thing - will do later, thanks :slight_smile:

1 Like
11

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.

Thanks again for your patience!

12

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 :slight_smile:

1 Like
13

I just tried

var cell = new p5.Element(createElement("td"));
      cell.html(table.getString(i, j));
      cell.style("padding-left", "20px")

But it is not even giving the ‘loading’ message.

I will definitely play/learn with this,

window.scrollTo(0,y);

once I get the page properly loading :slight_smile:

14

sorry I forgot to add document:

var cell = new p5.Element(document.createElement("td"));
1 Like
15

Thanks - its still a bit slow, but much better than before :slight_smile: