IFOP
Sondage pour la présidentielle 2022

Svg background
IFOP - embedding example

Version live: https://www.ifop.com/presidentielle-2022/

Pour l'élection présidentielle de 2022, l'IFOP réalise quotidiennement des sondages d'intentions de votes. Serenytics a réalisé un tableau de bord pour visualiser les résultats de ces sondages. Les contraintes étaient que le tableau de bord :

  • devait s'intégrer dans le site de l'IFOP (site Wordpress).
  • devait être parfaitement responsive.
  • devait respecter une charte graphique existante (images, polices, couleurs...).
  • devait tenir une charge estimée à 200.000 visites/jour.
  • devait mettre à disposition de l'utilisateur des captures d'écran et des GIF pour partage sur les réseaux sociaux. Ces images et GIF étaient à réaliser par Serenytics avec les données du jour.
  • devait mettre à disposition des l'utilisateur un fichier PDF de synthèse des sondages du jour.
  • devait inclure un menu pour naviguer très simplement entre les visualisations (participation, 1er tour, 2nd tour)

D'autre part, il fallait que la mise à jour soit entièrement automatisé (à partir de fichiers XLS déposés sur un serveur SFTP). Une contrainte était que le délai entre le dépôt de ces fichiers (environ 16h) et la mise en production des données du jour (18h) était très courte.

Enfin, le délai de réalisation du projet était d'un mois environ.

L'import quotidien des données

Les données quotidiennes de sondages sont mises à disposition par l'IFOP sous forme d'un fichier XML déposé sur un serveur SFTP (intégré à notre plateforme).

Nous avons écrit en Python un parseur capable de lire le modèle de données de ces fichiers XML. Ces données sont ensuite chargées dans le datawarehouse interne à Serenytics dédié au projet (un serveur PostGreSQL pour ce projet à faible volume de données).

Pour cette étape, le fait que Serenytics permette d'exécuter un code Python est un point important. Et le fait que chaque compte Serenytics inclut un datawarehouse permet de ne pas avoir d'IT supplémentaire à gérer.

La création des tableaux de bord

Pour produire un tableau de bord moderne tout en respectant les contraintes graphiques de l'IFOP, nous avons demandé à l'un de nos Designer de faire des propositions sur le logiciel Figma.

Nous avons ensuite mis en place le tableau de bord dans Serenytics. Pour certains onglets, nous avons d'abord écrit des composants en low-code (HTML) pour obtenir le rendu exact souhaité. La capture ci-dessous est par exemple un composant pour afficher la photo d'un candidat, son score et l'indicateur d'évolution de son score:

IFOP - example snippet

Ensuite, ces composants sont assemblés dans un widget pour afficher tous les candidats.

Le fait de pouvoir éditer le CSS d'un tableau de bord nous a permis de mettre des animations au chargement des barres.

Dans le widget ci-dessous, nous avons aussi utilisé les fonctionnalités low-code pour créer un filtre dynamique custom : les images des candidats permettent d'ajouter/supprimer sa courbe (et un candidat non sélectionné est grisé). Les courbes sont elles issus d'un widget classique de notre librairie qui se crée en quelques clics, sans code.

IFOP - example snippet filter
Embedding

Le tableau de bord créé a ensuite été intégré dans le site Wordpress de l'IFOP. Cette intégration se fait avec une iFrame, et une librairie Javascript pour assurer que l'iFrame est correctement dimensionnée.

Cette intégration est très simple à réaliser et n'a pas posée de problème particulier.

Création des images et des GIF

Chaque jour, une fois les données importées, un script en Python génère des captures d'écran de la datavisualisation 1er tour et de celle du second tour. Grâce à notre librairie serenytics en Python, ces captures se font en une ligne de code. Les captures sont ensuite uploadées sur un stockage AWS S3 (quelques lignes de Python).

De même, un script Python génère un fichier GIF pour l'animation du 1er tour et un autre pour celle du second tour. La génération d'un GIF est plus complexe car le script Python doit faire de nombreuses captures d'écran d'un tableau de bord et ensuite assembler toutes les images dans un GIF. Ce script utilise notamment une fonctionnalité qui permet de changer une variable d'un dashboard avec un simple appel d'API (i.e. pour faire évoluer une animation pas à pas par exemple). Comme pour les images statiques, ces fichiers sont uploadés sur un stockage AWS S3.

Cycle de mise en production

Chaque jour, après l'import des données, une première version des tableaux de bord ("Recette") est mise à jour (avec les images et GIF du jour).

Un email est aussitôt envoyé aux managers du projet qui peuvent ainsi vérifier le contenu avant la mise en production à 18h (le lien est inclus dans l'email pour rendre l'opération aussi simple que possible).

A 18h, le tableau de bord de production est modifié pour afficher les données du jour (via une modification de variable de dashboard par appel d'API). De même, un email est envoyé pour informer toutes les parties prenantes de la mise en production. Ces envois d'email avec du contenu dynamique sont très simples à réaliser dans l'outil (quelques lignes de Python pour générer le contenu).

Performances

Pour tenir une charge importante, nous utilisons le cache de Serenytics. C'est à dire que lors du premier chargement du dashboard, les requêtes de données vont interroger le datawarehouse (i.e. un serveur PostGreSQL). Mais ces résultats seront stockés en cache (base Redis). Lors des prochains chargements, le moteur de données Serenytics ne fera que renvoyer les résultats depuis le cache, sans accéder au PostGreSQL. Au final, notre serveur n'effectue donc presque aucun calcul ni requête SQL et permet de tenir la charge (un pic de 110.000 vues par jour a été atteint).

En savoir plus ?

Vous voulez en savoir plus sur ce type de projet ? Contactez-nous à contact@serenytics.com.

×