使用數據可視化創建藝術品

Question

我試圖通過數據創建樹的視覺效果，如數據可視化藝術。我的視覺參考是http://www.openprocessing.org/sketch/5918，但它是我的隨機浮動整數。是否有可能創建相同的視覺效果，但是由數據生成的橢圓如同http://data.un.org/Data.aspx?q=mortality+&d=PopDiv&f=variableID%3a80一樣複雜？我正在使用處理。

是否有任何庫需要，我將如何修改代碼作爲一個起點，讓它由數據而不是隨機變量繪製？

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()函數來組合它們。