http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Wed, 10 Jul 2013 08:17:25 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.3-alpha De la data visualization au data journalism http://www.interfacesriches.fr/2013/07/10/de-la-data-visualization-au-data-journalism/ http://www.interfacesriches.fr/2013/07/10/de-la-data-visualization-au-data-journalism/#comments Wed, 10 Jul 2013 08:17:25 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5404 La data visualization n’est pas une discipline toute neuve, pourtant elle connaît un regain d’intérêt spectaculaire avec la mode des infographies. Mélangez les techniques de scénarisation des données avec l’interactivité du web, et vous obtenez des interfaces de toute beauté. Il existe même un concours avec des prix à gagner : les Information is Beautifual Awards de Kantar qui viennent d’ouvrir les candidatures pour l’édition 2013 (si vous cherchez les gagnants de l’édition précédente, c’est par ici : Winners of the 2012 Information Is Beautiful Awards).

J’ai déjà eu l’occasion de vous parler d’infographies interactives dopées à l’HTML5, et ces derniers temps les exemples sont légions, comme le splendide Metropolitain du studio Dataveyes qui exploite les données de la RATP au travers d’une représentation en WebGL du métro parisien : Metropolitain, Exploring the Paris Metro in 3D.

Le métro de Paris en 3D dans votre navigateur
Le métro de Paris en 3D dans votre navigateur

Le plus intéressant dans cette nouvelle discipline est qu’elle peut également s’appliquer aux métiers du journalisme avec des mises en perspectives de chiffres tout à fait révélatrices. Je vous recommande à ce sujet ce très bon article de Frédéric Filloux : Data Journalism is improving, Fast. L’auteur fait un tour d’horizon de l’utilisation d’interfaces riches par les grands médias d’information pour visualiser des données. Plusieurs très bons exemples sont cités dont le Gay rights in the US, state by state du Guardian :

Visualisation des droits des gays dans chaque état US
Visualisation des droits des gays dans chaque état US

Il y a aussi une infographie interactive sur Le marché de l’art pour les nuls qui a fait grand bruit, car il dénonce les inégalités hommes / femmes :

Analyse des ventes d'oeuvres artistiques
Analyse des ventes d’oeuvres artistiques

Ce ne sont que deux exemples d’une longue liste fournie par l’auteur. Cet article m’a permis de découvrir la jeune société française WeDoData qui est à l’origine de très belles réalisations sur la parité homme / femme et sur les 100 ans du Tour de France. Il éditent d’ailleurs un fil Sccop.it sur le journalisme graphique que je vous recommande vivement.

Infographie interactive sur les 100 ans du Tour de France
Infographie interactive sur les 100 ans du Tour de France

Mais la palme revient sans conteste à We Are Data, une interface de visualisation en temps réel de donnée qui accompagne la sortie prochaine du jeu Watch Dog : Ubisoft Launches WeareData to Compare Our Reality to Watch Dogs. L’objectif de cette interface est de faire prendre conscience au grand public de la masse de données publiques disponibles et de les représenter dans une interface 3D en temps réel (lignes de métro, stations Velib’, feux de circulation, caméras de surveillance, panneaux d’affichage publicitaires, publications géolocalisées sur les médias sociaux…).

L'interface de visualisation des données publiques de Paris
L’interface de visualisation des données publiques de Paris

L’interface est un peu longue à charger, mais le résultat est tout simplement bluffant. Pour en savoir plus sur la réalisation, je vous recommande le Making Of publié par Ubisoft :

