Je chante, tu chantes, il dataviz

Lancé par Florent Maurin (par ailleurs chroniqueur sur la chouette émission estivale de France Inter dédiée sur les questions numériques : Antibuzz), ce tumblr sobrement intitulé « Dalalalataviz » résume les chansons des plus grands artistes (Abba, Jackson 5… Bratisla Boys) en une dataviz. Le résultat est très drôle et les auteurs débordent d’imagination.
Si l’idée vous inspire, lancez-vous. Chacun est libre de soumettre ses traductions visuelles : Florent Maurin précise qu’il s’agit d’un projet « open-soupe ».

Mémo Lego

Les briques de couleurs et tailles diverses produites par la société Lego s’adaptent parfaitement à la data visualization et à l’infographie, comme l’avait montré l’événement Expoviz et ses ateliers. La société Lego s’en est également servi pour expliquer simplement le principe d’une infographie : passer d’un ensemble fouilli de data à des données représentées visuellement en les ayant au préalable triés et arrangées.

A quel gros ressemblez-vous ?

Où vous situez-vous sur l’échelle d’obésité mondiale ? C’est à cette étonnante question que la nouvelle application de la BBC vous propose une réponse. Après nous avoir permis de savoir combien de personnes vivaient sur la planète le jour de notre naissance ou encore d’évaluer l’étendue des pertes durant la seconde guerre mondiale en se basant sur nos amis facebook, la BBC poursuit dans sa série d’applications alliant graphiques, données mondiales et forte personnalisation.
Ici, le « calculateur » vous demande de saisir votre âge, votre sexe, votre poids et votre pays pour vous comparer ensuite à l’échelle mondiale. Le résultat est souvent étonnant : le poids moyen est ainsi plus élevé en Jamaïque qu’aux Etats-Unis.

L’anamorphose des athlètes

Impossible d’échapper à l’actualité sportive, même dans la planète Data. A partir du 27 juillet, Londres accueille les Jeux Olympiques. Le Datastore du Guardian en a pris son parti en créant une rubrique spécifique consacrée aux données olympiques de 2012 : graphiques de comparaisons entre les JO accueillis par Londres (en 1908, 1948 et 2012), liste complète des athlètes britanniques concourant à la compétition, etc.
Cette rubrique recense également les visualisations pertinentes réalisées sur ce sujet, comme cette carte en anamorphose, réalisée pour l’association Join In par Kiln, spécialiste de cette technique, créateurs notamment de The Carbon Map.
Cette carte des JO permet de visualiser l’origine des athlètes selon leur sport. Là où certains faits semblent évidents (les athlètes concourant pour la navigation à voile viennent plus souvent des régions côtières), d’autres moins connus sont mis en lumière : la prépondérance du sud comme origine des tennisman, le curieux équilibre nord/sud pour le basketball, écrasant toutes les régions.

Toutes les idées du monde

Il y a environ un mois, Simon Rapper, statisticien britannique, s’était essayé à la visualisation de l’histoire de la philosophie et des influences entre auteurs. Il a inspiré Brendan Griffen qui a reproduit son idée (scraper Wikipédia et sélectionner ceux dont il est mentionné « influencé par » ou « ayant influencé ») à l’échelle de Wikipédia tout entier : sa méthodologie est expliquée ici.
Le résultat est impressionnant. Tant par sa taille (attention au temps de chargement) que par son contenu.
Sur ce graph, réalisé avec le logiciel de graphiques Gephi, la taille des nœuds est proportionnelle au nombre de connections entre deux élements. Plus le nœud est important, plus grande est l’influence de cette personne. Nietzsche, Kant, Hegel, Hemingway, Shakespeare, Platon, Aristote et Kafka trustent sans surprise l’ensemble des liens. Cependant, d’autres connections méritent également le coup d’oeil : la forte influence des artistes comme Andy Warhol ou Marcel Duchamp par exemple.

Comment choisir son graphique

