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 : ODF, version : V1.1, date : 13 déc.18, Licence : CC-BY-SA

Historique des modifications : 1.0 : version initiale (mars.18) 1.1 : diverses corrections (suppression -NC dans licence, références url)

Crédits : Ce document est une copie de la page “Découvrir l’opendata en tant qu’intégrateur” publiée par Etalab sur le site : https://www.data.gouv.fr/fr/faq/system-integrator/ Il est complété par OpenDataFrance lorsqu’il est utile de préciser un point ou de commenter les résultats et conditions particulières d’utilisation.

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

Intégration ponctuelle de jeux de données

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

<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>

En remplaçant l’IDENTIFIANT DU JEU DE DONNÉES par l’identifiant disponible sur sa page dédiée vous devriez voir apparaître sur votre site un cartouche contenant les informations relatives à ce jeux de données de la manière suivante

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

ce type d’intégration est actuellement en cours de développement et l’API est susceptible de changer. Veuillez contacter Etalab si vous souhaitez participer aux tests préliminaires.

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()">
</script>

En remplaçant l’IDENTIFIANT DE L’ORGANISATION par l’identifiant disponible sur sa page dédiée vous devriez 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.

Intégration d’un territoire

<div data-udata-territory="IDENTIFIANT DU TERRITOIRE">
</div>
<script src="https://www.data.gouv.fr/static/widgets.js" 
id="udata" async defer onload="udataScript.loadTerritory()">
</script>

En construisant l’IDENTIFIANT DU TERRITOIRE qui doit être de la forme fr-town-13004 où 13004 est le code INSEE de la commune (attention il diffère du code postal). Vous pouvez aussi récupérer les jeux de données relatifs à un département fr-county-13 ou une région fr-region-93. Vous devriez alors voir apparaître sur votre site un cartouche contenant les informations relatives aux jeux de données de ce territoire. 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 loadTerritory() ci-dessus.

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

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-territory="fr-town-11076"></div>
<script src="https://www.data.gouv.fr/static/widgets.js" 
id="udata" async defer onload="udataScript.loadTerritory()">
</script>

PreviousComment publier un jeu de données sur data.gouv.fr NextAspects juridiques

Last updated 5 years ago