1

I'm trying to create the visual of a tree by data, something like a data visualization art. My reference of the visual is http://www.openprocessing.org/sketch/5918, however it is created my random float integers. Is it possible to create the same visuals, however the ellipses generated by data as complicated as this http://data.un.org/Data.aspx?q=mortality+&d=PopDiv&f=variableID%3a80 ? I'm using Processing.

Are there any libraries needed and how would I need to modify the code as a starting point to let it be drawn by data instead of random variables?

    color[] palette = {#262A40, #F2EAC2, #8C3F63};

Table mtl;                 // mtl = "Mortality"

int wide = 1000;           // Width of window
int high = 600;            // Height of window
float border = 75;         // Size of border
float lb = border;         // Left border
float rb = wide - border;  // Right border
float bb = high - border;  // Bottom border
float tb = border;         // Top borders

float gw = rb - lb;        // Grid width
float gh = bb - tb;        // Grid height

float minX = 0;
float maxX = 10;
float minY = 0.00;
float maxY = 1.00;

float z = 1;               // Zoom factor for scaling
float tx = wide/2;         // Used for panning on x
float ty = high/2;         // Used for panning on y

void setup() {
  size(1000, 600);
  smooth();
  cursor(CROSS);
  mtl = new Table("mortality3.tsv");
}

void draw() {
  background(palette[0]);
  scatter("mtl");
  frame(border, palette[0]);
}

// scatter
void scatter(String tableObject) {
  pushMatrix();
  translate(tx, ty);
  scale(z);
  stroke(palette[1]);
  strokeWeight(3);
  int n = 936;  // Got this manually from csv file

  for (int i = 0; i < n; i++) {
    float x = map(mtl.getFloat(i, 4), minX, maxX, -z*gw/2, z*gw/2);
    float y = map(mtl.getFloat(i, 4), minY, maxY, z*gh/2, -z*gh/2);
    point(x, y);

    // Hover
    float mx = map(mouseX, lb, rb, -(gw/2)/z - (tx - width/2)/z, (gw/2)/z - (tx - width/2)/z);
    float my = map(mouseY, tb, bb, -(gh/2)/z - (ty - height/2)/z, (gh/2)/z - (ty - height/2)/z);
    if (dist(mx, my, x, y) < 5) {
        statString = "Country" +mtl.getString(i, 0)  +
                     nf(mtl.getFloat(i, 2), 0, 2) + " Year " + 
                     nf(mtl.getFloat(i, 1), 0, 3);
    }
  }
  popMatrix();
}

I also have a class code for table reading, but I keep getting this error "ArrayIndexOutofBoundsException:4" and this part is always highlighted - return data[rowIndex][column]

    class Table {
  int rowCount;
  String[][] data;


  Table(String filename) {
    String[] rows = loadStrings(filename);
    data = new String[rows.length][];

    for (int i = 0; i < rows.length; i++) {
      if (trim(rows[i]).length() == 0) {
        continue; // skip empty rows
      }
      if (rows[i].startsWith("#")) {
        continue;  // skip comment lines
      }

      // split the row on the tabs
      String[] pieces = split(rows[i], TAB);
      // copy to the table array
      data[rowCount] = pieces;
      rowCount++;

      // this could be done in one fell swoop via:
      //data[rowCount++] = split(rows[i], TAB);
    }
    // resize the 'data' array as necessary
    data = (String[][]) subset(data, 0, rowCount);
  }


  int getRowCount() {
    return rowCount;
  }


  // find a row by its name, returns -1 if no row found
  int getRowIndex(String name) {
    for (int i = 0; i < rowCount; i++) {
      if (data[i][0].equals(name)) {
        return i;
      }
    }
    println("No row named '" + name + "' was found");
    return -1;
  }


  String getRowName(int row) {
    return getString(row, 0);
  }


  String getString(int rowIndex, int column) {
    return data[rowIndex][column];
  }


  String getString(String rowName, int column) {
    return getString(getRowIndex(rowName), column);
  }


  int getInt(String rowName, int column) {
    return parseInt(getString(rowName, column));
  }


  int getInt(int rowIndex, int column) {
    return parseInt(getString(rowIndex, column));
  }


  float getFloat(String rowName, int column) {
    return parseFloat(getString(rowName, column));
  }


  float getFloat(int rowIndex, int column) {
    return parseFloat(getString(rowIndex, column));
  }


  void setRowName(int row, String what) {
    data[row][0] = what;
  }


  void setString(int rowIndex, int column, String what) {
    data[rowIndex][column] = what;
  }


  void setString(String rowName, int column, String what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = what;
  }


  void setInt(int rowIndex, int column, int what) {
    data[rowIndex][column] = str(what);
  }


  void setInt(String rowName, int column, int what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = str(what);
  }


  void setFloat(int rowIndex, int column, float what) {
    data[rowIndex][column] = str(what);
  }


  void setFloat(String rowName, int column, float what) {
    int rowIndex = getRowIndex(rowName);
    data[rowIndex][column] = str(what);
  }  
}

Nothing is coming out for now can someone help me see why? My TSV file has 936 rows.

1
  • In it current form, this question is much too broad for Stack Overflow. Stack Overflow isn't really designed for general "how do I do this" type questions. It's designed more for specific "I tried X, expected Y, but got Z instead" type questions. Please edit your post to include a minimal reproducible example This should just be an example that we can run to see your problem, not your entire project. Use hard-coded values whenever you can, and we'll go from there. Commented Oct 1, 2016 at 14:22

1 Answer 1

0

Are there any libraries needed

You don't need any libraries. You can simply load the csv file using the loadTable() function. More info is available in the reference.

and how would I need to modify the code as a starting point to let it be drawn by data instead of random variables?

Trying to hammer random code you found on the internet into doing what you want is not the way to go. You're just going to give yourself headaches, as you're seeing now.

Instead, start over with a blank sketch and take your problem one step at a time. Can you first just load the csv file and print out the values? Then can you isolate the values you care about?

Can you create a separate blank sketch that contains a drawRow() function that takes parameters that you'd get from the csv file and draws the visualization? Just hardcode the parameters for now to test this function out.

When you get both example sketches working perfectly, then you can combine them by calling the drawRow() function using the data you get from the csv file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.