Minute pédagogie. C’est une évidence : le choix du graphique ou du type de visualisation est essentiel dans le fait de rendre lisible une infographie ou une data visualisation. Pour simplifier cette étape, des outils ont commencé à faire leur apparition, comme le tableau des méthodes de visualisation, utilisant le concept du tableau de classification périodique des éléments chimiques.
Andrew Abela, professeur de marketing et consultant en design, a réalisé quant à lui un graphique de choix de graphique, sous la forme d’un test. La question principale se situe au milieu : « Que voulez-vous montrer ? ». Puis, suivant la réponse (une comparaison, une composition, une distribution, une relation) et les caractéristiques des données (statiques, évolutives, accumulatives,..) que le lecteur souhaite, le graphique qui semble le plus approprié est affiché au bout de la ligne.
L’équipe de Juice Labs en a d’ailleurs réalisé une version interactive, mais presque moins lisible car elle ne centralise pas tous les éléments sur une seule page.

Une vision d’intensité

Une belle visualisation pour terminer cette chronique : celle de John Nelson sur les séismes dans le monde depuis 1898, représentés selon leur magnitude. John Nelson a utilisé les données de l’NCEDC (Nothern California Earthquake Data Center), USGS (US Geological Survey) et de l’Université de Berkeley, qu’il a replacé sur un des fonds de visualisations fournies par la Nasa. Outre l’esthétique permise par le fond de carte, les informations sur les zones les plus dangereuses ressortent clairement. John Nelson avait également représenté avec succès les incendies majeurs ayant frappé les Etats-Unis.

Bonne data-semaine à tous !

Hello les ptits loups !

Ça y est, nous sommes vendredi, le jour du poisson, du chiffre treize, de Robinson, ou encore “c’est demi!” comme le disait Desproges. Mais depuis deux ans, le vendredi, sur OWNI, c’est le jour du graphisme, du design, de la créativité. Au menu de notre revue semaine, l’explication de l’importance du financement de la culture par l’État, des objets tout blanc, un mini clip pour un grand livre, de la visualisation de données, une petite dose de Dieter Rams et de la visualisation de wireframe de sites internet. On terminera sur un WTF aux toutes petites mains ! :-)

Allez, on commence notre revue avec LA vidéo de cette semaine, simple, efficace, pour preuve, je l’ai regardée jusqu’au bout ! Grâce à ce court métrage, vous allez comprendre en 4 minutes pourquoi l’État français doit continuer de financer la culture avec un petit ou un grand C.

Résumé :

« Le journal Le Monde nous gratifie cette semaine d’une belle étude graphique sur les bienfaits économique de l’investissement culturel. Pour amener le débat dans cette période éléctorale, Le Monde nous démontre 3 grands principes économiques qui argumentent la valorisation de la Culture par le gouvernement. En sociologie, on considère la culture comme ce qui est commun à un groupe d’individus et comme ce qui le soude. Effectivement et sous bien des apsects, La culture est le Trésor d’une société. » [source]

Cliquer ici pour voir la vidéo.

source

“Brand Spirit” est un projet vraiment intéressant d’un point de vue conceptuel mais aussi d’un point de vue purement forme pour exercer son oeil. Chaque jour, et pendant 100 jours, Andrew Miller va peindre en blanc un objet de marque et enlever ainsi tout logo ou tout signe visuel apposé. L’objet est ainsi réduit à sa forme la plus pure, son esprit initial. À noter aussi que chaque objet coûte moins de 10 dollars et que notre ami Andrew prend toujours un objet qu’il possède ou quelque chose qu’une autre personne lui donne. Le résultat est calme, apaisant et pourtant, on reconnait presque toujours les objets, les marques.

source

Toujours cette semaine, j’ai eu la chance de découvrir cette fabuleuse version illustrée des aventures d’Alice au pays des merveilles. Illustré par la célèbre artiste japonaise Yayoi Kusama, ce livre sorti récemment chez Penguin Books au Royaume-Uni est présenté dans la vidéo ci-dessous. Une vidéo qui promeut un livre, c’est rare, mais une vidéo comme celle-ci, c’est une première ! À noter qu’un extrait du livre est disponible sur le site de Penguin Books !

Cliquer ici pour voir la vidéo.

source

On continue notre vendredi avec ce travail graphique qui explore la relation entre les mots et les années. Dessinée par Toril Johannessen, cette série d’images sérigraphiées en grand format met en lumière les liens entre l’apparition et la fréquence de certains mots dans un contexte temporel. Une série de graphiques qui sont basés sur des publications de recherche de revues universitaires. Vous l’aurez donc compris, Toril Johannessen n’a pas choisi ses mots au hasard et les relations entre « logique & amour », « espoir & réalité » ou encore « chance & destin », sont d’autant plus belles qu’elles sont présentées dans le temps, et donc, dans l’esprit d’une société, d’une époque. Voilà le résultat :

