Le but de votre TP sur les 3 séances de 2h prévues consiste à visualiser un jeu de données sur les villes Française en affichant les villes comme des marques dont les variables rétinales seront associées à des attributs de ces villes (e.g., la densité, la surface, ou l'altitude)
Vous aurez à calculer la densité vous-même (comme étant le ratio de la population par la surface).
Lors de cette première séance, nous allons procéder aux étapes pas à pas pour charger les données, et afficher un point par ville à l'écran
Jeu de données
Étape 1 : créer une fenêtre avec un fond blanc
Étape 2 : lire le fichier de données
Processing dispose d'une méthode toute prête pour lire les lignes d'un fichier texte, et en particulier les fichiers de type
.csv
(comma-separated values) et
.tsv
(tab-separated values).
Étape 3 : charger les données globales
La première ligne du fichier de données contient des valeurs précalculées. Le code ci-dessous permet d'enregistrer les différentes données dans des variables globales.
//globally
//declare the min and max variables that you need in parseInfo
float minX, maxX;
float minY, maxY;
int totalCount; // total number of places
int minPopulation, maxPopulation;
int minSurface, maxSurface;
int minAltitude, maxAltitude;
//in your readData method
String[] lines = loadStrings("villes.tsv");
parseInfo(lines[0]); // read the header line
void parseInfo(String line) {
String infoString = line.substring(2); // remove the #
String[] infoPieces = split(infoString, ',');
totalCount = int(infoPieces[0]);
minX = float(infoPieces[1]);
maxX = float(infoPieces[2]);
minY = float(infoPieces[3]);
maxY = float(infoPieces[4]);
minPopulation = int(infoPieces[5]);
maxPopulation = int(infoPieces[6]);
minSurface = int(infoPieces[7]);
maxSurface = int(infoPieces[8]);
minAltitude = int(infoPieces[9]);
maxAltitude = int(infoPieces[10]);
}
- Copiez et collez les éléments de code ci-dessus aux emplacements appropriés dans votre code existant.
- Lancez l'application
Étape 4 : Charger les coordonnées de chaque ville
Avant de s'intéresser aux attributs des villes, nous allons commencer par afficher un simple point noir à l'emplacement de chacune des villes. Pour ce faire, il nous faut lire toutes les lignes du fichier (en partant de la deuxième ligne) et sauvegarder les coordonnées x (colonne 1) et y (colonne 2) dans des tableaux respectifs.
- Copiez et placez les éléments de code ci-dessous aux emplacements appropriés dans votre code existant.
//globally
//declare the variables corresponding to the column ids for x and y
int x = 1;
int y = 2;
// and the tables in which the city coordinates will be stored
float xList[];
float yList[];
//in your readData method
xList = new float[totalCount];
yList = new float[totalCount];
for (int i = 2 ; i < totalCount ; ++i) {
String[] columns = split(lines[i], TAB);
xList[i-2] = float (columns[1]);
yList[i-2] = float (columns[2]);
}
- Désormais, les tableaux
x
et y
contiennent la liste des coordonnées de chaque ville.
- Lancez l'application... Toujours rien à l'écran ? C'est normal ! Passons enfin au dessin !
Étape 5 : Dessiner un point par ville
La méthode
set
de Processing permet de colorier un pixel avec la valeur désirée.
Étape 6 : Convertir les coordonnées réelles en coordonnées écran
- Observez les valeurs correspondant aux coordonnées x et y de vos villes. Que pouvez-vous en déduire ?
En effet, le repère utilisé dans le fichier de données est différent du repère que l'on utilise à l'écran (qui va de 0 à 800 pixels de gauche à droite, et de 0 à 800 pixels de haut en bas). Il nous faut donc convertir les données du fichier en coordonnées image écran. Pour faire la conversion d'un intervalle vers un autre intervalle, Processing propose la fonction
map
.
- Prenez le temps de consulter attentivement la documentation de la fonction
map
dans la page de référence de Processing.
- Pour convertir les coordonnées x, vous aurez besoin de changer l'intervalle [xMin, xMax] en l'intervalle [0,800]
- De même, pour convertir les coordonnées y, vous aurez besoin de changer l'intervalle [yMin, yMax] en l'intervalle [800,0]. Attention: notez ici l'inversion de l'intervalle. Ceci est dû au fait que nos données réelles sont exprimées dans un repère cartésien, dans lequels l'axe des y est orienté vers le haut. Hors, en informatique, les coordonnées écran sont exprimées, par convention, avec l'axe des y orienté vers le bas.
- Ajoutez la fonction de conversion
mapX
comme suit:
float mapX(float x) {
return map(x, minX, maxX, 0, 800);
}
- De façon similaire, implémentez la fonction de conversion
mapY
.
- Effectuez les modifications nécessaires dans la méthode
draw
pour appliquer les conversions au moment du dessin des points.
- Lancez l'application. Normalement, vous devriez voir un nuage de points laissant deviner la silhouette de la France !
À suivre
L'objectif de la prochaine séance est de parvenir à dessiner des marques associées à chaque ville, dont les propriétés visuelles traduisent différents attributs.
Ce travail de TP est individuel. Ainsi, cette prochaine étape est à réaliser seul(e), avec l'assistance de l'instructeur pendant les séances.
Le contenu de ce TP est inspiré des cours de Fanny Chevalier, Petra Isenberg, Pierre Dragicevic, Charles Perin, Wesley Willet, Frédéric Vernier et Jean-Daniel Fekete (www.aviz.fr).