Looking for help working with CSV code or excel

Looking for help or examples working with CSV code or excel to create visual pattern

1 Like

Hello and welcome to the forum!

Great to have you here.

To load a csv (which you can export from Excel)
you can use: loadTable() \ Language (API) \ Processing 3+

Check out the reference for Table Table \ Language (API) \ Processing 3+

Now you have your data in suitable table in processing.

Now you can start working with it in a creative way.

It depends what those data are. For example when it’s the changing population of cities over time you can show the cities as circles with changing radius (reflecting the changing population).

To get more help, please describe the content of your csv and show its first 10 lines.

Warm regards,

Chrisir

1 Like

here is an example that reads data (String or csv doesn’t matter) but without Table

Table is actually better

see How to add values to array based on condition? (read two files) - #9 by Chrisir

Hi Chrisir

Thank you so much for your help and sorry for the late response

I’m really new to Processing and I am looking for some help

I’m an artist, textile, and fashion designer. Currently, a graduate student in Bezalel’s department of Industrial Design, in Jerusalem.
For my final project, I’ve been translating data, collected from our clothing choices, into textiles. The goal is to be able to visually translate the dominant fashion trends of 2020 by expressing colors, materials, and styles.

I’m still looking for the data and its form but would like to build the code in parallel

I am wondering if this project sounds interesting to you?
I would love to create my project with your assistance if you would like to join my journey. :slight_smile:

If so, I would be happy to tell you more about it and to send you my portfolio that you can view my previous works, my development, and my innovation abilities.

Looking forward to hearing from you
Adi

1 Like

I am sorry, I can answer your question or show you a loadTable example but I cannot dive into a project

But it sounds fascinating!!

thank you
I understand that

so, as I said, I want to create a pattern with data driving from fashion trends
as for today, I work with pictures and keyword
Do you know what can I use to organize all of my data into a table? is there something that already excited or I need to write new code for it?

the next level is to write a code or do a hack for an exciting one
do you know where I can find like this? that using tables to create visuals?

I saw the references you wrote me… A better way for me to understand them is to see examples
would love if you can send me a link to those

I hope it is not t much to ask… any answer will be ok
I really appreciate your time!

Thank you

Adi

1 Like

In general use Microsoft excel or a similar tool that
can export to csv. You can even use a text editor

Then you use ghe table and work with the data

For visual I have shown an example above

This depends on what your data is and what the Project is all about

Eg countries or cities and their growth over time or migration is easy to visualize

You can make a simple txt file with the the ending .csv

Fill it with data (example below), separate it with ,

don’t let the last line end with a Return, that would bring an empty line at the end imho

Example 1

File must be called : “ip.csv” (content see below)

here is a simple Sketch to show table data (Sketch from the forum)


/* This sketch randomly selects rows from a CSV file
 these rows are then printed out to screen using 
 a 'typewriter' style effect.
 I want the text to print out and then stay on screen for 5 seconds.
 I then want the screen to stay blank for 5 seconds before starting again. 
 */


final int state_typewriter   = 0; 
final int state_Show_Text    = 1;
final int state_Blank_Screen = 2;
int state=state_typewriter; // state of the program 

Table table; // table object 
int timer; //creates a a timer variable
int counter = 0; //creates a counter variable and sets it to zero 
String full; //a string to combine amount + name 

void setup() {
  size(1000, 1000); //size
  // fullScreen(); //sets output to full screen 

  PFont font; //font 

  table = loadTable("ip.csv", "header");
  smooth(); 
  font = createFont("Arial", 48); //creates font
  textFont(font, 120); //text font 
  textAlign(CENTER, CENTER); //aligns text to Center
  selectRow(); //calls selectRow fucntion 
  timer=millis();
  // typeWriter();
}

void draw() {

  switch (state) { //this is the start of switch 

  case state_typewriter:
    // this will be exectued if state = 0
    // the typewriter 
    background (0); //background 
    typeWriter();
    break; // break for case 0 

  case state_Show_Text:
    // this will be exectued if state = 1
    // the text stays on screen for 5 seconds.
    if (millis()-timer > 5000) { //if 5 seconds has passed 
      timer=millis();
      state=2;  // move on
    }
    break; //break for case 1 

  case state_Blank_Screen :
    // this will be exectued if state = 2
    // the screen stays blank for a brief time OR 5 seconds before starting again. 
    background(0); //background 
    if (millis()-timer > 300) {
      selectRow();
      state=0;
    }
    break; //break for case 2
    //
  }//switch
}//func 

// ---------------------------------------------------------------------