source

Cette interview, pas toute nouvelle mais toujours actuelle, est ressortie récemment pour son aspect éducatif sur le design. Dieter Rams, né le 20 mai 1932 à Wiesbaden, est un designer industriel allemand contemporain, étroitement associé aux produits de la société Braun et aussi à son appartenance à l’école fonctionnaliste du design industriel. Un immense designer donc, qui aura inspiré très largement Jonathan Ive, le designer d’Apple.

Cliquer ici pour voir la vidéo.

Merci Tom

Toujours cette semaine, je souhaitais vous présenter Wirify, un outil pour designers, développeurs ou bidouilleurs. Cet outil pratique, simple et gratuit va vous permettre de prendre un peu de du recul pour voir les sites web différemment et vous concentrer ainsi sur la structure des pages. Wirify cache donc le contenu et représente ainsi le site web sous forme de wireframe, comprenez, de petits blocs gris !

source

Et le WTF de cette semaine est plutôt étrange! Intitulé “One Tiny Hand” (“une petite main“) ce site internet (un tumblr) a été créé par Zach Vitale, un jeune homme qui s’applique à manipuler sur Photoshop des photos de stars pour les doter d’une… toute petite main ! Aucune critique sur un quelconque handicap, le travail de Zach est là pour questionner, pour attirer l’oeil sur un “détail” de la photo, et pour regarder différemment ces “stars” que nous pensions connaître. Mais… pourquoi ces petites mains !?

source

Et voilà, Vendredi c’est Graphism c’est déjà terminé, j’aurais également pu vous parler de cet atlas de la microédition, de l’exposition du sculpteur catalan Jaume Plensa, ou encore de l’exposition « OBEY PROPAGANDA » avec Shepard Fairey, mais non non non, je voulais tout simplement vous laisser avec le travail graphique doux et délicat de Tien-Min Liao, une belle réponse au WTF de cette semaine en quelque sorte :)

Cliquer ici pour voir la vidéo.

Bon week-end ;-)

Geoffrey

La semaine dernière je vous parlais du logo de GAP et de son revirement (ils ont changé de logo puis sont revenus à la version précédente!), c’est au tour de MySpace de changer de logo pour un logo assez “spécial” qui est en fait un grand “my” suivit d’un underscore à côté : “my____”. L’idée a été vite reprise sous forme de générateur de logo MySpace, le concept est qu’il est possible de mettre tout… et bien évidemment n’importe quoi dans ce logo ;-)

le générateur de logo MySpace

On sort des logos en noir et blanc pour se plonger dans l’univers d’un jeu vidéo très coloré et très élégant ! Réalisé par les créateurs de « Poto & Cabenga » (un excellent jeu flash que je vous recommande), je vous présente le jeu vidéo Hohokum. Dans la vidéo ci-dessous on découvre un game play assez intéressant avec un serpent dans un univers graphique très coloré, en papier découpé ou en mosaïque. Le déplacement de l’écran également rajoute une dynamique assez forte au mouvement.

Cliquer ici pour voir la vidéo.

Cette semaine également fût pour moi la découverte de cette table d’un genre nouveau imaginée par le designer Bram Boo. Cette table  nommée « Salsa » est un ensemble de chaises/bancs conçus pour quatre personnes avec quatre iPad intégrés. Chaque utilisateur se trouve ainsi dans une direction différente mais tous avec un iPad sous les yeux.

Un tel dispositif symbolise le lieu collectif ainsi que la lecture… donc pourquoi pas la bibliothèque (municipale par exemple, ou un CDI). Imaginons qu’avec ce dispositif, les livres soient numérisés, qu’ils soient accessibles plus facilement (nul besoin de chercher parmis les étagères), qu’ils soient également téléchargeables, que l’écran puisse offrir un réel confort de lecture (il y a encore du travail), qu’un tel lieu puisse être également connecté à toutes les autres bibliothèques pour partager leurs ouvrages (voire à Google Books), imaginons aussi le gain de temps et de moyens grâce à ces dispositifs ou encore la possibilité à cent ou dix mille personnes d’emprunter le même livre sans pour autant en priver quelqu’un d’autre. Imaginons tout ceci. Alors certes, il n’y aurait plus le touché du livre, son odeur, la main du papier, la couleur ne serait plus la même, certes, les ouvrages numérisés ne seraient pas conçus au départ pour être lus sur écran, des choses que je trouve primordiales mais imaginons qu’il serait toujours possible de retrouver l’ouvrage si l’objet a une importance au travers de l’information. Je suis le premier à collectionner les livres, anciens, beaux, rares, chers, cependant, je me demande comment les générations futures (et les jeunes générations actuelles), réagiront lorsqu’elles se retrouveront face à des bibliothèques ou des CDI totalement numériques.

