Ainsi, au fil des années, nos équipes ont pu découvrir de nombreux sujets tels que le suivi des interventions et des pratiques, la bourse aux céréales, la cartographie parcellaire, l’optimisation de la consommation en eau, la valorisation des circuits courts, la gestion des données d’élevage des poules pondeuses, l’élevage bovin sous les tropiques, l’installation et la transmission des exploitations ou encore plus récemment l’autonomie protéique des éleveurs. Derrière ces développements, ce sont des chiffres, des situations, des enjeux, la réalité d’un secteur d’activité que nous avons appris à connaître un peu plus, réalisation après réalisation. Aussi, lorsque nous avons appris que le ministère de l’Agriculture nous confiait une mission sur le sujet de la valorisation des chiffres du recensement agricole 2020, nous y avons vu une très belle opportunité d’avoir une vision plus globale et un nouvel angle de lecture des données que nous manipulons chaque jour depuis des années.
Le recensement agricole a lieu tous les 10 ans et il permet de collecter de nombreuses données renseignées par plus de 500 000 exploitations agricoles françaises. L’analyse de ces données est considérable et d’une grande importance pour la définition des politiques publiques agricoles et alimentaires à mener ces prochaines années, à plus forte raison au regard de la situation géopolitique et climatique actuelle.
La base Agreste du Ministère de l'Agriculture vise à stocker l’ensemble de ces données statistiques depuis plusieurs années et sa consultation est publique. Mais l’exhaustivité et la densité des données Agreste ne rendent pas toujours leur lecture facile et nombreux sont les utilisateurs qui peinent à retrouver les informations recherchées. Ce constat est l’un des points de départ du projet VizAgreste. Son objectif est alors de proposer une lecture facilitée esthétique, découpée par thématiques et reposant sur des concepts de consultation innovants. Le public ciblé est très hétérogène et le site s’adresse aussi bien aux agriculteurs.rices qu’aux journalistes, chargé.e.s d’études, statisticien.ne.s qu’aux citoyen.e.s éclairé.e.s.
Raconte moi une Viz
Le concept de présentation/lecture en question se nomme Scrollytelling, que l’on pourrait traduire par “défilement narratif” : un récit ponctué d’images et d’animations. Comme une vidéo donc ? Non et la différence majeure réside dans le défilement interactif. En proposant le contrôle du tempo à l’utilisateur, la lecture est plus immersive et plus didactique, autorisant par exemple les pauses nécessaires à la concentration et la compréhension. Ce procédé procure un véritable plaisir de lecture qui nous rappelle les folioscopes de notre jeunesse et autres livres animés.... Que la nostalgie soit sous-jacente ou non, nous pourrons nous accorder sur le fait que l’expérience se doit être agréable et ludique.
Mais au-delà du concept, il y a bien évidemment le contenu, les mots. Donner vie à une histoire et capter l’attention du lecteur, c’est avant tout choisir le bon sujet : celui qui permettra au lecteur de se sentir concerné, de s’identifier, celui qui lèvera des interrogations ou proposera une lecture plus complexe et plus fine que supposé, … Ce travail préalable a été réalisé conjointement par les équipes du SSP (Service de la Statistique et de la Prospective) au sein du MAA et de la société ICEM7, représentée par Eric Mauvière. Cette dernière a joué un rôle précieux dans la rédaction et la conception de ces histoires en proposant une analyse de fond doublée d’une approche sémiologique.
De son côté, AtolCD s’est vu confier l’étude UX de chaque histoire (Viz) ainsi que la réalisation et le développement de celles-ci. A travers différents ateliers, nos responsables UX ont échangé avec les équipes du MAA et ICEM7 pour définir la disposition des éléments, le graphisme de l’ensemble, le choix des couleurs, la typographie, les animations … et ainsi aboutir à des maquettes dynamiques et détaillées. Cette phase d’étude tripartite constitue le point culminant de notre réflexion commune et elle fût en tout point enrichissante pour nos équipes. L’analyse de ces données s’est avérée être passionnante et les choix sémiologiques retenus ont offert de nouvelles perspectives et approches à nos équipes.
Le choix de la bonne représentation graphique et des couleurs adéquates peut donner un sens nouveau, ou du moins plus clair, aux données exposées.
Prenons pour exemple la représentation graphique de l’évolution du nombre d'exploitations par catégorie juridique entre 2010 et 2020. Les deux diagrammes ci-dessus présentent la même information mais avec des choix graphiques et sémiologiques différents. Le choix des barres empilées (à gauche) ne rend réellement visible que la 1ère catégorie tandis que le diagramme de droite met en avant l’évolution des chiffres à proprement parler. De même, le nombre de couleurs limité (2) ne surcharge pas la lecture à droite et offre une compréhension plus immédiate en mettant l’accent sur les nouvelles données (2020).
L’exemple peut paraître évident une fois exposé mais l’exercice doit être réalisé pour chaque diagramme avec une grande rigueur.
Aujourd’hui, le site VizAgreste propose sept Viz :
- Evolutions du nombre d’exploitations
- La superficie agricole utilisée
- L’emploi agricole
- Âge et devenir des exploitations agricoles
- Main-d’oeuvre et externalisation des travaux agricoles
- Les circuits courts
- Les signes de qualité ou d’origine
A quoi ça ressemble ?
Le site est avant tout pensé pour mobile bien qu’il soit responsive et donc prévu également pour une utilisation bureau. L’ensemble se découpe en quatre sections :
Onboarding : entrée en matière
Ces écrans ne sont accessibles que lors de la première connexion dans la mesure où leur vocation est de présenter et d’introduire le site VizAgreste. La navigation se fait par défilement vertical. Ci-dessous, l’écran Onboarding découpé en trois illustrations :
Page d’accueil
La page d’accueil permet aux utilisateurs d’accéder à la consultation des Viz ainsi qu’à la carte des OTEX (Orientation Technico Économique des eXploitations).
Comme toutes les interfaces de VizAgreste, la page d’accueil est constituée d’une page unique avec des sections bien différenciées et identifiées par thème graphique : ici vert pour la section “Viz mise en avant” et “pêche” pour la section “Toutes les viz”. L’accès à ces différentes sections se fait toujours par défilement vertical. Le nombre de Viz proposé étant important (7) et afin d’optimiser l’espace et de limiter le nombre de clics, l’intégralité de celles-ci est accessible et consultable via un défilement horizontal comme l’indique le pictogramme “Faites glisser pour voir les viz” en bas de la section “Toutes les viz” (voir illustration de droite).
Enfin, la page d’accueil propose une dernière section permettant d’accéder à la cartographie des Otex. L’illustration ci-dessous présente l’accès, en deux temps, à la cartographie. Depuis la page d’accueil, l’utilisateur clique sur “Choisir un département” ce qui a pour effet d’ouvrir une liste de choix, sans rechargement de la page. Ici, l’utilisateur choisit le département 21 et accède alors à la carte de la zone retenue.
Viz : Je lis et je partage !
Comme évoqué lors de l’introduction, VizAgreste repose sur le concept de Scrolly-telling, appliqué à la lecture des viz qui constituent quant à elles le cœur même du site. Chaque viz est évidemment unique et propose un contenu, des illustrations et animations ainsi qu’une charte graphique qui lui sont propres.
Les trois illustrations ci-dessus proviennent respectivement des viz “Âge et devenir des exploitations agricoles”, “Evolution du nombre d’exploitations”, “L’emploi agricole”.
Nous ne l’avons pas encore évoqué mais l’un des objectifs de VizAgreste est également de favoriser le partage d’informations en en facilitant la diffusion. Les principaux canaux d’échanges et de diffusion sont aujourd’hui les réseaux sociaux. Aussi, chaque viz peut être partagée en quelques clics :
Les illustrations ci-dessus présentent le partage de la viz “ ge et devenir des exploitations agricoles sur Facebook. Il est à noter qu’en cliquant sur “Partager”, l’utilisateur dispose de trois options : Facebook et Twitter pour les réseaux sociaux mais également une diffusion par mail.
Les exports et partages VizAgreste ne s’arrêtent pas à ces communications : chaque diagramme peut être téléchargé aux formats PNG/SVG et les données relatives à ces graphiques exportées en CSV. Enfin, pour simplifier le travail des webmasters souhaitant inclure l’un de ces diagrammes sur leur site, ils peuvent copier/coller simplement le lien mis à disposition pour récupérer une iframe complète.
Cartographie : Départements et Otex
VizAgreste c’est la lecture animée et ludique de grands thèmes émergeant du dernier recensement agricole mais également une représentation cartographique de la spécialisation des communes par départements. Nous l’avons aperçu plus haut, l’accès peut se faire depuis la page d’accueil mais aussi depuis n’importe quelle consultation de viz. Le point d’entrée est le département mais l’utilisateur peut ensuite naviguer d’un département à l’autre, soit en utilisant la liste dédiée, soit en sélectionnant directement un département voisin sur la carte. Cette dernière est interactive puisqu’elle permet de visualiser aussi bien les données des recensements 2010 et 2020 que de permettre aux lecteurs de zoomer/dézoomer pour faciliter le clic sur les communes et ainsi en obtenir le nom et la spécialisation.
Les deux premières illustrations mettent en avant l’évolution des spécialisations des communes jurassiennes entre 2010 et 2020 tandis que la troisième met en avant un zoom réalisé sur le département du Jura avec un clic sur la commune d’Ounans. Une infobulle indique alors la spécialisation d’Ounans : Polyculture et/ou polyélevage.
Enfin, pour chaque département consulté, neuf diagrammes sont accessibles en cliquant sur “Voir les statistiques”. Ils permettent de visualiser différentes métriques et thématiques pour le département consulté comme par exemple la "Répartition du volume de travail en ETP” ou encore “l’évolution du nombre d’exploitations par spécialisation”.
Toujours dans une logique de partage et d’ouverture, chaque diagramme est téléchargeable, de même que les données associées.
Sans smartphone, ça marche ?
Bien que la lecture du site ait avant tout été pensée pour mobile, l’un des enjeux du projet VizAgreste était de proposer une expérience tout aussi riche et agréable sur bureau (webapp) que sur smartphone. Le principe de navigation reste le même et les écrans ont été adaptés pour optimiser l’occupation de l’espace en largeur.
Et enfin, la technique..
VizAgreste s’adresse à des centaines de milliers de lecteurs et le site bénéficie d’une communication gouvernementale rendant de facto les pics de fréquentation très importants. Couplé à notre volonté commune de proposer une navigation fluide et légère, le risque des montées en charge a motivé la plupart de nos choix techniques. Simple et épurée, la structure du site nous permet d’éviter les appels serveurs et base de données tout en évitant de trop solliciter les navigateurs et supports de consultation. Nous avons alors fait le choix d’un stockage des données sous forme de fichiers plats, sans base de données relationnelle. Ces fichiers sont préparés en amont par les équipes du SSP et Icem7 afin qu’ils puissent être chargés côté client sans traitements et calculs supplémentaires. Nous avons pensé ces choix pour un minimum de sollicitation serveur et bande passante dans une logique eco-conceptive.
Côté serveur, VizAgreste se résume donc principalement à un dépôt de fichiers consultables par le site. Néanmoins, quelques mécanismes ont été développés en Rust comme la gestion du recaptcha ou encore l’envoi d’email en réponse au formulaire de contact.
Côté frontend, nous avons opté pour des librairies et frameworks légers nous permettant de répondre aux enjeux de performance, notamment sur la partie cartographique. La solution technique est la suivante : HTML5 / CSS3 / Svelte / D3.js / RUST.
