Skip to main content

Opstelling 1: Data visualisatie met behulp van Processing

Wat:

Een opstelling met een Processing sketch en een dataset op basis van enviro+ sensor bordjes en Raspberry pi die de luchtkwaliteit meten.

De gemeten data wordt weggeschreven in een google spreadsheet waarna deze te exporteren is naar CSV. De volgende data wordt gemeten: gas, temperature, pressure, humidity, light, en noise level

https://shop.pimoroni.com/products/enviro?variant=31155658457171  

https://docs.google.com/spreadsheets/d/1Ubm_86AP4HuTvTAACjCT_tkCw7rtV5QUh0Hj82S2qnI/edit#gid=415193930

 

Screenshot 2023-02-14 at 08.16.38.png

Waarom:

Processing is een programmeer omgeving welke geschikt is voor custom grafisch ontwerp met realtime interactieve elementen en definities. Vanuit grafisch oogpunt stelt processing je in staat om visualisaties te creëren op basis van eigen code en voorwaarden.

Hieronder een voorbeeld sketch om kennis te maken met Processing.  

Hoe:

We hebben een data set en processing sketch voorbereid die je in staat stellen om elementen in de code aan te passen en de visualisaties te veranderen. Die kun je vinden op BOOKSTACKS. 

Deze sketch kan worden gebuikt als vertrekpunt om processing te leren en je eigen visualisaties te creëren. 

Code:

// data viz tut https://www.youtube.com/watch?v=pJthD0t6k1U

Table table;


void setup (){

 size(1200,1700);

 table = loadTable("Stikstof_overschot_table.csv", "header");

   println (table.getString(9,0));

   println (table.getFloat(9,2));

   textAlign(LEFT, CENTER); 

   

   

 //table.getColumnCount()

 //table.getRowCount()

}


void draw(){

  float m = 12.0;// factor om weergegeven data (cirkels) te vergroten of verkleinen

  int a = 50 ; // Afstand tussen de kolommen 

  background (255);

  fill(0);

  for (int d=0; d< table.getRowCount(); d++) {

    fill(150);

    text(table.getString(d,0), 100, 25+ d* 50);

    // kleur en weergave totale stikstof overschot

    fill(120,120,80,50);

    ellipse(180 + a, 25+ d* 50, sqrt(table.getFloat(d, 1))* m, sqrt(table.getFloat(d, 1))* m);

    // kleur en weergave stikstof overschot Bodem

    fill(200,120,80,50);

    ellipse(280 + a, 25+ d* 50, sqrt(table.getFloat(d, 2))* m, sqrt(table.getFloat(d, 2))* m);

    // kleur en weergave stikstof overschot Lucht

    fill(0,0,255,50);

    ellipse(380 + a, 25+ d* 50, sqrt(table.getFloat(d, 3))* m, sqrt(table.getFloat(d, 3))* m);

  }

}  

Resultaat:

 

Screenshot 2023-03-09 at 18.12.26.png

 

Hieronder is een lijstje met online tutorials:

Tutorial voor bovenstaande sketch:

https://youtu.be/pJthD0t6k1U


Online processing tutorials: 

https://vimeo.com/showcase/2573675

https://www.youtube.com/watch?v=T5lRLA_Vn7o

https://www.youtube.com/watch?v=dlyFhVaISjw

Data bronnen:

https://waqi.info/#/c/51.414/6.026/9z

https://maps.sensor.community/#8/52.502/5.362

https://samenmeten.rivm.nl/dataportaal/