Design web & mobile

Niveau de vie au Royaume-Uni en 2013

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

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.

La volonté de relever un défi

1-INZTasjbxGxOnOiGnoTXoQ

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

1-FE20eDvVYXKuA53aVu0IHg

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

1-WNduCLB4g1wGUe-yBl-qBw

Etape 3: Réfléchir pour mieux agir

1-B43afpz-Qes8Va9pFC9OAg

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

1-YASp9a9JE3hvB4Km6vcinA

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

1-Pdnp8tJMP0rT3MW4n8X_Ug

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.

1-pbOi8BOHBiyPaNM4YGh0yg

1-9EJdBazPMEtfA9DLvxrUfQ

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”

Un workshop

Et ce workshop alors ?

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.

     Projet au hasard