archives

dataviz

Processing & Open Data à Rennes

Dataviz News Processing Tutorial Workshops - 7th November 2011
Processing Rennes data visualisation

Ce tutoriel fait suite à l’atelier Processing qui s’est déroulé à Rennes le 4 et 5 Novembre 2011.


Introduction

Il a pour but de montrer comment interroger la base de données Open Data de la ville de Rennes depuis Processing et interpréter les données qui sont renvoyées.
Nous allons nous intéresser plus particulièrement aux données relatives au Vélo Star, et visualiser les informations sur une carte de la ville.


Inscription sur le site data.keolis-rennes.com

Pour pouvoir interroger la base de données, la première étape consiste à s’inscrire sur le site. Cet étape est nécessaire pour pouvoir générer une clé numérique qui va être utilisée dans nos requêtes pour nous identifier auprès du service. Il est possible d’en créer plusieurs, chacune pouvant être employée dans une application distincte.
Pour créer une clé, il suffit simplement de renseigner le formulaire dans l’onglet Mon espace > Nouvelle clé d’application.


Accès à la base de données

Une fois notre clé récupérée, nous allons écrire un programme de quelques lignes avec Processing qui va se connecter au service pour l’interroger.
Cette connexion s’effectue par le biais d’une simple adresse internet (ou URL) formatée de telle sorte à contenir non seulement notre clé mais aussi la commande de la requête. Cette commande permet d’interroger un service spécifique (informations sur les vélos, métros, …), une liste peut-être consultée ici. Nous devons aussi passer le numéro de version de l’API dans cette requête.

    // DONNEES
    String keolisCle = "VOTRE_CLE_ICI";
    String keolisCommande = "getbikestations";
    String keolisVersion = "2.0";
    // URL 
    String url = "http://data.keolis-rennes.com/xml/?"+
     "version="+keolisVersion+
     "&key="+keolisCle+
     "&cmd="+keolisCommande;

La requête s’effectue en une seule instruction avec Processing : loadStrings. Cette dernière nous renvoie un tableau de chaîne de caractères (String), chaque entrée de ce tableau correspondant à une ligne de la réponse donnée par l’API de la ville de Rennes. Cette réponse nous est fournie au format XML et nous allons dans un premier temps simplement l’imprimer sur la console de Processing.

  // Connexion à l'API avec la clé et la commande
  String lines[] = loadStrings(url);

  // Impression du résultat sur la console
  for (int i=0;i<lines.length;i++)
    println(lines[i]);

Ces quelques lignes produisent ce résultat :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<opendata>
	<request>http://...</request>
	<answer>
		<status code="0" message="OK"/>
		<data>
			<station>...</station>			
			<station>...</station>			
			<station>...</station>			
			...
		</data>
	</answer>
</opendata>


Interprétation des données

Plutôt que d’utiliser la fonction loadStrings, nous allons directement utiliser les fonctionnalités liées au format XML, puisque Processing intègre par défaut des fonctions pouvant lire et “comprendre” ce format. La logique reste la même cependant, nous constituons une URL pour interroger la base à distance, seule la fonction d’appel et le format du résultat changent.

XMLElement xml = new XMLElement(this, url);

Si nous regardons de plus près la réponse qui nous est renvoyée, nous pouvons voir la répétition dans le document de <station>, chacun de ces noeuds contenant des informations relatives à une station. Pour l’exemple, certaines informations one été omises.

Nous allons d’abord récupérer simplement le nombre de stations de vélo de Rennes, ce nombre étant directement liés au nombre de noeuds <station> que comprend le document. Processing permet de “naviguer” dans le document XML, nous allons lui demander de nous donner dans un tableau de XMLElement tous les noeuds <station> qu’il peut trouver.

   XMLElement[] stations = xml.getChildren("answer/data/station");
   int nombreStations = stations.length;

Nous avons accès à chaque station de vélo par le biais de sa représentation XML dans notre programme. Nous allons accéder à présent à chacune des données que renferme cet objet et notamment : le nom, l’adresse, la latitude et la longitude pour la géolocalisation, le nombre de vélos disponibles (noeud fils <bikesavailable>) et le nombre de bornes disponibles(noeud fils <slotsavailable>).

Pour stocker ces informations, nous créons une classe Station, dont les instances vont être construites à partir des informations contenus dans le document XML. Chaque instance de notre classe Station est alors sauvegardée dans une liste (de type ArrayList) pour pouvoir être manipulée au cours de l’exécution du programme. Il sera plus facile pour nous d’interroger nos structures (en y associant des méthodes notamment) plutôt que de naviguer et d’extraire les données en se référant au document XML renvoyé.


Affichage sur une carte

Nous disposons à présent dans notre programme de toutes les structures de données (liste d’objet Station) pour pouvoir afficher les stations sur une carte, grâce à leur géolocalisation. Nous allons utiliser la librairie Unfolding de Till Nagel pour pouvoir charger une carte et positionner ces lieux, symbolisés par des pictogrammes (disponibles en ligne ici).

  // Création de la carte
 // Rennes est située à 48.100 de latitude 
 // et -1.667 de longitude
  carte = new de.fhpotsdam.unfolding.Map(this);
  carte.zoomAndPanTo(new Location(48.100f, -1.667f), 13);

La librairie Unfolding permet simplement d’afficher des cartes dans notre fenêtre Processing et dispose aussi de fonctionnalités pour positionner des marqueurs, c’est à dire transformer des coordonnées géolocalisées en coordonnées écran. Une fois cette opération effectuée, il est alors relativement simple d’ajouter un gestionnaire d’évènements (clic, rollover, rollout) sur chacun de ces marqueurs. pour afficher des informations pertinentes.


Représentation visuelle

Une utilisation quasi-directe de la librairie Triangulation permet, en passant les positions de toutes les stations, de dessiner le maillage de ces stations dans la ville de Rennes. Le dessin en fil de fer permet de représenter le maillage et de voir d’un coup d’oeil la densité des stations de vélos qui sans surprise est plus compacte dans le centre ville.

Autre visualisation basée sur ce maillage, il s’agit ici d’associer à chaque sommet d’un triangle (et donc à chaque station) une couleur qui va symboliser la disponibilité de vélos. Une couleur sombre (noir par ex.) rend compte de peu de vélos disponibles au contraire d’une couleur claire (rouge par ex.) qui symbolise la disponibilité. L’interpolation de couleurs sur la surface des triangles permet de d’avoir une carte abstraite de zones de disponibilité.


Temps réel

Certaines des données fournis par la ville de Rennes sont rafraichies en temps réel, c’est à dire qu’elles sont remises à jour régulièrement au cours d’une journée. Dans notre exemple, cette donnée est accessible pour chaque station dans le noeud <lastupdate>.
Il est donc possible d’avoir une application qui rafraîchit en direct les données qu’elle affiche, en interrogeant régulièrement la base de données.


Notes

Les sketchs de ce tutoriel ont été développés avec la version 1.5.1 de Processing et ne sont pas compatibles avec la version 2.0 qui est sur le point de sortir, des modifications sur la gestion des documents XML ayant été apportées.


Téléchargement