Maps

tutorial de programmation
en processing

ridethebyte
  Ride the Byte, ART&COM, 1999

Statistiques/ Maps

La statistique est à la fois une science formelle, une méthode et une technique. Elle comprend la collecte, l'analyse, l'interprétation de données ainsi que la présentation de ces données afin de les rendre lisibles. Beaucoup de données sont lié à des coordonnées géographiques. Dans ce tutorial, nous allons travailler avec ces données pour les représenter sur une carte.

 

Ressource

Insee - France en fait et chiffres

Cia - The World Factbook

meteo-world.com

 

Le code du projet

Le code suivant propose de représenter sur une carte de France les différences des densités dans les régions française. Nous avons récupéré les denisté de population sur le site de meteo-world. Ensuite nous avons établie une tableau avec les noms des régions, des chéf lieu ainsi que les coordonnées en x y et la population en 1990 et 1999.

Le but est d'avoir une représentation de la population rélatif aux deux dates ainsi que de visualiser l'evolution entre ces deux dates.

1990
diffrence
La population en 1990 Evolution de la population entre 190 et 1999

Pour représenter la taille rélatif à la population, nous avons besoin de connaitre la population la plus petite et plus grand et pour affficher l'evolution aussi la différence entre les deux dates.

class table

Pour récuperer ces différents données, la class qui permet de lire le tableau a evolué légèrement depuis le cours sur le texte. Au lieu de calculer la données max et min dans le programme principale, nous avons rajouter deux méthodes dans la class.

float getMin(int column){
float minVal = MAX_FLOAT;
for (int row = 0; row < getRowCount(); row++){
float actVal = getFloat(row,column);
if (actVal < minVal) minVal = actVal;
}
return minVal;
}

(et la même chose pour le max)

Il ya encore une autre methode qui cherche également la donnée max et min, mais cette fois ci par rapport au différence entre 1990-99. La methode procède différement. Nous allons créer une liste avec les données et ensuite nous rangeons la liste de son valeur du plus petit au plus grand avec la methode sort(). Il ne reste que de récuperer le premier et dernier donnée dans la liste. Pour recuperer la plus grand, il faut préciser dans le boolean de l'argument de la méthode true, pour la plus petite false.

int diffExtrem(int column1, int column2, boolean high){
int diff[] = new int[getRowCount()];
for (int row = 0; row < getRowCount(); row++){
diff[row] = getInt(row,column1)- getInt(row,column2);
}
diff=sort(diff);
if (high) return diff[getRowCount()-1];
else return diff[0];
}
}

Pour une raison de simplicité, il y a une methode getName. Etant donnée que le nom de la region est normalement dans la premier colonne [0], nous avons établi ceci comme "variable fixe".

String getName(int rowIndex) {
return data[rowIndex][0];
}

class Button

Il y a encore une deuxième class qui permet de créer des buttons simple avec un comportement de rollover et un méthode boolean ( isSelected() ) qui indique que la souris se trouve sur le button.

class Button{
int x;
int y;
int w;
int h;
PFont font;
boolean rollover;
boolean selected;
String name;
boolean click =false;
Button (int _x, int _y, int _h, String _name, boolean _selected){
x=_x;
y=_y;
h=_h;
selected=_selected;
name= _name;
w= int(textWidth(name)+10);
font = loadFont("Kartika.vlw");
textFont(font, _h-4);
setName(name);
}

void update(int mX, int mY){
if (detected(mX, mY)) selected=true;
else selected = false;
if (selected) setButton_on();
else setButton_off();
setName(name);
}

void setButton_on(){
fill(50);
stroke(200);
rect(x, y, w, h);
}

void setButton_off(){
fill(180);
stroke(200);
rect(x, y, w, h);
}
void setName(String name){
textAlign(CENTER);
fill(255);
text(name, x+w/2, y+h-3);
}
boolean isSelected(){
return selected;
}

boolean detected(int mX, int mY){
if (mX > x && mX < x+w && mY > y && mY < y+h)return true;
else return false;
}
}

code principale

Dans le code principale se trouvons 3 methodes, l'un pour afficher la population et 1990, le deuxième en 1999 et le troisième l'evolution.

void draw1990()...
void draw1999()...
void drawDifference()...

La méthode void drawName() permet d'afficher les noms de chaque region quand la souris survole son chef-lieu.

void drawName(int x, int y, String name){
float distance = dist(x, y, mouseX, mouseY);
if (distance<10){
fill(0);
textAlign(CENTER);
text(name, x, y-8);
}
}

lerpColor() / norm()

La methode drawDifference() représente deux nouveaux méthodes. Le but est d'interpoler deux couleurs rélatifs à la taille de la population. Quand la population est val < 0 les couleurs à interpoler sont gris et rouge et si val > 0 entre gris et vert. La methode lerpColor() nous fait ce travail. Ces deux premier arguments sont les deux couleurs et le 3ème son valeur d'interpolation. Si cette valeur est 0 la couleur interpolée reste gris, si il est 1.0 la couleur interpolée est rouge/vert, si la valeur est 0.5 la couleur interpolée est la couleur intermédiare entre gris et rouge/vert.

La function norm() est similaire à la fonction de map. Elle normalise une valeur dans un rangé de données et donne en retour un chiffre entre 0 et 1.0. Par exemple, si notre rangé de données va de 0 à 10 et notre input et 6, norm() nous return 0.6.

Avec cette fonction nous allons récupérer l'éloignement normalisé de changement de population par rapport au 0. Cette valeur nous donne ensuite la valeur pour lerpColor().

if (augm>0){
float percent = norm(augm, 0, diffHigh);
color vert = lerpColor(#B4B4B4, #00FF00, percent);
fill(vert);
}
else{
float percent1 = norm(abs(augm), 0, abs(diffLow));
color rouge = lerpColor(#B4B4B4, #FF0000, percent1);
fill(rouge);
}
ellipse(x,y, taille,taille);
}

variable final

Au debut du code, nous allons rajouter quelques lignes pour simplifier le travail ensuite. Au lieu de chercher chaque fois la colonne qui corespond à nos besoins et indiquer ensuite le chiffre dans les methodes get... nous avons rajouter quelques variables qui sont plus parlant. Etant donnée que nous n'allons pas modifier ces variables, nous avons rajouter final ce qui empèche que la variable peut être modifier au cours du programme.

final int REG= 0;
final int X=5;
final int Y=6;
final int POP90 = 7;
final int POP99 = 8;

La ligne

diffHigh= region.diffExtrem( 8, 7, true);
et
diffHigh= region.diffExtrem( POP99, POP90, true);

c'est exactement la même chose. Dans deux semaine je sais encore que POP99 représente la colonne de la population en 1999, mais il est sure que j'ai oublié qu'il s'agit de la colonne 8. C'est simplement ça.

 

Voici le code en zip

 

Exercice

 

 

 

retour index