Intégrer une visualisation dans un site

Une visualisation peut s'afficher dans n'importe quelle page web : le site de votre collectivité, un article, un intranet. Le code à copier se trouve sur la page de la visualisation, dans l'onglet Intégrer dans un site de la section Permissions & partage.

L'onglet propose deux modes [1] :

• iframe, le cadre standard du web, reconnu par tous les outils de publication ;
• d-frame, un composant qui enrichit l'iframe : hauteur ajustée à la largeur ou au contenu, et synchronisation des paramètres [2] avec la page qui l'accueille.

Le code [3] se met à jour selon vos choix ; Copier [4] le place dans le presse-papiers.

Le code se colle tel quel dans la page :

<iframe
  src="https://koumoul.com/data-fair/app/<identifiant>"
  width="100%" height="500px" style="background-color: transparent; border: none;"
></iframe>

La hauteur est fixe : si le contenu de la visualisation est plus haut, une barre de défilement apparaît à l'intérieur du cadre. C'est le bon choix pour un outil qui n'accepte que des iframes.

d-frame est un composant web libre, documenté ici. Il se charge une fois par page, par une ligne à placer avant le premier <d-frame> (le code de l'onglet ne la contient pas) :

<script src="https://cdn.jsdelivr.net/npm/@data-fair/frame@0/dist/d-frame.min.js"></script>

La visualisation s'intègre ensuite avec la balise <d-frame>, qui accepte les attributs décrits ci-dessous.

Une visualisation n'a pas toujours une hauteur naturelle : un graphique ou une carte occupe la place qu'on lui donne, alors qu'un tableau de bord ou une liste d'indicateurs s'allonge avec son contenu. d-frame propose trois façons de régler la hauteur.

C'est le code proposé par défaut : height fixe la hauteur et resize="no" ignore la hauteur annoncée par la visualisation.

<d-frame
  src="https://koumoul.com/data-fair/app/<identifiant>?d-frame=true"
  height="500px"
  scrolling="no"
  resize="no"
/>

Avec l'attribut aspect-ratio sans valeur, la hauteur suit la largeur disponible, pour garder une visualisation bien proportionnée sur un téléphone comme sur un grand écran :

Une valeur fixe le rapport largeur / hauteur, par exemple aspect-ratio="1.5". Retirez alors height, qui l'emporterait.

<d-frame
  src="https://koumoul.com/data-fair/app/<identifiant>?d-frame=true"
  aspect-ratio
/>

Les visualisations qui s'allongent avec leur contenu (indicateurs clés, tableau de bord, catalogue, calendrier, chronologie…) annoncent leur hauteur : sans height ni resize="no", le cadre prend exactement la hauteur du contenu, sans barre de défilement, et suit ses changements (un filtre qui réduit une liste, par exemple).

Une visualisation garde son état dans son adresse : filtres, élément sélectionné, position d'une carte. Avec l'option Synchroniser les paramètres de l'application, d-frame reporte cet état dans l'adresse de la page qui l'accueille :

<d-frame
  src="https://koumoul.com/data-fair/app/<identifiant>?d-frame=true"
  aspect-ratio
  sync-params="*:<identifiant>"
/>

Les paramètres de la visualisation apparaissent dans l'adresse de votre page, précédés de l'identifiant de la visualisation, pour que plusieurs visualisations d'une même page ne se mélangent pas. Un visiteur qui partage l'adresse de la page partage donc exactement ce qu'il voit.

Sur un site public, la visualisation et les jeux de données qu'elle utilise doivent être publics, sinon le visiteur voit un cadre vide ou un message d'erreur.

Pour afficher une visualisation privée sans ouvrir ses données, créez un lien protégé (onglet Lien protégé) et placez son adresse dans src à la place de l'adresse de la visualisation. Toute personne qui consulte la page voit alors la visualisation : réservez ce cas à un site dont l'accès est lui-même restreint, comme un intranet.

Sur un portail Data Fair, pas de code à copier : les pages de contenu intègrent une visualisation avec un bloc dédié, qui gère la hauteur et reprend le thème du portail.

Si vous avez des remarques sur ce cours, n'hésitez pas à nous les communiquer.