Making off et enseignements du Hackaviz 2018

https://twitter.com/edithmaulandi/status/976860257510182915

Parce que ça c’est la fin, mais que le processus avant est beaucoup moins simple, voici une rétrospective des étapes par lesquelles je suis passée pour réaliser ma contribution.

Loin d’être la manière de faire, c’est plutôt un partage de ce que j’ai testé, appris, ce que je retiens de cette expérience, en m’aidant aussi des autres réalisations du Hackaviz 2018.

J’y ajoute aussi des bonnes pratiques de la visualisation de données que j’ai récolté par ailleurs, en vous donnant la liste des ressources à la fin. En espérant que vous en apprendrez plus !

Contexte :

Au programme de cet article :

Étape 1 — Explorer les données et y trouver du sens, une histoire à raconter

Étape 2 — Trouver la meilleure façon de représenter cette histoire

Et un petit résumé visuel à emporter, on ne se refait pas :)

C’est parti !

https://giphy.com/gifs/adventure-latin-flinch-VGG8UY1nEl66Y

Étape 1 — Explorer les données et y trouver du sens, une histoire à raconter

Ou l’art subtil de trouver un angle d’attaque, un message à transmettre à votre audience.

Avec des outils : byebye Google Sheet — hello python & pandas

Et oui malgré ma formation technique, mon outil de prédilection quand je m’attaque à une dataviz reste Google Sheet. Dans une première phase d’appropriation les données, je peux facilement bidouiller et explorer rapidement et visuellement.

Mais ça c’était avant de devoir explorer un jeu de données de presque 13 Mo. C’était l’occasion parfaite pour passer au niveau supérieur.

Sans forcément connaître en détail les spécificités et avantages des autres outils possibles, je me suis orientée vers python (dont j’avais quelques bases) et la librairie pandas (dont j’avais entendu parler).

Amis fans de R et/ou de python+pandas et autres, partagez selon vous dans quels cas et pour quels objectifs ces outils sont chouette 👋

Il y a trois moments où je me suis un peu cassé les dents dans cette étape :

Il y a des articles très bien qui explique les bases de cette librairie comme ici. Et partout, partout dans les tutos on voit ce que contiennent les DataFrames et comment générer des informations ou réaliser un graphique :

https://www.shanelynn.ie/using-pandas-dataframe-creating-editing-viewing-data-in-python/

Ce qui est quand même super méga trop pratique hein. Mais il faut le temps de comprendre que ça ne ne passe pas dans ta console. (Quoi je suis longue à la détente ? Noooon).

Très grosso modo, c’est une application web que l’on peut utiliser en local qui permet de combiner blocs de code exécutable (avec un interpréteur python) et autres contenus (texte, images, graphs ..). Et qui permet entre autre de visualiser nos super DataFrames.

Je n’ai pas encore bien compris la différence entre Jupyter Notebook et le nouveau venu Observable : les deux servent à coder en petit bouts, voir le résultat, explorer et expliquer à priori ? Ensuite peut-être pas avec les même fonctionnalités, technos, langages (python+R+Julia vs JS) et autres.

Les connaisseurs partagez vos lumières: Jupyter Notebook vs Observable ! 👋

C’est bien expliqué ici, on peut “débobiner” notre JSON avant de le charger dans une DataFrame.

En y repensant plus tard, j’aurais carrément pu m’affranchir de ce problème en explorant sur les données au format CSV et économiser du temps au départ sur l’exploration.

À la limite j’aurais pu enrichir le jeu de données au format geojson et pour l’exploiter directement ensuite avec d3.js. Je l’ai finalement fait directement dans le code, ce qui ne doit pas être la meilleure pratique (préparer les données strictement nécessaire en amont peut faire gagner un peu à beaucoup de temps de chargement !).

Pour deux sous-parties avec chacun un sous-ensemble de données, j’ai généré des fichiers csv ou json beaucoup plus légers.

Pour plus d’astuces et autres besoins spécifique, je vous conseille Chris Albon qui a réalisé plein de mini-tutos sur tous les cas d’usages possibles et imaginables je crois.

