Créer un tableau de bord (1re partie)¶
★☆☆ Débutant - durée : 30 minutes
Ce tutoriel va vous guider tout au long des étapes de création d’un tableau de bord avec 3 visualisations d’un jeu de données publié sur un portail Opendatasoft.
Au cours de ce tutoriel, vous allez apprendre :
ce qu’est un widget ;
ce qu’est un iframe ;
la différence entre un widget et un iframe ;
comment utiliser un widget dans une page de contenu créée avec Opendatasoft.
PRÉREQUIS
Pour créer un tableau de bord, vous avez besoin d’un accès à l’interface d’administration d’un portail Opendatasoft, ainsi que de la permission “Éditer toutes les pages”.
Pour suivre ce tutoriel, nous vous recommandons vivement d’utiliser le jeu de données World Heritage List publié sur notre réseau de données, Données. Ce jeu de données nous servira d’exemple tout au long du tutoriel. Toutefois, si vous choisissez un autre jeu de données pour suivre le tutoriel, veillez à en sélectionner un avec une vue Tableau, une vue Carte et une vue Analyse. Vous aurez également besoin d’adapter le code de votre page au jeu de données choisi.
Créer votre page de contenu
1 + Accédez à l’interface d’administration, dans la section Pages.
2 + Cliquez sur le bouton + Nouvelle page pour créer une page de contenu.
3 + Vous êtes redirigé par défaut sur l’onglet Propriétés. Il contient diverses informations sur la page, dont certaines à renseigner pour pouvoir enregistrer la page. Entrez un titre et un suffixe d’URL. Vous pouvez également ajouter une description et des tags.
4 + Cliquez sur le bouton Enregistrer pour enregistrer votre nouvelle page de contenu.
5 + Accédez à l’onglet Contenu.
6 + Cliquez sur Éditer en mode expert pour accéder au code HTML/CSS de la page. Une fenêtre s’affiche ; cliquez sur Oui, basculer en mode expert pour confirmer.
Dans la zone de code HTML/CSS, vous devez voir le code suivant :
<div class="container-fluid">
<div class="ods-box" ></div>
</div>
Important
En langage HTML, chaque élément est représenté par un tag. Ce tag est écrit entre <
et >
et vient toujours par paire, avec un tag ouvrant et un tag fermant. Par exemple, <p></p>
pour des paragraphes, <h1></h1>
pour un titre de premier niveau, <div></div>
pour une division/section, etc.
Les tags <div class="container-fluid">
et <div class="ods-box" >
permettent de mettre en forme votre page de façon appropriée, pour que tous les éléments de votre page de contenu se trouvent dans un cadre prédéfini avec des bordures. Tous les nouveaux éléments que vous ajouterez à l’avenir doivent être placés entre ces 2 tags.
<div class="container-fluid">
<div class="ods-box">
This is where you will put your code
</div>
</div>
7 + Enregistrez votre page.
8 + Cliquez sur Aperçu pour voir à quoi ressemble votre page pour le moment. Cliquez une nouvelle fois sur Aperçu pour masquer la fenêtre d’aperçu et revenir à votre code.
Ajouter du contenu à votre page : visualisations de données
Obtenir le code du widget d’une visualisation
Important
Un widget est un morceau de code permettant d’intégrer un élément interactif directement sur une page Web. Opendatasoft propose plusieurs widgets, qui sont tous répertoriés et documentés dans la documentation sur les widgets. Certains des plus courants, ceux que nous allons utiliser dans ce tutoriel, sont les widgets de visualisation. Chaque visualisation de données d’un jeu de données publié est en effet disponible en tant que widget, dont le code est affiché sous la visualisation, pour être copié.
9 + Accédez à Données, l’emplacement où notre jeu de données est publié. Vérifiez que vous vous trouvez sur la page du jeu de données, où vous pouvez voir les visualisations de données disponibles.
10 + Commençons par la vue Tableau. Cliquez sur l’onglet Tableau.
11 + Faites défiler le tableau. Vous devriez voir 3 onglets : Partager, Intégrer et Widget. L’onglet Partager affiche l’URL directe de la visualisation, l’onglet Intégrer affiche le code iframe de la visualisation et l’onglet Widget affiche le code du widget des visualisations. Chacun d’entre eux, qu’il s’agisse d’une URL ou d’un code, peut directement être copiée et collée. Dans le cadre de ce tutoriel, nous allons utiliser les codes de widgets des visualisations Tableau, Carte et Analyse de notre jeu de données.
Important
Un iframe est un moyen d’intégrer facilement et en toute sécurité du contenu Opendatasoft dans un cadre isolé, indépendant du reste de la page. Si vous souhaitez intégrer du contenu Opendatasoft en dehors de l’environnement Opendatasoft, les iframes sont la solution idéale, même si quelques opérations d’interaction et de personnalisation seront probablement nécessaires. Les widgets peuvent aussi être intégrés dans une page en dehors de l’environnement Opendatasoft, mais gardez à l’esprit que de nombreux ajustements devront être réalisés.
Puisque nous créons un tableau de bord directement sur une page Opendatasoft, l’utilisation de widgets Opendatasoft est la meilleure option. Dans l’environnement Opendatasoft, ils sont en effet facilement personnalisables et très interactifs avec les autres widgets.
12 + Toujours dans l’onglet Tableau de notre jeu de données, où le code du widget est affiché, cliquez sur le bouton COPIER pour copier le code du widget de la visualisation de tableau.
Ajouter un widget de visualisation à votre page
13 + Accédez à l’interface d’administration pour continuer à modifier votre page de contenu Opendatasoft.
14 + Collez votre code du widget de visualisation de tableau au bon endroit, entre le tag ods-box
(voir étape 6).
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
</ods-dataset-context>
</div>
</div>
15 + Enregistrez votre page et cliquez sur Aperçu : notre page contient désormais une visualisation de tableau !
Ajouter d’autres widgets à votre page : carte et graphe
16 + Ajoutons une carte à notre page ! Comme nous l’avons fait précédemment, récupérez le code du widget de la vue Carte de notre jeu de données (voir les étapes 9 à 12, en les appliquant à l’onglet Carte).
17 + Collez votre code du widget de visualisation de carte sous le code du widget de la visualisation de tableau (voir Ajouter un widget de visualisation à votre page).
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-table context="worldheritagelistpublicus" sort="date_inscribed"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
</div>
</div>
18 + Ajoutons encore une chose : un graphe ! Récupérez le code du widget de la vue Analyse de notre jeu de données.
19 + Collez votre code du widget de visualisation d’analyse sous le code du widget de la visualisation de carte.
<div class="container-fluid">
<div class="ods-box">
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-table context="worldheritagelistpublicus"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-chart align-month="true">
<ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
<ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
20 + Enregistrez votre page et cliquez sur Aperçu. Notre page contient désormais 3 visualisations !
Compléter votre page de contenu avec un titre
21 + En HTML, les titres (appelés en-têtes) sont généralement définis par des tags h1
. Le “h” ne change pas, car il signifie “header” (en-tête). Le chiffre (ici, 1) peut toutefois être remplacé par un chiffre compris entre 1 et 6, h1
désignant le titre de plus haut niveau et h6
le titre de plus bas niveau. Au-dessus de tous les codes de widget de visualisation ajoutés à la page, et juste en dessous du tag ods-box
, ajoutez un titre de haut niveau à votre page de contenu.
<div class="container-fluid">
<div class="ods-box">
<h1>Write your title here</h1>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-table context="worldheritagelistpublicus"></ods-table>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us">
<ods-map context="worldheritagelistpublicus" scroll-wheel-zoom="false" location="2,18.46273,-0.44037" basemap="mapbox.streets"></ods-map>
</ods-dataset-context>
<ods-dataset-context context="worldheritagelistpublicus" worldheritagelistpublicus-dataset="world-heritage-list@public-us" worldheritagelistpublicus-parameters="{'disjunctive.states':true,'sort':'date_inscribed'}">
<ods-chart align-month="true">
<ods-chart-query context="worldheritagelistpublicus" field-x="region" maxpoints="50" stacked="normal" series-breakdown="category">
<ods-chart-serie expression-y="area_hectares" chart-type="column" function-y="COUNT" color="range-Accent" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
22 + Enregistrez votre page et cliquez sur Aperçu : notre tableau de bord a maintenant un titre !
23 + Cliquez sur le bouton Ouvrir la page pour voir à quoi ressemble votre page terminée sur le portail.
FÉLICITATIONS !
Vous avez terminé ce tutoriel et savez maintenant comment créer un tableau de bord simple avec 3 visualisations de jeu de données !
Pour aller plus loin dans la création de votre tableau de bord, vous pouvez suivre la seconde partie de ce tutoriel : “Créer un tableau de bord (2e partie)”. Vous y apprendrez à lier vos widgets, à ajouter des widgets plus avancés, mais aussi à mieux organiser et personnaliser votre tableau de bord.