Vidéos de démonstration

[À l'écran] Carton titre : sur-titre « Présentation », « Découvrir ChartsBuilder ».

Voix off : Un graphique vivant, accessible et à la charte de l'État, dans la page de votre site : c'est ce que ChartsBuilder fait d'une donnée ouverte. Trois minutes pour le découvrir.

Le problème : des images figées (00:12)

[À l'écran] Page « Industrie du futur » d'un site d'exemple au Système de design de l'État : titre, chapeau, puis l'image d'un graphique copié d'un rapport (« Graphique 3 : Nombre de bénéficiaires par région », barres bleues d'outil bureautique, légende « Série1 », source « données provisoires au 31/12/2021 ») ; zoom sur l'image, le pointeur désigne la date, puis la légende.

Voix off : Les sites publics illustrent encore souvent leurs données par une image : un graphique copié d'un rapport, ou fait avec un outil bureautique. Cette image n'est pas à jour, elle ne respecte pas la charte de l'État, et elle n'est pas accessible. Pourtant, l'information est sans doute disponible en open data, ou dans un tableur Grist.

L'accueil : une bibliothèque, une application (00:32)

[À l'écran] Accueil de ChartsBuilder : titre « Créez des visualisations conformes au Design System de l'État. », les trois étapes « 01 · Connecter », « 02 · Configurer », « 03 · Exporter » encadrées, un carrousel de graphiques à droite, les boutons « Créer un graphique » et « Démarrer avec l'IA » ; défilement jusqu'à la grille « Tous les outils » ; survol des tuiles Sources, Studio IA, Créer un graphique, Créer une carte, Créer un tableau de bord, Playground.

Voix off : ChartsBuilder a été conçu pour publier des graphiques dynamiques en HTML, connectés à des données ouvertes, et conformes au Système de design de l'État. Son accueil le résume en trois étapes : connecter, configurer, exporter. Pour y arriver, deux outils : une bibliothèque libre, dsfr-data, pour les intégrateurs ; et par-dessus, une application guidée, pour tous les autres.

Sources (00:56)

[À l'écran] Clic sur « Sources » : écran avec une connexion (« Prix des contrôles techniques ») et les jeux de données enregistrés. Clic sur « Nouvelle connexion », adresse du jeu « Industrie du futur » collée, « Continuer », message « Plateforme détectée : OpenDataSoft. Tout est prêt — enregistrez pour récupérer les données. » ; nom « Industrie du futur » saisi, « Enregistrer » : la connexion apparaît dans la liste.

Voix off : Tout part des données. J'ouvre Sources : l'outil reconnaît les portails de l'administration, data.gouv.fr, OpenDataSoft, Grist, INSEE Melodi, ou toute API. Je colle l'adresse d'un jeu de données : la plateforme est détectée aussitôt. Je nomme la connexion, j'enregistre : elle rejoint la liste, prête à servir.

Créer un graphique (01:18)

[À l'écran] Clic sur « Créer un graphique ». Panneau gauche en quatre étapes numérotées (« Source de données » avec « Industrie du futur » sélectionnée, « Type de graphique », « Configuration des données », « Apparence ») ; étiquettes nom_region, valeur nombre_beneficiaires ; clic sur « Générer » : histogramme dans l'onglet « Aperçu » ; onglet « Code » ; « Plus d'actions », « Assistant » : volet de l'assistant, question « Changer les couleurs » saisie et envoyée, le réglage « Palette » est encadré ; fermeture du volet.

Voix off : Créer un graphique guide en quatre étapes : la source, le type, les données, l’apparence. Ma nouvelle source est présélectionnée ; onze types au choix ; en étiquettes la région, en valeur les bénéficiaires. Je génère. Le graphique s'affiche tel qu'il sera dans la page ; l'onglet Code contient le bloc HTML à coller dans son site. Un doute sur un réglage ? L'assistant, dans Plus d'actions, le montre : je tape Changer les couleurs, il encadre Palette.

Studio IA (01:48)

[À l'écran] Clic sur « Studio IA » : à gauche la source « Industrie du futur » chargée et la conversation (« Bienvenue dans le Studio IA… »), à droite la page à composer. Saisie de « les bénéficiaires par région, en barres », « Envoyer » ; les appels d'outils défilent dans le fil ; l'histogramme par région apparaît dans l'aperçu.

Voix off : Le Studio IA, lui, prend la demande en français. Ma source est chargée ; j'écris : les bénéficiaires par région, en barres. J'envoie. L'assistant ne devine rien : il agit avec des outils, visibles dans le fil, et vérifie contre les données réelles. La page se compose à droite : l'aperçu se génère, et le code HTML est prêt à copier-coller. On peut aussi l'exporter en image.

Créer une carte (02:15)

[À l'écran] Clic sur « Créer une carte » : carte de l'Ille-et-Vilaine avec des grappes numérotées de centres de contrôle technique ; survol du rail Carte / Couches / Éléments à gauche ; clic sur la grappe de Rennes, qui se défait ; clic sur un centre : panneau latéral avec le nom du centre, l'adresse, la commune et le prix de la visite.

Voix off : Créer une carte, maintenant, avec les prix du contrôle technique ramenés à un département. Elle se règle en trois volets : Carte, Couches, Éléments. Chaque couche s’affiche en points, en zones ou en chaleur. Ici, des grappes de centres : elles se défont au zoom, et un clic ouvre la fiche, avec le centre, son adresse, le prix.

Favoris (02:38)

[À l'écran] Clic sur le lien « Favoris » de l'en-tête (badge 3). Page « Mes favoris » : trois vignettes ; clic sur « Bénéficiaires par région » : volet d'aperçu avec l'histogramme et les boutons « Copier le code », « Builder », « Playground » ; le pointeur s'arrête sur « Copier le code ».

Voix off : Chaque graphique gardé en favori devient une brique réutilisable. Dans Favoris, trois vignettes. Un clic, et l'aperçu se dessine avec les vraies données. Le code est prêt à copier, et un bouton rouvre le graphique dans le Builder.

Créer un tableau de bord (02:53)

[À l'écran] Clic sur « Créer un tableau de bord », puis « Ouvrir » : liste « Mes tableaux de bord », clic sur « Industrie du futur — suivi » : la grille se remplit (indicateur « Total bénéficiaires », encart « Contexte », histogramme, camembert). « Plus d'actions », « Plein écran » : aperçu de la page avec l'indicateur 7 735 et les graphiques ; fermeture.

Voix off : Créer un tableau de bord assemble ces briques sur une grille. J'ouvre le tableau de bord préparé : indicateur clé, encart, graphiques. Plein écran : voilà la page telle que la verront les lecteurs, chiffres interrogés en direct. Elle s’exporte en une page HTML autonome.

Playground et code (03:13)

[À l'écran] Clic sur « Playground » : exemple « Barres — Beneficiaires par region » chargé, l'éditeur à gauche avec les balises dsfr-data-source, dsfr-data-query et dsfr-data-chart, l'histogramme dans l'aperçu à droite ; zoom sur l'éditeur.

Voix off : Le Playground dévoile l'envers du décor : trois balises, source, requête, graphique. Quel que soit l’outil, on repart avec le même bloc de code, à coller dans sa page.

Au-delà de l'application (03:27)

[À l'écran] Plan fixe : logo ChartsBuilder, « dsfr-data, licence MIT · serveur MCP · hébergeable ».

Voix off : Un serveur MCP, le protocole qui relie les assistants IA à des outils, apprend la bibliothèque à tout assistant. Et l'ensemble est libre, sous licence MIT : chaque administration peut l'héberger. Vos données méritent mieux qu'une image.

[À l'écran] Carton titre : « Les sources : des données en direct ou locales ».

Voix off : Vos données sont sur un portail public, dans un tableur partagé, ou dans un fichier sur votre poste. Faisons-les entrer dans ChartsBuilder, une par une.

L'écran Sources (00:11)

[À l'écran] Écran Sources vide : boutons « Exporter », « Importer », « Assistant », « Nouvelle connexion » ; section « Connexions » (aucune) ; section « Jeux de données locaux » avec « Créer une source manuelle » et « Joindre deux sources ». Les deux sections sont encadrées tour à tour.

Voix off : Voici l’écran Sources, encore vide. Deux familles : les connexions, interrogées en direct sur leur plateforme, et les jeux locaux, figés dans le projet.

Une plateforme OpenDataSoft (00:23)

[À l'écran] Fenêtre « Nouvelle connexion » : adresse collée dans « Adresse du jeu de données », bouton « Continuer », message « Plateforme détectée : OpenDataSoft. Tout est prêt — enregistrez pour récupérer les données. », nom pré-rempli « industrie-du-futur » remplacé par « Industrie du futur », « Paramètres avancés » dépliés sur l'URL d'API, bouton « Tester et sauvegarder ». La connexion apparaît dans la liste.

Voix off : Première source : le jeu Industrie du futur, sur le portail du ministère de l’Économie. Nouvelle connexion : je colle l’adresse de la page, telle quelle, et je continue. La plateforme est reconnue, OpenDataSoft ; l’adresse technique est déduite, visible dans les Paramètres avancés. Je nomme la connexion. Tester et sauvegarder : elle est vérifiée avant d’être enregistrée.

Aperçu et jeu en ligne (00:47)

[À l'écran] Volet « Aperçu » à droite : badge Connexion, « 101 lignes · 10 colonnes », URL d'API, tableau des premières lignes, que l'on fait défiler jusqu'aux colonnes nom_departement, nom_region, nombre_beneficiaires, montant_investissement ; en pied de volet, les boutons « Utiliser dans le Builder », « Ajouter aux favoris », « Actualiser » sont encadrés. Fermeture du volet.

Voix off : L’aperçu s’ouvre aussitôt : une centaine de lignes et dix colonnes, chacune avec son type. Le département, la région, les bénéficiaires, les montants : requêtés en direct, ils tiendront un graphique à jour.

data.gouv.fr (01:03)

[À l'écran] « Nouvelle connexion », adresse de la page data.gouv.fr collée, « Continuer » : la connexion « Code officiel géographique » (badge data.gouv) se crée et se déplie sur la liste de ses ressources. Clic sur « Aperçu » de « Millésime 2026 : Liste des départements au 01/01/2026 » : tableau DEP, REG, CHEFLIEU, LIBELLE. Boutons « En faire un jeu en ligne » et « En faire un jeu local » ; clic sur le premier, badge « JEU EN LIGNE » sur la ressource ; le second est encadré.

Voix off : Deuxième source : data.gouv.fr, avec le Code officiel géographique de l’INSEE, l’Institut de la statistique. Même geste. Le jeu est reconnu, et seules les ressources interrogeables par l’API tabulaire sont proposées. J’ouvre l’aperçu des départements, et j’en fais un jeu en ligne, interrogé en direct. Un jeu local, à l’inverse, est une copie figée.

Grist (01:27)

[À l'écran] « Nouvelle connexion », adresse d'une page d'un document Grist public collée, « Continuer » : la connexion « Barometre » (badges Grist et Public, statut « Doc public ») se crée et liste ses tables. Clic sur « Aperçu » de la table Plan_Elec_Indic_dyanmiques : tableau des indicateurs par mois, zoomé.

Voix off : Troisième source : Grist, le tableur collaboratif de l’État. Un document public se branche par l’adresse de sa page : ses tables apparaissent. J’ouvre l’aperçu d’une table : ses indicateurs, mois par mois. Un document privé demanderait une clé, conservée uniquement dans votre navigateur.

Insee Melodi (01:46)

[À l'écran] « Nouvelle connexion », adresse Melodi filtrée collée, « Continuer » : message « Plateforme détectée : INSEE (Melodi). » ; « Paramètres avancés » dépliés, l'adresse complète recollée dans « URL des données » ; nom « Population des régions » ; « Tester et sauvegarder ». Aperçu : 13 lignes, colonnes GEO (libellé de région), TIME_PERIOD, POPREF_MEASURE (Population municipale) et OBS_VALUE, révélées en faisant défiler le tableau.

Voix off : Quatrième source : Melodi, l’API de l’INSEE, avec une adresse déjà filtrée sur la population des treize régions. Reconnue aussi, mais ses filtres ne sont pas repris : je recolle l’adresse en entier dans les Paramètres avancés. Treize lignes, les codes traduits en libellés : une région, une population.

Un fichier CSV local (02:06)

[À l'écran] Fenêtre « Nouvelle source manuelle » : nom « Apprentissage 2025 par département », onglets « Tableau », « Coller JSON », « Importer CSV » ; choix du fichier apprentissage-aura-2025.csv, séparateur « Automatique », aperçu « 12 lignes détectées », « Enregistrer ». La source apparaît sous « Jeux de données locaux » avec le badge Manuel et « 12 lignes ».

Voix off : Pas d’API ? Je crée une source manuelle : un tableau, du JSON, ou un fichier CSV. Je choisis mon fichier : le séparateur est détecté, douze lignes sont lues. J’enregistre : la source rejoint les jeux locaux.

Joindre deux sources (02:22)

[À l'écran] Fenêtre « Joindre deux sources » : Source A « Apprentissage 2025 par département », Source B « Industrie du futur », colonne commune nom_departement, « Type de jointure » : « Garder toutes les lignes de A, compléter avec B si possible (recommandé) », résultat 12 enregistrements. Nom « Apprentissage et Industrie du futur », « Joindre et sauvegarder » : la source jointe rejoint les jeux locaux.

Voix off : Deux sources se joignent sans code : la source principale A, la source complémentaire B, et leur colonne commune. Le type de jointure, en langage clair : garder toutes les lignes de A, compléter avec B si possible. Je nomme le résultat et je l’enregistre : il rejoint les jeux locaux.

Emporter, puis vers le Builder (02:44)

[À l'écran] Clic sur « Exporter » (message « Export téléchargé »). Dans la connexion « Industrie du futur », clic sur « Aperçu » du flux, puis sur « Utiliser dans le Builder » : l'outil « Créer un graphique » s'ouvre avec la source « Industrie du futur » sélectionnée.

Voix off : Exporter produit un fichier de toutes mes sources, réimportable ailleurs. Retour sur Industrie du futur : Utiliser dans le Builder, qui s’ouvre avec la source déjà choisie.

[À l'écran] Carton de fin : « Une adresse ou un fichier : les données sont prêtes. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons. Une plateforme branchée par son adresse, un fichier importé, deux sources jointes : les données sont prêtes.

[À l'écran] Carton titre : « Illustrer une page de son site avec un graphique vivant ».

Voix off : Une page d'un site public, illustrée par une capture d'écran de tableur. Remplaçons-la, étape par étape, par un graphique vivant et accessible.

Le point de départ (00:11)

[À l'écran] Page « Industrie du futur » d'un site d'exemple au Système de design de l'État : titre, chapeau, puis une capture d'écran de tableur (régions, nombre de bénéficiaires, montants) ; zoom sur l'image.

Voix off : Voici la page Industrie du futur de mon site, avec son image de tableur. Un lecteur d'écran n'y lit rien, et elle sera fausse à la prochaine mise à jour des données.

Choisir la donnée (00:22)

[À l'écran] Builder : étape « 1 Source de données », sélection de « Industrie du futur » ; bouton « Voir » puis fenêtre « Aperçu des données » (101 enregistrements, 10 champs, premières lignes).

Voix off : Dans ChartsBuilder, Créer un graphique. À l'étape une, je choisis la source Industrie du futur, déjà connectée dans Sources. Un clic sur Voir : une centaine de lignes, une par département, avec la région et les bénéficiaires.

Construire le message (00:37)

[À l'écran] Étape « 2 Type de graphique » : « Barres » ; « 3 Configuration des données » : étiquettes nom_region (libellé Région), valeur nombre_beneficiaires (libellé Bénéficiaires), agrégation « Somme », ordre « Décroissant » ; « 4 Apparence » : titre, sous-titre « Source : DGE, data.economie.gouv.fr », palette « Bleu France » ; clic sur « Générer ».

Voix off : À l'étape deux, le type : je garde les barres, faites pour comparer. À l'étape trois, les données : en étiquettes, la région ; en valeur, le nombre de bénéficiaires. Les lignes sont par département : le Builder les additionne par région. Je trie par ordre décroissant. À l'étape quatre, le titre dit le message : Auvergne-Rhône-Alpes concentre un quart des bénéficiaires. J'indique la source, et je génère.

[À l'écran] Aperçu : histogramme trié, Auvergne-Rhône-Alpes en tête ; infobulle « 1 948 » au survol de la première barre ; titre-message et source sous le graphique.

Voix off : La première barre, Auvergne-Rhône-Alpes : près de deux mille bénéficiaires. Un titre qui dit le message, la source affichée, un tri qui hiérarchise : on comprend d'un coup d'œil.

Le cadre du Système de design de l'État (01:18)

[À l'écran] Section « Cadre officiel DSFR » : case « Encadrer le graphique (titre, source, téléchargement) » cochée, « Téléchargement CSV » déjà coché, « Plein écran » coché, date « Janvier 2026 » ; « Générer » : le graphique s'affiche dans le cadre du Système de design de l'État, avec ses boutons.

Voix off : Sous les réglages avancés, le cadre du Système de design de l'État. J'encadre le graphique : le téléchargement est déjà coché, j'ajoute le plein écran et la date. Je génère : le cadre entoure le graphique, avec ses boutons.

L'accessibilité embarquée (01:36)

[À l'écran] Section « Accessibilité » (résumé « tableau, téléchargement ») : « Ajouter le composant accessibilité » coché ; description saisie ; « Générer » ; dans l'aperçu, sous le graphique, l'accordéon « Accessibilité : données et description » ouvert sur la description, le tableau région / bénéficiaires et « Télécharger en CSV ».

Voix off : La section Accessibilité est déjà active. J'ajoute une description en une phrase, et je génère. Sous le graphique, le bloc Accessibilité : données et description, avec le tableau équivalent que lisent les lecteurs d'écran, et le CSV.

Le code, et pourquoi il est vivant (01:52)

[À l'écran] Section « Mode de generation » : « Données intégrées » puis « Chargement dynamique », « Rafraîchissement automatique » = 3600 ; « Générer » ; onglet « Code » : balises dsfr-data-source, dsfr-data-query, dsfr-data-chart, dsfr-data-a11y ; bouton « Copier le code ».

Voix off : Dernier réglage, le mode de génération. Données intégrées copierait les chiffres dans le code : simple, mais figé. Chargement dynamique les recharge à chaque affichage, ici toutes les heures. Dans l'onglet Code : source, requête, graphique, accessibilité. Aucun chiffre, seulement l'adresse de la donnée. Je copie le code.

Dans la page (02:20)

[À l'écran] Éditeur de page du site d'exemple : le bloc <figure> qui contenait l'image de tableur est remplacé par le fragment HTML copié ; clic sur « Enregistrer et publier ».

Voix off : Dans l'éditeur de ma page, je remplace l'image par le code copié, puis Enregistrer et publier.

[À l'écran] La page publiée du site d'exemple : titre, chapeau, le graphique en barres dans son cadre officiel, l'accordéon d'accessibilité, puis le texte.

Voix off : Le graphique s'affiche dans la page, avec son cadre et son bloc accessibilité. Branché sur la donnée, il restera juste, sans qu'on retouche la page.

[À l'écran] Carton de fin : « Une image figée de moins, un graphique vivant de plus. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : une source, un message, le cadre, l'accessibilité, et le code collé dans la page. Une image figée de moins, un graphique vivant de plus.

[À l'écran] Carton titre : « Une page complète composée par l’IA à partir de son texte ».

Voix off : Inès, rédactrice web d’un site ministériel, a écrit un texte sur le guichet Industrie du futur. Elle voudrait la page qui va avec : un chiffre clé, un graphique, un filtre. Voyons comment le Studio IA de ChartsBuilder la compose à partir de son texte.

Ouvrir le Studio IA (00:18)

[À l'écran] Page d’accueil de ChartsBuilder, clic sur « Démarrer avec l’IA ». Écran du Studio IA : colonne gauche avec le bloc « Source », le bloc « IA » (badge « Clé serveur ») et le message d’accueil de l’assistant ; à droite, « Discutez avec l’assistant pour composer votre tableau de bord » ; barre d’actions avec « Enregistrer ».

Voix off : Depuis l’accueil de ChartsBuilder, je choisis « Démarrer avec l’IA ». À gauche, la source de données et la conversation avec l’assistant ; à droite, la page qui va se composer. L’assistant s’appuie sur Albert, l’intelligence artificielle de l’État, hébergée en France. Le badge « Clé serveur » le signale : il n’y a rien à configurer.

Choisir la source (00:41)

[À l'écran] Bloc « Source » : la liste déroulante passe sur « Industrie du futur · 101 lignes ». Le fil affiche « Source « Industrie du futur » chargée (101 lignes, 10 champs) ». Clic sur « Voir les données » : dialogue « Aperçu des données » avec les champs et les premières lignes, puis fermeture.

Voix off : Je choisis ma source : Industrie du futur, la même que dans le Builder. L’assistant l’a chargée : une centaine de lignes, dix champs. Un clic sur « Voir les données », pour vérifier avant de lui parler.

Coller le texte et décrire la page (00:56)

[À l'écran] Zone de saisie du chat : le texte éditorial sur le guichet Industrie du futur est collé, puis la demande est tapée à la suite. Clic sur « Envoyer » (« Entrée pour envoyer · Maj + Entrée pour un saut de ligne »).

Voix off : Je colle mon texte éditorial, tel quel, dans la zone de saisie. Puis je décris ce que je veux, en français. Ce texte en introduction, un indicateur clé du total, les bénéficiaires par région en barres, et un filtre par région. J’envoie.

La page se compose (01:15)

[À l'écran] Dans le fil, sous la demande, l’étape de l’assistant s’affiche (« J’ajoute 4 blocs… »), puis sa réponse « Page créée : texte d’introduction, filtre, KPI total des bénéficiaires et barres par région, triées décroissantes ». L’aperçu de droite se remplit : texte d’introduction, sélecteur de région, tuile d’indicateur clé, graphique en barres trié.

Voix off : L’assistant ne devine pas : il agit sur le document avec des outils, et chaque action reste visible dans le fil. À droite, la page prend forme : le texte, le filtre par région, l’indicateur clé, et le graphique trié. Chaque bloc a été vérifié contre les données réelles avant d’être accepté.

[À l'écran] Aperçu : la page complète avec le texte, la tuile « 7 735 » bénéficiaires, les barres par région (Auvergne-Rhône-Alpes en tête) et le filtre par région. Dans le fil, la réponse finale de l’assistant, suivie des relances « Ajouter des filtres partagés », « Ajouter un indicateur clé », « Ajouter un tableau des données ».

Voix off : Tout y est : le total des bénéficiaires, et les régions classées par ordre décroissant. La réponse de l’assistant résume ce qu’il a fait, et propose des suites.

Retoucher par la conversation (01:48)

[À l'écran] Clic sur la relance « Ajouter un tableau des données » ; l’assistant travaille, puis un tableau paginé des données apparaît sous le graphique dans l’aperçu.

Voix off : La conversation continue : je clique sur « Ajouter un tableau des données ». Le tableau s’ajoute sous le graphique, avec sa pagination.

[À l'écran] Dans l’aperçu, la liste déroulante du filtre passe sur « BRETAGNE » ; la tuile d’indicateur (470), le graphique (une seule barre) et le tableau, plus bas, se recalculent sur cette région.

Voix off : Dans l’aperçu, je choisis une région dans le filtre. L’indicateur, le graphique et le tableau se mettent à jour ensemble : le filtre pilote tous les blocs.

Vérifier et garder la main (02:10)

[À l'écran] Onglet « Code » : le code HTML complet de la page (composants dsfr-data, source Opendatasoft, filtres). Onglet « JSON » : le document. Retour à l’onglet « Aperçu », clic sur « Enregistrer » : message de confirmation.

Voix off : L’onglet Code montre la page HTML complète, celle de l’aperçu, prête à coller dans mon site. L’onglet JSON garde la description du document. Je reviens à l’aperçu et j’enregistre la page.

[À l'écran] Menu « Plus d’actions » déplié : « Ouvrir dans le tableau de bord », « Ajouter aux favoris », « Ouvrir dans le Playground », « Exporter en PNG », « Diagnostic »… Fermeture du menu, clic sur « Copier le code » : « Code copié ! ».

Voix off : Dans « Plus d’actions », je peux l’ouvrir dans l’éditeur de tableau de bord, pour la retoucher à la main. Ou l’ouvrir dans le Playground, ou encore l’exporter en image. Je copie le code : il est prêt à coller dans mon site.

[À l'écran] Plan large du Studio IA : la conversation à gauche, la page composée à droite.

Voix off : Du texte à la page prête à publier, par la conversation.

[À l'écran] Carton de fin : « Décrire la page en français, garder la main sur le résultat. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : un texte collé, une demande en français, et la page se compose bloc par bloc, vérifiée sur les données. ChartsBuilder et la bibliothèque dsfr-data sont libres et en accès libre.

[À l'écran] Carton titre : « Cartographier les centres de contrôle technique de son département ».

Voix off : Une direction départementale de la protection des populations veut montrer aux usagers où faire contrôler leur véhicule, et à quel prix. Les tarifs, publiés par la DGCCRF, la répression des fraudes, forment un jeu national. Le besoin, lui, est local. Ramenons-le au département, sur une carte publique.

Créer une carte (00:19)

[À l'écran] Page « Créer une carte » : barre d'actions (« Copier le code », « Plus d'actions », « Générer »), canevas vide « Choisissez vos données, la carte s'affiche ici. », rail Carte / Couches / Éléments, volet Couches ouvert (encadré) avec le bouton « Choisir les données de cette couche ».

Voix off : J’ouvre Créer une carte. Le canevas attend les données. À gauche, trois volets : Carte, Couches, Éléments. Nous commençons par Couches.

D'où viennent les données (00:31)

[À l'écran] Clic sur « Choisir les données de cette couche » : fenêtre « D'où viennent vos données ? » avec « Essayer avec un jeu d'exemple », « Coller un lien de données », « Une source enregistrée ». Clic sur « Une source enregistrée » puis sur « Prix des contrôles techniques ». Volet Couches : « Champs détectés automatiquement », Latitude = latitude, Longitude = longitude. La carte de France se couvre de points ; bandeau « 1 000 éléments affichés sur 145 878, dans l'ordre du fichier » ; encart « Trop de points pour la vue nationale » avec le bouton « Composer par échelle ».

Voix off : Choisir les données de cette couche : un jeu d’exemple, un lien à coller, ou une source enregistrée. Je prends la source enregistrée dans Sources : les prix des contrôles techniques. ChartsBuilder repère lui-même la latitude et la longitude. La carte se dessine, mais le bandeau prévient : mille éléments affichés, sur près de cent quarante-six mille. Composer par échelle est proposé. Moi, je filtrerai par département.

L'assistant signale ce qui cloche (00:59)

[À l'écran] Volet Couches : Latitude saisi « longitude », Longitude saisi « latitude », clic sur « Générer » : la carte se recadre hors de France. Menu « Plus d'actions », « Assistant » : volet Assistant avec le constat « latitude et longitude semblent inversées » et le bouton « Me montrer », qui encadre le champ Latitude du volet Couches. Réduction de l'assistant, champs corrigés, « Générer » : la carte de France revient avec ses mille points.

Voix off : Une erreur classique, pour voir l’assistant : je permute latitude et longitude, et je génère. Les points tombent loin de la France. L’assistant a relevé le constat : latitude et longitude semblent inversées. Me montrer désigne le réglage à corriger. Je corrige, je génère : la carte revient.

Grappes et fiche au clic (01:25)

[À l'écran] Volet Éléments : case « Regrouper les points proches (clustering) » cochée, la carte passe en grappes numérotées ; « Comportement au clic » réglé sur « Un panneau latéral droit » ; « Champ titre » = cct_denomination ; cases « Champs à afficher » cct_adresse, cct_commune, prix_visite cochées.

Voix off : Dans Éléments, je coche Regrouper les points proches : des grappes, lisibles à toutes les échelles. Au clic, un panneau latéral : le nom du centre en titre, puis l’adresse, la commune et le prix de la visite.

La carte elle-même (01:39)

[À l'écran] Volet Carte : « Fond de carte » = IGN Plan, cases « Les 5 DROM en vignettes (encarts) » et « La Corse en vignette », case « Tableau des données sous la carte (accessibilité) » cochée ; « Réglages avancés de la carte » dépliés, case « Cadrer automatiquement sur les données (fit-bounds) » cochée.

Voix off : Le volet Carte règle le fond, ici le plan IGN, et les encarts d’outre-mer et de Corse. Le tableau des données sous la carte est coché : elle part avec son tableau accessible. Et dans les réglages avancés, le cadrage automatique sur les données.

Ramener au département (01:57)

[À l'écran] Volet Éléments, section « Options avancées » dépliée, champ « Filtrer les données » saisi : nom_departement:eq:ILLE-ET-VILAINE, cat_vehicule_libelle:eq:Voiture particulière, cat_energie_libelle:eq:Essence. Clic sur « Générer » : la carte se recadre sur l'Ille-et-Vilaine ; statut « 104 éléments affichés (104 enregistrements) ». Clic sur la grappe la plus grosse : zoom, les grappes se séparent. Clic sur un centre : panneau latéral avec le nom du centre en titre et un tableau adresse, commune, prix de la visite.

Voix off : Reste à ramener le jeu au département. Dans Options avancées, je filtre : un champ, un opérateur, une valeur. Le département, la voiture particulière, l’essence : un tarif par catégorie et par énergie, je veux un point par centre. Je génère : la carte recharge et se recadre. Cent quatre éléments affichés, un par centre. Je clique la grappe de Rennes : elle se défait. Un clic sur un centre ouvre sa fiche, avec le prix de la visite.

Le code (02:27)

[À l'écran] Onglet « Code » : « Mode de génération » = « Page autonome (avec scripts et CSS) », code avec les balises dsfr-data-source, dsfr-data-query, dsfr-data-map, dsfr-data-map-layer, dsfr-data-map-popup, dsfr-data-a11y ; passage à « Ma page charge déjà dsfr-data (composants seuls) » ; clic sur « Copier le code ».

Voix off : L’onglet Code donne une page autonome, ou les composants seuls si ma page charge déjà dsfr-data. Je copie le code et je le colle dans la page Contrôle technique de mon site. La carte suivra les données de la DGCCRF, mises à jour chaque jour.

[À l'écran] Retour à l'onglet « Aperçu » : la carte de l'Ille-et-Vilaine zoomée sur Rennes, la fiche d'un centre ouverte dans le panneau latéral.

Voix off : Une carte publique, filtrée, accessible, avec sa fiche au clic : prête pour le site.

[À l'écran] Carton de fin : « Un jeu national, un filtre, une carte publique. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : une source, un filtre, des grappes, une fiche au clic, et le code à coller. ChartsBuilder et la bibliothèque dsfr-data sont libres et en accès libre.

[À l'écran] Carton titre : « Assembler un tableau de bord à partir de ses favoris ».

Voix off : Vous suivez un programme et souhaitez réunir ses chiffres sur une seule page, à jour sans ressaisie. Dans ChartsBuilder, c'est un tableau de bord, assemblé à partir des graphiques gardés en favori.

Les favoris, une réserve de briques (00:13)

[À l'écran] Accueil de ChartsBuilder, clic sur le lien « Favoris » de l'en-tête (badge 3). Page « Mes favoris » : trois vignettes (barres, camembert, KPI). Clic sur « Bénéficiaires par région » : volet d'aperçu avec l'histogramme, dépliage de « Code HTML/JS », boutons « Copier le code », « Builder », « Playground », « PNG », « JPG ». Fermeture du volet, survol de « Exporter ».

Voix off : Commençons par la réserve : dans l'en-tête, Favoris. Trois graphiques y sont enregistrés depuis le Builder, sur le programme Industrie du futur. Un clic sur une vignette : l'aperçu se dessine avec les vraies données, et le code est prêt à copier. Exporter enregistre le lot entier, pour un collègue.

L'éditeur de tableau de bord (00:34)

[À l'écran] Clic sur « Créer un tableau de bord » dans la navigation. Éditeur : colonne « Widgets » (KPI, Graphique, Tableau, Texte), « Mes favoris » (trois entrées), « Grille », « Sources » ; au centre la grille avec deux cellules « Glisser un widget ici » ; sélecteur « Modèles… » ; barre d'actions « Plus d'actions », « Ouvrir », « Enregistrer ».

Voix off : Passons à l'assemblage : Créer un tableau de bord ouvre l'éditeur. À gauche, les blocs, KPI, Graphique, Tableau, Texte, puis Mes favoris et la Grille. Au centre, la grille des briques ; Modèles propose des mises en page toutes faites.

Déposer ses favoris (00:51)

[À l'écran] Glisser-déposer de « Total bénéficiaires » (Mes favoris) sur la première cellule : le bloc s'affiche avec sa vignette « Graphique depuis favoris ». Clic sur « Configurer » : fenêtre « Configurer : Total bénéficiaires » avec le message « Ce graphique provient de vos favoris et utilise sa configuration d'origine. » Fermeture.

Voix off : Je glisse le favori Total bénéficiaires sur la première cellule. La brique arrive entière, source, calcul et réglages ; Configurer le confirme. Rien à régler : je referme.

Un encart de contexte (01:06)

[À l'écran] Glisser-déposer du bloc « Texte » sur la deuxième cellule : fenêtre « Configurer », titre « Contexte », style « Callout », contenu saisi, bouton « Appliquer ». L'encart apparaît dans la grille.

Voix off : À côté, le bloc Texte, pour le contexte : je le titre Contexte. Style Callout, un encadré mis en valeur ; une phrase, puis Appliquer.

Le graphique (01:17)

[À l'écran] Réglage « Colonnes par défaut » à « 1 colonne », clic sur « Ajouter une ligne » : une ligne 2 d'une seule cellule apparaît. Glisser-déposer du favori « Bénéficiaires par région » dans cette cellule.

Voix off : Le graphique mérite une ligne entière : la grille à une colonne, puis Ajouter une ligne. J'y dépose le favori Bénéficiaires par région. Ici, chaque brique n'est qu'une vignette ; le rendu viendra en plein écran.

Enregistrer et vérifier (01:32)

[À l'écran] Saisie du titre « Suivi Industrie du futur », clic sur « Enregistrer » : fenêtre « Enregistrer le tableau de bord » (nom prérempli, description saisie), confirmation, message « Tableau de bord sauvegardé ». Clic sur « Ouvrir » : liste « Mes tableaux de bord » avec l'entrée créée ; fermeture.

Voix off : Un titre, puis Enregistrer : le tableau de bord est conservé dans mon navigateur. Ouvrir le retrouve dans Mes tableaux de bord, pour le reprendre plus tard.

[À l'écran] Menu « Plus d'actions », « Plein écran » : « Aperçu du tableau de bord » avec le titre, l'indicateur 7 735 « Entreprises bénéficiaires », l'encart de contexte et l'histogramme par région, Auvergne-Rhône-Alpes en tête. Fermeture.

Voix off : Vérifions : Plein écran affiche la page telle que la verront les lecteurs. Près de huit mille entreprises bénéficiaires, les régions dans l'ordre : des chiffres interrogés en direct.

Exporter la page (01:58)

[À l'écran] Onglet « Code » : le HTML complet de la page. Menu « Plus d'actions », « Exporter la page HTML » : message « Fichier HTML téléchargé ». La page exportée s'ouvre à l'adresse d'un intranet d'exemple : indicateur, encart et histogramme s'y dessinent.

Voix off : Dernière étape : l'onglet Code montre la page complète ; Exporter la page HTML la télécharge en un fichier. Déposé sur l'intranet du service, ce fichier s'affiche tel quel, et ses chiffres suivent la donnée.

[À l'écran] Carton de fin : « Des graphiques en favori, un tableau de bord en quelques gestes. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : des favoris sur une grille, un encart, une page enregistrée, vérifiée, exportée ; un tableau de bord vivant, sans rien refaire.

[À l'écran] Carton titre : « La bibliothèque dsfr-data pour les intégrateurs ».

Voix off : Derrière ChartsBuilder, il y a une bibliothèque : dsfr-data. Voyons ce qu'elle apporte à une intégratrice web, dans n'importe quelle page.

Le Playground (00:11)

[À l'écran] Playground : barre d'actions (« Exemples », « Copier le code », « Exécuter »), éditeur de code sombre à gauche chargé d'un exemple, aperçu du graphique à droite ; l'éditeur est vidé, l'aperçu aussi.

Voix off : Le Playground est son atelier d'essai : l'éditeur de code à gauche, l'aperçu à droite. Il s'ouvre sur un exemple ; je le vide, pour partir d'une page blanche.

Trois balises (00:23)

[À l'écran] Saisie dans l'éditeur, en gros plan : <dsfr-data-source> (api-type, base-url, dataset-id), <dsfr-data-query> (group-by, aggregate, order-by), <dsfr-data-chart> (type bar, label-field, value-field, databox).

Voix off : Tout tient en trois balises, trois éléments HTML dans la page. La source : le portail OpenDataSoft, son adresse, le jeu de données Industrie du futur. La requête, la question posée : regrouper par région, additionner les bénéficiaires, trier par ordre décroissant. Le graphique, en barres, branché sur la requête par son identifiant.

Exécuter (00:46)

[À l'écran] Clic sur « Exécuter » ; dans l'aperçu, l'histogramme des bénéficiaires par région dans le cadre du Système de design de l'État, Auvergne-Rhône-Alpes en tête ; infobulle au survol de la première barre.

Voix off : Je clique sur Exécuter : le graphique se dessine, dans le cadre du Système de design de l'État. Le même graphique que dans le Builder, sans une ligne de JavaScript.

Accessibilité et filtre : une balise chacun (00:57)

[À l'écran] Saisie de <dsfr-data-a11y for="chart" source="q" table download> sous le graphique, puis de <dsfr-data-search id="s" source="src" fields="nom_region"> sous la source ; dans la requête, source="src" devient source="s". « Exécuter » : champ « Rechercher une région » au-dessus du graphique, accordéon « Accessibilité : données et description » ouvert sur le tableau région / total. Saisie de « Loire » : deux barres, Pays de la Loire et Centre-Val de Loire.

Voix off : Tout se branche par identifiant : sous le graphique, une balise accessibilité, tableau équivalent et téléchargement. Entre la source et la requête, une balise recherche ; la requête écoute désormais ce filtre. J'exécute : sous le graphique, le bloc Accessibilité, données et description, avec le tableau des valeurs. Je tape Loire : le graphique se recalcule sur les deux régions trouvées.

Des dizaines d'exemples (01:25)

[À l'écran] « Copier le code », message de confirmation. Volet « Exemples » ouvert sur l'éditeur : filtres Source, Pipeline, Sortie ; Sortie = « Carte », exemple « Carte — 5000 CT avec clustering + panneau », « Voir l'exemple », confirmation du remplacement ; dans l'aperçu, la carte de France avec ses grappes de points.

Voix off : Je copie mon code ; le volet Exemples en propose des dizaines, filtrés par source, pipeline et sortie. Sortie Carte : les centres de contrôle technique, regroupés en grappes.

Documentation et licence (01:40)

[À l'écran] Lien « Specs » de l'en-tête : index des composants en tuiles ; fiche dsfr-data-query, tableau « Attributs » (attribut, type, description). Dépôt GitHub bmatge/dsfr-data : « MIT license » dans la colonne À propos, bloc de code source / requête / graphique en tête du README.

Voix off : Les specs, publiques sur l'instance, décrivent chaque composant et tous ses attributs. La bibliothèque est libre, sous licence MIT : un paquet npm, un dépôt GitHub, et ces trois balises en tête de sa présentation.

[À l'écran] Carton de fin : « Trois balises HTML, un graphique vivant. Libre, licence MIT. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : trois balises pour un graphique vivant. Une de plus pour l'accessibilité, une pour le filtre : tout tient dans votre page, sans dépendre de l'application.

[À l'écran] Carton titre : « Créer un graphique depuis son assistant IA ».

Voix off : Sami, chargé d’études, travaille déjà avec un assistant IA. Il voudrait qu’il lui écrive un graphique ChartsBuilder juste, sans inventer de balises.

Le protocole MCP (00:10)

[À l'écran] Carton : « Ce que vous allez voir — les échanges d’un assistant avec ChartsBuilder, pas à pas. Ces échanges sont invisibles dans votre assistant ; ils sont montrés ici dans l’inspecteur officiel du protocole MCP. »

Voix off : MCP est un protocole, un langage commun entre un assistant IA et des outils. Ces échanges restent invisibles dans votre assistant : je les montre ici, dans l’inspecteur officiel du protocole.

Se connecter au serveur MCP (00:25)

[À l'écran] Inspecteur MCP (interface en anglais) : « Add Servers », « Add manually », identifiant « chartsbuilder », transport « streamable-http », adresse https://chartsbuilder.miweb.run/mcp, « Add ». La carte du serveur apparaît ; l’interrupteur de connexion passe à « Connected ». Le volet « Messages » liste les échanges initialize et tools/list.

Voix off : J’ajoute un serveur à la main : je lui donne un nom, le transport HTTP, et l’adresse publique du serveur MCP de ChartsBuilder. Je me connecte : le serveur répond, et annonce ses outils dans le volet Messages.

[À l'écran] Onglet « Tools » : la liste des cinq outils, list_skills, get_skill, get_relevant_skills, generate_widget_code, diagnose_widget_code, survolés un à un.

Voix off : L’onglet Tools en liste cinq : lister les fiches, lire une fiche, trouver les fiches utiles, obtenir la spécification, diagnostiquer un code.

Ce que l’assistant demande (00:51)

[À l'écran] Outil get_relevant_skills : le message est saisi dans le champ « message », « Execute Tool ». Le résultat s’affiche : « 4 skill(s) matched », la fiche dsfr-data-chart en premier, puis dsfr-data-query ; défilement lent du texte.

Voix off : Pour la demande de Sami, les bénéficiaires par région en barres, l’assistant cherche d’abord les fiches utiles. Il en retient quatre, le graphique en tête : la documentation exacte des composants, la même que pour le Studio IA.

[À l'écran] Outil generate_widget_code, champ « chart_type » = bar, « Execute Tool » : la spécification s’affiche, à partir de « Patterns de composition dsfr-data ».

Voix off : Pour écrire le code, il reçoit la spécification complète du graphique en barres : rien n’est inventé.

Le code et son diagnostic (01:15)

[À l'écran] Outil diagnose_widget_code : le code des trois balises est collé dans le champ « html », « Execute Tool » : « Analyse statique : aucun probleme detecte ». Puis la version fautive : « 2 erreur(s) », « Attribut inconnu "couleur" », « L’amont "requete" n’existe pas dans ce code ».

Voix off : Il propose trois balises, source, requête, graphique, et les fait vérifier avant de les rendre. Le diagnostic ne détecte aucun problème. Essayons avec un attribut inconnu et une requête absente : le diagnostic nomme les deux erreurs.

Le rendu dans le Playground (01:35)

[À l'écran] Playground : les trois balises collées dans l’éditeur de code, clic sur « Exécuter » ; l’aperçu rend le graphique en barres des bénéficiaires par région. Menu « Plus d’actions », « Ajouter aux favoris ».

Voix off : Je colle le code produit par l’assistant dans le Playground de ChartsBuilder, et je l’exécute. Le graphique s’affiche : les bénéficiaires par région, Auvergne-Rhône-Alpes en tête. Dans Plus d’actions, je le garde en favori.

[À l'écran] Carton : « Dans votre assistant, une ligne de configuration suffit » — connecteur HTTP : https://chartsbuilder.miweb.run/mcp ; en local : claude mcp add dsfr-data -- node mcp-server/dist/index.js.

Voix off : Pour brancher votre assistant, une ligne de configuration suffit : l’adresse du serveur, ou la commande locale.

[À l'écran] Carton de fin : « Le même savoir que le Studio IA, servi à votre assistant. » et adresse chartsbuilder.miweb.run.

Voix off : Récapitulons : fiches, spécification, diagnostic, le même savoir que le Studio IA, servi à l’assistant que vous utilisez déjà. Le tout est libre.

[À l'écran] Carton titre, logo ChartsBuilder : « Des dataviz de données publiques, écrites en balises HTML ».

Voix off : Cent dix pages de graphiques, de cartes et de récits chiffrés, branchées en direct sur les API de l'État, et écrites en balises HTML. Voici open-data-viz : la vitrine de dsfr-data, les composants dataviz du Système de design de l'État, et le banc d'essai qui en fait la preuve.

L'accueil (00:19)

[À l'écran] Page d'accueil au Système de design de l'État, badge « Données réelles, texte rédigé par IA » dans l'en-tête ; bandeau « Des dataviz de données publiques, écrites en balises HTML » ; section « Le site en six chiffres » : 110 dataviz en ligne, 5 portails de l'État, 5 types d'API, 26 composants dsfr-data, 105 écrites avec dataviz-metier, 60 reliées à leur original.

Voix off : L'accueil pose la promesse : des dataviz branchées en direct sur les API des portails de l'État, conformes au Système de design par construction. La recette tient en trois mots : une balise, un CDN, aucune ligne de JavaScript applicatif. Six chiffres, recomptés à chaque chargement : 110 dataviz en ligne, 5 portails, 5 types d'API, 26 composants.

Une dataviz, en balises (00:54)

[À l'écran] Page « La vacance qu'on peut lire : longue durée, loyers bas, zone C » : bandeau avec le titre-message et la ligne des sources (LOVAC, carte des loyers, zonage ABC, référentiel INSEE) ; chapitre 4 « Où » : carte choroplèthe des départements dans son cadre officiel, résumé « Vacants depuis plus de deux ans, en France : 3,35 », légende de 1,6 à 10,1 ; clic sur « Voir le code » sous la carte : le panneau montre la balise dsfr-data-chart et ses attributs.

Voix off : Une démonstration : la vacance des logements. Le titre dit déjà le message : longue durée, loyers bas, zone C. La page lit en direct quatre jeux de trois producteurs, et les joint commune par commune, dans le navigateur. Plus bas, la carte par département, avec son résumé pondéré et son tableau équivalent. Sous chaque bloc, Voir le code : une balise, ses attributs, rien d'autre. C'est tout ce qu'un intégrateur écrit.

Toutes les dataviz (01:23)

[À l'écran] Page « Toutes les dataviz » : 110 dataviz, colonne « Filtrer » (Portail, Nature, Ce que la page met en œuvre, API interrogée, Méthode). Case « Économie (Bercy) » cochée : « 24 dataviz », zoom sur une carte et son pied « Dataviz d'origine ». Case « Économie (Bercy) » décochée, puis « Culture » cochée : « 28 dataviz », cartes « Pas de dataviz d'origine : la page est une création ».

Voix off : Le catalogue réunit les 110 pages, chacune sur sa carte. On filtre par portail, par nature, par capacité, par API. Je coche le portail Économie, celui de Bercy : 24 dataviz recréées. Chacune renvoie à la dataviz d'origine, sur le portail. Je passe à Culture : 28 dataviz créées sur l'API Tabular de data.gouv.fr, sans original.

Une page créée (01:49)

[À l'écran] Clic sur la carte « Festivals soutenus par l'État : Aix et Avignon reçoivent près de trois euros sur dix ». La page s'ouvre : titre, chapô calculé, trois chiffres clés (Crédits aux festivals en 2024 : 31,7 M€ en 810 aides ; Part d'Aix et d'Avignon : 29,8 % ; Aides de 10 000 € ou moins : 62 %).

Voix off : J'ouvre les festivals soutenus par l'État. Le titre dit le message : Aix et Avignon reçoivent près de trois euros sur dix. Chapô et chiffres clés sont calculés à l'ouverture, pas tapés à la main : 810 aides, près de 32 millions d'euros au total.

Ce que dsfr-data sait faire (02:07)

[À l'écran] Accueil, section « Ce que dsfr-data sait faire » : quatorze cartes (Graphique, Carte choroplèthe, Carte interactive, Chiffres clés, Phrase calculée, Tableau, Recherche, Facettes, Filtres partagés, Jointure, Agrégation, Pivot, Union de jeux, Croisement de sources), chacune avec son nombre de dataviz et un exemple ; puis le graphique en barres empilées « Les dataviz du site, par portail et par nature ».

Voix off : Retour à l'accueil : quatorze capacités, chacune comptée sur les pages qui l'emploient, et illustrée par l'une d'elles. Du graphique au croisement de sources, en passant par la carte, les chiffres clés, la phrase calculée, la recherche, les facettes, la jointure, le pivot. En bas de page, un graphique classe les 110 dataviz par portail et par nature : reproduites, recréées en récit, ou créées.

Le banc d'essai, comme preuve (02:33)

[À l'écran] Accueil, section « Le banc d'essai, comme preuve » : trois chiffres clés (360 constats au registre, 111 corrigés par dsfr-data, 63 faux problèmes) et trois tuiles (Synthèse des analyses, Registre des retours, Tableau de bord du banc).

Voix off : Ce site est né d'un banc d'essai : refaire une à une les dataviz de trois portails, pour mesurer ce que dsfr-data coûte, vraiment. Le verdict, en trois chiffres : 360 constats au registre, 111 corrigés par dsfr-data, 63 faux problèmes, des critiques retirées après vérification.

[À l'écran] Page « Synthèse des analyses », titre « Refaire les dataviz des portails publics avec dsfr-data : oui, et le risque n'est pas l'outil » ; en bas, l'encadré « En une phrase » : « La bibliothèque suffit, et elle a corrigé ce qu'on lui a signalé ; ce qui reste difficile, c'est de savoir ce que dit la donnée. »

Voix off : La synthèse tranche : refaire les dataviz des portails publics avec dsfr-data, oui, et le risque n'est pas l'outil. En une phrase : la bibliothèque suffit, et elle a corrigé ce qu'on lui a signalé. Ce qui reste difficile, c'est de savoir ce que dit la donnée.

La boucle avec ChartsBuilder (03:12)

[À l'écran] Page « Registre des retours » : chiffres clés (Sélection courante 360, sévérités haute, moyenne, basse ; Corrigés par dsfr-data 111 ; Retirés après vérification 71), recherche, colonne de filtres (Catégorie, Sévérité, Composant, Dataviz, Statut). Case « Corrigé par dsfr-data » cochée : « Sélection courante 111 » ; zoom sur le premier constat (badges, titre, constat, « Ce qui est vrai », « Vérifié »).

Voix off : Le registre des retours est rendu avec les composants qu'il évalue : chaque constat porte l'observation qui l'établit. Je coche Corrigé par dsfr-data : 111 constats, chacun avec ce qui est vrai, et la version qui l’a réglé. C'est la boucle avec ChartsBuilder : le banc demande, la bibliothèque livre, le registre rejoue.

[À l'écran] Carton de fin : « Des balises, des données en direct, un banc d’essai. » et adresse open-data-viz.lab.miweb.run.

Voix off : 110 dataviz, des balises, des données en direct, et un banc d'essai qui dit ce que ça coûte. Tout est en ligne, code compris : open-data-viz point lab point miweb point run. Pour écrire les vôtres : ChartsBuilder.