class: center, middle, inverse, title-slide # Visualiser les chiffres ## rigueur - lecture - message ### Sylvain Lapoix, datajournaliste #DATAGUEULE / Datactivist ### Ensad, 27 juin 2018 --- layout: true <div class='my-footer'><span>Ensad / dessin de presse - dataviz - 27/06/2018</span> <center><div class=logo><img src='https://github.com/datactivist/slides_datactivist/raw/master/inst/rmarkdown/templates/xaringan/resources/img/fond_noir_monochrome.png' width='100px'></center></span></div> --- ### Commençons par un exercice de visualisation -- Selon l'Organisation internationale des migrations, 3108 migrant·e·s ont trouvé la mort ou disparu durant le premier semestre 2017. -- - 2259 en Méditerranée - 225 en Afrique du Nord ; - 148 à la frontière américano-mexicaine ; - 136 en Afrique subsaharienne ; - 103 dans la Corne de l'Afrique ; - 91 dans les Caraïbes ; - 45 en Asie du Sud-Est ; - 34 en Amérique centrale ; - 33 en Europe ; - 31 au Moyen-Orient ; - un·e en Amérique du Nord ; - un·e en Asie du Sud ; - un·e en Asie de l'Est. --- ### Une autre visualisation .center[] .footnote[*Source* : [The Guardian, 11/09/2017](https://www.theguardian.com/world/2017/sep/11/migrant-death-toll-rises-after-clampdown-on-east-european-borders)]. --- ## Que s'est-il passé ? - Notre cerveau a tenté de se .red[**représenter**] les données qui nous étaient fournies. Il a utilisé ses capacités *d'imagination*. -- - La carte propose une .red[**représentation**] visuelle des mêmes données. -- - Cette représentation s'avère cependant plus fidèle, plus lisible et plus éloquente. Elle fait le travail qu'a tenté d'accomplir notre cerveau mais en y ajoutant des précisions, une clarté et un message hors de sa capacité de traitement. -- - La datavisualisation agit donc comme un .red[**outil cognitif**] pour nous aider à comprendre les données. -- - C'est qu' *Alberto Cairo* nomme la .red[**valeur fonctionnelle**]¹ de la datavisualisation. .footnote[[1] Cf. *The functional Art*, 2012, Alberto Cairo ; *The truthful art*, 2016, Alberto Cairo. Toutes les références [sur son site](http://www.thefunctionalart.com/)]. --- ## Encodage / Décodage - La visualisation de la donnée consiste donc en un .red[**encodage**], c'est-à-dire une "conversion" d'un format à un autre. -- - En l'occurence, le passage d'une forme brute non interprétée (les *data*), à une forme raffinée interprétée (la *dataviz*). -- - Dans son usage journalistique, la mise en forme implique également un **angle**, autrement dit le *message* dont l'image doit être le vecteur. -- - Nous avons donc trois éléments constitutifs de la démarche : 1. des données ; 2. une mise en forme ; 3. un message --- ### Trois qualités d'une dataviz  --- class: inverse, center, middle # Premier objectif : # la rigueur --- ### Offrir à comprendre la valeur - La dataviz étant un encodage, elle doit pouvoir se passer des données qu'elle représente pour leur substituer des équivalences visuelles. - L'encodage doit permettre : 1. de comprendre **la nature** des données ; 2. d'apprécier **le rapport** qu'elles entretiennent entre elles ; 3. de saisir les points saillants et **phénomènes** clefs. - Chacun de ces aspects repose sur des caractéristiques visuelles liées à des représentations. --- ### Expliciter la nature de la donnée .pull-left[ ([source](https://www.nytimes.com/interactive/2018/03/19/upshot/race-class-white-and-black-men.html))] .pull-right[L'encodage doit permettre de saisir immédiatement le sens de chaque élément : où sont les points de données ? Que représentent-ils individuellement / collectivement ?] --- ### Présenter les interactions L'accumulation de données doit se faire de manière à décrire les rapports qu'elles entretiennent entre elles : rupture, continuité, proportionnalité, etc. Le choix du visuel induit de manière implicite ces rapports (ou bien peut induire en erreur).  --- background-image: url("img/DataVizCatalogu.png") --- ### Décrire un phénomène Un mauvais choix graphique peut fausser la représentation de la donnée en ne donnant pas à constater le phénomène qu'elles permettent de décrire. .pull-left[ ([source](http://www.geologyin.com/2015/11/network-analysis-shows-systemic-risk-in.html))] .pull-right[ ([source](http://www.visualcapitalist.com/interactive-mapping-flow-international-trade/)) ] --- ### La granularité Le niveau de précision minimale d'une donnée (aussi appelé **.red[granularité]**) peut modifier de façon radicale la lecture d'une phénomènne. Dans le cas d'une carte, le choix de l'échelle peut mener à la généralisation de phénomène extrêmement circonscrits (ou inversement). [Comme le montre cet excellent exemple sur le blog de Datawrapper](https://blog.datawrapper.de/weekly-chart-europegrowth/) .pull-left[  ] -- .pull-right[  ] --- ### Où est mon zéro ? Le choix de l'échelle est aussi celui de son étendue. Il peut être tentant pour amplifier un phénomène d'en augmenter l'amplitude artificiellement en réduisant l'échelle. L'exemple le plus courant est le "data-does-not-start-at-zero". Si ce choix peut se justifier, il est bien souvent utilisé comme méthode de manipulation. .pull-left[] .pull-right[] .footnote[ ([source](http://owni.fr/2011/10/05/2011/01/25/plus-la-delinquance-baisse-plus-la-violence-augmente/index.html)) ] --- class: inverse, center, middle # Deuxième objectif : # la lisibilité --- ### Une question d'arbitrage L'allegorie de la carte parfaite "à l'échelle 1:1" de Borgès donne une bonne idée du problème : .pull-left[ *En cet empire, l'Art de la Cartographie fut poussé à une telle Perfection que la Carte d'une seule Province occupait toute une ville et la Carte de l'Empire toute une Province. Avec le temps, ces Cartes Démesurées cessèrent de donner satisfaction et les Collèges de Cartographes levèrent une Carte de l'Empire, qui avait le Format de l'Empire et qui coïncidait avec lui, point par point.* ] .pull-right[  ] --- ### 1er risque : "l'overplotting" En statistique, le terme "overplotting" se réfère à l'effet produit par l'intégration d'un trop grand nombre de points de données dans un graph le rendant illisible. *Note : c'est un vrai terme de stat, vous pouvez l'utiliser pour vous la péter.* -- Exemple : une heat-map qui ne sert à rien ([source](https://twitter.com/i/web/status/1009836270376366081))  --- ### 2è risque : "l'overcomplicated" L'autre risque courant est de multiplier les dimensions et axes de lecture jusqu'à rendre le graphique incompréhensible. -- *Note : ce terme n'a rien d'officiel, ne l'utilisez pas pour vous la péter.* -- .center[Ex. : **démerdez-vous avec ça !**] .center[] --- ### 3è risque : l'excès d'esthétisme La tentation de mêler précision et esthétique peut produire de très beaux graphs ... trop compliqués pour être compris du premier coup. -- Ex. : un super papier, un très beau visuel mais un concept tordu ([source](https://pegasusdata.com/2012/11/25/opendata-copinage-au-gouvernement-quand-lanalyse-de-reseau-vient-en-aide-au-journalisme-dinvestigation/))  --- ### Laissez parler les données Les fioritures peuvent constituer des distractions : quand les données sont claires, autant leur laisser le champs libre. .pull-left[] .pull-right[] .footnote[ ([source](https://www.tableau.com/about/blog/2016/5/5-tips-effective-visual-data-communication-54174)) ] --- ### Choisir ses référentiels Plutôt que l'abstraction, il peut être utile de s'approprier des motifs figuratifs et d'y encoder les données. -- Ex. : comment évoquer les compensations pour accidents du travail ? ProPublica a choisi l'anamorphose ([source](https://projects.propublica.org/graphics/workers-compensation-benefits-by-limb#))  --- ### Suivre une dynamique Ce qui rend un graphique lisible, c'est aussi la possibilité de s'y repérer "naturellement". Par exemple, en adoptant un référentiel spatial cohérent. -- Ex. : un cadran pour un phénomène décrit dans le temps ([source](https://www.wsj.com/articles/SB10000872396390444914904577617333130724846))  --- ### Sans message, l'image devient vaine Il peut arriver que la dataviz n'ait d'intention que décorative ou spectaculaire. Précise et lisible, elle devient un panneau vide de sens et de propos qui n'explicite rien du monde faute de choisir comment parler de son sujet. -- .pull-left[ Ex. : une "visualisation concrète de la dette française" qui n'a aucun sens ([source](http://www.slate.fr/story/92749/dette-publique-francaise-stade-de-france)) ] .pull-right[  ] --- class: inverse, center, middle # Troisième objectif : # l'éloquence --- ### Les points de repère La façon la plus simple de mettre en avant un message reste encore de l'expliciter : souligner des points saillants ou relever les infos clefs permet de guider dans la lecture. -- Ex. : Paris Match veille toujours à semer des focus ou à donner des clefs de lecture pour comprendre sa rubrique DataMatch ([source](https://askmedia.fr/blog/ask-media-pour-paris-match-ya-t-il-trop-daeroports-en-france/))  --- ### La symoblique comme message Le choix d'une représentation figurative allégorique plutôt que littérale peut constituer en soi l'angle d'une dataviz. Claire et bien choisie, la référence agit alors comme un sous-texte à l'image. -- *Je vous ai gardé une pleine page pour la suivante parce que je la trouve très belle dans le fond comme dans la forme.* --- Ex. : en botanique, les cernes ou anneaux de croissance désignent les cercles concentriques de la section d'un tronc d'arbre. Elles permettent de suivre l'évolution de l'arbre saison après saison ([source](https://twitter.com/i/web/status/1010012782253826048))  --- ### Décaler pour resituer Un matin en écoutant la radio, j'ai entendu pour la énième fois un cri d'alarme sur la fonte de l'Arctique. Avec mon collègue Nicolas Patte chez OWNI, nous nous sommes demandé pendant une journée comment "rafraîchir" ce propos alarmant qui n'alarme plus personne.  --- ### Décaler pour resituer 2 [Après moults essais](http://owni.fr/2012/09/28/bye-bye-banquise/index.html), nous avons réalisé qu'il nous fallait changer de perspective pour rendre le propos parlant. -- .center[] --- ### Permettre l'exploration Beaucoup d'informations visuelles précises et bien organisées peuvent aussi permettre l'exploration. Ex. : ce diagramme de Sankey sur l'invention des neurosciences réalisé par Moritz Stefaner pour Wired laisse découvrir l'émergence d'une nouvelle discipline ([source](http://well-formed-data.net/archives/331/neuroscience-infoporn))  --- ### Aparté : d'autres sens parlent Le message peut aussi passer par d'autres sens que la vue. L'ouïe peut être mobilisé. Ou, comme ici pour The Guardian, le toucher : mis "en relief", la liste des réfugié·e·s mort·e·s en tentant de rejoindre l'Europe frappe l'esprit avec une force renouvelée.  --- ### Une de mes dataviz préférées [Fewer helmets, more deaths](https://www.nytimes.com/interactive/2014/03/31/science/motorcycle-helmet-laws.html) (NYT, 31/03/2014)  --- class: inverse, center, middle # Merci ! Contact : [sylvain@datactivist.coop](mailto:sylvain@datactivist.coop) ou [@sylvainlapoix](https://twitter.com/sylvainlapoix) sur Twitter