Est-ce que les jeunes & futures générations auront un intérêt dans l’objet livre ou peut-être qu’avec la diversité des support, peut importe la source ou le medium, seule le contenu comptera ? Allez savoir.

On enchaîne notre aperçu de la semaine avec un projet réalisé dans le cadre du Master en Science & conception de projet industriel d’obtention à l’Université de technologie d’Eindhoven, aux Pays-Bas. Ce projet (prototype + réalisation finale) est une réflexion menée autour de la gestuelle et notamment sur la façon dont le geste peut améliorer la manipulation d’un objet. Voici donc un robinet de cuisine entièrement contrôlé par les gestes de la main.

De tels objets deviennent une extension de l’utilisateur lui-même, que ce soit son corps, ses mains, ou même son esprit, un tel dispositif réduit l’interface à la simple notion d’utilisateur. L’interaction est ici minimale mais assez puissante pour permettre d’allumer un robinet, de régler sa puissance, sa température, son type de jet, chose qui parfois peut s’avérer délicat avec une seule main.

Cliquer ici pour voir la vidéo.

Cliquer ici pour voir la vidéo.

Le designer Roman Cortes s’est amusé cette semaine à réaliser une petite expérimentation typographique sur la chanson Never Gonna Give You Up du désormais célèbre Rick Astley. La typographie s’anime ainsi dans une danse fluide. Les lettres suivent ainsi chaque image de la vidéo flash. Tout est codé en actionScript et, hélas, la typographie est tout simplement de l’Arial (pour éviter d’avoir à “embarquer” la typographie dans le fichier flash et ainsi gagner en performances).

source

Allez, on termine la semaine avec un WTF qui se passe dans un pays de l’Est de l’Europe. Au début ce n’est qu’un banal évènement, puis un genre de double rainbow du WTF. Je vous laisse découvrir :

Cliquer ici pour voir la vidéo.

Pour conclure ce dixième Vendredi c’est Graphism!, je voulais vous remercier et également de vos petits e-mails sympathiques avec vos actualités graphiques :-) Et quelques phrases pour la fin :

- Tu connais par cœur la musique du répondeur de la MDA ;-)
- Tu sais faire des capitales accentuées et des ;¬)
- Tu utilises ton écran dans sa résolution native.
- Tu as des livres d’images encore à 25 ans.
- Tu fais des cartes de visites mais tu n’en as pas pour toi.
- Tu aimes les mots « bords perdus », « corps », « vectorielle »…
- Tu es pris d’une vive douleur à l’estomac lorsqu’on te dit : « plus gros le logo ».
- Sur ta carte de visite, tu ne sais plus si tu dois écrire « graphiste », « directeur artistique » ou « graphic designer ».
- T’as pas fait ctr l+ S et que tu le payes cher là tout de suite!
- Que t’as plus d’A3 mais qu’en collant deux A4 ça devrait le faire…

À la semaine prochaine ! ;-)

Geoffrey

OWNI l’a testé pour expliquer les causes de la crise grecque. Et ça fonctionne. Le gadget, associé à une vidéo explicative, rend intelligible des milliers de points de données en un minimum de temps pour l’utilisateur – et pour le journaliste.

Tutoriel par l’exemple : Tentons d’expliquer pourquoi un pays émet du CO2.

1. Sélectionner les bases de données

Trouvez une base de données. Les organisations internationales en proposent plein, le plus souvent gratuites. Dans le cas présent, allons chez Eurostat.

Sélectionnez les séries de données qui vous paraissent pertinentes. Pour cet exemple, j’ai choisi les émissions de CO2, la population, le PIB, le nombre de voitures et le nombre de voyages en train. Mon but est de montrer que plus on a de voitures et moins on voyage en train, plus on pollue.

