La semaine dernière, alors que le jury délibérait, certains participants n’ont pas résisté à l’envie de partager leur création. Et vu la qualité des projets, le choix du vainqueur risque de se finir à coups de pelles : ça ne sera pas simple.

Mediarena, conçue et développée par Nils Grünwald, Stéphane Raux, Alexis Jacomy et Ronan Quidu est une bonne “datagifle”. Tout est là au premier coup d’œil : l’angle est clairement identifiable – comment les principaux médias en ligne traitent la présidentielle – et la prise en main plus qu’intuitive. En quelques clics, on joue avec les données et on fait défiler sur ce ring les noms des grands titres. Le cadeau bonux, c’est que derrière cette simplicité gage de lisibilité, Mediarena nous donne accès à bon nombre de données qui donnent du relief et de la profondeur à l’angle choisi.

Autre concurrent en lice, les concepteurs de “partie de campagne” (joli hommage à Raymond Depardon et son film “1974, une partie de campagne”). Si le design de leur web-app est un peu moins léché, leur mise en scène des données est vraiment intéressante et innovante. On entre par un nuage de tags qui donne un aperçu des principaux thèmes abordés par les médias et par les politiques (avec un petit graphique les comparant au survol de chaque mot).

Une fois le choix défini, le second écran nous immerge dans le “delta” (version HTML5 + canvas), les pieds dans la thématique et ses sujets affluents. En cliquant sur chaque terme on accède aux données : analyse de la tendance, affichage des sources (politiques et médiatiques) et même un listing des vidéos Youtube référentes. De quoi fouiller le sujet.

La team haploid a choisi elle un angle légèrement plus ludique, du moins dans la visualisation des données, avec son “Qui sera parachuté à l’Élysée ?”. Les candidats sont physiquement parachutés vers l’Élysée, point de gravité qui les attire tous, inexorablement. La base data pour chaque candidat étant son compte Twitter officiel associé à celui de sa formation politique, une corrélation entre le nombre de followers et le nombre de retweets permet de déterminer en live lequel est le plus proche du Saint-Graal.

Autour d’eux flottent les planètes des thématiques quotidiennes identifiées sur Twitter. L’interaction est, là aussi, assez intuitive avec, au survol, un affichage des liens entre candidats-volants et planètes-thématiques et, au clic sur chaque élément, l’affichage du fil Twitter correspondant.

La bonne data derrière ces premiers exemples, c’est que ce concours #Googleviz a déjà permis de remarquer de sacrées équipes. De quoi émoustiller le timide milieu de la dataviz hexagonal.

Open Data sans data

Avant de filer vers les datas non-hexagonales, sortons le saint-tag #opendata pour regarder du côté de ceux qui essaient de nous faire préférer le train. data.sncf.com, dix lettres et deux points qui ont de quoi faire saliver quelques csv-dépendants. Seulement voilà, une fois la page d’accueil chargée, on reste pantois : pas un seul jeu de données à se mettre sous l’tableur. Le site est un appel à débat comme le souligne cette bondissante baseline : “Open data, open débat”. Pour le modèle “gagnant-gagnant” prôné dans le court texte de présentation, on repassera.

Chers transporteurs d’humanités, sachez que l’Open Data est un débat depuis quelques temps déjà et que le meilleur moyen de le faire avancer eût été de nous lâcher vos données. Pour l’innovation, côté des détenteurs de données, on attendra.

Traquer les rumeurs

Prenons l’avion pour aller faire un tour outre-manche. Nos amis du Guardian, qu’on ne présente plus en matière de journalisme de données, ont encore fait joujou avec quelques chiffres pour notre plus grand plaisir. Le concept de longue traîne ne leur étant pas non plus inconnu, ils sortent une très belle visualisation interactive sur un événement qui a près de quatre mois : les émeutes londoniennes.

Alastair Dant et ses collègues ont décidé d’analyser l’évolution des rumeurs sur Twitter pendant ces évènements. “Les émeutiers ont libérés les animaux du zoo de Londres”, “les émeutiers se font leurs propres sandwichs dans les Mc Do”… À vous de choisir parmi sept rumeurs – cinq fausses, une infondée et une avérée – pour visualiser leur évolution. Le replay est intelligemment construit, avec notamment l’identification visuelle des tweets favorables, opposés, interrogatifs ou simplement commentant les faits et la mise en avant de moments clés où la diffusion de la rumeur se modifie. Et, comme au Guardian ils aiment partager, ils nous livrent un making of de cette datavisualisation qui permet notamment de comprendre l’importance d’un travail d’équipe intégrant : journalistes, développeurs, designers et universitaires.

