Data Visualization Examples

using Processing.JS

(based on Ben Fry's book)

Motivation:
Learn Processing.JS and create Data Visualizations
Goals:
Work through the examples by writing the less code possible and whenever possible make it the same as the processing examples on the book

References:
John Resig - Processing.JS
F1LT3R Processing.js fork
processing.js googlegroup contributions
Hyper-Metrix
Processing.org
Visualizing Data by Ben Fry
JQuery

Chapter 2 - Sketching and Scripting

Pag.21 - simple line

Files: ex_pag21.htm

Pag.22 - follow mouse movement

Files: ex_pag22.htm

Chapter 3 - Mapping

Pag.31 - loading an image

Files: ex_pag31.htm + map.png

Notes:

the image needs to be loaded with the page, or at least an img tag must be present on the page as it will be used as a placeholder for the image itself.
the image id is the same as the string that is used on the loadImage line. In this example we're using as the image id the filename, but it could be anything else.

Pag.33 - drawing objects on top of an image

Files: ex_pag33.htm + map.png + table_01.js (replaces table.pde) + locations.tsv

Notes: I had to create a javascript version of the original table.pde file that is referenced in the book. The main differences are:

none of the setters were implemented;
getters like float getFloat(String rowName, int column) and float getFloat(int rowIndex, int column) were split in two since javascript doesn't support (that i know of) for overloads with the same number of arguments
created a loadData function that is somewhat used as the original Table(string filename) constructor
didn't implement a loadStrings() function in processing.js but used instead a the jquery function: $.ajax({type: "GET", url: fileName, async: false}).responseText;

Pag.35 - varying data by size

Files: ex_pag35.htm + map.png + table_01.js (replaces table.pde) + locations.tsv

Pag.37 - change color by data - using the norm() and lerpColor() functions

Files: ex_pag37.htm + map.png + table_01.js (replaces table.pde) + locations.tsv

Notes:

norm / map / lerpColor function created by F1LT3R (see this thread)

Extending Chapter 3

I developed another example based on this chapter on plotting data on maps.

First experiment on creating a dynamic heatmap.

Using an svg file that I got from wikipedia I created a map of Portugal divided by its diferent regions. Then, using data from the Portuguese Statistics Institute I set the fill color of each region based on the percentual population variation.

Files: ex_extend1.htm + coordenadas_nuts3.tsv (this file has the diferent vertex for each region)+ populacao_nuts3_2007-1991_variacao.tsv (this file has the different values per region)

Other Files (not need to run the example, only for future reference): ine__1991-2000.xslx, populacao_1991_2007.xslx

Notes:

added getColCount() on table.js
instead of loading an image to use as a background and then displaying elements on top of it, i'm creating diffent shapes (one per region) and then setting a its background color based on the ammount of change over a year
norm / map / lerpColor function created by F1LT3R (see this thread)