Mon expérience
Data visualisation, c’est quoi ?
Shirley Wu travaille en tant qu’indépendante dans la visualisation de données, c’est-à-dire une représentation graphique des données. Cela permet aussi de distinguer plus facilement les formes grâce à des jeux de couleurs et d'autres procédés visuels.
Durant sa conférence, elle donne ces conseils afin de créer une bonne visualisation de données. En voici cinq que j’ai appris tout au long de cette présentation.
À la recherche des données
Pour commencer, il est important d’être curieux et créatif lorsque l’on collecte des données. Dans son exemple, elle nous montre son projet sur la comédie musicale " Hamilton " pour laquelle elle a analysé tous les dialogues et les paroles afin de les trier par acteur pour en faire un graphique cohérent.
Ne pas sauter les étapes…
« Chaque chose en son temps et un temps pour chaque chose »
— Emmanuel Buriez
Ensuite, il faut s’assurer d’explorer les données avant de commencer à faire le design. En effet, dans son projet " 4 years of Vacations in 20,000 colours " , elle a d'abord récolté, puis analysé les données (les couleurs principales, l’heure et le jour dans ses photos) et après seulement elle a réfléchi à la manière la plus optimisée d’afficher ces informations dans un graphique.
Les métaphores visuelles ?
Il ne faut pas hésiter à utiliser des métaphores visuelles et de design pour que l’utilisateur ait plus de plaisir à regarder le graphique. Effectivement, les métaphores visuelles sont une manière de faire comprendre ce que l’on veut exprimer avec des concepts familiers comme l’ampoule allumée qui exprime une idée,… Et toutes ces métaphores permettent à l’utilisateur une meilleure compréhension du graphique.
Le SVG, ça change tout !
Dans un projet, il est fortement conseillé d’utiliser du SVG et de la trigonométrie pour créer des formes originales et simples. Dans son travail sur " film flowers " , elle emploie différentes couleurs, tailles, pétales de fleurs pour représenter des films du box-office.
Coder à la vitesse de la lumière !
Enfin, il est utile de combiner plusieurs libraires de Javascript tels que D3, Vue et Greensock pour que le codage soit plus efficace et rapide :
- D3 : Traduit les données numériques sous une forme graphique et dynamique;
- Vue : Fait la même chose que D3 mais corrige les défauts de celui-ci;
- Greensock : Permet de faire des transitions et des animations à plusieurs étapes.
Nos expériences
Les liens vers la liste des résumés personnels des membres de mon groupe :