Unes VS Twitter

Direction le sud de l’Europe et l’Espagne : autre mouvement, OccupyWallStreet, et autre visualisation signée Numeroteca. Si le rendu manque cruellement de possibilités d’interaction pour mieux saisir les données, le principe mérite que l’on s’y arrête. Le but est de matérialiser un comparatif entre le traitement du sujet à la une des grand journaux américains et le nombre de tweet/jour sur ce même sujet. Le rendu visuel permet non seulement de comparer les deux présences médiatiques sur un graphique mais on visualise également la place physiquement accordée sur la page de une. Le même type de travail a été mené pour comparer le traitement à la une des principaux journaux espagnols et sur Twitter du printemps arabe.

Des recherches à suivre, notamment lorsque l’on sait qu’un Hackathon sur le sujet #OccupyData s’est tenu le 9 décembre dernier et que les pistes qui s’y sont dessinées sont accessibles directement dans un GoogleDoc en libre accès.

Au-delà du chaos

Passons outre-atlantique pour aller crowdsourcer le futur de l’informatique. C’est ce que propose le New York Times à travers une efficace timeline verticale qui répartit le sujet sur quatre grands thèmes : calcul, intelligence artificielle, transports et mode de vie et communication. Rien ne sortant de rien, ce sont les bases qui apparaissent en premier avec tout l’historique de l’informatique au sens large depuis les bâtons de Napier en 1617 jusqu’à 2011 année historique où Waston, super-ordinateur conçu par IBM, a battu les deux champions du jeu américain “Jeopardy!”.

Puis c’est le grand saut. De quoi demain sera fait ? À partir de 2012, c’est un grand tableau noir où s’affichent les prédictions proposées par les audiences. L’espace pour laisser sa propre prospective est aujourd’hui clos mais vous pouvez toujours interagir de deux façons différentes. Soit en déplaçant les événements affichés sur la timeline post-2011, soit en votant pour les propositions qui vous semblent les plus intéressantes, réalistes #oupas. Les mieux notées seront progressivement insérées dans la partie prédictive de la timeline.

DataTriche et WTF

L’hiver approche et avec lui le cliché des longues soirées au coin feu qu’il va bien falloir occuper. Si certain(e)s d’entre vous aiment le jeu, possible que vous ressortiez dans les semaines qui viennent ce bon vieux Monopoly qui prend la poussière depuis un an. Alors laissez-moi vous donner un tuyau. Il y a un développeur californien nommé Ben Jones qui s’est amusé à modéliser les statistiques issues de 60.000 parties aléatoires. Son “Dominate Family Game Night” présente un tableau de bord des différentes stratégies de jeu en fonction de grandes tendances. Chut, je ne vous ai rien dit.

Avant de finir, on ne va pas, nous aussi, lancer un concours mais juste un appel : saisissez-vous des données WTF ! L’Internet mondial en est rempli et elles n’attendent que de folles petites équipes pour être visualisées. Tiens par exemple : les meilleures ventes de 45T/Singles de tous les temps (merci @Pirhoo) ou comment refaire un TOP50 2.0 avec en tête Tino Rossi et J.J Lionel.
Ou encore, pour rester dans le domaine des mélodies inoubliables, toute la correspondance de Wolfgang Amadeus Mozart et sa famille. Près de 1 400 lettres triées en fonction des dates, lieux, expéditeurs, destinataires, œuvres mentionnées. De quoi scrapper…

BRooeimn hhaapdsy

Reprenant la chronologie inversée du précédent “Les data en forme“, terminons cette semaine en musique avec une dataviz pour les oreilles. C’est du Queen et c’est la mythique Bohemian Rhapsody qui est joliment destructurée. Dans Bohemian Rhapsicord, créée lors du Music Hack Day de Boston, Jennie and Paul Lamere ont concrètement morcelé le morceau en une multitude de séquences pour nous laisser le rejouer à notre manière. Soit vous appliquez un des filtres qu’ils proposent (durée, volume, inversion, similarité), soit vous définissez une touche de votre clavier pour chaque segment et à vous de reconstruire le puzzle musical. Seul bémol : la web-app ne fonctionne que sous Chrome.

Allez, que l’#opentata et le #dadajournalisme vous inondent et à la semaine prochaine.

