Nous allons en premier lieu étudier le format de données CSV (coma 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 (coma 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 :

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 :

À 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.