Introduction à "InfoVis"

La quantité d’informations disponible aujourd'hui est plus grande que jamais. Les utilisateurs deviennent surchargés par la masse et la complexité de l’information, et son exploration et analyse deviennent de plus en plus difficile. Ainsi, il y a un besoin de trouver des moyens pour représenter l'information visuellement afin de permettre aux utilisateurs d'obtenir l'information d’une manière efficace et de la comprendre.

Pourquoi visualiser l'information

La visualisation de l'information permet aux utilisateurs de traiter toute cette information grâce à nos possibilités visuelles innées de perception. Les applications de visualisation de l'information se basent sur le système perceptif de l’être-humain : couleur, taille, forme, proximité et mouvement. Par conséquent, les applications de visualisation de l'information nous permettent de comprendre mieux des systèmes complexes, de prendre de meilleures décisions et de découvrir l'information qui pourrait autrement rester inconnue.

Qu'est-ce que la visualisation de l'information

La visualisation de l'information ("InfoVis") combine des aspects de la visualisation scientifique, des interfaces humain-ordinateur (human-computer interfaces), de l'exploitation de données (data mining), de l’imagerie et des graphiques. Elle se focalise sur l’information qui est souvent abstraite. Le problème principal des recherches est alors de découvrir de nouvelles métaphores visuelles pour représenter l'information et de comprendre quelles sont les tâches analytiques qu’elles peuvent supporter.

La visualisation est la présentation graphique de l'information. Son but est de fournir à l’utilisateur une compréhension qualitative du contenu de l'information. L'information peuvent être des données, des processus, des relations ou des concepts. La présentation graphique peut nécessiter la manipulation des entités graphiques (points, lignes, formes, images, texte, surface) et des attributs (couleur, intensité, taille, position, forme, mouvement).

C’est plus que de jolis images. Pour créer une visualisation, on doit retracer l'information dans un espace physique qui représentera les liens entre les informations. Ce processus de transformation commence par des données brutes qui sont collectées avec un processus automatique et qui n’ont pas été encore manipulées. L’utilisateur extrait un sous-ensemble de données intéressantes organisées d’une manière plus structurée, en général maintenu dans une base de données relationnelle. La forme plus structurée peut alors être associée à une structure visuelle par association d’attributs de données aux attributs visuels. Finalement, la représentation visuelle peut être manipulée interactivement par l'utilisateur en obtenant de différentes vues de la même visualisation. Il ne s'agit pas juste de créer une super demo, une visualisation doit supporter des tâches spécifiques, la découverte, la prise de décision, l'explication.

L'exploration visuelle de données suit habituellement une étape de trois processus: vue d'ensemble d'abord, zoom et filtrage, et après détails à la demande (Overview first, zoom and filter, and then details-on-demand); ce que Shneiderman [4] appelle "Information Seeking Mantra". D'abord, l'utilisateur doit obtenir une vue d'ensemble des données. Il identifie des structures intéressantes et il se focalise sur une ou plusieurs d’entre elles. Pour analyser les structures, l'utilisateur a besoin d’accéder aux détails des données.

Les différentes techniques de visualisation

Il y a un grand nombre de techniques de visualisation de l'information qui ont été développées pendant la dernière décennie pour permettre l'exploration de grands ensembles de données. Actuellement, seulement quelques taxonomies ont été développée par des spécialistes en visualisation de l'information (Shneiderman, 1992, Chi, 2000, North, 1996, Reed et Heller, 1997).

Keim [1] propose une classification selon trois critères (figure 1) :

1. les données à visualiser
2. la technique de visualisation
3. la technique d'interaction et de déformation utilisée

Figure 1 : Classification des techniques de visualisation de l'information

Données à visualiser

Les types de données à visualiser peuvent être :

• données unidimensionnelles (one dimensional data)
  Elles ont habituellement une dimension dense.
  Exemple : données temporelles de ThemeRiver
• données bidimensionnelles (two dimensional data)
  Elles ont deux dimensions distinctes. Les axes X et Y sont une méthode typique pour montrer des données bidimensionnelles.
  Exemple : données géographiques où les deux dimensions sont longitude et latitude. Polaris, MGV