Cerise sur le gâteau : cette interface est compatible avec les terminaux mobiles. Que demande le peuple ?

]]> http://www.interfacesriches.fr/2013/07/10/de-la-data-visualization-au-data-journalism/feed/ 2 Quand les infographies deviennent interactives http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/ http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/#comments Wed, 19 Sep 2012 08:42:52 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5291 J’ai toujours apprécié les infographies. D’une part pour le côté esthétique, d’autre part car elles permettent de remettre en perspective des données que nous aurions du mal à appréhender hors contexte. D’ailleurs la définition d’une infographie est : “une représentation graphique visuelle d’informations, de données ou de savoir”. Bref, c’est beau et utile. Sauf qu’avec la mode actuelle de tout représenter sous forme d’infographie, il y a overdose, surtout quand les données sont pauvres et que la représentation graphique est de mauvais goût. Il existe même des places de marché et des outils de création / partage d’infographies comme Visual.ly.

Tout ça pour dire que je pense que nous avons atteint le point de saturation des infographies statiques. S’il n’existe toujours pas d’outils en ligne pour créer des infographies dynamiques (à ma connaissance), nous commençons à voir des choses très intéressantes. Information is Beautiful a ainsi créé pour la BBC une très belle infographie dynamique pour calculer le nombre (théorique) de civilisations extra-terrestres : How many alien civilizations exist?.

Déjà à l’origine d’une autre très belle infographie (How big is space?), les équipes se sont mises en quatre pour proposer à la fois quelque chose de visuellement très plaisant, scientifiquement correct et surtout interactif. Le principe est donc de représenter graphiquement l’équation de Frank Drake (créée en 1961) en expliquant chaque étape du calcul et en donnant la possibilité aux internautes de faire varier les paramètres.

Chaque paramètre de l’équation peut être changé

Les internautes ont également la possibilité de choisir parmi 4 préréglages (paramètres originaux, pessimistes, optimistes et révisés) pour vous simplifier la tâche. Une fois arrivé en bas de la page, il vous suffit de lancer le calcul pour avoir la réponse.

Le résultat de l’équation de Drake

Je ne suis pas rentré dans le détail du code, mais j’imagine que tout est réalisable en HTML5 pour utiliser un minimum d’images. Le résultat est très plaisant et surtout utile, du moins pour ceux qui doutent encore (je précise que cette estimation ne concerne que les civilisations extra-terrestres de la voie lactée). Espérons que cette infographie interactive va en inspirer d’autres.

( Information Aesthetics)

]]> http://www.interfacesriches.fr/2012/09/19/quand-les-infographies-deviennent-interactives/feed/ 1 Vive la data visualization dans votre navigateur ! http://www.interfacesriches.fr/2012/06/05/vive-la-data-visualization-dans-votre-navigateur/ http://www.interfacesriches.fr/2012/06/05/vive-la-data-visualization-dans-votre-navigateur/#comments Tue, 05 Jun 2012 05:11:05 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1365 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.

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 :

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 énergieiOS Still Tops Android In HTML5 Performance.

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é.

]]> http://www.interfacesriches.fr/2012/06/05/vive-la-data-visualization-dans-votre-navigateur/feed/ 1 De magnifiques représentations de données en 3D grâce à WebGL et HTML5 http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/ http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/#comments Fri, 10 Feb 2012 16:26:10 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1285 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.

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 :

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).

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.

]]> http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/feed/ 3 SoundCloud + Winamp + Flash = ApexVJ http://www.interfacesriches.fr/2011/02/18/soundcloud-winamp-flash-apexvj/ http://www.interfacesriches.fr/2011/02/18/soundcloud-winamp-flash-apexvj/#comments Fri, 18 Feb 2011 17:57:24 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1032 Vous connaissez SoundCloud ? Mais si enfin, le service de streaming musical. Vous vous souvenez de Winamp ? Mais si enfin, le lecteur audio qui offrait de multiples modules de visualisation. Mélangez les deux et vous obtenez ApexVJ. Cette application en ligne repose sur l’API de SoundCloud pour récupérer un flux audio et sur le moteur 3D du dernier Flash player (plus précisément avec PixelBender et Away3D) pour offrir des représentations visuelles très poussées.

L’interface propose donc de choisir un titre ainsi que l’effet visuel :

L'interface de sélection d'ApexVJ

Le résultat est très spectaculaire car ces animations sont très réactives et affichées en plein écran :

