Avoid csv overlaps for website project

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

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
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

or you can use div elements to make a grid, but this also requires knowledge of HTML and CSS.

3 Likes

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?

1 Like

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

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

1 Like

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

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

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?

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

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!

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

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:

sorry I forgot to add document:

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

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