nouvelles-technologies

De magnifiques représentations de données en 3D grâce à WebGL et HTML5

Les interfaces de visualisation de données en 3D sont courantes sur le web, j’ai déjà eu l’occasion de vous en parler sur ce blog. Par contre, avec l’avènement de l’accélération matérielle et de WebGL, ces représentations 3D peuvent maintenant être affichées dans le navigateur sans passer par un plugin comme Flash ou Java. Je vous propose de découvrir trois exemples récents.

Commençons par le très spectaculaire CNN Ecosphere, une initiative lancée à l’occasion de la conférence des Nations Unies sur les changements climatiques qui c’est déroulée en fin d’année dernière.

cnn_ecosphere-3124069 La visualisation 3D des tweets de la conférence #COP17

L’idée était de représenter les conversations sur Twitter autour de la conférence sous la forme d’arbres qui se développent de façon fractal autour de notre planète (plus il y a de conversations et plus les arbres poussent). Il est également possible de filtrer les branches par thématique et par pays. Réalisée avec WebGL, la représentation est très gourmande en ressources puisqu’il y a plus de 20.000 discussions et votre ordinateur aura sûrement un peu de mal à les afficher avec fluidité…

Deuxième exemple avec Yahoo! C.O.R.E. Data Visualization, une interface de visualisation des contenus publiés sur Yahoo!. Fondée sur le Content Optimization and Relevance Engine, cette initiative vise à illustrer le volume très important des infos et données publiées par Yahoo!, mais également de démontrer leur capacité à filtrer et analyser ces contenus : Think you’re unique? Let Yahoo’s data trove be the judge. L’interface se présente sous la forme d’un carrousel affichant les 5 dernières actus avec des options de filtrage sur les côtés et une réglette pour remonter le temps en bas. Un nuage de points est affiché en fond de page, chaque point représente une photo et une news qui est affichée au survol de la souris :

yahoo_core-8793223 L’interface de visualisation de Yahoo!

Là encore une représentation en 3D temps réel, mais qui est beaucoup plus fluide que la précédente.

Dernier exemple avec PhiloGL, un framework de visualisation de données fondé sur WebGL. Plusieurs représentations sont proposées, notamment les routes aériennes (World Airlines Routes) et l’évolution des températures (Temperature Anomalies from 1880 to 2010).

philogl-1507399 Les routes aériennes visualisées en 3D avec PhiloGL

Ces interfaces de visualisation sont non seulement très spectaculaires, mais aussi parfaitement fluides. C’est donc une combinaison parfaite pour rendre des données plus sexy et faire passer des messages. WebGL serait-elle donc la technologie idéale pour faire de la 3D en temps réel dans le navigateur ? Non, car Microsoft ne l’a toujours pas implémenté dans Internet Explorer, mais il existe néanmoins un plugin  : IEWebGL (un plugin pour remplacer un plugin ? Oui je sais…).

Pour voir d’autres exemples de ce qu’il est possible de faire avec WebGL, je vous renvoie vers les WebGL Experiments de Google ou vers le site francophone WebGL.fr.Si vous avez d’autres exemples, n’hésitez pas à les mentionner dans les commentaires.

Voir les 3 commentaires