• données multidimensionnelles (ou multivariables) (multidimensional data)
  Beaucoup d’ensembles de données se composent de plus de trois attributs et donc, ils ne permettent pas une visualisation simple à deux ou trois dimensions.
  Exemple : tables des bases de données relationnelles qui ont souvent des dizaines jusqu’au centaines de colonnes (ou attributs). Polaris, Scalable Framework
• texte et hypertexte (text and hypertext)
  Tous les types de données ne peuvent être décrits en termes de dimensionnalité. A l’age du web, un type important de données est le texte et l’hypertexte ainsi que les contenus des pages web multimédia. Dans la plupart des cas, une transformation de données en des vecteurs descriptifs est d’abord nécessaire avant que des techniques de visualisation puissent être utilisées.
  Exemple : articles de nouvelles, documents web
• hiérarchies et graphiques (hierarchies and graphs)
  Les enregistrements ont souvent un certain lien avec d'autres informations. Des graphiques sont largement répandus pour représenter de telles interdépendances. Un graphique se compose de l'ensemble d'objets, appelé des noeuds, et les connexions entre ces objets, appelés les bords.
  Exemple : corrélations des e-mails entre des personnes, leur comportement d'achats, la structure des fichiers du disque dur, les hyperliens du web.
• algorithmes et logiciels (algorithms and software)
  Le but de la visualisation est de soutenir le développement de logiciel en aidant à comprendre des algorithmes, par exemple en montrant le flux de l'information dans un programme, pour améliorer la compréhension du code écrit, par exemple en représentant la structure des milliers de lignes du code source comme des graphiques, et pour soutenir le programmeur en corrigeant le code, c.-à-d. en visualisant des erreurs.
  Exemple: opérations de débogage dans Polaris

Technique de visualisation

• affichages standards en 2D/3D (standard 2D/3D displays)
  Exemple: diagrammes à barres, x-y plot, graphiques linéaires
• affichages géométriquement transformés (geometrically transformed displays)
  Ces techniques visent à trouver des transformations « intéressantes » des ensembles de données multidimensionnels.
  Techniques : Scatterplots (nuage de points), Landscapes, Projection Pursuit, Prosection Views, Hyperslice, Parallel Coordinates
• affichages basés sur icônes (icon-based displays)
  L'idée est de tracer les valeurs d'attribut d'une donnée multidimensionnelle en forme d'une icône.
  Exemple: Chernoff faces, Stick figures, Shape-Coding, Color-icons, TileBars
• affichages denses en pixel (dense pixel displays)
  L’idée de base de cette technique est de tracer chaque valeur d’une dimension en un pixel coloré et de grouper les pixels appartenant à chaque dimension en des zones adjacents. Puisqu'en général cette technique emploie un pixel par valeur de donnée, elle permet de visualiser la plus grande quantité de données possibles sur le même dispositif.
  Technique : Recursive Pattern Technique, Circle Segments Technique, Spiral- & Axes-Techniques