Non, non, je n’ai pas passé 2 ou 3h à visualiser l’évolution de la population par département au global et par métropole avec des rectangles animés qui ne m’ont pas du tout servis ensuite. Je vous ai déjà dit que D3 c’est génial mais que tu construis tout et que ça prends du temps ? Ah non c’est dans l’étape suivante :)

Mais j’ai finalement trouver comment pallier à ça dans une certaine mesure : Dessiner c’est gagné !

Ce qui m’aide toujours dans ce genre d’exercice et tout au long du processus de création, c’est dessiner toujours plus pour m’approprier les données et leur représentations possibles, avant (idéalement) de coder quoi que ce soit.

Toujours plus de dessins !

Construire du sens : tester, représenter et chercher plus loin que la data

Parce qu’au delà des outils qu’on utilise, le but c’est trouver quelque chose à raconter.

Les données, des fois c’est un peu brut de décoffrage et pour y trouver du sens il faut faire l’effort d’en comprendre le contexte et les implications. Donner un cadre si on veut.

Ce n’est pas magique, cela se fait au fur et à mesure, avec des essais et des tentatives. Mais ça peut apporter beaucoup plus que les données “brutes”.

La contribution qui m’a le plus marqué sur ce point est celle-ci, particulièrement sur la dernière partie qui montre la population moyenne nécessaire à une première installation pour chaque type de commerce. Cela leurs a permit d’identifier ensuite les communes qui manquent de commerces malgré une population importante.

C’est une super utilisation conjointe de 2 caractéristiques de chacune des communes (le nombre d’habitants et le nombre de commerces par type) pour apporter un sens et de la valeur supplémentaire.

https://twitter.com/G_Devailly/status/975690915061927936

J’ai de mon côté voulu comprendre la dynamique de population entre 1968 et 2014, en catégorisant chaque commune selon son nombre d’habitants, afin de rendre l’évolution globale plus digeste.

J’ai pas mal itéré pour trouver la bonne combinaisons de catégories (6 au total selon l’INSEE, combiné en 4 pour plus de lisibilité). J’ai volontairement laissé les villages et les métropoles seules pour appuyer le message sur ces groupes “extrêmes”.

Avec une carte, on voit mieux la différence de répartition entre ces deux catégories, en utilisant la version finale de la visualisation pour l’exemple :

https://emaulandi.github.io/occitanie-hackaviz2018/

Et petit à petit, pour mieux cerner la dynamique de population globale, j’ai laissé de côté la catégorie pour me concentrer sur l’évolution de population entre 1968 et 2014 pour chaque commune. J’ai ajouté un nouvel élément : le taux d’évolution de la population entre ces deux dates. Et cet élément révèle qu’outre le type de commune, celles qui ont le plus augmentée sont celles aux abord des grandes villes et métropoles.

A la fin de cette première étape, j’avais identifié les messages clés que je voulais transmettre :

Maintenant y’a plus qu’à ! 😅

En faisant attention au contexte et à l’éthique : ne faites pas dire à la data tout et n’importe quoi

Parce que le contexte et l’interprétation reste clé, demandons-nous régulièrement si ce qu’on veut raconter est cohérent : as-t-on l’ensemble des informations ? qu’est-ce que le contexte peut nous apporter pour mieux comprendre ?

Cette réalisation a prit le parti d’étudier les cas où on peut faire “mentir” les données. On le voit particulièrement pour le nombre d’entreprises numériques : dans le dictionnaire des données, on nous précise qu’on a le nombre d’entreprises toujours en activité pour chaque commune.

À partir de cette information, on peut comparer le nombre actuel d’entreprises existantes par localisation. Par contre s’aventurer à raconter une histoire sur l’évolution de leur nombre devient dangereux. On ne possède qu’une partie de l’information : combien d’entreprises ont fermé au cours du temps ? Mystère et boule de gomme

Étape 2— Trouver la meilleure façon de représenter cette histoire

Ou l’art subtil de faire passer ses messages, de raconter son histoire efficacement et durablement

Avec des outils : D3.js ou pouvoir tout créer dans les moindres détails