Les différents effets visuels d'ApexVJ

Tout ceci devrait stimuler les services de streaming à proposer des interfaces plus sophistiquées (cf. Deezer et son nouveau player 3D en plein écran). Si vous cherchez des détails, les coulisses du projet sont ici : APEXvj, Born of the idea.

(via Hebiflux)

MàJ (21/02/2011) : Je découvre grâce à Molokoloco plusieurs expérimentations similaires en HTML / javascript : Music and visualisation, JS driven.

De ces différents exemples je retiens JuicyDrop :

L'interface de JuicyDrop qui reproduit celle de Winamp en javascript

Ainsi que Pocket Full of HTML5 qui exploite l’Audio Data API d’HTML5 :

L'API Audio Data d'HTML5 en action
]]> http://www.interfacesriches.fr/2011/02/18/soundcloud-winamp-flash-apexvj/feed/ 2 Tour d’horizon des outils de visualisation de tweets http://www.interfacesriches.fr/2011/02/03/tour-dhorizon-des-outils-de-visualisation-de-tweets/ http://www.interfacesriches.fr/2011/02/03/tour-dhorizon-des-outils-de-visualisation-de-tweets/#comments Thu, 03 Feb 2011 14:42:55 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=960 Tout comme FlickR à son époque, le succès de Twitter repose (en partie) sur son ouverture et la possibilité d’exploiter sa base de données au travers d’APIs. Cette ouverture permet donc à la communauté de mener diverses expérimentations et manipulation sur les tweets. Il existe un grand nombre de mashups, aussi je me contenterais de vous parler de celles qui concernent les représentations visuelles des vos tweets, followers ou graphe social. L’objectif de ce petit tour d’horizon est de vous faire découvrir les approches et technologies utilisées par la communauté.

Commençons avec la MentionMap d’Asterisq (en Flash) qui analyse votre graphe social en fonction des mentions et RT :

Votre tweetosphère avec MentionMap

Il y a ensuite TweetPivot (réalisé en Silverlight) qui permet une analyse très fine de vos followers en fonction de différents critères cumulables sur la droite de l’interface :

Votre tweetosphère avec TweetPivot

Dans un style beaucoup plus sobre, nous avons Revisit qui s’intéresse plus à la visualisation en temps réel des tweets sur un sujet donné (en Flash) :

Votre tweetosphère avec Revisit

Il y a également TwitterVeen qui propose une représentation en diagramme de Veen réalisée en Java :

Votre tweetosphère avec TwitterVenn

Il y a aussi le très impressionnant (mais très lourd) Twitt3D qui propose une représentation abstraite en 3D (avec Flash) :

Votre tweetosphère én 3D avec Twitt3D

Intéressons-nous maintenant à des réalisations beaucoup plus artistiques avec le très original IS Parade des Japonais de AndroidAU (très long à charger, mais très rigolo, en Flash) :

Vos followers avec IS Parade

Signalons également le très poétique TorisEye qui exploite le moteur de recherche de Twitter (réalisé en CSS et javascript) :

Vos tweets avec TorisEye

Et nous finirons avec l’incroyable SuperTwario, une application disponible pour iPhone :

Vos tweets façon Mario ave SuperTwario

Flash, Silverlight, javascript, Java… les technologies utilisées sont nombreuses et remplissent toutes l’objectif fixé : proposer une représentation visuelle originale (certaines le sont plus que d’autres). Vous connaissiez certainement quelque-uns de ces exemples, mais je trouve intéressant de les confronter et de voir dans quelle mesure la technologie n’est pas réellement différenciante. Ce qui conditionne le succès de telle ou telle représentation est plutôt la façon dont l’information est mise en scène.

En tout cas de très beaux exemples dont vous pouvez vous inspirer (même Mario !).

]]> http://www.interfacesriches.fr/2011/02/03/tour-dhorizon-des-outils-de-visualisation-de-tweets/feed/ 4