Travaux pratiques - Visualisation de données

Remerciement

Ces exercices de TP sont l’œuvre de Pierre Cubaud (Professeur au CNAM).

Téléchargez Processing : https://processing.org/

Exercice 1 - Introduction à Processing

Ecrire le code Processing correspondant aux images ci-dessous. La première s’inspire d’un tableau de Mondrian. La deuxième nécessite des boucles et du (pseudo)hasard, elle s’inspire de Le Parc et Vasarely.

processing1

Fig. 124 Processing1

Pour ces codes, vous aurez besoin des fonctions suivantes de Processing, dont nous vous invitons à lire les spécifications dans la documentation (dans le menu Aide ou Help du logiciel) :

  • size() et background() pour la dimension du dessin et son fond

  • rect() ellipse() pour les formes graphiques

  • fill() stroke() strokeWeight() pour les couleurs de dessin

  • save() pour enregistrer le dessin dans un fichier image (le mettre à la fin du programme)

Exercice 2 - Tracé de graphes en barres

Ecrire le code pour tracer un graphe en barre à partir d’un tableau de données, qu’on remplira de valeurs aléatoires. Le tracé s’adaptera selon la taille de la zone de dessin (variables prédéfinie width et height) et du nombre d’éléments du tableau. Une fois un algorithme correct obtenu, on fera varier les options de tracé (épaisseur de trait, couleurs) en particulier en fonction du nombre d’éléments.

processing2

Fig. 125 processing2

Exercice 3 - boucle d’animation draw()

En processing, toutes les actions de dessins de l’écran se place dans une fonction draw(), qui est appelée par le moteur de rendu régulièrement pour animer l’écran. La fonction frameRate(D) permet de lancer un appel à draw() toutes les D millisecondes.

On veut adapter le code précédent pour des données acquises en continu (mode chronographe). On suppose que toutes les D millisecondes, une nouvelle valeur est acquise. On doit ensuite modifier l’affichage en dessinant cette nouvelle valeur et les valeurs les plus récentes du passé. Il va falloir changer de structure de données : laquelle suggérez vous ?

Au lieu de dessiner des successions de barres, on dessinera une courbe par des sehments de droites reliant chaque valeur et sa suivante. Pour simplifier, on continuera de prendre des valeurs (pseudo)aléatoires.

processing3

Fig. 126 processing3

Exercice 4 - Interaction utilisateur

Modifier le code précédent pour que l’animation s’arrête quand l’utilisateur tape sur une touche. On veut aussi que le tracé reprenne si l’utilisateur retape sur une touche (mode Pause). On aura besoin d’utiliser la fonction keyPressed().

Ensuite, utiliser la souris pour apporter un zoom dans le dessin. Les coordonnées de la souris sont accessibles à tout moment dans draw() par les variables prédéfinies mouseX et mouseY.

Exercice 5 - Cartographie

Le TP s’inspire du chapitre 3 de B. Fry « Visualising data » (O’Reilly, 2008). On a extrait du site http://sql.sh un fichier CSV (Comma Separated Value) contenant une série d’informations concernant les 36700 communes de France. On a retenu pour ce TP uniquement les communes de la métropole et les informations suivantes :

  • 0 : numero de commune

  • 1 : departement

  • 2 : nom simplifié

  • 3 : population

  • 4 : superficie en km2

  • 5 : longitude en degrés

  • 6 : latitude en degrés

  • 7 : altitude min

  • 8 : altitude max

Le fichier simplifié est à télécharger ici.

Carte des communes

Ecrire un programme Processing en mode immédiat qui 1) charge le fichier de commune en mémoire 2) dessine la carte des communes avec les information latitude/longitude 3) sauvegarde le dessin dans un fichier.

processing4

Fig. 127 processing4

  • Pour la 1ère étape, on utilisera par ex. la fonction LoadString() pour le chargement et split() pour le traitement de chaines: voir la doc. de Processing

  • On ne tient pas compte des problèmes de projection, en faisant juste une interpolation linéaire entre longitude (resp. latitude) et axe horizontal (resp. vertical) de tracé avec la fonction map(). Pour un dessin plus convenable, voir la rubrique concernant la projection de Mercator dans Wikipédia. Pour pouvoir faire l’interpolation linéaire, il faut dans un premier temps déterminer les valeurs extrèmes (min et max) en latitude et longitude et choisir un facteur d’aspect du dessin (rapport largeur/hauteur).

  • Choisir une couleur de fond et une couleur de tracé adaptées (pas forcément noir et blanc comme ici)

Filtrage

Modifier le programme pour qu’il superpose au fond précédent des informations filtrées. Par exemple :

  • les communes qui ont une population (ou une altitude, ou encore une superficie) au-dessus d’un certain seuil

  • les communes dont le nom termine ou contient un motif particulier (par exemple « -ac » pour les lieux du sud-ouest de la France et « -y » pour la Bourgogne). On utilisera la fonction match() basée sur les expressions régulières. Là-aussi, il faut trouver un codage graphique adapté : couleur de fond, couleurs de réponse au critère de non réponse