• affichages empilés (stacked displays)
  Ces techniques sont conçus pour présenter des données divisées d’une manière hiérarchique.
  Technique : Dimensional Stacking, World-within-Worlds, Treemap (SmartMoney, Cone Trees, InfoCube

Technique d'interaction et de déformation utilisée

• projection dynamique (dynamic projection)
  L'idée de base est de changer dynamiquement les projections afin d'explorer un ensemble de données multidimensionnel.
  Exemple : Grand-Tour system, XGobi, XLispStat, ExplorN
• filtrage interactif (interactive filtering)
  Il est important de diviser interactivement l’ensemble de données dans des segments et de se concentrer sur les sous-ensembles intéressants. Ceci peut être fait en choisissant directement le sous-ensemble désiré (browsing) ou en spécificiant des propriétés du sous-ensemble désiré (querying).
  Exemple : MagicLens, Filter/Flow Queries, InfoCrystal
• zoom interactif (interactive zooming)
  Il est important de présenter les données sous une forme fortement comprimée afin de fournir une vue d'ensemble des données, mais en même temps de permettre un affichage de données en résolutions différents.
  Exemple : TableLens, MagicLens, VisDB, PAD++, IVEE/Spotfire, DataSpace
• déformation interactive (interactive distortion)
  L'idée de base est de montrer des parties de données avec un niveau élevé de détail tandis que d'autres sont montrées avec un niveau moindre de détail. Les techniques courantes de déformation sont des déformations hyperboliques et sphériques qui sont souvent employées sur des hiérarchies ou des graphiques.
  Exemple : Bifocal Displays, Perspective Wall, TableLens, Graphical Fisheye Views, Hyperbolic Visualization, Hyperbox
• liens interactifs et brossage (interactive linking and brushing)
  L'idée est de combiner des méthodes différentes de visualisation pour surmonter les imperfections des techniques simples. Les nuages de points (scatterplots) des projections différentes, par exemple, peuvent être combinées en colorant et en liant des sous-ensembles de points dans toutes les projections.
  Exemple : Polaris, Scalable Framework, S Plus, XGobi, Xmdv-Tool, DataDesk

N'importe laquelle de ces techniques de visualisation peut être utilisée en même temps que n'importe laquelle de ces techniques d'interaction aussi bien que n'importe laquelle des techniques de déformation pour n'importe quel type de donnée.

Sources

Informations du portail STAF18

La croissance exponentielle du World Wide Web est une démonstration dramatique de la façon dont l'information peut être rendue plus accessible en incorporant des techniques de visualisation.

Articles (nouvelles)

• auteur - username
• titre de l'article - texte court
• date et heure de soumission
• sujet - choix dans une liste déroulante
• texte de l'article - texte long
• commentaire d'un article - texte

• nombre d'articles ou de commentaires soumis par un auteur
• nombre d'articles ou de commentaires soumis par un auteur pendant une certaine période (1 semaine p.ex.)
• taille d'un article ou d'un commentaire en octets

Forum

• nom du forum - texte court
• sujet du forum - texte court
• auteur du message - username
• date et heure de soumission
• corps du message - texte long

• nombre de messages postés par un auteur
• nombre de messages postés par un auteur pendant une certaine période (1 semaine p.ex.)
• taille d'un message en octets

Blogs (journal)

• nom de l'utilisateur - username
• titre de l'entrée - texte court
• texte de l'entrée - texte long
• date et heure de soumission
• commentaire d'une éntrée - texte long

• nombre d'entrées ou de commentaires par utilisateur
• nombre d'entrées ou de commentaires par utilisateur pendant une certaine période (1 semaine p.ex.)
• taille d'une entrée en octets

Liens

• titre du lien - texte court
• URL du lien - http
• catégorie - choix dans une liste déroulante
• description - texte 255 caractères max.
• nom de l'utilisateur
• date d'ajout
• hits (nombre de visites)
• score
• nombre de votes
• commentaire sur le lien
• date et heure du commentaire

• nombre de liens ou commentaires postés par un utilisateur
• nombre de liens ou de commentaires postés par un utilisateur pendant une certaine période (p.ex. 1 semaine)

• nombre d'articles soumis
  Activité 1: proposer 2 sujets de recherche ("JOLAN: Idées de projets")
  Activité 6: écrire un petit article ("JOLAN Visualization news")
• nombre de commentaires sur les articles
  Activité 1: ajouter au moins 3 commentaires
  Activité 4 en note: insérer les questions concernant une clarification sur l'activité si nécessaire
  Activité 6: commenter au moins 2 articles
• nombre de liens produits
  Activité 1: produire 3 liens
  Activité 6: insérer 6 liens
• nombre de commentaires sur les liens
  Activité 1: commenter 3 liens
• nombre d'entrées dans le blog ou éventuellement le volume (en octets)
  Activité 1: faire une entrée réflexive dans le blog
  Activité 4: faire une réflexion dans le blog
  Activité 5: faire une entrée pour discuter l'activité
  Activité 6: faire une réflexion sur l'activité
  

• articles
• commentaires sur les articles
• liens
• commentaires sur les liens
• blog
  

• color icons - p.ex. pour identifier l'ajout récent d'un lien par une couleur plus foncée. Plus la date du dernier ajout est éloignée plus la couleur est clair (tâche: ah, il vient de rentrer un lien, faut que j'aille regarder, ou commentaire, faut aller répondre)
• star icons - chaque pointe de l'étoile pourrait représenter un axe de productivité, plus la pointe est grande, plus la productivité sur cet axe est grande
• axe X-Y - choisir deux dimensions appropriées, p.ex. sur l'axe verticale le temps et sur l'axe horizontale le domaine de productivité. Peut être combiné p.ex. avec les "shapes"
• shapes - une figure représentera un étudiant. p.ex. des cercles de tailles différentes qui représentent le volume de production de l'étudiant dans un domaine de productivité.
• treemap - le treemap sera divisé en domaines de productivité (liens, blog, articles...) et ensuite dans chaque domaine une surface présentera la productivité de l'étudiant en volume (surface plus grande = productivité plus grande)
• browse - choisir dans une liste déroulante le domaine de productivité et seulement celui-ci s'affichera (ou également le nom d'un étudiant)
• query - taper le nom d'un étudiant pour povoir "highlighter" les figures qui le représentent dans le dispositif (p.ex. si les étudiants sont représentés par des cercles). Mais comme nous ne sommes que 9 étudiants, pas vraiment nécessaire
• zoom - pour voir de plus près p.ex. un seul étudiants en cliquant sur la figure qui doit le représenter
  

Métaphore de navigation

SVG

• Des actions initiées par l'utilisateur, tel que presser le bouton d'un dispositif de pointage (par exemple, une souris), peuvent causer l'exécution d'animations ou de scripts ;
• L'utilisateur peut initier des hyperliens vers de nouvelles pages Web par des actions, comme cliquer sur le bouton d'une souris quand le dispositif de pointage se positionne au-dessus d'éléments graphiques particuliers ;
• Dans de nombreux cas, l'utilisateur peut zoomer dans un contenu SVG ou effectuer un panoramique autour de celui-ci ;
• Les déplacements par l'utilisateur du dispositif de pointage peuvent modifier le curseur qui indique la position courante du dispositif de pointage.

• En utilisant les éléments d'animation de SVG. Les fragments de document SVG peuvent décrire les modifications dans la durée des éléments du document. En utilisant les divers éléments d'animation, on peut définir des tracés de mouvement, des effets de fondu en ouverture ou en fermeture et des objets qui grandissent, retrécissent, tournent ou changent de couleur ;
• En utilisant le DOM de SVG. Le DOM de SVG est conforme aux aspects principaux des spécifications « Modèle Objet du Document, niveau 1 » (DOM1) et « Modèle Objet du Document, niveau 2 (DOM2). Chaque paramétrage d'attribut et de feuille de style est accessible au moyen de scripts et SVG offre un jeu d'interfaces DOM supplémentaire pour la gestion de l'animation au travers de scripts. En conséquence, on peut obtenir virtuellement toute sorte d'animation. Les facilités de synchronisation des langages de script, comme ECMAScript, peuvent être utilisées pour démarrer et contrôler les animations.
• SVG est conçu pour permettre aux versions ultérieures de [SMIL1] d'utiliser un contenu SVG statique ou animé comme composant de média ;
• Pour la suite, il est prévu que les versions ultérieures de SMIL soient modularisées et que des composants SMIL puissent être utilisés en conjonction avec SVG et d'autres grammaires XML pour obtenir des effets d'animation.

Structure du document SVG

1. Avant toute chose, SVG étant une application d'XML, il faut commencer un fichier SVG par la déclaration XML:
   <?xml version="1.0"?>
2. La deuxième chose à faire est de faire référence à la DTD (Document Type Definition), qui est un document qui regroupe toutes les règles concernant la norme. Cela se traduit de la façon suivante dans le code:
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. Ensuite, il faut déterminer les dimensions de la zone SVG principale, ainsi que sa position. Cela se fera dans la balise <svg>, avec les attributs width et height pour les dimensions, et les attributs x et y pour la position dans le navigateur. Tout le code du graphique svg se trouvera entre les balises d'ouverture et de fermeture <svg>.

Les formes

• Des rectangles : Balise <rect />
• Des cercles : Balise <circle />
• Des ovales : Balise <ellipse />
• Des lignes : Balise <line />
• Des lignes : Balise <polyline />
• Des polygones : Balise <polygon />
• Des tracés : Balise <path />

Le texte

Les groupes

Le stylage

Sources

Test d'usabilité

Dispositif

Base de données MySQL