—

Retrouvez les précédents épisodes des Data en forme !

Bonjour et bienvenue à bord de notre “Vendredi c’est Graphism”, veuillez regagner votre siège, PNC aux portes, armement des toboggans, nous avons cette semaine un plan de vol très graphique. Tout d’abord, on décolle en douceur avec la transformation graphique d’un évènement à OccupyWallstreet, on passe par dessus les nuages avec un magicien du numérique, une fois en vol je vous invite à regarder les outils qu’utilisent les designers et on amorcera notre descente avec un renard, une fille, Frankenstein pour atterrir sur un WTF à base de Lego hardcore !

Vous y êtes, c’est vendredi et c’est Graphism !

Geoffrey

On commence la semaine avec un “évènement” qui a eu lieu vendredi dernier. Des étudiants protestataires et non-violents qui soutiennent le fameux mouvement Occupy Wall Street à New-York ont été arrêtés par la Police et se sont  littéralement fait “gazés” par un policier (le désormais célèbre lieutenant John Pike) alors qu’ils étaient sagement assis par terre. Comme d’habitude, des vidéos ont été tournées sur place et décrivent la scène. John Pike marche jusqu’aux manifestants, tire sa bombe au poivre de sa ceinture, puis les arroser de très très près.

Cliquer ici pour voir la vidéo.

La vidéo a énormément circulé et, petit à petit, ce policier et son geste sont devenus une sorte “running gag”, autrement appelé mème . Des dizaines d’images ont donc été diffusées et ont circulé partout sur le web. Même si l’acte est choquant, ces images sont drôles, portent parfois un message et jouent sur le côté décalé afin d’être diffusées. L’acte est donc de dénoncer, mais pas frontalement en disant “regardez, c’est mal!”, mais plutôt d’une façon biaisée, drôle, virale. Et qui correspond parfaitement au web.

source

On s’échappe des traitements policiers pour rejoindre la magie de la scène avec ce bien drôle de magicien ! Moulla, c’est son nom, est un jeune magicien qui utilise une vidéo projection classique et un Microsoft Kinect pour réaliser des tours de “magie augmentée”. Vous allez le voir, il mêle habilement la réalité augmentée à la magie lors de cette présentation faite à la cérémonie d’ouverture de l’Imagine Cup Kick off chez Microsoft France.

Cliquer ici pour voir la vidéo.

source

Toujours cette semaine, j’ai découvert via Bestvendor (un site web qui aide les travailleurs à trouver des applications sur les recommandations du même corps de métier), une infographie plutôt intéressante et assez représentative des métiers de la création. Après avoir demandé à 180 designers et professionnels de la création leurs outils favoris, les équipes de Bestvendor ont trié puis compilé leurs réponses pour nous offrir cette grande image plutôt parlante. Si les designers ont l’habitude d’utiliser Google Docs, Drop Box et Adobe Photoshop, on remarquera également que nombre d’entre eux utilisent Omnigraffle, Evernote ou encore la monté de services comme “What the font“, ou “Dropmark“. À voir maintenant si vous vous reconnaissez dans certains de ces usages !

source

On poursuit notre revue de la semaine, avec une vidéo au pinceau… et quelle vidéo ! Pour promouvoir le projet de livre intitulé “Pincel de Zorro” publié par les éditions Ondina, Hug Codinach, Meritxell Ribas (illustrations) et Albert Alay (musique) ont conçu cette animation d’une rare poésie. En effet, ce conte illustré de l’écrivain espagnol Sergio A. Sierra nous raconte une histoire fantaisiste qui se passe au Japon, en septembre. Plein de tendresse, de magie et de tristesse, l’histoire est également racontée par des illustrations faites à la carte à gratter.

Pour les curieux, l’histoire est celle de Shiori, une petite fille dont la vie va changer le soir où son père ramène à la maison un renard mort qu’il a chassé. Quand ses parents décident de vendre la précieuse peau de l’animal, ils reçoivent la visite d’une femme très mystérieuse…

Cliquer ici pour voir la vidéo.

source

