multimedialab poule
coursmagdocgalerieliensinfos
Le traitement et la compréhension d'innombrables flux d'information est un des défis cruciaux posés
par l'Internet et les bases de données. La gestion graphique et l'affichage des informations est une préoccupation croissante des métiers du web, du graphisme numérique et des développeurs.
On pourra parler ici de "Design de l'information" : hiérarchiser, donner à voir, et surtout accéder à l'information.

Un accès intelligent à cette montagne d'infos souvent abstraites se fera désormais par l'intermédiaire
d'un outil numérique intégré : un moteur de recherche associé à une interface de visualisation.

Historiquement, la cartographie est la vénérable ancêtre de la visualisation de données :
montrer non pas ce que l'on voit, mais bien ce que l'on peut déduire de mesures et des calculs.

Bases de données, visualisation de données et cartographie.

PDF

Extrait illustré de «L’art numérique»
de Christiane Paul (Thames & Hudson, Paris, 2004).
Ce livre est disponible à la bibliothèque de Saint-Luc.
Télécharger (PDF zippé- 1,2 Mo).


Les technologies numériques ont accru la flexibilité et l'instabilité du texte (dans ses diverses composantes : typographie, livre, construction narrative), et de nombreuses oeuvres explorent ce phénomène.

Au-delà du livre : environnements textuels et narratifs .

PDF

Extrait illustré de «L’art numérique»
de Christiane Paul (Thames & Hudson, Paris, 2004).
Ce livre est disponible à la bibliothèque de Saint-Luc.
Télécharger (PDF zippé- 668 Ko).


Voir aussi les articles "Visualisation" sur mon blog.

Documents commentés au cours.

icon

Visualisation de l'information.

Exemples de différentes formes de visualisation et de leurs enjeux.
arrowVoir la documentation.

WWW.

Visualisations du web 2.0.
flagVoir la documentation.
Liens.
Histoire des cartes des origines à nos jours.
Ciel et terre. L'histoire des représentations de l'univers.
Les mappemondes. Une image médiévale du monde.
Mappa mundi. Découverte de l'information dans le cyber-espace.
Théorie cartographique et sémiologie graphique. Comment faire des cartes et des diagrammes ?
London tube maps. Cartes téléchargeables PDF et version interactive.
Manhattan Fly-trough view. Cartes dynamiques de l'histoire de Manhattan.

Progressivement, le graphisme d'information a démontré à quel point le traitement graphique des données amplifiait leur impact et leur compréhension.

Understanding USA. Un formidable travail de visualisation de données par Richard Saul Wurman.
Relief shading. La représentation du relief.
Skycraper page. Portail très documenté sur tous les buildings du monde.
Information Design. Portail dédié au design d'information.
Sémiologie graphique. Un article des Recherches audiovisuelles de l'INA.
Web Site Maps from Dynamic Diagrams. Un document Mappa Mundi.
Edward Tufte. Théoricien du design de l'information et des interfaces.
History of programming langages. Une représentation graphique et chronologique (PDF).
Chronologie du design interactif. Une ligne du temps (PDF) par le studio Incandescence.

L'imagerie scientifique a, quant à elle, véritablement engendré les technologies de captation et de rendu
d'image numérique dans le cadre des recherches médicales, spatiales et militaires.
Il est désormais possible de voir dans l'obscurité (vision par infrarouge), à l'intérieur du corps humain
(échographie, endoscopie), de visualiser la chaleur (termographie), de visualiser le mouvement (motion
capture, capteurs sensibles), de simuler des actions (immersion 3D, visites virtuelles), etc.

Secrets world. Zoom géant de la voie lactée jusqu'à la feuille d'un chêne.
Froguts. Enseignement électronique: simulation interactive d'expériences.
The Nanoscale Science Research Group. Recherche UNC.
Visualisation de données scientifiques. Séquence dias d'une introduction de J-P Nominé.
De la femtoseconde à l'attoseconde. Un article de Paul Corkum sur Innov@tion 2.
Bullet time. Simulation de l'effet conçu par John Gaeta de Manex, extraite du site de Matrix.
Bullet time: extraits videos. Séquence de préparation et montage final sur le site de Matrix.
Eyetronics. Société de motion capture, scanner 3D et modélisation 3D co-fondée par Luc Van Gool.

