Data Design Code

Shirley Wu

Lors de cette conférence Shirley Wu donne différents conseils sous forme de 5 leçons. Grâce à cette conférence, j’ai appris beaucoup de choses sur la façon d’aborder un nouveau projet et la transformation des données.

Le premier est d’être curieux et faire preuve de créativité dans la collecte des données. Avant chaque nouveau projet, trouver une inspiration et s’en inspirer tout au long du projet. Lorsqu’on regarde ses différents projets, on voit directement qu’elle est très créative avec ses données.

Le deuxième est de s'assurer d'explorer les données avant de commencer la conception, rassembler ses données, les consulter et les comprendre avant de commencer une esquisse, au risque de faire un début désastreux. L’étape de la compréhension des données est importante pour créer son design.

Le troisième est d'utiliser des métaphores visuelles et le design pour maximiser le plaisir. Les visualisations ne se limitent pas à attribuer le bon attribut de données aux bons canaux visuels. L’utilisation de métaphores aide le lecteur à comprendre plus rapidement des données sous-jacentes et ainsi comprendre une visualisation non-visuelle. Par exemple, Shirley Wu utilise des motifs de fleurs dans un de ses projets appelé “Film Flowers”, elle a donc utilisé ses données sur les différents box-office de superproductions qu’elle a représenté sous une forme créée en SVG.

Le quatrième, c’est de dessiner des formes avec les chemins SVG et la trigonométrie. Il faut une bonne compréhension de la courbe de bézier cubique. Le SVG permet des courbes parfaites et grâce à sa technique expliquée, on peut même coder soi-même les formes souhaitées. Comme expliqué précédemment, elle a utilisé le SVG pour créer des fleurs dans un de ses projets.

Le cinquième et dernier, c’est d'abord de combiner D3 avec ”vue” et ”greensock” pour un codage plus efficace. Ensuite, il faut collecter l’ensemble des données et les enregistrer dans une fonction de données pour suivre les modifications apportées par la suite à ces données. Le d3 traduit les données en données visuelles. “Vue” est un système de réactivité. “Greensock” fonctionne avec le d3 pour effectuer différentes animations au sein d’une même page.

Voici d'autres résumés :