void typeWriter() {
  text(full.substring(0, counter), 
    0, 40, width, height); //text to print 

  if (millis()-timer > 100) { //this is the typewriter effect 
    counter++;      // go to next letter 
    timer=millis(); // reset timer
  }

  if (counter > full.length()) { //this if statement resets counter to 0 when text is finished 
    counter = 0; // reset
    state=1;
  }
}

void selectRow() {  

  TableRow row;  //Table row object 
  String amount="", name=""; //two strings representing columns in csv

  row = table.getRow((int)random(table.getRowCount())); //print a random row  
  amount = row.getString("amount"); //a string with amount
  name = row.getString("name"); // prints name for row
  full = amount + " " +  name;  //combines name and row into new String called full 
  // println (full); //just prints to serial monitor so I can test all is working
}
//

Here is the content of the csv

amount,species,name
0, Capra circus, Goat
1, Panthera Pardus, Leopard
2, Equus Zebra, zebra

Example 2

Here is another example showing circles (e.g. City Names and pos and radius is stored)

File must be called : “data.csv” (content see below)

// shows a Table 

/*

 example table - make a txt file in the sketch folder named 
 "data.csv" with this content: 
 
 x,y,diameter,name
 112,122,22,Boy 
 212,222,32,Girl 
 312,322,12,Fred
 
 
 */

DataEntry[] dataList;
boolean hold=false; 
DataEntry holdItem;

void setup() {
  size(780, 660);
  loadData();
}

void draw() {
  background(255);

  // message upper right corner 
  fill(0); 
  textAlign(LEFT);
  text("Showing data from text file; use mouse to drag items", 14, 14);

  // show words 
  drawWords();

  // for dragging: 
  if (hold && holdItem!=null) {
    holdItem.x += mouseX-pmouseX; 
    holdItem.y += mouseY-pmouseY;
    fill(255, 0, 0); 
    text(holdItem.x+","+holdItem.y, width-100, 16);
  }
}//func 

// -------------------------------------------------------

void drawWords() {
  for (DataEntry item : dataList) { 
    item.display();
  }
}

void loadData() {

  Table table;

  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table.

  table = loadTable("data.csv", "header");

  if (table==null) {
    println ("couldn't find file. Program ends here. Read comments in the sketch.\n"); 
    exit(); 
    return;
  } 

  dataList = new DataEntry[table.getRowCount()];

  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);

    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    String n = row.getString("name");
    // Make a DataEntry object out of the data from each row.
    dataList[i] = new DataEntry(x, y, d, n);
  }
}

// -----------------------------------------------------------

void mousePressed() {
  // start dragging 
  hold=true; 
  for (DataEntry item : dataList) 
    if (item.over()) {
      holdItem=item;
      return;
    }
}

void mouseReleased() {
  // stop dragging 
  // reset 
  hold=false;
  holdItem=null;
}

// ========================================================================

// This simple DataEntry class draws a circle to the window 
// and displays a text label 
class DataEntry {

  float x, y;
  float diameter;
  String name;

  // boolean over = false;

  // Create the DataEntry (constructor)
  DataEntry(
    float tempX, float tempY, 
    float tempD, 
    String s) {
    x = tempX;
    y = tempY;
    diameter = tempD;
    name = s;
  } // (constructor)

  // Display the DataEntry
  void display() {
    stroke(0);
    if (over())
      stroke(255, 0, 0);
    strokeWeight(2);
    noFill();
    ellipse(x, y, diameter, diameter);
    fill(0);
    textAlign(CENTER);
    text(name, x, y+diameter/2+20);
    textAlign(LEFT);
  }

  boolean over() {
    return 
      dist(mouseX, mouseY, x, y) < diameter+3;
  }
  //
}//class
//

data content:

x,y,diameter,name
112,122,22,Boy 
212,222,132,Girl 
312,322,12,Fred

Example 3

This is the example I provided the Link to above

It uses 2 String arrays in the code, but you can rewrite it using 2 tables

// https://discourse.processing.org/t/how-to-add-values-to-array-based-on-condition-read-two-files/28340

ArrayList<City> cities = new ArrayList(); 
ArrayList<Migration> migrations = new ArrayList();

String[] countryData = 
  {
  "country,population", 
  "countryA,100000", 
  "countryB,200000", 
  "countryC,300000" 
};

String[] migData = 
  {
  "country_origin,country_dest,mig1990,mig1995,mig2000,mig2005", 
  "countryA,countryB,100,100,100,100", 
  "countryA,countryC,200,200,200,200", 
  "countryB,countryA,300,300,300,300", 
  "countryB,countryC,400,400,400,400"
};

