Data Visualization with Google Doc & processing

This exercise is based on the tutorial from Jer (Data Artist and currently a Data Artist in Residence at the New York Times), with processing version 1.5.1.

Get the file & tutorial here
Google Doc visualization

Google doc visualization ex

  1. Need to have google account
  2. Get a Google Doc (excel) and add the ‘Number’ field- as data will store there such that you can change anytime without modifying the code, get the spreadsheet key
  3. In order to understand the code, recommend to try with data just having 1,2,99 so that you know how’s the code run

Explaination:

  • same no encounter will just draw again on the same position -> making it looks brighter
  • ellipse(numbers[i] * 8, width/2, 8,8); -> first need to understand ellipse syntax here i.e (x, y, width, height) -> x is where the dot place in x coordinate, since the width of the sketch is 800, every number get from Google Doc will be multiply by 8 -> and y will just simply half of the height, same across all the numbers, therefore you will just only see 1 line.
  • To see the different between data from Google doc and really random generate number, add another line on top to show the different.
  • Also when viewing the code, you will find a very interesting line: counts[nums[i]] ++; to tally the count. This is to count the whether same number appears e.g for the num (83), count for repeated times (i), and already set default as 0 in the beginning.

Update on 8-Dec-2011 >

Testing with Google Doc and Processing: [base on the code here, again by Jer Thorp]:

  1. Download the java client here (jar version 1.0) – simple sketch with class by Jer Thorp: http://www.blprnt.com/transfer/SpreadSheetSample.zip (it doesn’t work with the latest 1.46 .jar version in google site, just play safe and use the older version)
  2. Setup the Google Doc – spread sheet and get the unique ID (it is not a matter to share it as private or public)
  3. Modify the sketch and key in the spreedsheet title, username, password and ID. Add the line to retrieve the data

Ref:

Tags: ,
Posted in Design & Tools | Comments Off

August 9, 2011