J’ai choisit depuis un moment D3.js pour faire des dataviz, pour sa capacité à tout créer et pour le Data Driven dans les 3 D. Ça demande de l’investissement pour se l’approprier, mais la liberté de créer est géniale, même sans être expert.e.

En révisant un peu sa géométrie, en comprenant la jointure de données, on peut relativement facilement créer un graphique totalement nouveau ou avec des spécificités difficiles à implémenter avec un outil plus fermé.

Le pendant c’est d’y passer plus de temps que sur Tableau ou autre outil quand on démarre. Industrialiser des fichiers javascript types, ou des types de graphiques est une trèèès bonne idée pour gagner du temps plus tard !

J’ai été époustouflée par la facilité de créer une carte (et avec très peu de lignes de code), à partir du moment où l’on dispose des contours fusionnées avec des données dans un fichier geojson par exemple (merci l’équipe orga 🙏).

La méthode que j’ai utilisé a été de créer un graphique pour chaque message clé, et de les combiner ensuite pour raconter l’histoire, avec quelques zones de texte pour expliciter où je voulais emmener les “lecteurs”.

En suivant les 3 composantes clés à toujours garder en tête : Attention, Compréhension et Implication

C’est facile de se perdre dans des considérations techniques, dans l’implémentation, dans le doute du graphique à utiliser. J’ai béni l’internet quand je suis tombée sur Lisa pendant le hackaviz 🙏 (et j’ai béni Lisa aussi).

Lisa Charlotte Rost explique parfaitement les 3 objectifs clés d’une dataviz. Cela permet de toujours se référer à ces points lors de la réalisation et de garder le cap.

https://lisacharlotterost.github.io/2017/03/10/why-do-we-visualize-data/

Vous pouvez retrouver l’ensemble des slides et l’article ici, et pour les plus pressés, la version audio par le podcast DataViztoday est là :

J’ai essayé d’identifier des moyens d’arriver à ces objectifs avec des exemples :

🇦 Attention et beauté

La première impression et l’élégance générale contribue à la mémoire que l’on garde d’un visuel, et d’une dataviz aussi. Parmi toutes les contributions, celle qui dépasse largement les autres à mon avis est celle-ci :

https://twitter.com/Jder00/status/976059254149926912

C’est clair, concis, élégant. On se rappelle du visuel après coup. Ce qui est dommage, c’est qu’on ne nous dit pas et montre pas de but en blanc d’histoire à propos des données. Pour identifier quel est le département qui a la moyenne d’âge la plus élevée par exemple, on doit tous les parcourir et noter l’information.

🇧 Compréhension

A partir de l’histoire que vous voulez raconter ou du message que vous voulez faire passer, il y a des choix à faire pour faire passer le plus rapidement et le plus simplement votre idée.

http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html

Pour illustrer ce point, dans ma dataviz j’ai essayé de représenter la tendance d’évolution de la population en terme de proportion au cours du temps par catégorie (en m’inspirant largement du slope graph décrit ici) :

https://emaulandi.github.io/occitanie-hackaviz2018/

L’avantage de ce type de graphique pour moi est de se focaliser sur la tendance seulement : “ça monte ou ça descend” est associé à une signification très rapidement.

Toujours pour faciliter la lecture, mettre en avant des explications intermédiaires permet de transmettre petit à petit des messages et rendre le tout plus digeste. C’est comme rajouter des marches vers la compréhension finale.

Et il y a des gens trop géniaux dans la vie qui créent des outils pour faciliter cela avec D3 : http://d3-annotation.susielu.com/#examples

Keep It Simple Stupid : du choix des couleurs, au nombre de catégories, à la police, et à la disposition et au choix des éléments, rendez ça simple, clair et et concis. À bas la pollution graphique.

Comment encoder visuellement ses données et les disposer pour une compréhension rapide ? La base de la perception graphique et les principes de Gestalt sont tes amis !

https://twitter.com/pablostanley/status/974303621092225024

🇨 Implication

Ici pour mieux transmettre l’idée d’évolution au cours du temps et faire du suspense par la même occasion, l’affichage des données s’anime :