void setup() {
  size(1660, 860);
  background(111); 

  // read data 
  for (String stringOneLineCity : countryData) {
    String[] sLineParts=split(stringOneLineCity, ",");

    if (!sLineParts[1].equals("population")) {
      City newCity = new City (sLineParts[0], sLineParts[1]);
      cities.add(newCity);
    }//if
  }//for

  // read data 
  for (String stringOneLineMigration : migData) {
    String[] sLineParts=split(stringOneLineMigration, ",");

    int from = getCity(sLineParts[0]);
    int to =   getCity(sLineParts[1]); 
    if ( ! (from == -1 || to == -1) ) {
      Migration newMigration = new Migration (from, to, 
        sLineParts[2], sLineParts[3], 
        sLineParts[4], sLineParts[5] );
      migrations.add(newMigration);
    }//if
  }//for
}//func

void draw() {
  background(111); 
  // display 1
  for (City c : cities) {
    c.display();
  }

  // display 2
  for (Migration m : migrations) {
    m.display();
  }
}//func

int getCity(String c_) {
  // returns the index of a city in the ArrayList cities
  // based on the name of the city 
  int i=0; 
  for (City c : cities) {
    if (c.name.equals(c_))
      return i;
    i++;
  }
  println("getCity failed with " 
    +c_);
  return -1;
}

// ==================================================================================

class City {

  float posx=random(100, width-100), 
    posy=random(100, height-100);
  String name="";
  int pop=0; 
  color col=color(random(255), random(255), random(255) ); 

  //constr 
  City(String name_, String pop_) {
    name=name_;
    pop=int(pop_);
  }//constr 

  void display() {
    //
    strokeWeight(1); 
    fill(col); 
    ellipse(posx, posy, 
      pop/1000, pop/1000);
  }//
  //
}//class

// ==================================================================================

class Migration {

  int indexFromCity; 
  int indexToCity;

  String[] migData; 

  //constr 
  Migration(int from, int to, 
    String... vals) {
    //
    indexFromCity=from; 
    indexToCity=to;
    migData = vals;
  }//constr 

  void display() {
    City city1 = cities.get(indexFromCity); 
    City city2 = cities.get(indexToCity); 

    stroke(0); 

    strokeWeight(map(int(migData[0]), 
      0, 400, 1, 15) ); 

    line(city1.posx, city1.posy, 
      city2.posx, city2.posy);

    //reset 
    strokeWeight(1);
  }
  //
}//class
//

I am not sure I understand this.

Do you have data like with trends what kind of cloths were sold in january, february, march,
eg. january black shoes 100, january white shirts 399… and so on?

Sorry, I am not familiar with fashion trends and the implications.

Resources

Did you check out The 25 Best Data Visualizations of 2020 [Examples]

and Visualization (graphics) - Wikipedia

Chrisir

Thank you

Do you know if there is any automat way to put the data in the table??

I tried the second example you sent and it worked well thank you for the simple explanation

I think that now I can play with that and try to sketch something else

Do you think you will be able to help me change the visual in the sample you sent me?

Attach some hak I did before just for you to see…

Thank you so much
Adi

(Attachment xlsreader_europe_hak1.zip is missing)

Hello @ADIYAIR,

Tutorial:
Data \ Processing.org

References:
Table \ Language (API) \ Processing 3+
Also look at all the related references at the bottom of the page.

Coding Train:
# 13.5: Tabular Data - Processing Tutorial

:)

It depends on : in which format do you have the data now? A text file?

here you can generate a table from scratch and fill it (example: Game “Settlers of Catan”)

// class with tools 
Tools tools = new Tools(); 

// the table
Table tResources; 

void setup() {
  size(1600, 660);
  background(tools.WHITE);

  // setting up table (column names / headlines)
  tResources = tools.newTable("Item", "brick", "wood", "sheep", "wheat", "ore", "points");

  // adding data (must match headlines)
  tResources = tools.tableAddData ( tResources, "Street", "1x", "1x", "", "", "", "0" );  
  tResources = tools.tableAddData ( tResources, "Settlement", "1x", "1x", "1x", "1x", "", "1" );  
  tResources = tools.tableAddData ( tResources, "City nununu nun unnunun nun un", "", "", "", "2x", "3x", "2");  
  tResources = tools.tableAddData ( tResources, "Development Card - very interesting mn,m,m,mn, eewewrrew ooppopopoi pooopopoo ölööölöllökölk ,m.m..,.,m,m..,m", "", "", "1x", "1x", "1x", "?"  );  

  // ------------------------------
}

void draw() {
  background(0); 
  tools.showTable(tResources, 
    22, 22);

  fill(tools.WHITE); 
  text("use mouse over to show full text", 
    22, height/2-110);
}

//===============================================================================
// Tools collection 

class Tools {

  // class not like a car class Car for an object but a collection of tools. 

  final color RED   = color(255, 0, 0); 
  final color GREEN = color(0, 255, 0); 
  final color BLUE  = color(0, 0, 255); 

