ISMA303


Data Visualization Basic Example

by Haig. Average Reading Time: about 2 minutes.

Here’s our first example of a Data Visualization:

Your first task is to download the assets needed to make this visualization work:
A map: map.png
Some Data: locations.tsv

/* Geographic Data Visualization
take some data and plot it out onto a map
*/

PImage mapImage;

Table locationTable;
int rowCount;

void setup() {
  size(640, 400);
  mapImage = loadImage("map.png");
  // Make a data table from a file that contains
  // the coordinates of each state
  locationTable = new Table("locations.tsv");
  // The row count will be used a lot, so store it somewhere
  rowCount = locationTable.getRowCount();
}

void draw() {
  background(255);
  image(mapImage, 0, 0);

  // Drawing attributes for the ellipses
  smooth();
  fill(192, 0,0);
  noStroke();

  // loop through the rows of the locations file and draw the points
  for (int row = 0; row <rowCount; row++) {
    float x = locationTable.getFloat(row, 1);
    float y = locationTable.getFloat(row, 2);
    ellipse (x, y, 9, 9);
  }
}

A Table Class needs to be added to the project. This is done by making a new tab in the Processing window and naming it “Table”. Then paste the code below into it and save.
(compliments of Ben Fry, author of Visualizing Data)

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


  Table() {
    data = new String[10][10];
  }


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


  // Write this table as a TSV file
  void write(PrintWriter writer) {
    for (int i = 0; i < rowCount; i++) {
      for (int j = 0; j < data[i].length; j++) {
        if (j != 0) {
          writer.print(TAB);
        }
        if (data[i][j] != null) {
          writer.print(data[i][j]);
        }
      }
      writer.println();
    }
    writer.flush();
  }
}

No comments on ‘Data Visualization Basic Example’

Leave a Reply