https://emaulandi.github.io/occitanie-hackaviz2018/

Parenthèse implémentation avec D3.js : Je ne suis pas sûre d’avoir fais le tour d’internet mais presque. On peut animer l’évolution de ce qu’on veut, des rectangles, des ronds, des lignes, mais à priori pas des “stacked area chart” (graphiques en aires superposées ?) comme ici.

Alors merci à StackOverflow et au malin qui m’a donné l’astuce du siècle. Ce n’est pas le graphique qui se dessine au fur et à mesure mais un rectangle blanc dont l’aire réduit au fur et à mesure.

https://giphy.com/gifs/bill-nye-cool-story-unenthused-3o6ozy0tqSe2DLhovm

Un autre moyen d’avoir plus d’impact à mon avis :

La seule dataviz du hackaviz qui a proposé quelque chose sur cet aspect est celle-ci. Principalement exploratoire, la parti pris de donner la possibilité de voir comment sa commune / sa région se compare aux autres est super intéressante !

https://tnidelet.shinyapps.io/HackVizOccitanie/

Et à combiner selon ses objectifs

Pour moi, le plus important est de créer de l’impact, de l’engagement à partir d’une dataviz. Que la personne qui la voit se rappelle des messages clés parce qu’elle les a vraiment intégré grâce au visuel. Et que cela la pousse à agir, idéalement.

Et pour cela, arriver à faire comprendre et impliquer est clé. L’attention et la beauté sont un moyen pour y arriver, pas un but en soi (mais complètement négligées, attention et beauté peuvent complètement se retourner contre cet objectif principal).

Je suis convaincue qu’associer un message lisible et la représentation des données qui illustre au mieux ce message est la bonne formule pour y arriver.

C’est ce que je pense avoir réussit à faire dans une certaine mesure avec la partie ci-dessous. Mon ressentit est sûrement biaisé, mais je n’ai pas pu m’enlever de la tête la périurbanisation après l’avoir visualisée comme cela 😂

https://emaulandi.github.io/occitanie-hackaviz2018/

Mon idéal serait de clôturer une dataviz avec un appel à agir pour pousser l’implication au maximum, si c’est pertinent. J’avoue que je suis restée un peut courte là dessus pour cette dataviz.

Dans une perpétuelle logique d’apprentissage et d’amélioration

Comme tout, l’apprentissage et l’amélioration viennent avec la pratique, réalisons toujours plus de dataviz ! Et cela peut être intéressant aussi de se retourner et tenter de regarder ses projets passés avec un œil critique (le sien ou celui de quelqu’un d’autre).

Dans cette réalisation, j’aurais pu améliorer 4 choses (peut-être une v2 un jour ?) :

https://emaulandi.github.io/occitanie-hackaviz2018

Au départ, c’était une tentative pour montrer la corrélation entre deux variables de manière plus digeste qu’un diagramme de 4 500 points. J’ai voulu montrer la répartition des communes par combinaisons de valeurs de 2 variables.

J’ai beaucoup galéré pour trouver des couleurs qui permettent de “bien” distinguer le nombre de communes. À refaire, je le ferais sous forme de rond dont la couleur & le rayon transcrivent le nombre de commune pour en faciliter la lecture.

Mais peut-être qu’un format plus classique de nuage de points avec une courbe de tendance marche tout aussi bien, et qu’il ne faut pas chercher midi à quatorze heure. Ou le moment d’aller se référer à ses objectifs de dataviz comme Lisa :)

A garder en tête pour les prochaine réalisations ! N’hésitez pas à partager vos retours aussi. Mes objectifs sont aussi de continuer à monter en compétences sur l’analyse de gros volume de données et sur le développement web pour un meilleur rendu général 💪

🙌 Vous avez aimé, appris des choses ? Je vous invite à “clapper” (ce qui revient à cliquer sur le bouton avec des applaudissements) et / ou partager directement avec un ami :)

😬 Vous avez des choses à rajouter, un avis différent ? Racontez-nous ça en commentaire :)

In love with discovering and experiencing new universes and sometimes writing about it to share.

Get the Medium app