Using loadTable with correct types in typescript with p5js

I am loading a csv file using the p5.js function, loadTable in typescript. It seems that its not reading the csv file at all, maybe i am missing something in my approach. I have all the type definition in typescript for p5.js.

Here is the code, main.ts.

import * as p5 from "p5";

const plot_diagram = (p: p5) => {
  let data: p5.Table;

 p.preload = () => {
    const CSV_FILE: string = "./sample.csv";
    const CSV_TYPE: string = "csv";
    const CSV_HEADER: string = "header";

    data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER); //how to fix this?

    console.log("data ", data.getRowCount()); // shows wrong object.
  p.setup = () => {
    p.createCanvas(640, 480);
    // how many rows?
    console.log("row ", data.getRowCount());
    // what are the columns?
    console.log("col ", data.columns);
  p.draw = () => {


    for (let i = 0; i < 5000; i++) {
        data.getNum(i, "row"),
        data.getNum(i, "col ")

export default plot_diagram;
1 Like

Where’s that variable spectrum. Shouldn’t that be instead: export default plot_diagram;

Is “p5” path just enough? I had to use import * as p5 from "p5/index"; on my own TS sketch:

1 Like

Sorry for the mis type, it is,

export default plot_diagram 

and i changed to

import * as p5 from "p5/index";

still no difference. The problem is line,

data = (p as any).loadTable(CSV_FILE, CSV_TYPE, CSV_HEADER);

that data is empty.

preload() is still too soon to check anything on data b/c it’s still loading.

Can you host your whole sketch on, or similar?

Here’s another online example:

1 Like

Thanks for the glitch link. I can look into. And good to know that preload is too soon.
Here is the whole repo.

just do yarn, yarn start. might ask you to install parcel.

Oh, that’s React! Sorry I still dunno much about it. :crying_cat_face:

Most I can do is take a look at your “spectrum.ts” file and make it work as it is w/o React: :face_with_monocle:

yes, spectrum.ts is the main file i am working on.
To get the project running, uncomment, //import sketch from “~sketch/circle”;
and comment import sketch from “~sketch/spectrum”;
That will give you some circles. The spectrum file is basically supposed to create a x-y plot.

Only thing that i am struggling with is to load csv in typescript and have the data var with csv values.
Rest i can manage. once i have data var, i can run data.getNum and other functions on it.

Only clue i got so far is from this SO answer, but that only works because there is a type called SoundFile.
So what’s the work around to call

loadTable("./less.csv", "csv", "header"); 

in typescript with correct types?

Here is the another repo where i played with the idea of loading a csv file, it seems it does not work in typescript here too.

I added the code in sketch.ts in the above repo. Could it be that loadTable doesn’t work when running a local project? Perhaps i misunderstood its use case?

ah, i figure it out. The issue was not related to typescript. It was browser cors policy.
Perhaps a better error message is needed in loadTable function.

1 Like