  final color WHITE = color(255); 
  final color BLACK = color(0); 
  final color GRAY  = color(255/2); 

  boolean cursorSignShowFlag=false; 

  // ----------------------------------------------------------------

  void showTable(Table tableBtn, 
    int x, int y) { 

    int factorX=78; // column width 

    // rect
    stroke(WHITE);
    noFill();
    rect( x, y, 
      tableBtn.getColumnCount()*78-6, (tableBtn.getRowCount()+1) * 22 + 10 );

    // headline 
    showTableHeadline(tableBtn, x+6, y+19, factorX);

    // horizontal line 
    stroke(WHITE);
    line( x+2, y+5+19, 
      6+x+(tableBtn.getColumnCount())*factorX-13, y+5+19);

    // grid 
    // loop over rows (y)
    for (int i=0; i<tableBtn.getRowCount(); i++) {

      // current data row
      TableRow row = tableBtn.getRow(i);

      // loop over columns in that row (i2 is for x) 
      for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {

        fill(WHITE);
        text(row.getString(i2), 
          i2*factorX+x+6, 25+ i * 22 +y+8, 
          factorX-8, 15);

        if (mouseInside(i2*factorX+x+6, 25+ i * 22 +y+8, 
          factorX-8, 15)) {
          text (row.getString(i2), 
            20, height-22);
        }//if

        // vertical line 
        line( i2*factorX+x, +y, 
          i2*factorX+x, tableBtn.getRowCount() * 22 + y + 31);
      }//for
    }//for
  }// method 

  boolean mouseInside( float x_, float y_, 
    float w_, float h_) {
    return mouseX>x_ &&
      mouseX<x_+w_ &&
      mouseY>y_ &&
      mouseY<y_+h_;
  }

  void showTableHeadline(Table tableBtn, 
    int x, int y, 
    int factorX) { 
    // headline for table 
    TableRow row0 = tableBtn.getRow(0);
    for (int i=0; i<tableBtn.getColumnCount(); i++) {
      // headline 
      fill(GREEN);
      text(row0.getColumnTitle(i), 
        i*factorX+x, y-2);
    }
  }//method 

  // ---
  // make table 

  Table newTable (String... listColumnNames) { 

    Table newT = new Table();

    // make columns
    for (String s1 : listColumnNames) {
      newT.addColumn(s1);
    }

    return newT;
  }//method

  Table tableAddData(  Table table1, String... data1  ) {

    // add rows with data 
    TableRow newRow = table1.addRow();

    // add rows with data 
    int i=0; 
    for (String s1 : data1) {
      newRow.setString(newRow.getColumnTitle(i), s1);
      i++;
    }

    return table1;
  }//method

  // --- 

  void printlnTable(Table tableBtn) { 

    // rect
    stroke(WHITE);
    noFill();

    println("------------------------------------");

    // headline 
    printlnTableHeadline(tableBtn);

    // grid 
    // loop over rows (y)
    for (int i=0; i<tableBtn.getRowCount(); i++) {

      // current data row
      TableRow row = tableBtn.getRow(i);

      // loop over columns in that row (i2 is for x)
      String s1="";
      for (int i2=0; i2<tableBtn.getColumnCount(); i2++) {
        s1+="   "+row.getString(i2);
        //
      }//for
      println(s1);
    }//for
    println("===========================================");
    //
  } // method 

  void printlnTableHeadline(Table tableBtn ) { 
    // headline for table 
    TableRow row0 = tableBtn.getRow(0);
    for (int i=0; i<tableBtn.getColumnCount(); i++) {
      // headline 
      print("   "+row0.getColumnTitle(i));
    }
    println("");
  }//method 

  // ------------------------------------------------------------------

  String cursorSign() {
    // blinking cursor sign | for Input Box 
    if (frameCount % 13 == 0)
      cursorSignShowFlag= ! cursorSignShowFlag;
    if (cursorSignShowFlag)
      return"|";
    else return"";
  }//method

  //
}//class
//

For now, it is pictures and text/ keywords

I tried to copy past the code you sent and it didn’t work.
The first raw : tool had a problem
Anything I had to do before?

it works here

Tools is the class at the end - did you copy it?

ah, it’s not p5.js but processing java flavour

Hi
How are you

so I found someone that help me with the code
but I would love to ask one more question

I’m working on weaving software cold FiberWorks which I use to create a weaving pattern and the making instructions
I wanna ask if you know if there is any way I can make the opposite move and insert an image from which to receive the operating instructions?

It’s not about processing but maybe you got the answer on other programs I can use

Thank you

1 Like

fantastic artist who translates images into cloth
see 1: Sonja Weber

see 2: Sonja Weber

maybe write her an e.mail

Intersting

Thank you!