Comment afficher sur son site web des données publiées sur data.gouv.fr

Les données publiées sur le portail data.gouv.fr peuvent facilement être présentées sur une page web, en particulier sur une des pages du site institutionnel d’une collectivité.

Source : OpenDataFrance - Licence : CC-BY-SA

Version : v2.0, date : juillet 2022

Contexte

La plateforme « data.gouv.fr » offre plusieurs moyens plus ou moins avancés d’intégrer les données disponibles en open data sur vos propres sites :

de manière unitaire si vous souhaitez n’afficher qu’un ou quelques jeu(x) de données particulier(s) ;
de manière plus générale si vous souhaitez afficher tous les jeux de données relatifs à un territoire ou à une organisation ;
pour une gestion fine de l’habillage et des données affichées, nous vous recommandons l’API ;
pour avoir votre propre portail fondé sur le moteur de la plateforme.

Ces différents cas d’intégration correspondent généralement à différents profils :

un journaliste traitant d’une problématique donnée va être intéressé par l’inclusion de jeux de données directement au sein de son article ;
une mairie va être intéressée par l’intégration des jeux de données relatifs à son territoire sur son site internet ;
une association pourrait être intéressée par la création d’une page personnalisée compilée à partir de données issues de sources multiples ;
un pays se lançant dans l’open data va chercher à créer son propre portail.

Méthodes d'intégration

Celles-ci ont été décrites initialement dans la documentation de data.gouv : https://doc.data.gouv.fr/jeux-de-donnees/integrer-des-donnees/

Intégration ponctuelle de jeux de données

Chaque jeu de données est intégrable sur n’importe quelle page en ajoutant quelques lignes de HTML, deux versions existent :

<div data-udata-dataset-id="IDENTIFIANT DU JEU DE DONNÉES">
</div>
<script data-udata="https://www.data.gouv.fr/" 
src="https://static.data.gouv.fr/static/oembed.js" 
async defer>
</script>

<div data-udata-dataset-id="IDENTIFIANT DU JEU DE DONNÉES">
</div>
<script src="https://www.data.gouv.fr/static/widgets.js" 
id="udata" async defer 
onload="udataScript.loadDatasets()">
</script>

ET En remplaçant l’IDENTIFIANT DU JEU DE DONNÉES par l’identifiant disponible sur sa page dédiée, dans l'onglet Métadonnées sous la rubrique ID :

La première version de code proposée est accessible directement depuis l'onglet Action du jeu de données souhaité. Il suffit de copier le code proposé dans la rubrique "INTÉGRER SUR VOTRE SITE"

Selon le code utilisé, vous verrez apparaître l'une ou l'autre des versions d'intégration sur votre site. Sur cet exemple le premier cartouche correspond à la première version du code proposé et le second à la seconde version. Ces cartouches contiennent les informations relatives au jeu de données choisis de la manière suivante :

Voici un autre exemple d’intégration sur le blog d’Etalab, ici avec les données de consommation d’électricité des ministères. Il est possible d’intégrer plusieurs jeux de données à la fois en dupliquant la ligne correspondant à l’élément <div> avec un nouvel identifiant. Vous pouvez personnaliser l’apparence du rendu du cartouche grâce à la classe CSS dataset-card.

Intégration pour une organisation ou un territoire

Le mécanisme pour afficher tous les jeux de données relatifs à une organisation ou un territoire est le même que celui pour l’intégration d’un seul jeu de données décrit précédemment. Cet usage est recommandé si vous êtes responsable de cette organisation ou de ce territoire et souhaitez faire la promotion des jeux de données associés. Par exemple dans la cadre de la loi Notre, il est demandé aux communes de plus de 3500 habitants de rendre accessible en open data certaines données. L’usage de la plateforme « data.gouv.fr » pour déposer ces données puis les intégrer sur son propre site est rendue possible par cette solution.

Intégration d’une organisation

<div data-udata-organization="IDENTIFIANT DE L’ORGANISATION">
</div>
<script src="https://www.data.gouv.fr/static/widgets.js" 
id="udata" async defer onload="udataScript.loadOrganization({withSearch:true})">
</script>

En remplaçant l’IDENTIFIANT DE L’ORGANISATION par l’identifiant disponible sur sa page dédiée (l'ID se trouve en bas de page de description de l'organisation, dans les informations techniques, rubrique ID). Vous devriez alors voir apparaître sur votre site un cartouche contenant les informations relatives aux jeux de données de cette organisation. Optionnellement, il est possible d’afficher une barre de recherche pour laisser la possibilité au visiteur de filtrer la liste des jeux de données affichés. Cela est activé en passant l’option {withSearch: true} à la méthode loadOrganization() ci-dessus.

L'exemple ci-dessous montre l'intégration des jeux de données de la ville de Grenoble sur une page web avec cette méthode et l'option de filtrage activée :

Intégration pour une page personnalisée

METACLIC : Une bibliothèque JavaScript a été développée en open source par la société DATAKODE pour faciliter la personnalisation de l’affichage des jeux de données sur un site tiers. Un système de gabarit permet d’intégrer les données que vous souhaitez issues de l’API à vos couleurs et selon la disposition qui vous convient. Il s’agit d’un moyen de créer votre propre page open data à coûts réduits au sein de votre site.

Voici un exemple de restitution :

Données publiées sur data.gouv.fr :

Données vues sur le site web de Castelnaudary.fr via métaclic

Intégration d’un portail open data complet avec Udata

Les outils développés sont disponibles en open-source. Ils sont le fruit d’un effort international pour créer des synergies autour de la donnée ouverte et mutualiser nos efforts de développement. La gouvernance est inclusive et la licence est permissive. Nous participons à l’animation autour du développement de la plate-forme car nous souhaitons produire un bien commun réutilisable par tous.

L’intégration d’un portail open data complet demande des compétences en administration système, en développement Python et JavaScript ainsi qu’un temps non négligeable de prise en main de la plateforme. C’est un choix qui doit être mûrement réfléchi et nous vous recommandons de passer directement par « data.gouv.fr » si vous avez des données issues de territoires francophones.Si vous souhaitez néanmoins vous lancer dans cette aventure, vous pouvez commencer par analyser le code source ainsi que la documentation dédiée. Vous pouvez également venir en discuter avec la communauté (en anglais).

Exemples

Exemple de publication des données de Castelnaudary : https://www.ville-castelnaudary.fr/fr/mairie/open-data

Le code est alors :

> via l’API METACLIC

<script>window.jQuery || document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'><\/script>")
</script>
<!-- chargement feuille de style font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="https://unpkg.com/metaclic/dist/metaclic.js">
</script>
<div class="Metaclic-data"
   data-q=""
   data-organizations="58d2805b88ee3830ab40dd02"
   data-background_layers="OSM-Fr,Positron,Outdoors_OSM,Hydda"
   data-page_size="10"
></div>

> Via l’API data.gouv

<div data-udata-organization="58d2805b88ee3830ab40dd02"></div>
</div>
<script src="https://www.data.gouv.fr/static/widgets.js" 
id="udata" async defer onload="udataScript.loadOrganization({withSearch:true})">
</script>

PrécédentJeux de données des communes les plus fréquemment ouverts SuivantPréparer les données pour une publication en open data

Dernière mise à jour il y a 1 an