Project

General

Profile

Spécifications

Introduction

Ce document décrit la solution proposée en réponse au Cahier des charges du projet CrowdStreams.
Il s'agit d'une application web qui permettra aux organisateurs d'un événement de visualiser en temps réel des éléments différents de mobilité sur une carte géographique, à la proximité de cet événement.

Fonctionnalités

Pour chaque fonctionnalité du projet, une liste détaillée des sources de données fournies par la HEIG-VD ainsi que des idées de représentation (présentées dans l'état de l'art) sont décrites.

Représentation des routes sur une carte:

Source des données: street_graph.txt (Street Graph)
  • Node1_id ; Node2_id - tronçon entre 2 noeuds (chaque noeud a une latitude et une longitude)
  • Distance(km) - distance entre deux noeuds = la distance d'un tronçon
  • Nr_of_lanes - nombre de voies d'un tronçon
  • Avg_max_velocity - vitesse maximale autorisée entre deux noeuds (km/h).

Représentation visuelle de la vitesse routière et de la variation de la vitesse routière dans le temps:

La vitesse routière sera affichée par tronçon, en temps réél, sous forme de routes colorées.
La variation de la vitesse sera affichée sous forme de graphe (courbe) par tronçon, au clic sur le tronçon, avec la possibilité de préciser soit la date de début (jusqu'à présent), soit les dates de début et fin, soit une certaine année, un certain mois ou jour.

Source des données: task3edges_10.txt (Road Info)

La vitesse routière est:
  • La vitesse moyenne -> average velocity (km/h),
  • sur un tronçon -> first node id; second node id,
  • à un instant t -> time en secondes
La variation de la vitesse est:
  • la différence de 2 vitesses moyennes d'un tronçon -> average velocity (km/h)
  • entre deux instants -> time (in seconds)

Idée de représentation de la vitesse routière: Embouteillage dans un tunnel

Représentation visuelle de la densité routière et du flux routier (variation de la densité dans le temps):

La densité routière sera affichée par tronçon, en temps réél, sous forme de routes colorées.
La flux routier sera affiché sous forme de graphe (courbe) par tronçon, au clic sur le tronçon, avec la possibilité de préciser soit la date de début (jusqu'à présent), soit les dates de début et fin, soit une certaine année, un certain mois ou jour.

Source des données : pas encore

Idée de représentation : ArcGis - trafic routier historique, prévisionnel et temps-réél , Here

Représentation visuelle du taux d'évolution du trafic (entre deux instants de temps):

Le taux d'évolution du trafic sera affiché par tronçon, avec la possibilité de préciser les 2 instants de temps à comparer.

Source des données: pas encore, le même fichier que pour la densité routière

Idée de représentation: Volume de trafic routier journalier de la ville de Sucy

Représentation visuelle du taux de congestion (congestion ratio):

Le taux de congestion d'un tronçon sera affiché par tronçon, en temps réél, sous forme de routes colorées.
La variation du taux de congestion dans le temps sera affiché sous forme de graphe (courbe) par tronçon, avec la possibilité de préciser soit la date de début (jusqu'à présent), soit les dates de début et fin, soit une certaine année, un certain mois ou jour.

Source des données: pas encore

Idée de représentation: Taux de congestion - heure de pointe

Conception - Principes de visualisation

Ben Fry et les étapes de la création d'une visualisation de l'information

Selon Ben Fry1, il y a sept étapes dans la création d'une visualisation de l'information.
  • Acquisition: il s'agit de la façon dont le module de visualisation récupère les données (des fichiers texte envoyés par le module d'analyse de la HEIG-VD).
  • Analyse (parsing): une fois les données acquises, elles sont analysées et converties, si nécessaire. dans un format structuré utile (par exemple JSON).
  • Filtrage: il s'agit d'enlever toutes les données qui ne sont pas pertinentes.
  • Mining: l'application de méthodes de statistiques ou de data mining comme un moyen de discerner des schémas ou placer les données dans leur contexte mathématique, ce n'est pas le cas dans le cadre du projet.
  • Représentation: il s'agit du choix d'un modèle de visualisation de base. Cette étape est très significative, car elle influence la décision la plus importante dans un projet de visualisation et détermine la ré-réflexion des étapes antérieures.
  • Raffinement: à ce stage, des méthodes graphiques sont appliquées pour filtrer les données et permettre un meilleur focus sur des résultats partiels (filtrer en fonction des dates).
  • Interaction: grâce aux interactions, l'utilisateur peut contrôler et explorer les données: sélectionner un sous-ensemble de données, changer le point de vue etc.

Ben Shneiderman et la mantra de visualisation

Un des principes fondamentaux de la conception visuelle a été proposé par Ben Shneiderman2: Overview first, zoom and filter, then details on demand.

De ce mantra de visualisation, il y a sept tâches qui sont dérivées et appliquées à de différents types de données:

  • Vue d'ensemble (overview): la vue globale de ce module donne un contexte général afin de pouvoir comprendre l'ensemble des données;
  • Zoom: ça permet le focus sur un sous-ensemble des données (zoom sur la carte).
  • Filtrer: ça permet de filtrer des éléments qui présentent moins d'intérêt - dans le projet, filtrer par dates.
  • Détails-sur-demande: ça permet de sélectionner des parties des données pour les visualiser plus en détails, sans éliminer les autres données (les tooltips affichées au survol des différents éléments).
  • Relate: cette technique laisse l'utilisateur voir des relations entre les différentes éléments choisies (ça pourrait être la comparaison de 2 ou plusieurs tronçons).
  • History: ça permet de revenir à un état antérieur de l'application, dans le projet ça sera un historique des valeurs mesurées.
  • Extraire: ça permet d'extraire les données dans des autres formats. Cette fonctionnalité n'est pas considérée utile dans le cadre de ce projet.

Jacques Bertin et la sémiologie graphique

Proposée par Jacques Bertin3, la sémiologie graphique est l'ensemble des règles permettant l'utilisation d'un système graphique de signes pour la transmission d'une information de manière visuelle. Ce système utilise 7 variables visuelles - valeur, couleur, grain, forme, position, orientation, taille (figure ci-dessous). L'efficacité d'une solution graphique passe par la correspondance entre les propriétés des données et les propriétés de la variable visuelle qui les représentera.

Les variables de forme, couleur, orientation sont uniquement différenciatrices, elles permettent de transcrire uniquement une information qualitative.

Les variables de valeur (rapport entre la quantité d’une teinte et la quantité de blanc dans une surface donnée), grain, taille permettent de traduire un ordre. La valeur et le grain ne permettent pas d’exprimer des quantités absolues (comptage, dénombrement, effectif), tandis que la taille oui.

Dans le cas de CrowdStreams, sur la carte, les couleurs représentent la situation du trafic:
  • vert = fluide
  • orange = modéré
  • rouge = saturé
  • noir = interrompu

Les autres variables visuelles ne sont pas (encore) utilisées dans le projet.

Architecture

L'architecture de la partie visualisation est entourée en orange dans le cadre de l'architecture du projet CrowdStreams. Les données sont fournies par la HEIG-VD, ensuite procesées et visualisées par le module de visualisation.

Conception de l'interface

Ci-dessous une première proposition de visualisation de la vitesse routière ainsi que sa variation dans le temps:

La proposition suivante de visualisation regroupe la densité routière, le flux routier (variation de la densité) et le taux d'évolution du trafic:

Ci-dessous une proposition de visualisation pour le taux de congestion d'une route:

Technologies et outils

Pour la carte géographique, nous avons choisi OpenStreetMap (au lieu de Google Maps), car c'est un système opensource et de plus le corpus utilisé dans le projet CrowdStreams est compatible).

Pour les frameworks et les librairies. nous avons choisi AngularJS et Leaflet (voir la Comparaison des technologies pour plus de détails).

Références

[1] Fry, B., "Visualizing Data", O‘Reilly.

[2] Schneiderman, B., "The eyes have it: A task by data type taxonomy for information visualization". 1996. Proc. IEEE Visual Languages, Boulder, CO, pp. 336-343.

[3] Bertin, J., "Sémiologie graphique", 1967