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:

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:

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)
  • Pag.38 - trying different colors

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

    Pag.40 - Magnitude and positive/negative

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

    Pag.41 - Magnitude and positive/negative using transparency

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

    Pag.43 - use mouse rollover info to display text

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

    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: