Question

我正在尝试通过数据创建树的视觉效果，类似于数据可视化艺术。我对视觉的引用是http://www.openprocessing.org/sketch/5918，但它创建了我的随机浮点整数。是否可以创建相同的视觉效果，但数据生成的省略号与此http://data.un.org/Data.aspx?q=mortality+&d=PopDiv&f=variableID%3a80一样复杂？我正在使用Processing。

是否需要任何库以及如何修改代码作为起点，让它由数据而不是随机变量绘制？

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

我还有一个用于表读取的类代码，但我不断收到此错误“ArrayIndexOutofBoundsException：4”并且此部分始终突出显示 - 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);
  }  
}

现在什么都没有，有人可以帮我看看为什么？我的TSV文件有936行。

Answer 1

是否需要任何库

您不需要任何图书馆。您只需使用loadTable()函数加载csv文件即可。有关详细信息，请参阅the reference。

我如何修改代码作为起点让它由数据而不是随机变量绘制？

尝试将您在互联网上找到的随机代码锤击到您想要的内容不的方式。正如你现在所看到的那样，你只会让自己头疼。

相反，重新开始使用空白草图，并逐步解决您的问题。您可以先加载csv文件并打印出值吗？那么你可以把你关心的值隔离开来吗？

您是否可以创建一个单独的空白草图，其中包含drawRow()函数，该函数采用您从csv文件中获取的参数并绘制可视化文件？现在只需对参数进行硬编码即可测试此功能。

如果两个示例草图都完美运行，那么您可以使用从csv文件中获取的数据调用drawRow()函数来组合它们。

使用数据可视化创建图稿

1 个答案: