République
française
dsfr-data
Documentation — Web Components DSFR pour la dataviz
dsfr-data est une bibliothèque de Web Components pour creer des tableaux de bord et visualisations de données conformes au Design System de l'État (DSFR). Le rendu des graphiques s'appuie sur la bibliothèque officielle DSFR Chart.
Cette bibliothèque s'articule autour de deux types de composants complementaires :
Composants developpes specifiquement pour ce projet. Ils gerent la connexion aux données, les transformations, et l'affichage d'indicateurs. Ils communiquent entre eux via un systeme de data-bridge qui permet de partager les données sans ecrire de JavaScript.
Graphiques provenant de la bibliothèque officielle
DSFR Chart.
Ces composants sont conformes RGAA et respectent la charte graphique de l'État.
Ils peuvent etre utilises directement ou via notre wrapper dsfr-data-chart
pour une alimentation dynamique.
Le pont entre les deux : Le composant <dsfr-data-chart> fait le lien
entre le systeme de données dsfr-data-source et les graphiques DSFR Chart,
permettant de creer des visualisations dynamiques alimentees par une API.
Ces composants gèrent la recuperation, la transformation et l'affichage des données.
Connecteur de données
Recupere les données depuis une API et les distribue aux autres composants.
Normalisation des données
Nettoie et normalise les données : conversion numérique, renommage, trim.
Jointure multi-sources
Joint deux sources de données sur une clé pivot pour enrichir un jeu de données.
Bascule "wide" vers "tidy"
Deplie un tableur ou le temps est dans les noms de colonnes (c2023_01...) en une observation par ligne.
Bascule "long" vers "wide"
Croise un tableau tidy : une ligne par valeur de row, une colonne par valeur de column, l'agregat dans la cellule.
Filtres a facettes
Ajoute des filtres interactifs par facettes sur les données d'une source.
Recherche textuelle
Champ de recherche DSFR qui filtre les données en amont. Se combine avec les facettes.
Filtres transverses
Diffuse des filtres communs a plusieurs sources depuis des controles d'UI natifs (fan-out declaratif).
Affichage dynamique
Genere des cartes, tuiles ou tout motif HTML repetitif a partir d'un template et de données.
Indicateur chiffre
Affiche une valeur clé avec formatage, couleurs conditionnelles et icones.
Structure : une ligne, un pipeline
Répète des instances vivantes par ligne de données (un graphique par question), avec identité par clé et imbrication.
Podium et classement
Affiche un classement sous forme de podium avec medailles, couleurs et icones personnalisables.
Wrapper graphique
Connecte les graphiques DSFR Chart au systeme de données dynamiques.
Accessibilité graphique
Companion d'accessibilité unifie : tableau des données, téléchargement CSV et description textuelle.
Telemetrie declarative
Cible de telemetrie visible et retirable dans le HTML : opt-in declaratif, pendant de proxy-url.
Famille de 5 composants pour les cartes interactives Leaflet : un conteneur, des couches
de données multi-sources, l'affichage au clic, les encarts territoriaux (DROM, Corse) et
l'animation temporelle. Bundle dédié dsfr-data.map.esm.js, Leaflet chargé a la demande.
Conteneur carte
Carte Leaflet : fonds souverains IGN, viewport, encarts, fit clippé, accessibilité intégrée.
Couche de données
Markers, geoshape, cercles proportionnels, heatmap ; clustering, bbox et découpage temporel.
Affichage au clic
Popup, modale ou volet latéral avec template déclaratif, partagé entre carte et encarts.
Encarts territoriaux
Vignettes DROM, Corse ou zoom local ; couches clonées et clics délégués a la carte principale.
Animation temporelle
Contrôles de lecture accessibles (pas d'auto-play, clavier, reduced-motion) des couches datées.
Graphiques officiels conformes au DSFR. Utilisez-les directement ou via dsfr-data-chart pour des données dynamiques.
Une vue d'ensemble avec démos présente les six types côte a côte.