Aujourd'hui, l'ère digitale renouvelle en profondeur les modes de transmission, de consultation
et d'appropriation des contenus. L'écran, la 3D et l'interactivité possible avec l'image offrent de nouvelles
solutions à la visualisation de données de plus en plus complexes et nombreuses.
De nouveaux outils dynamiques et interactifs sont nécessaires, afin de faciliter l'exploration qualitative
et quantitative, l'analyse et l'interprétation de ces données.

Martin Wattenberg. Chercheur (IBM) dans le domaine de la visualisation de données.
Idea Line. Un index de recherche conçu par Martin Wattenberg pour le Whitney Artport.
Map of the market. Application en temps réel de Martin Wattenberg. Lire un article sur Mappa Mundi.
Copernica. Une application de Martin Wattenberg conçue pour le site de la NASA.

Ben Fry. Chercheur au MIT. Lire sa thèse: Organic Information Design.
Valence. Un système de visualisation de l'information par Ben Fry.
Anemone. Un système de visualisation de l'information par Ben Fry.
Genomic Cartography. Un projet de Ben Fry.

Large-Scale Online Social Network Visualization. Jeffrey Heer, Group for User Interface Research.
Prefuse. Outil interactif de visualisation de l'information. Logiciel libre.

The brain est un logiciel de gestion et structure de données personnelles (Windows).
L'ambition de Personal Brain est de structurer l'information à l'image de la manière
dont nous mémorisons des informations dans notre cerveau, notamment par associations.
La rubrique de base de Brain est une "tought" (pensée).
Une pensée peut être conceptuelle (projets, ressources, images...) ou concrète (musique au format MP3).
On peut rattacher cette pensée à un fichier (mp3, swf, jpg, etc), à une adresse URL, ainsi qu'à d'autres pensées.
Un clic sur une pensée montre les pensées et les fichiers rattachés à la pensée courante, un double clic permet de lancer la ressource attachée. Voir une présentation (Flash).

Delicious Viz. Visualisation des liens de Tom Carden sur Deli.cio.us. Réalisation avec Processing.

Design Timeline. Histoire du webdesign. Projet collaboratif réalisé par 3 écoles hollandaises.
Open History Timeline. Logiciel Open-source utilisé pour Design Timeline.

From database to 3D, a new vision thing. Représentations 3D de bases de données, article News.com.
Advanced Visual Systems. Logiciels de visualisation de données interactives.
Fake space systems. Visualisation interactive pour l'industrie.
Silicon Graphics. Société pionnière d'image de synthèse, visualisation et stockage.
TV5 animations. Une exemple étonnant d'une nouvelle forme d'information.

Donner à voir des réalités invisibles n'est pas une préoccupation nouvelle.
Cependant, le problème posé par des données abstraites (chiffres, listes, mesures, calculs)
est qu'il n'existe pas de métaphore visuelle naturelle pour les incarner graphiquement.
Le champ de la visualisation de données cherche à résoudre cette absence en mobilisant différentes
techniques (infographie, 3D et réalité virtuelle) afin de proposer des solutions graphiques ET interactives.

information aesthetics. Relation entre design créatif et visualisation. Blog de Andrew Vande Moere.
Interfaces. Un dossier sur le site RU3, avec notamment des interventions de Pierre Levy.
Visualisation Interaction Expérimentation (VIE). Un dossier des Recherches audiovisuelles de l'INA.
Interfaces dynamiques. Un article des Recherches audiovisuelles de l'INA.
Interactive Visualization of Large Graphs and Networks. Un article de T. Munzer (Stanford University).
Graphics and Image Analysis Research. Recherche UNC.
The secret live of numbers. Une recherche sur la "popularité" des nombres par Golan Levin.

Plusieurs dimensions spécifiques entrent en jeu dans ce domaine:
la gestion des données : stockage, extraction, traitements...
la conception graphique: usage des couleurs, modélisation, spacialisation, hyérarchisation des données...
les algorithmiques spécifiques: formes, coupes, rendus en volume...
le comportement physique des données: élasticité, fluidité, gravité, textures...
l'interactivité des images: interfaces, navigation, zoom, manipulation du point de vue...

Certains principes de visualisation apparaîssent de manière récurrente. Tentative de classement:

- Les méduses, données en "parapluie":

Medusa.
Walrus.
Jellyfish. Un articlesur Walrus par Young Hyun, paru sur Mappa mundi.

- Les nodules, ou "clusters" graphiques, sortes d'essaims de données:

Plankton. Visualisation expérimentant la consultation de pages stockées en mémoire cache.
TextArc. Visualisation d'un texte, par Bradford Paley.
Trace encounters. Visualisation des visiteurs à Ars Electronica 2004, par Bradford Paley.
AutoFocus Personal. Moteur de recherche. Résultats sous forme de clusters graphiques.
Vizster. Logiciel de cartographie des réseaux relationnels.
MapStan. Meta-moteur de recherche cartographiant les résultats.
3H3. Espace hyperbolique en 3d.
Skitter. Visualisation et mesure des connexions entre adresses IP.
Navagent-Surf 3D. Outil de recherche et de visualisation en 3D. Voir images fixes ou animées.
Flickr Related Tag Browser. Moteur de rechereche graphique parmi les "tags" de Flickr.

- Les arbres, arborescence "classiques":

Hamada-takeshi. Une arborescence simple mais originale oriente ici la navigation.
TreeView. Applet JavaScript de visualisation des dossiers et fichiers.

- Les arbres renversés ou renversables, qui recontextualisent les données en fonction des recherches:

The brain. Logiciel de gestion et structure de données personnelles. Voir le menu en haut de page.
Mappa mundi site map. Carte du site réalisée avec The brain.
Kurtzweil Artificial Intelligence. Autre exemple avec The brain (menu en haut de page).
LAb[au]. Laboratoire d'architecture et urbanisme. Voir le menu à gauche.
Arbre renversé et diagramme de Venne. Article de Yves Marcoux (Université de Montréal).

- Les araignées, aux pattes téléscopiques:

They rule. Visualisation interactive de trusts commerciaux, par Josh On, membre de Future farmers.
Mooter. Moteur de recherche en ligne cartographiant les résultats.
Thinkmap. Une capture d'écran du logiciel présenté ici.
Flickr Graph. Une visualisation de contacts sur Flickr, albums de photos en ligne, par Marumuschi.

- Les strates, les couches :

Idea line. Menu en "mille-feuilles", chronologie de la création en ligne, par Martin Wattenberg.
The shape of song. Visualisation de la musique par Martin Wattenberg sur Turbulence.
California crisis. Diagramme interactif sur la consommation électrique des ménages par Inxight.
The music animation machine. Visualisation de la musique, notation graphique.

- Les surfaces:

Newsmap. Visualisation des collecteurs d'infos sur le web, par Marcos Weskamp et Dan Albritton.
Relevare. Créateurs de moteurs de recherches et logiciels.
SequoiaView. Scanne votre disque dur et visualise le résultat. Logiciel gratuit.
Space Monger. Scanne votre disque dur et visualise le résultat. Logiciel gratuit (Win).
The map of the market. Une visualisation en ligne des tendances du marché boursier sur SmartMoney.
MapNet. Moteur de recherche, résultats cartographiés.

- La 3D:

VTK. Logiciel Opensource de visualisation de données en 3D.
OpenDX. Logiciel Opensource de visualisation de données en 3D.
SmileLab. Logiciel de visualisation de données.

- Les treillis:

WordMapper Link Analysis. Logiciel d'analyse textuelle et de cartographie de l'information.
Concept map. Application gratuite. Cartes de concepts publiables sur le Web.
TouchGraph. Cartographie des résultats de Google.

- Les planètes:

Social circles. Visualisation d'une mailing-list, par Marcos Weskamp et Dan Albritton.
Synapsis. Visualisation de trafic sur le web, par Marcos Weskamp pour Carnivore.
Music plasma. The music visual search engine.
Human links. Solution innovante de recherche, organisation, cartographie, partage. Voir demo Flash.

- Autres:

D-Toren. Parti-pris graphique étonnant pour ce projet interactif. Voir infos.
Nation master. Tableaux dynamique de statistiques.
Exactitudes. Étonnant classement de personnes par ressemblance.
Design Timeline. Histoire du webdesign. Projet collaboratif réalisé par 3 écoles hollandaises.
Open History Timeline. Logiciel Open-source utilisé pour Design Timeline.