Datagif
Published in

Datagif

Comment nous avons automatisé la production de vidéos de données

Derrière ce titre se cache une idée qui va très probablement envahir nos écrans dans les prochains mois. Chez Datagif, nous avons exploré de bout en bout le concept pour créer un produit viable et exploitable par nos clients avec un objectif : automatiser toute la chaîne de production.

Le principe en deux mots

Nous croulons sous des jeux de données plus ou moins organisés. De l’information est produite chaque jour, agrégée, rangée dans des cases, archivée. Et ce, sous toutes les formes. Elle sert ensuite à alimenter des flux de publication : articles, tweets, posts… Bien souvent, ces données sont isolées et mises en forme à la main, alors que cela pourrait être fait automatiquement.

Notre idée : automatiser la chaîne de production d’un contenu visuel animé, du choix de la donnée à la publication.

Un tweet automatique comprenant une publication de Datapolls

Le principe est simple et surtout intégralement automatisé :

  • depuis une liste de données (fichier Excel, liste texte, base de données, fichier JSON) nous puisons les données les plus récentes, les comparons, en tirons de la matière intéressante
  • puis nous l’intégrons dans un canevas graphique préparé à l’avance, qui couvre tous les cas de figure et permet une harmonie visuelle au fil des publications, sans se soucier de mettre en forme l’information à la main à chaque publication
  • ce canevas graphique génère une animation vidéo sur la base de scénarios pré-définis, capable de faire des choix selon les informations disponibles à la base
  • résultat : la vidéo est ensuite publiée automatiquement sur une plateforme au choix : fil Twitter, site web, etc…

Comment ça fonctionne techniquement ?

La génération de vidéo s’appuie sur Remotion : une suite de librairies logicielles permettant de créer des vidéos avec le framework Javascript React.

Cela permet de réaliser toute l’animation à partir de code HTML / CSS / Javascript, et dispose même d’un outil de prévisualisation dans le navigateur.

La timeline de prévisualisation navigateur de Remotion

Avec ce outil, la création de la vidéo devient aussi simple que de coder une animation pour le web. Il est possible de combiner cela avec d’autres librairies Javascript existantes : dans notre cas, nous avons notamment utilisé D3.js pour générer les graphiques.

L’intérêt de faire reposer l’ensemble sur React est de rendre les données dynamiques grâce à toutes les possibilités qu’offre l’écosystème Javascript : la connexion à la base de données d’un CMS ou à une API distante, puis le traitement et filtrage de ces informations avant affichage.

L’animation créée est ensuite exportable dans un format vidéo, soit en ligne de commande, soit via un rendu côté serveur, grâce à la librairie FFMPEG. Voilà, vous savez tout.

Et visuellement, ça s’adapte à tout ?

Pour tester notre idée, nous avons créé un modèle de publication dédié aux sondages de l’élection présidentielle en nous appuyant sur les données agrégées et publiées par NSPPolls. Comme pour tout projet de motion design, nous avons scénarisé les étapes en identifiant chaque emplacement de donnée. Nous avons donc créé un canevas à vide, pour ensuite le laisser se remplir automatiquement à chaque mise à jour de sondage.

Mais cette idée s’applique en effet à toutes sortes de publications : résultats sportifs, données accumulées au fil des jours, évolutions, ou même des éléments non chiffrés comme un top de publications, d’artistes, de sujets… Les possibilités d’application sont infinies !

Recherches graphiques de visualisation de sondages

Pourquoi avons-nous créé cet outil ?

Notre objectif premier était la curiosité : comment ça marche, de créer un outil automatique de bout en bout ? Nous avons choisi de créer un projet réel, avec des données tangibles qui sont mises à jour plusieurs fois par jour. Le résultat est au-delà de nos espérances : la mécanique fonctionne, apporte de l’information scénarisée, et suscite l’intérêt de l’audience.

Sondage Ifop du 31 mars 2022, traité via Datapolls

Quels sont les usages possibles ?

Imaginez que vous disposez d’information qui peut être valorisée dans le temps car elle répond à un besoin quotidien ou hebdomadaire, par exemple. Ou encore que vous disposez de données qui s’accumulent et méritent d’être partagés régulièrement. L’important pour vous est de vous focaliser sur le message et non sur la mise en forme de cette information. C’est là que notre outil prend tout son sens : on redéfinit les priorités en termes de temps passé.

Découpage du scénario “Top 3”

Quels enseignements en tirons-nous ?

En testant le process de bout en bout, et pas seulement la génération de vidéo, nous avons pu expérimenter les contraintes rencontrées sur les différentes étapes :

  • pour publier automatiquement sur Twitter, il est nécessaire de se brancher à son API. Cependant, leur nouvelle API v2 n’est à date pas totalement fonctionnelle concernant les vidéos, il faut donc passer par l’ancienne API qui pourrait être rendue obsolète à l’avenir. De plus, toutes les API ne permettent pas la publication automatique de vidéos : pour publier sur Instagram, il faut encore passer par une publication manuelle.
  • concernant le canevas : nous avons fait des choix éditoriaux permettant de multiplier les scénarios et créer de la diversité dans les publications. Cela nécessite de bien poser les bases en amont. Nous avons d’ailleurs ajouté des variantes en cours de projet, ou écarté des scénarios trop redondants.
  • graphiquement, nous sommes assez libres : la production vidéo s’approche davantage des animations que l’on retrouve sur une page web que de motion design à proprement parler, mais cela autorise tout de même une grande liberté.

Et maintenant ?

Notre outil est fonctionnel ; la mécanique a été testée et éprouvée sur une période d’actualité plus que riche : reste maintenant à le développer et l’adapter à différents sujets. Son usage est presque illimité, vous avez peut-être une idée ou une envie pour le voir fonctionner avec vos données ? Parlons-en !

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store