{"id":192,"date":"2011-10-17T00:12:10","date_gmt":"2011-10-17T07:12:10","guid":{"rendered":"http:\/\/courses.haigarmen.com\/isma303\/?p=192"},"modified":"2011-10-17T00:12:10","modified_gmt":"2011-10-17T07:12:10","slug":"data-visualization-1","status":"publish","type":"post","link":"https:\/\/courses.haigarmen.com\/isma303\/data-visualization-1\/","title":{"rendered":"Data Visualization Basic Example"},"content":{"rendered":"

Here’s our first example of a Data Visualization:<\/em>
\n<\/strong>
\nYour first task is to download the assets needed to make this visualization work:
\nA map:<\/strong> map.png<\/a>
\nSome Data: locations.tsv<\/a><\/p>\n

\n\/* Geographic Data Visualization\ntake some data and plot it out onto a map\n*\/\n\nPImage mapImage;\n\nTable locationTable;\nint rowCount;\n\nvoid setup() {\n  size(640, 400);\n  mapImage = loadImage(\"map.png\");\n  \/\/ Make a data table from a file that contains\n  \/\/ the coordinates of each state\n  locationTable = new Table(\"locations.tsv\");\n  \/\/ The row count will be used a lot, so store it somewhere\n  rowCount = locationTable.getRowCount();\n}\n\nvoid draw() {\n  background(255);\n  image(mapImage, 0, 0);\n\n  \/\/ Drawing attributes for the ellipses\n  smooth();\n  fill(192, 0,0);\n  noStroke();\n\n  \/\/ loop through the rows of the locations file and draw the points\n  for (int row = 0; row <rowCount; row++) {\n    float x = locationTable.getFloat(row, 1);\n    float y = locationTable.getFloat(row, 2);\n    ellipse (x, y, 9, 9);\n  }\n}\n<\/pre>\n
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.
\n(compliments of Ben Fry, author of Visualizing Data<\/a>)<\/p>\n
\nclass Table {\n  String[][] data;\n  int rowCount;\n\n\n  Table() {\n    data = new String[10][10];\n  }\n\n\n  Table(String filename) {\n    String[] rows = loadStrings(filename);\n    data = new String[rows.length][];\n\n    for (int i = 0; i < rows.length; i++) {\n      if (trim(rows[i]).length() == 0) {\n        continue; \/\/ skip empty rows\n      }\n      if (rows[i].startsWith("#")) {\n        continue;  \/\/ skip comment lines\n      }\n\n      \/\/ split the row on the tabs\n      String[] pieces = split(rows[i], TAB);\n      \/\/ copy to the table array\n      data[rowCount] = pieces;\n      rowCount++;\n\n      \/\/ this could be done in one fell swoop via:\n      \/\/data[rowCount++] = split(rows[i], TAB);\n    }\n    \/\/ resize the 'data' array as necessary\n    data = (String[][]) subset(data, 0, rowCount);\n  }\n\n\n  int getRowCount() {\n    return rowCount;\n  }\n\n\n  \/\/ find a row by its name, returns -1 if no row found\n  int getRowIndex(String name) {\n    for (int i = 0; i < rowCount; i++) {\n      if (data[i][0].equals(name)) {\n        return i;\n      }\n    }\n    println("No row named '" + name + "' was found");\n    return -1;\n  }\n\n\n  String getRowName(int row) {\n    return getString(row, 0);\n  }\n\n\n  String getString(int rowIndex, int column) {\n    return data[rowIndex][column];\n  }\n\n\n  String getString(String rowName, int column) {\n    return getString(getRowIndex(rowName), column);\n  }\n\n\n  int getInt(String rowName, int column) {\n    return parseInt(getString(rowName, column));\n  }\n\n\n  int getInt(int rowIndex, int column) {\n    return parseInt(getString(rowIndex, column));\n  }\n\n\n  float getFloat(String rowName, int column) {\n    return parseFloat(getString(rowName, column));\n  }\n\n\n  float getFloat(int rowIndex, int column) {\n    return parseFloat(getString(rowIndex, column));\n  }\n\n\n  void setRowName(int row, String what) {\n    data[row][0] = what;\n  }\n\n\n  void setString(int rowIndex, int column, String what) {\n    data[rowIndex][column] = what;\n  }\n\n\n  void setString(String rowName, int column, String what) {\n    int rowIndex = getRowIndex(rowName);\n    data[rowIndex][column] = what;\n  }\n\n\n  void setInt(int rowIndex, int column, int what) {\n    data[rowIndex][column] = str(what);\n  }\n\n\n  void setInt(String rowName, int column, int what) {\n    int rowIndex = getRowIndex(rowName);\n    data[rowIndex][column] = str(what);\n  }\n\n\n  void setFloat(int rowIndex, int column, float what) {\n    data[rowIndex][column] = str(what);\n  }\n\n\n  void setFloat(String rowName, int column, float what) {\n    int rowIndex = getRowIndex(rowName);\n    data[rowIndex][column] = str(what);\n  }\n\n\n  \/\/ Write this table as a TSV file\n  void write(PrintWriter writer) {\n    for (int i = 0; i < rowCount; i++) {\n      for (int j = 0; j < data[i].length; j++) {\n        if (j != 0) {\n          writer.print(TAB);\n        }\n        if (data[i][j] != null) {\n          writer.print(data[i][j]);\n        }\n      }\n      writer.println();\n    }\n    writer.flush();\n  }\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-exercises"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":0,"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/isma303\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}