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.

../_images/dashboard1_final.png

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.

Afficher toutes les images

Masquer toutes les images

Créer votre page de contenu

1 + Accédez à l’interface d’administration, dans la section Pages.

../_images/step1.png

2 + Cliquez sur le bouton + Nouvelle page pour créer une page de contenu.

../_images/step2.png

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.

../_images/step3.png

4 + Cliquez sur le bouton Enregistrer pour enregistrer votre nouvelle page de contenu.

../_images/step4.png

5 + Accédez à l’onglet Contenu.

../_images/step5.png

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.

../_images/step6.png

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>
../_images/step6b.png

7 + Enregistrez votre page.

../_images/step7.png

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.

../_images/step8.png

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.

../_images/step10.png

10 + Commençons par la vue Tableau. Cliquez sur l’onglet Tableau.

../_images/step9.png

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.

../_images/step11.png

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.

../_images/step12.png

Ajouter un widget de visualisation à votre page

13 + Accédez à l’interface d’administration pour continuer à modifier votre page de contenu Opendatasoft.

../_images/step13.png

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>
../_images/step14.png

15 + Enregistrez votre page et cliquez sur Aperçu : notre page contient désormais une visualisation de tableau !

../_images/step15.png

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

../_images/step16.png

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>
../_images/step17.png

18 + Ajoutons encore une chose : un graphe ! Récupérez le code du widget de la vue Analyse de notre jeu de données.

../_images/step18.png

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>
../_images/step19.png

20 + Enregistrez votre page et cliquez sur Aperçu. Notre page contient désormais 3 visualisations !

../_images/step20.png

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>
../_images/step21.png

22 + Enregistrez votre page et cliquez sur Aperçu : notre tableau de bord a maintenant un titre !

../_images/step22.png

23 + Cliquez sur le bouton Ouvrir la page pour voir à quoi ressemble votre page terminée sur le portail.

../_images/step23.png

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.