English

Point trop n’en fautLes visualisations de données du New York Times

Benoît Böhnke

Diagrammes, cartes, graphiques, nuages de points et schémas peuplent abondamment les pages Web et imprimées des grands journaux. Par une intrication de signes, de couleurs, de textes, de pictogrammes et d’images, ces visualisations s’emploient à offrir au lecteur une approche didactique de l’information. Depuis le début des années 2000 et le développement de la mise en réseau des données (big data, open data, la presse s’est elle aussi emparée de ces nouvelles représentations statistiques. 

De l’émergence des graphics editors

Le New York Times, acteur emblématique du journalisme soucieux de proposer des formes éditoriales « innovantes » à son lectorat, a ainsi exploré les possibilités techniques offertes par le Web. Le quotidien américain s’est doté d’une équipe de production dédiée à cette activité, faisant alors émerger de nouvelles professions, à la croisée du design graphique et interactif, de l’analyse statistique, du journalisme et du développement informatique. Dénommés graphics editors (rédacteurs graphiques ou journalistes visuels), ces profils témoignent de la double compétence requise à l’élaboration de ces visualisations : un travail éditorial d’analyse des données conjugué à la réalisation d’une représentation graphique spécifique.

Pour répondre aux besoins techniques inhérents à la conception de ces représentations pensées pour le Web, certains graphics editors furent à l’initiative du développement logiciel d’outils de production dédiés. Mike Bostock a, entre autres, été à l’initiative de la bibliothèque JavaScript D3.js peu de temps avant d’être en poste au New York Times. Celle-ci offre un ensemble de fonctions permettant la mise à jour dynamique de la structure d’une page HTML suivant les données à représenter. Son excellente optimisation offre une grande réactivité d’interaction et une gestion des animations performante. 

La variété des exemples présentés sur D3js.org démontre l’étendue des potentiels offerts : le zoom permet l’accès à des strates d’informations multiples ; les filtres autorisent la sélection de sous-ensembles et la réorganisation dynamique des données ; l’animation rend possible la représentation de phénomènes dynamiques. Ces quelques modes d’interaction et d’affichage permettent au lecteur d’accéder à des volumes d’informations conséquents. Emblématique d’une forme de renouveau de la visualisation, la création de D3.js valut à Mike Bostock d’être décrit par le statisticien vedette Edward Tufte comme l’un des acteurs clefs de cette discipline.

Les écueils de la quantification

La production du New York Times en la matière tire logiquement parti de ces développements techniques. Dès le milieu des années 2000, le journal évolue vers des systèmes d’information exploratoires laissant à l’utilisateur le loisir de déambuler dans des jeux de données (data sets) vertigineux. Il convient toutefois de s’interroger sur l’approche principalement quantitative et non qualitative, de ces nouveaux modèles éditoriaux. 

En 2011, Kevin Quealy, graphics editor au New York Times, présentait lors d’une conférence au Walker Art Center 11 Kevin Quealy, « New York Times Graphics Department », Walker Art Center, The Gradient, 2 mars 2011, http://b-o.fr/quealy une sélection de projets publiés sur le site Web du quotidien. Parmi ces productions, l’article « How Different Groups Spend Their Day 22 Shan Carter, Amanda Cox, Amy Schoenfeld, « How Different Groups Spend Their Day », visualisation de données, Adobe Flash, The New York Times, 31 juillet 2009, http://b-o.fr/dataviz » propose au lecteur de représenter la proportion de temps consacrée à une série d’activités quotidiennes, selon une dizaine de caractéristiques comme le sexe, l’âge, la situation professionnelle ou la couleur de peau d’une population. Sans manquer de se féliciter, Quealy présentait ce qu’il considérait comme l’enjeu majeur de ce type de visualisation : concentrer un vaste ensemble de données dans un espace contraint. À grand renfort de boutons, l’utilisateur est invité à comparer un ensemble de graphiques statistiques. Une série d’infobulles déclenchées au survol du dispositif par le pointeur de la souris, déclenche l’affichage d’une série de précisions chiffrées, détaillant encore davantage l’étude. 

Si le projet remplit en effet les objectifs fixés par Quealy, il se cantonne ici à ne proposer qu’une lecture quantitative des données, sans analyse ni interprétation permettant d’en tirer une conclusion. Galvanisés par le potentiel exploratoire de ces dispositifs interactifs, les graphics editors semblent alors délaisser l’aspect analytique attendu d’un article de presse. Plus sophistiqués, certes, ces modes de représentation échouent donc à proposer une analyse critique de l’information et à élaborer une forme éditoriale intelligible. 

Petit problème : en 2016, le graphics editor Gregor Aisch révélait, lors de la conférence Information+33 Gregor Aisch, « Data visualization and the news », conférence donnée à Information+, Vancouver, Emily Carr University of Art and Design, 16-18 juin 2016, http://b-o.fr/aisch, que seuls 15 % des lecteurs du Times prenaient la peine de manipuler ces interfaces, un simple bouton semblant représenter un frein à la consultation. Non activées, ces productions restent à l’état d’objets graphiques muets, donc contre-productifs.

Expérimentations à tout va

De ce constat d’échec découlent d’autres formes interactives présumées plus engageantes. Dans sa série You Draw It, le Times propose un modèle d’article ponctué par des modules visuels contraignant l’utilisateur à interagir pour accéder au texte d’analyse. L’article « What Got Better or Worse During Obama’s Presidency 44 Larry Buchanan, Haeyoun Park, Adam Pierce, « You Draw It: What Got Better or Worse During Obama’s Presidency », The New York Times, janvier 2017, http://b-o.fr/draw » demande ainsi au lecteur d’élaborer des hypothèses sur l’évolution des taux de chômage, d’immigration ou de dépenses nationales pendant les années de la présidence Obama (2009-2017) en dessinant lui-même, avec sa souris, les courbes des graphiques. Un bouton de validation révèle l’écart entre l’intuition du lecteur et les chiffres réels et fait apparaître un paragraphe de texte explicatif. Ces sollicitations permanentes, utilisant les ressorts issus de jeux vidéo comme Draw Something 55 Draw Something est une application mobile rendue publique en 2012. Développé par Omgpop, filiale de l’américain Zynga, ce jeu de dessin de type Pictionary fait s’affronter deux joueurs, qui à tour de rôle doivent faire deviner un mot à leur adversaire en le dessinant sur l’écran, ceci en un temps donné. Très populaire, ce jeu a atteint le top des téléchargements de l’app store iOS., transforment l’analyse de l’information en récompenses gratifiantes, sous prétexte de conserver l’attention du visiteur (et d’augmenter, par ailleurs son temps de consultation, un argument important pour les annonceurs). 

Poursuivant cette quête d’innovation et d’utilisabilité (un terme en vogue dans les sphères UX/UI), Gregor Aisch constate que la généralisation des smartphones et des tablettes implique de nombreuses contraintes. Par exemple, la réduction de la taille des écrans rend l’adaptation des interfaces périlleuse et leur usage peu pratique pour l’utilisateur, tout en limitant la densité maximum d’informations affichable. Leur compatibilité technique demande, par ailleurs, un développement technique dédié qui allonge également le temps de production de ces visualisations, déjà limité par la périodicité du journal. Tenant compte de cette évolution et soucieux de proposer une expérience de lecture commune à tous les supports, les graphics editors du Times ont alors concentré leurs efforts sur des modes d’interactions plus rudimentaires comme le scroll, ou la gestuelle caractéristique de l’interaction tactile sur mobile (swipe), encourageant ainsi les designers à exploiter davantage la qualité d’une page Web à se déployer verticalement.

L’article « Death in Syria 66 Karen Yourish, K.K. Rebecca Lai, Derek Watkins, « Death in Syria », The New York Times, septembre 2015, http://b-o.fr/syria » fait un usage pertinent de cette propriété singulière du Web. Il décrit la situation du conflit syrien en s’appuyant sur le nombre de civils tués dans les dix-huit premiers mois. Dans l’introduction, chacun des 200 000 civils tués est représenté par un cercle rouge dont la position est régie par un algorithme. Le défilement de la page révèle une accumulation progressive de ces symboles, progressant peu à peu sur la totalité de l’écran. La mise en forme graphique des données contribue ainsi à produire une dramatisation de l’information. En suivant le sens de la lecture imposé par le défilement, la visualisation de données est utilisée comme un dispositif narratif qui vise à interpeller le lecteur quant à la gravité de la situation décrite dans l’article. 

Retour à la case départ

Tirant lui aussi parti de la verticalité de l’écran, l’article « What if Trump Really Does End Money for the Arts? 77 Graham Bowley, « What if Trump Really Does End Money for the Arts? », The New York Times, mars 2017, http://b-o.fr/points » propose un type de représentation des plus extrêmes. Insérés au fil du texte, une longue suite de points typographiques (environ 5 000 « . ») correspond au budget fédéral des États-Unis. Cette série de caractères est mise en rapport avec le point final de la phrase dont l’unicité représente le budget alloué par l’administration Trump à la culture :

« Si ces points représentent les dépenses fédérales, ..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... alors les fonds alloués aux arts, auxsciences humaines et à l’audiovisuel public représenteraient le point final de cette phrase 88 Ibid.. »

En intégrant la représentation graphique au corps du texte, le journaliste fait preuve d’une grande économie de moyens qui fait référence au sujet de l’article sans souffrir de l’absence de graphics editors. Même s’il est peu représentatif, cet exemple montre la capacité de la visualisation de données à faire sens, sans dispositifs techniques ultras performants comme D3.js. En se simplifiant, elle contribue à faire émerger des formes typographiques contemporaines singulières, en écho à certaines productions historiques antérieures au développement de l’image numérique.