ordinateur-interfaces-riches

Vive la data visualization dans votre navigateur !

Les interfaces de représentation de données ont un côté fascinant qui ne date pas d’hier (Data Visualization: Modern Approaches). La data visualization désigne ainsi l’art et la manière de représenter des données d’une façon élégante, efficace et instructive. Récemment, la discipline a été popularisée par la mode des infographies (dont il existe une infinité de boards sur Pinterest).

J’ai déjà eu l’occasion de vous parler de projets tout à fait intéressants (La BBC tente l’ergonomie artistique) et la discipline compte d’ailleurs des praticiens chevronnés en France comme l’équipe d’ActuVisu. Mais c’est de Suisse que nous vient une très belle initiative : A Carefully Selected List of Recommended Tools. Les équipes de DataVisualization.ch ont ainsi compilé dans une liste de librairies, applications et services pour créer de belles représentations graphiques des données dans les navigateurs : Datavisualization.ch Selected Tools.

datavisualization-7582376 Librairies et outils pour faire de la data visualization dans votre navigateur

Ces différentes librairies servent à créer des diagrammes, cartes… mais surtout à les manipuler en temps réel. Et c’est là le plus grand intérêt d’utiliser ces composants dans un navigateur : faciliter la représentation de données et leur compréhension au travers de la scénarisation de leur affichage et de leur manipulation. Plusieurs exemples ont ainsi retenu mon attention :

  • L’Atlas de la librairie Arbor.js qui répartit un grand nombre d’objets reliés entre eux pour qu’il n’y ait pas de chevauchement ; atlas-7690629 Chaque élément est à ça place sans chevauchement grâce à Arbor.js
  • L’outil de Visual Analytics de Quadrigram qui permet de sélectionner des sous-ensemble de données et de mettre à jour plusieurs graphiques en même temps ; quadrigram-2844807 Graphiques multiples avec Quadrigram
  •  L’étrange, mais très joli Flow Component de Rojored réalisé avec le framework Degrafa. rojored-8633359 Un superbe graphique dont je ne sais pas ce qu’il représente 😉

Ces trois exemples ne sont qu’une sélection purement arbitraire dans une longue liste d’outils, je vous engage à le tester pour choisir celui qui vous conviendra le mieux. La plupart de ces librairies et composants sont en javascript, mais on en trouve aussi en Flash, car il en faut pour tous les goûts.

J’imagine que dans votre tête vous vous dites que Flash c’est mal et qu’avec Javascript on peut afficher tout ça sur un smartphone ou une tablette. Soit, mais n’oubliez pas que les moteurs javascript des navigateurs mobiles souffrent de gros problèmes de performance et sont terriblement gourmands en énergie : iOS Still Tops Android In HTML5 Performance.

perfmarks-ii-illustration-3875639 Comparaison des performances entre navigateurs mobiles et standards

De ce fait, il me semble important de ne pas trop spéculer sur la portabilité de ces librairies et composants. Sinon il existe aussi des services grand public comme Visual.ly qui permettent également de faire de belles représentations, mais je n’ai pas encore testé.

Voir le commentaire