Datavisualisation

Représentation du niveau de vie moyen au Royaume-Uni en 2013

Olivier.VT
Mar 11, 2015 · 5 min read

Réalisation d’une datavisualisation montrant le niveau de vie moyen au Royaume-Uni.
Nous représentons le revenu moyen, la part consacrée aux taxes ainsi que la somme moyenne restante en fin de mois et pour diverses tranches d’âges.

Le tout est disponible sous forme interactive et d’une affiche taille A1.

Image for post
Image for post
un tweet qui suscite notre intérêt

Nous sommes quatre participants, ayant comme nom de groupe “Vizual Cowdeur” (petit clin d’oeil à @VandyVincent et sa présentation consacrée à l’exploitation et à l’objectivité des jeux de données).

Le choix de la réalisation de cette datavisualisation repose principalement sur le concours lancé par la Banque Nationale d’Angleterre, mais également sur l’envie de vouloir nous mesurer à un jeu de donnée imposant.

Un jeu de donnée qui doit visuellement prendre vie sous forme d’une datavisualisation et ce dans un délai assez court — 14 jours, le temps d’un workshop sur lequel nous reviendrons.

Outre l’idée de vouloir réaliser un challenge, nous avons aussi l’ambition de faire passer un message.
Nous avons donc décidé de nous adresser à tout individu qui chercherait à avoir une vue d’ensemble concernant le niveau de vie moyen dans les différentes régions du Royaume-Uni.

Notre méthode de travail

Etape 1

Pistes de réflexion

Nous avons d’abord commencé par choisir un jeu de données parmi les six proposés; pour le parcourir et chercher les thématiques intéressantes à exploiter et regarder les corrélations possibles entre elles.

Sur base de ce jeu de données et de calculs nous avons ensuite regardé à la meilleure façon de représenter ces données en graphiques.

Etape 2

Recherches et croquis

Image for post
Image for post
Les premiers croquis voient le jour.

Sur base de nos diverses réflexions nous avons commencé les premiers croquis et avons itéré jusqu’à obtenir un résultat qui nous plaise.

Des croquis nous sommes passé aux premiers tests codés en faisant le choix de nous servir de la bibliothèque javascript D3.js et canvas.js

Image for post
Image for post
Itérations et mise au propre de nos idées.

Etape 3

Réfléchir pour mieux agir

Image for post
Image for post
Réflexion autour du graphique principal

L’ambition visuelle de notre datavisualisation mêlée à l’utilisation de la bibliothèque javascript D3.js nous a obligé à travailler à plusieurs et à réfléchir ensemble à la manière de donner vie à notre graphique.

En parallèle à cela nous réfléchissions déjà à l’exploration de données dans les différentes régions.

Etape 4

Réfléchir à l’exploration

Image for post
Image for post
Réflexion sr l’exploration des données dans les régions

Notre visuel principal regroupe différentes données (revenus moyen, taxes, tranches d’âges, etc.) et donc différentes comparaisons.

Le fait de regrouper le tout, peut apparaître comme compliqué à analyser. Nous avons donc réfléchis pour que l’utilisateur puisse aller plus loin dans l’exploration de ces différentes données.

Nous avons dès lors pensé à des graphiques moins chargés et qui sont familiers pour bon nombre d’entre nous (graphique en “camembert” ou encore “en barre”).

Identité graphique
et guide visuel

Etape 1

Recherche d’un nuancier

Image for post
Image for post
Un premier résultat concluant

Sur base des premiers résultats générés à l’aide de D3.js nous avons continué dans cette voie et avons commencé les premières recherches de nuancier.

Au final, nous avons fait le choix de reprendre les couleurs présentes sur le site de la Banque Nationale d’Angleterre.

Image for post
Image for post
Un nuancier à l’image de la banque.
Image for post
Image for post
La charte graphique finale

Etape 2

L’expérience utilisateur

Notre datavisualisation forme un tout. Une expérience visuelle via notre graphique principal et une expérience plus immersive avec l’exploration des données.

De par la complexité du graphique et du choix de la palette de couleurs nous nous sommes penchés sur les utilisateurs pouvant ressentir un problème d’accessibilité lors de sa consultation.

Pour pallier à cette éventuelle gêne nous avons prévu deux fonctionnalités :

  1. La possibilité de modifier soit même le nuancier.
  2. Une option permettant un passage en mode “jour/nuit”

L’ensemble du résultat est visible sur http://jeremiejacques.be/dataviz06/

Un workshop

#datavisaj

Nous en parlions au début, cette participation au concours s’articule autour d’une participation au workshop #datavisaj de L’ESIAJ (Etudes Supérieures d’Infographie Albert Jacquard) à Namur — Belgique.

Outre le fait qu’il s’agisse d’un travail de groupe c’est aussi un moment où
on est amené à se dépasser, confronter nos idées et dans pas mal de cas sortir de notre zone de confort.

Le workshop est cependant vécu par chacun de manière différente :

Jérémy : @jeremycoel

J’ai personnellement beaucoup appris dans l’analyse de données et dans la manière de les traiter. J’ai aussi pu découvrir D3.js et m’améliorer en javascript. L’ambiance du groupe a permis une bonne compréhension et une bonne cohésion.

Jérémie : @Jeremj0

Ce workshop m’a permis de confirmé mon attrait pour le langage javascript. L’ambiance dans le groupe et la vision d’ensemble commune permettait une communication plus simple.

Laura : @Loneska

Ce workshop m’a permis d’expérimenter tout les aspects de la réalisation d’un projet. J’ai pu réfléchir à l’expérience utilisateur comme m’amuser avec d3.js ou encore débugger. Je me suis sentie utile à tout les niveaux et j’ai pu rapidement venir en aide lors des moments plus compliqués de la réalisation (récupération ajax, json, etc) J’ai trouvé chaque membre du groupe dynamique, compétent et motivé cela a contribué à une ambiance dans laquelle j’ai aimé évoluer et m’investir.

Olivier

Ce workshop m’a pas mal appris quant à la manière de synthétiser l’information. Mais également m’a poussé à chercher à atteindre le meilleur en modifiant et en itérant à plusieurs reprise une même étape du projet.Et surtout de me rendre compte de l’importance de chaque étapes. Il m’aura également permis de me familiariser encore plus avec le javascript.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app