Conférence : DATA, DESIGN, CODE

Shirley Wu

Je partage ci-dessous mon expérience personnelle sur la conférence de Shirley Wu, indépendante en visualisation de données.

Quelques conseils...

J’ai appris beaucoup de choses nouvelles en regardant cette conférence, Shirley Wu m’a appris 5 leçons  importantes sur la visualisation des données.

La créativité

D’abord, il faut être curieux et créatif avec le rassemblement des données. Dans son projet " An interactive visualization of every line in Hamilton ", elle s’est basée sur la comédie musicale " Hamilton " et elle a analysé et filtré les paroles pour que son design soit créatif. On peut voir les proportions des paroles en fonction des acteurs, des relations entre eux, etc.

L'analyse

Ensuite, il faut être sûr de bien explorer les données avant de se lancer dans le design. En effet, dans son projet " 4 years of Vacations in 20,000 colours ", elle a réuni 4000 photos de vacances et a pris le temps d’analyser différentes choses : les couleurs, les dates, … et de choisir une composition graphique qui irait bien avec ces données.

Les métaphores

Comme troisième leçon, elle nous dit d’utiliser des métaphores ainsi qu’un design visuel(les) pour que cela soit plaisant. Son projet " Bussed out " est un bon exemple car ses données de base ont été transformées en points animés et en courbes. C’est important d’utiliser des métaphores visuelles comme celles-ci car cela permet à l’utilisateur de comprendre plus facilement.

Les formes

Il faut également s’aider du SVG et de la trigonométrie pour créer des formes originales. Avec son projet " Film flowers ", elle s’est beaucoup amusée avec le SVG pour recréer ces fleurs. Les caractéristiques de ces fleurs ont toute leur importance : la couleur, la taille, la forme des pétales ou le nombre de pétales.

Les librairies JavaScript

Finalement, elle conseille de combiner D3 avec " Vue " et " Greensock " pour avoir un code plus efficace. D3 est une bibliothèque JavaScript, elle l’a utilisé pour créer ses échelles et ses formes dans son projet " The seasonality of box office hits " ainsi que son mode brush qui permet de filtrer les données. " Vue " et " Greensock " sont à utiliser en parallèle et permettent moins de lignes de code et un développement plus rapide. C’est grâce à eux que l’on peut permettre des interactions avec différentes parties de la page.

Envie de lire d'autres résumés ? Voici ce que mes camarades en pensent :

photo de Shirley WuShirley

Photo de Shirley Wu - frontendmasters.com