# Avoid csv overlaps for website project

**URL:** <https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723>\
**Category:** Coding Questions\
**Created:** [April 29, 2021, 11:20am UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723 "2021-04-29T11:20:19Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 29, 2021, 11:20am UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/1 "2021-04-29T11:20:19Z")

</div>

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.

```auto

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

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 29, 2021, 1:57pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/2 "2021-04-29T13:57:37Z")

</div>

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

> **[: The Table element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)**
>
> The HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

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

[![](https://img.youtube.com/vi/URSH0QpxKo8/maxresdefault.jpg "8.1: What is HTML? - p5.js Tutorial") ](https://www.youtube.com/watch?v=URSH0QpxKo8)

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 29, 2021, 2:15pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/3 "2021-04-29T14:15:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 29, 2021, 2:43pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/4 "2021-04-29T14:43:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 29, 2021, 4:01pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/5 "2021-04-29T16:01:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 29, 2021, 5:08pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/6 "2021-04-29T17:08:33Z")

</div>

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](https://editor.p5js.org/micuat/sketches/ThfhbPnfD)

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 29, 2021, 5:14pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/7 "2021-04-29T17:14:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 30, 2021, 5:13pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/8 "2021-04-30T17:13:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 30, 2021, 5:22pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/9 "2021-04-30T17:22:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [April 30, 2021, 5:27pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/10 "2021-04-30T17:27:00Z")

</div>

Just replying quickly - I mean the second one

> Do you want to share your sketch with the csv?

Sure thing - will do later, thanks 🙂

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [May 1, 2021, 8:03pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/11 "2021-05-01T20:03:42Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 1, 2021, 9:02pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/12 "2021-05-01T21:02:34Z")

</div>

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.

```javascript
var cell = new p5.Element(createElement("td"));

```

For the scroll, you can do it by

```javascript
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` 🙂

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [May 1, 2021, 9:52pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/13 "2021-05-01T21:52:14Z")

</div>

I just tried

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 1, 2021, 10:06pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/14 "2021-05-01T22:06:24Z")

</div>

sorry I forgot to add `document`:

```javascript
var cell = new p5.Element(document.createElement("td"));

```

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [May 2, 2021, 3:42pm UTC](https://discourse.processing.org/t/avoid-csv-overlaps-for-website-project/29723/15 "2021-05-02T15:42:30Z")

</div>

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