p5js et les données

Nous allons en premier lieu étudier le format de données CSV (comma separated values). Les données sont stockées sous forme de table (on parle de "données tabulaires"), en simplifiant, on peut dire que les données sont "rangées" en ligne et en colonne (la première ligne est souvent appelée "entête" . Dans le format CSV, les colonnes sont séparées par des virgules (comma en anglais).

Voici un exemple du contenu d'un fichier CSV:


nom,prenom,date_naissance
Durand,Jean-Pierre,23/05/1985
Dupont,Christophe,15/12/1967
Terta,Henry,12/06/1978

Je pense qu'il est évident pour vous que nous avons ici 3 personnes :

Jean-Pierre Durand qui est né le 23/05/1985
Christophe Dupont qui est né le 15/12/1967
Henry Terta qui est né le 12/06/1978

Les tableurs, tels que "Calc" (Libre Office), sont capables de lire les fichiers au format CSV.

À faire vous-même 1.1

Après avoir téléchargé le fichier ident.csv, ouvrez ce dernier à l'aide d'un tableur.

Vous devriez obtenir ceci :

La fonction "loadTable" permet de récuperer et d'extraire des données au format CSV.


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

La méthode "loadTable" récupère les données contenues dans le fichier "ident.csv". Le deuxième paramètre ("csv"), précise le format des données. Le troisième paramètre de cette méthode ("header"), indique que la première ligne du fichier "ident.csv" correpond à un entête (la première ligne ne contient pas de données, mais le "nom" des différentes colonnes).

La méthode "getRow" renvoie une "ligne" de la table. Cette méthode prend un paramètre, le numéro de la "ligne" à retourner.


table = loadTable("ident.csv","csv", "header");
lig=table.getRow(0);

Dans le cas ci-dessus, la variable "lig" contiendra les données issues de la première "ligne" (hors entête), l'indice des "lignes" commence à zéro, comme pour les tableaux.

Maintenant que nous avons récupéré une "ligne", nous allons pouvoir en extraire les données :

Si les données sont de type "chaîne de caractères", il faudra utiliser la méthode "getString", si les données sont de type "nombre", il faudra utiliser la méthode "getNum".

Ces méthodes prennent pour paramètre l'intitulé de la colonne (entête).

Pour charger un fichier de type "csv" avec "loadTable", il est nécessaire d'utiliser une fonction "fournie" par p5js : "preload". Que se passerait-il si le programme exécutait une ligne contenant "lig=table.getRow(0);", alors que le fichier "ident.csv" est encore en cours de chargement ? Nous aurions une erreur. En effet la fonction "loadString" n'est pas "blocante" (cela signifie que la suite du programme est exécuté même si le chargement du fichier de type "csv" n'est pas terminé). Pour éviter tout problème, p5js nous propose donc la fonction "preload" qui devra contenir toutes les opérations à effectuer avant que la fonction "setup" soit exécutée. Il faudra utiliser cette fonction "preload" dès que vous avez besoin de charger des données (image, son, vidéo ou même un fichier texte...).

À cause d'un "bug" d'origine inconnue, il est nécessaire de placer le fichier ".csv" dans le même répertoire que les fichiers "index.html" et "script.js".

À faire vous-même 1.2

Modifier le fichier "script.js" comme suit (index.html et style.css restent identiques)


var table;
var nom;
function preload(){
    table = loadTable("ident.csv","csv","header");
}
function setup() {
    createCanvas(800,100)
    lig=table.getRow(0);
    nom=lig.getString("nom");
    text("Le nom situé dans la première colonne de la première ligne est "+nom,10,50);
}
function draw(){
}

À faire vous-même 1.3

Créez un programme permettant d'obtenir ceci (il faudra extraire les données du fichier ident.csv).

Les méthodes "getString", "getNum" peuvent aussi prendre en paramètre, notamment en cas d'absence d'entête, le numéro de colonne (la première colonne a pour indice 0) : dans notre exemple (ident.csv) "getString(1)" est équivalent à un "getString("prenom").

Il est possible de parcourir les lignes à l'aide d'une boucle :

À faire vous-même 1.4

Créez un programme permettant d'obtenir ceci (il faudra extraire les données du fichier ident.csv et obligatoirement utiliser une boucle).

Pour vous aider : la méthode "getRowCount" renvoie le nombre le nombre de lignes d'une table (utilisation : "table.getRowCount()")

Il est possible de trouver sur le web des données beaucoup plus intéressantes à traiter que celles contenues dans le fichier "ident.csv". Par exemple, le site sql.sh, propose un fichier csv contenant des informations sur l'ensemble des communes françaises.

J'ai un peu modifié le fichier proposé (notamment en ajoutant un entête). Vous pouvez télécharger le fichier modifié ici.

À faire vous-même 1.5

Ouvrez le fichier villes.csv à l'aide d'un tableur.

Comme vous pouvez le constater, nous avons 12 colonnes (et 36700 lignes si on ne compte pas l'entête !), voici la signification de ces colonnes :

dep : numéro de département
nom : nom de la commune
cp : code postal
nb_hab_2010 : nombre d'habitants en 2010
nb_hab_1999 : nombre d'habitants en 1999
nb_hab_2012 : nombre d'habitants en 2012 (approximatif)
dens : densité de la population (habitants par kilomètre carré)
surf : superficie de la commune en kilomètre carré
long : longitude
lat : latitude
alt_min : altitude minimale de la commune (il manque des données pour certains territoires d'outre-mer)
alt_max : altitude maximale de la commune (il manque des données pour certains territoires d'outre-mer)

À faire vous-même 1.6

Créez un programme permettant d'afficher toutes les communes dont l'altitude minimum est supérieure à 1500 m

À faire vous-même 1.7

Créez un programme permettant d'afficher toutes les communes (de France métropolitaine) de plus de 5000 habitants (en 2010) ayant une altitude maximale inférieure à 10 m.

Vous trouverez un grand nombre de données, diverses et variées, au format CSV sur le site gouvernemental data.gouv.fr.