Intégrer du contenu

Quand vous éditez votre page en mode expert, vous pouvez directement intégrer d’autres contenus à votre page.

Intégrer une visualisation OpenDataSoft

Plusieurs options de partage sont disponibles en dessous des visualisations sur les portails OpenDataSoft (le vôtre inclut). Parmi elles, l’option ” Intégrer ” crée un petit code HTML que vous pouvez coller sur votre page, intégrant ainsi la visualisation à celle-ci.

../../_images/integrate_map--fr.png

Intégrer un fil d’actualité Twitter

Si vous disposez d’un compte Twitter, vous pouvez créer des “widgets” Twitter depuis la page de votre compte. Ces derniers sont conçus pour être intégrés à d’autres sites Web (des blogs par exemple). Lorsque vous créez un widget, Twitter vous donne un petit “code” à coller dans votre code HTML. Pour des raisons de sécurité, JavaScript est bloqué dans l’éditeur de pages OpenDataSoft, il vous est donc impossible d’utiliser directement le code généré par Twitter. Nous vous fournissons donc un widget OpenDataSoft spécial à cet effet.

Vous devez d’abord récupérer “l’ID de widget” qui se trouve dans la première ligne du code, dans l’attribut data-widget-id :

<a class="twitter-timeline" data-dnt="true" href="**https://twitter.com/hashtag/opendata**" data-widget-id="12341234123412341234">My tweets</a>

Dans cet exemple, l’ID de widget est “12341234123412341234”.

Ajoutez ensuite ce widget à votre page en indiquant l’ID de widget dans l’attribut widget-id :

<ods-twitter-timeline widget-id=""12341234123412341234></ods-twitter-timeline>

Intégrer d’autres contenus tiers

Des services tels que YouTube proposent des codes à coller pour intégrer le contenu qu’ils hébergent dans d’autres sites Web. Pour des raisons de sécurité, nous n’autorisons pas les utilisateurs à écrire du JavaScript dans les pages et certains de ces codes d’intégration peuvent avoir été écrits en JavaScript. Ces codes ne fonctionneront donc pas sur nos pages, mais la majorité des services proposent des codes basés sur des “iframes”, qui eux fonctionnent très bien. Les intégrations possibles incluent Youtube, Vimeo ou encore Dailymotion.

Utiliser des widgets

Lorsque vous éditez le contenu de votre page en mode expert, vous pouvez utiliser la bibliothèque ODS-Widgets. Celle-ci est en fait un ensemble de composants, disponibles sous la forme d’éléments HTML, qui vous permettent d’intégrer des visualisations de données dans le code votre page de manière native et de créer des pages interactives en combinant différents widgets.

ODS-Widgets est une bibliothèque open source basée sur le framework AngularJS, développée et maintenue par OpenDataSoft sur GitHub. Elle s’accompagne d’une documentation en ligne complète et exhaustive.

Vous pouvez l’utiliser directement dans les pages de contenu de votre domaine comme dans des pages externes sur des sites Web tiers en la traitant comme une boîte à outils indépendante.

Remarque

Même si elle se base sur AngularJS, la bibliothèque ODS-Widgets est conçue pour être utilisée comme un ensemble d’éléments HTML, elle est donc intégralement opérée en HTML, sans nécessiter d’écriture en JavaScript. Par conséquent, elle est accessible à quiconque ayant quelques notions en HTML et ne requiert pas de compétences en développement. De plus, beaucoup de visualisations d’OpenDataSoft indiquent le code des widgets correspondant en temps réel lorsque vous les utilisez sur le portail. Vous pouvez donc apprendre en observant le résultat d’une visualisation et en remontant à partir de là.

En plus des widgets offerts par la bibliothèque ods-widgets, quelques directives supplémentaires qui peuvent être utilisés au sein des pages de contenu sur la plateforme. Contrairement aux widgets, elles ne peuvent en revanche pas être utilisées sur des sites tiers car elles sont intimement liées à la plateforme.

Liste des widgets

odsAggregation

  • Ce widget expose les résultats d’une fonction d’agrégation appliquée sur un champ d’un jeu de données. Il peut être utilisé pour exposer la température moyenne d’un jeu de données météorologique par exemple. Le résultat est présenté sous la forme d’une nouvelle variable qui peut être utilisée dans un autre widget ou directement intégrée dans votre code HTML.

  • Documentation complète