Que faire si vous collectiez 64076 55382 polices d’écriture téléchargées sur internet dans des PDF ? Oui, c’est LA question de la semaine à laquelle le designer Mary Shelley a trouvé la réponse : Remplir un livre avec 342 889 lettres différentes ! Oui ça paraît évident comme ça… mais pour faire un livre sur quoi ? Sur une édition de Frankenstein pardi ! Frankenstein, or the modern Prometheus est une version moderne de Frankenstein écrite par Mary Shelley. À l’aide de caractères et de glyphes (obtenus de façon plus ou moins légale dans des PDF ), chaque lettre est utilisée et triée puis remplacée par la même lettre dans une autre typo en fonction de sa fréquence d’utilisation. Les polices les plus communes sont utilisées au début du livre, puis, petit à petit la mutation se fait, le charme opère et le livre prend vie !

source

Le WTF de la semaine est placé sous le signe du Lego ! Qui a dit que le Lego était has-been, hipster ou geek ? Non, rien de tout cela, le Lego c’est punk, c’est hardcore, c’est violent !  Hell yeah !

Cliquer ici pour voir la vidéo.

Vendredi c’est Graphism, c’est terminé pour aujourd’hui, j’en profite donc pour vous remercier de votre attention, vous pouvez détacher votre ceinture et regagner une vie normale. Et si vous en voulez encore, vous pouvez aller jeter un œil à PictoPlasma à la Gaîté Lyrique à Paris ou encore à l’exposition sur Roger Excoffon à Lyon ! Sinon, si vous aimez les robots et la bande dessinée, ce dernier billet de Marion Montaigne m’a beaucoup fait rire !

Bon week-end,

et… à la semaine prochaine !

Geoffrey

Intéressé par le contenu des sessions parlementaires ? Demo.cratica a ce qu’il vous faut : un calendrier des sessions depuis 2009 permettant de naviguer parmi les transcriptions des débats. Au survol d’une date sur le calendrier s’affiche le mot le plus souvent cité dans les prises de paroles du jour, pratique pour parcourir les thématiques abordées. Lorsque vous vous penchez sur la retranscription d’une session parlementaire, en plus des textes des interventions, Demo.cratica propose une  visualisation “statistique” des échanges. Vous pourrez ainsi facilement voir quel groupe parlementaire a le plus pris la parole, via quels députés au sein de ce groupe ou quels sont les grands thèmes abordés.

Pour ne rien gâcher, la mise en forme de ces données est plus que léchée et les sources de Democra.tica sont regroupées sous la forme d’un logiciel libre et donc disponibles sous licence AGPL. Quoi de plus naturel lorsque l’on sait que ce projet est né, il y a 9 mois, au cours d’une session Hackday à Porto ?

Depuis le temps qu’on vous le dit : hacker c’est bien, c’est bon.

Continuons avec la politique côté finances. On a pu voir en France que l’exercice des primaires présentait un solde plus que positif. Outre-Atlantique Matt Stiles, journaliste pour NPR et auteur du blog The Daily Viz, s’est amusé avec les data de la Commission nationale électorale. Il s’est posé une question simple : d’où viennent – géographiquement – les 90 millions de dollars engrangés par les candidats républicains depuis le début de l’année ?

Sa réponse tient en 10 cartes : la première, globale, affiche les données de tous les candidats, les neuf autres présentent la provenance des fonds candidat par candidat. On regrette juste qu’il n’ait pas poussé jusqu’aux quelques lignes de HTML5 qui auraient permis de présenter l’ensemble avec plus de simplicité et d’ergonomie qu’un long scroll.

Dataviz battles

Ces deux projets pourraient donner quelques pistes de réflexions pour le concours de dataviz qui vient d’être lancé par Google : “Les élections 2012 autrement“. Le principe est simple :

Proposer une application web interactive qui utilise des données de Google ou de Twitter pour proposer un nouveau regard sur l’élection présidentielle française de 2012.

Seule contrainte, donc, utiliser au moins un jeu de données provenant de Google ou Twitter, libre à chacun ensuite de laisser s’exprimer sa créativité. API fortement conseillées. Le tout (les sources de la webapp) est à envoyer sur dataviz2012@gmail.com avant le 7 décembre 2011.

Les concours de dataviz ont d’ailleurs tendance à se multiplier ces derniers temps. On notera celui organisé par l’un des papes de la dataviz, David Mc Candless, tout simplement nommé : The Information is beautiful Awards. Le premier concours portait sur l’évolution des stocks d’énergies non-renouvelables dans les années à venir et les vainqueurs sont sur le point d’être annoncés. En attendant on peut aller se balader sur les projets des finalistes des deux catégories : interactive challenge, visant à produire une web-app restituant les data, et le napkin challenge, qui rassemble les projets à l’état d’intentions graphiques crayonnées sur des nappes en papier ou tout autre support un tant soit peu lisible, du jus de cerveau en open source en somme.

