Data Visualization Examples

using Processing.JS

(based on Ben Fry's book)

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

John Resig - Processing.JS
F1LT3R Processing.js fork
processing.js googlegroup contributions
Visualizing Data by Ben Fry

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


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


  • 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