2. Sélectionner les séries de données

Pour pouvoir travailler proprement, il disposer de données homogènes. Pour chaque série sélectionnée, il faut faire attention à ce que les années et les pays sélectionnés soient les mêmes. Négliger cette étape, c’est s’exposer à une triple dose de boulot à l’étape 5.

On va ici se limiter à analyser les 27 pays de l’UE de 1990 à 2007. Une fois la série sélectionnée, aller dans l’onglet ‘Select Data’, pour vérifier les onglets GEO et TIME. Ca implique de décocher parfois les pays pour lesquels Eurostat dispose de données mais qui ne nous intéressent pas ainsi que les agrégats (UE-27, UE-15 etc). Faites attention: parfois, Eurostat propose des données pour des régions improbables (France métropolitaine, Allemagne de l’Ouest) qui, si vous les laissez, viendront pourrir vos fichiers.

Les onglets AI et CA donnent accès à des données plus détaillées. Eurostat propose ainsi les émission d’une vingtaine de polluants atmosphériques en plus du CO2.

3. Exporter les séries

Mettez à jour le tableau et exportez.

Exportez dans Microsoft Excel. Les autres tableurs sont très bien aussi, mais dans cet exemple on se sert d’Excel.

On récupère maintenant chaque tableau dans Excel. Ca doit ressembler à ça:

Faites un export par série de données, si bien que vous devriez avoir un fichier excel pour chaque série.

4. Mettre en forme les données

Google Motion Chart a besoin d’avoir les données dans un format basique. Au lieu d’avoir un format du type:

1990 1991 Belgium 12 3 Bulgaria 15 4

on cherche à ce que ça ait cette forme:

Belgium | 1990 | 12
Belgium | 1991 | 3
Bulgaria | 1990 | 15
Bulgaria | 1991 | 4

On a besoin de faire l’inverse d’un tableau croisé dynamique. Heureusement, il existe une macro Excel pour faire ça automatiquement. Trouvez là ici, et mettez la dans le presse-papier.

Retournez sous Excel. Sélectionnez l’ensemble du tableau.

Cliquez maintenant sur le bouton ‘Visual Basic’ (Excel 2007)

Collez la macro que vous aviez précédemment copiée.

Exécutez la macro.

On vous demande de choisir une cellule. Prenez n’importe laquelle.

Vous disposez maintenant de toutes les données contenues dans le tableau dans un format lisible par Google Motion Charts. Mettez les 3 colonnes obtenues dans le presse-papier.

5. Mettre le tout dans Google Docs

Créez maintenant un Google Spreadsheet via Google Docs. Copiez-y les 3 colonnes obtenues à l’étape 4, puis renommez les en-têtes.

Répétez l’étape 4 pour chaque série de données. Attention, ne copiez que la colonne de droite (plus besoin du nom du pays ou des années ces coups-ci). Si vos données sont bien séléctionnées, toutes les colonnes s’emboitent correctement.

Dans cet exemple, j’ai rapporté les données sélectionnées au nombre d’habitants dans Excel avant de les copier dans la Google Spreadsheet. Les ordres de grandeur des unités (savoir si on compte en tonnes ou en millions de tonnes, par exemple) importent peu puisqu’on va s’intéresser aux relations entre les séries et à leurs évolutions.

6. Réaliser le Motion Chart

Sélectionnez toutes les données et cliquez Insert/Gadget

Vérifiez que la plage de données sélectionnée correspond bien à l’ensemble, puis cliquez sur Apply and close.

7. Et voilà!

Votre Motion Chart est prêt à être embeddé sur votre site! (retrouvez mon fichier ici)

Dans le cas présent, on constate en jouant avec le graph que les émissions de CO2 par habitant ne dépendent pas vraiment du nombre de voitures ou des voyages en train. Au contraire, seul le PIB semble déterminer vraiment le niveau d’émissions.

Néanmoins, si vous regardez les pays anciennement communistes, vous constaterez que leurs émissions de CO2 par habitant n’ont pas augmentées malgré une croissance du PIB par habitant. Preuve qu’on peut s’enrichir sans forcément émettre plus de gaz à effet de serre.

__

Crédit Photo CC Flickr : 96dpi.