OWS DVZ

La dataviz, c’est à chacun de s’en servir et, bien utilisée, c’est un excellent outil de communication. Le monde de l’entreprise l’a compris en assommant des armées de commerciaux à coup de powerpoints graphomaniaques durant de nombreux séminaires “Chiffre d’Affaires”, “Chiffres de Vente” ou “Parts De Marché” – car chacun sait qu’une image passe toujours bien mieux. Toutefois avec deux sous d’inventivité, un soupçon de DIY et un message plus politique à faire passer, on trouve tout de suite des idées bien plus intéressantes.

Au cœur mouvement Occupy Wall Street, la datavisualisation est apparue en toute logique car quoi de plus efficace (photo, à voir) pour représenter le rapport de force entre les 1% les plus riches et les 99% restants ?

Une autre belle idée, celle d’Occupy George, est d’avoir collé des visualisations – grâce à des tampons-encreurs à la papa dûment bricolés – sur le support même qui circule le plus dans nos (99%) mains de consommateurs assoiffés pour finir dans les poches des 1% : le “George-Washington”, emblématique billet de un dollar.

Tiens d’ailleurs, pendant que l’on parle politique, économie et crise dans notre datarticle hebdomadaire, le New York Times nous gratifie d’un très beau travail sur la crise de l’Euro. Leur visualisation interactive met en évidence l’interdépendance des différents acteurs (actifs ou passifs) : It’s all connected.

En plus des chiffres propres à chaque pays (qui détient quoi ?), plusieurs onglets permettent d’explorer les différents aspects : des problèmes actuels aux risques de contagion en passant par les scénarios possibles.

Avant de vous remettre au boulot, allez jeter un œil sur l’outil développé par icosystem : Infomous. Pointé par l’excellent Simon Rogers, sur le datablog du Guardian, ce système propose un principe de navigation au sein de l’information assez novateur. Il permet de visualiser les sujets les plus importants, les plus partagés en temps réel en les organisant par mots-clés.

Des “galaxies” de “faits” se dessinent ainsi en donnant accès aux contenus en profondeur (les articles liés). Infomous est plutôt bien pensé car il intègre également quelques outils pour personnaliser cette visualisation : paramètres de la visualisation (zoom, nombre de sujets…), exclusion de mots, de types de mots, screenshot, embed ou encore choix des sources (malheureusement parmi une liste plutôt courte de 13 médias internationaux anglophones).

Inspirez, visualisez

Histoire de garder quelques belles images en tête, finissons sur de l’expérimentation, possible source d’inspiration.

Une première piste en matière de géolocalisation proposée par Zachary Forest Johnson (repérée sur Information Aesthetics). Pour faciliter la visualisation de nombreux points sur une vaste zone géographique, il a appliqué un principe délicatement nommé : “hexagonal binning” [PDF].

Le but est de diviser les zones contenant des data en hexagones différenciés graphiquement, par exemple avec des nuances de couleur, en fonction du nombre de points contenus dans la zone en question. Sur l’exemple de la répartition des magasins Wall-Mart sur le sol US, plus une zone contient de magasins, plus l’hexagone correspondant tire vers le clair, moins il y en a plus sa couleur est sombre. Le tout permet de simplifier la visualisation de données nombreuses sur un espace restreint.

Petit bonheur : HexBin, l’outil devéloppé par Zachary F. Johnson est disponible sur github et il peut s’utiliser sous forme de fonction d3.js et s’intégrer à PolyMaps.

Restons dans l’inspiration, allons prendre l’air. L’hiver approche, c’est l’occasion d’aller côtoyer les sommets enneigés mais même encordés, n’oublions pas les data. La raréfaction de l’air au niveau des 6,962 m d’altitude du Mont Aconcagua a sans doute inspiré le photographe Michael Najjar.

Il s’est servi de ses clichés comme base pour produire d’étonnantes visualisations : les chemins de crête dessinent les cours du Dow Jones, Nikkei, Nasdaq ou autres Lemhan Brothers.

Enfin, expérimentation totale. Si votre carte graphique supporte le WebGL, allez faire un tour sur le module wire.2x.io et amusez-vous ! Dessinez des courbes de data sur la grille et baladez-vous en 3D à l’intérieur à l’aide du clavier. Ça laisse rêveur…