odsAnalysis

  • Ce widget expose les résultats de plusieurs fonctions d’agrégation en se basant sur un axe. Comme pour un graphe, il calcule les fonctions d’agrégation pour chaque valeur de l’axe des abscisses. Il peut être utilisé avec le ngRepeat d’AngularJS pour créer facilement un tableau de résultats d’analyses.

  • Documentation complète

  • En lien avec odsAnalysisSerie

odsBreezometer

  • Intègre un “widget” Breezometer grâce à la clé de widget fournie par Breezometer.

  • Documentation complète

odsCalendar

  • Ce widget peut créer un calendrier à partir de n’importe quel jeu de données contenant au moins deux champs de type datetime et un champ de texte. Il peut charger au maximum 1 000 événements (enregistrements à la fois.

  • Documentation complète

odsCatalogContext

  • Un “contexte de catalogue” représente le catalogue (liste) complet des jeux de données d’un domaine et un ensemble de paramètres servant à interroger ce catalogue.

  • Documentation complète

odsChart

  • C’est le widget de base qui vous permet de créer des graphes à partir des jeux de données OpenDataSoft. Un graphe se compose d’une ou de plusieurs séries issues d’un ou de plusieurs jeux de données représentés par un contexte de jeu de données, avec un type de graphe défini et de multiples paramètres permettant d’affiner l’apparence du graphe.

  • Documentation complète

  • En lien avec odsChartQuery et odsChartSerie

odsClearAllFilters

  • Ce widget affiche un bouton permettant d’effacer tous les filtres actifs dans le contexte donné.

  • Documentation complète

odsDatasetCard

  • Si vous enveloppez un ou plusieurs éléments dans cette directive, elle affichera une carte au-dessus de celui-ci. Celle-ci peut être développée pour afficher le titre et la description du jeu de données, un lien vers le portail sur lequel le jeu de données est exposé et la licence rattachée aux données.

  • Documentation complète

odsDatasetContext

  • Le “contexte d’un jeu de données” représente un jeu de données et un ensemble de paramètres servant à interroger ses données. Un contexte peut être utilisé par une ou plusieurs directives afin qu’elles puissent partager des informations (les paramètres des requêtes le plus souvent).

  • Documentation complète

odsDatetime

  • Récupère l’heure et la date ISO locales et les stocke dans une variable (dans le scope).

  • Documentation complète

odsDisqus

  • Ce widget affiche un volet Disqus pour permettre aux utilisateurs de commenter la page.

  • Documentation complète

  • Plus d’informations sur la Configuration de disqus /!à écrire.

odsDomainStatistics

  • Ce widget énumère les valeurs statistiques d’un catalogue donné et les injecte dans le contexte sous forme de variables.

  • Documentation complète

odsFacetResults

  • Ce widget récupère les résultats d’énumération des valeurs (“catégories”) d’une facette et les expose dans une variable disponible dans le scope. Il peut être utilisé avec le ngRepeat d’AngularJS pour créer facilement une liste de résultats.

  • Documentation complète

odsFacets

  • Ce widget affiche des filtres (facettes) pour un jeu de données ou le catalogue de jeux de données du domaine, permettant aux utilisateurs “d’affiner” leurs recherches de manière dynamique en fonction d’une ou de plusieurs catégories du contexte.

  • Documentation complète

odsFilterSummary

  • Ce widget affiche un résumé de tous les filtres actifs sur un contexte : recherche de texte, affinage...

  • Documentation complète

odsGauge

  • Ce widget affiche une jauge sous la forme d’un disque ou d’une barre horizontale. Il repose sur CSS3 et SVG, ce qui le rend totalement personnalisable en CSS.

  • Documentation complète

odsGeoSearch

  • Ce widget affiche une mini-carte avec un outil permettant de dessiner des rectangles qui peut être utilisé pour faire des recherches dans le catalogue.

  • Documentation complète

odsGeotooltip

  • Lorsqu’elle encadre un texte, cette directive affiche une infobulle concernant un point ou une forme sur la carte.

  • Documentation complète

odsHubspotForm

  • Intègre un formulaire Hubspot à partir de l’ID du portail et de l’ID du formulaire.

  • Documentation complète

  • Plus d’informations à propos de Hubspot

odsInfiniteScrollResults

  • Ce widget affiche les résultats d’une requête dans une liste à défilement infini. Il utilise le modèle HTML dans le tag du widget et le répète pour chaque résultat.

  • Documentation complète

odsLastDatasetsFeed

  • Ce widget affiche les derniers jeux de données d’un catalogue (par défaut les 5 derniers), en fonction des modifications des métadonnées.

  • Documentation complète

odsLastReusesFeed

  • Ce widget affiche les dernières réutilisations publiées sur un domaine (les 5 dernières par défaut).

  • Documentation complète

odsMap

  • Ce widget vous permet de créer une visualisation sur carte et d’afficher les données à l’aide de différents modes d’affichage via des couches. Chaque couche s’appuie sur un contexte de jeu de données, un mode d’affichage (clusters...) et plusieurs propriétés définissant l’affichage, comme par exemple les couleurs.

  • Documentation complète

odsMediaGallery

  • Ce widget affiche une galerie d’images à défilement infini, pour un jeu de données dont les contenus disposent d’aperçus (images, fichiers pdf...).

  • Documentation complète

odsMostPopularDatasets

  • Ce widget affiche les jeux de données les plus populaires d’un catalogue (les 5 premiers par défaut), en fonction du nombre de téléchargements.

  • Documentation complète

odsMostUsedThemes

odsPicto

  • Ce widget affiche un “pictogramme” défini par une URL et lui impose une couleur. Cet élément peut être stylisé (hauteur, largeur...), surtout si le pictogramme est vectoriel (SVG).

  • Documentation complète

odsPlumeAirQuality

odsRecordImage

odsRedirectIfNotLoggedIn

  • Ce widget force une redirection vers la page de connexion du domaine si l’utilisateur n’est pas connecté.

  • Documentation complète

odsResultEnumerator

  • Ce widget énumère les résultats d’une recherche (enregistrements pour un contexte de jeu de données, jeux de données pour un contexte de catalogue) et reproduit le modèle (le contenu de l’élément de la directive) pour chacun d’entre eux.

  • Documentation complète

odsResults

  • Ce widget expose les résultats d’une recherche (sous forme de tableau) dans une variable disponible dans le scope. Il peut être utilisé avec le ngRepeat d’AngularJS pour créer facilement une liste de résultats.

  • Documentation complète

odsReuses

  • Ce widget affiche toutes les réutilisations publiées sur un domaine dans une liste infinie de grands cadres qui les présentent clairement. La liste affiche les réutilisations les plus récentes en premier.

  • Documentation complète

odsSearchbox

  • Ce widget affiche un grand champ de recherche qui redirige la recherche sur la page d’accueil Explorer du domaine.

  • Documentation complète

odsSocialButtons

  • Ce widget affiche un bouton de partage qui révèle les boutons de partage des différents réseaux lorsque vous passez la souris dessus.

  • Documentation complète

odsSpinner

  • Ce widget affiche le bouton fléché OpenDataSoft personnalisé. Sa taille et sa couleur s’adaptent à la police actuelle.

  • Documentation complète

odsTable

  • Ce widget affiche la vue tableau d’un jeu de données avec un défilement infini et la possibilité de trier les colonnes (en fonction du type des colonnes).

  • Documentation complète

odsTagCloud

  • Ce widget affiche un “nuage de tags” des valeurs disponibles dans une facette (celle d’un jeu de données ou celle d’un catalogue de jeux de données).

  • Documentation complète

odsTextSearch

  • Ce widget affiche un champ de recherche qui peut être utilisé pour des recherches en texte intégral dans un contexte.

  • Documentation complète

odsThemeBoxes

  • Ce widget énumère les thèmes disponibles sur le domaine en affichant leurs pictogrammes et le nombre de jeux de données qu’ils comprennent.

  • Documentation complète

odsThemePicto

odsTimerange

  • Ce widget affiche deux champs pour sélectionner les limites des plages d’heures et de dates.

  • Documentation complète

odsTimescale

  • Affiche une option pour choisir entre : moins de 24 h, moins d’une semaine, moins d’un mois ou moins d’un an.

  • Documentation complète

odsTopPublishers

odsTwitterTimeline

Filtres

En plus des filtres AngularJS, la bibliothèque de widgets d’OpenDataSoft en comprend quelques autres qui peuvent être utilisés dans les pages personnalisées :
capitalize, fieldsFilter, firstValue, imageify, imageUrl, isAfter, isBefore, isDefined, isEmpty, join, keys, moment, momentadd, momentdiff, nofollow, normalize, numKeys, shortSummary, slugify, split, stringify, themeColor, themeSlug, thumbnailUrl, timesince, toObject, truncate, values, videoify

Créer des tableaux de bord

Un tutoriel pas à pas pour créer un tableau de bord simple avec des visualisations de données, des filtres et des compteurs.