Diffuser un élément de cadre intégré HTML avec Datawrapper

Ce scénario donne des exemples d’application et explique comment diffuser une figure sur un site Web ou un wiki avec l’application en ligne Datawrapper. Cet outil permet notamment de publier une figure sous la forme d’un élément de cadre intégré HTML (iframe).

Exemples d’applications

Voici quelques exemples de projets réalisés avec l’aide de Datawrapper.

Diffuser des intentions de vote sur un site Web

Philippe J. Fournier, agrégateur de sondages sur les intentions de vote en Amérique du Nord, utilise Datawrapper pour imbriquer des éléments de cadre intégré HTML dans ses articles publiés sur le site Web de L’actualité. Allez regarder l’élément sur le site du magazine pour voir comment il est possible d’interagir avec lui.

Diffuser une carte interactive dans un article de presse

Pendant la pandémie de COVID-19, l’Associated Press (AP) a utilisé Datawrapper pour montrer le nombre de nouveaux cas recensés par État américain. Plus précisément, l’agence a publié une carte interactive sous la forme d’un élément de cadre intégré HTML. Allez regarder l’élément sur le site de l’AP pour voir comment il est possible d’interagir avec lui.

Objectifs du scénario

Dans ce scénario, nous allons publier un graphique en aires représentant les émissions mondiales de CO2 par type de combustible sous la forme d’un élément de cadre intégré HTML. Le but étant que les utilisateurs et utilisatrices du site de publication puissent interagir avec la figure.

Sachez que la méthode présentée dans ce scénario peut servir à visualiser autre chose que des émissions de CO2. Vous pourriez employer Datawrapper pour publier la distribution des sièges dans un parlement selon les partis politiques, pour représenter la confiance des citoyens et citoyennes aux médias traditionnels en pourcentage, ou encore pour permettre à votre lectorat d’organiser lui-même les informations figurant dans un tableau publié en ligne. Tout dépend des données utilisées et de l’information que vous désirez mettre de l’avant.

Méthode

Comme il a été dit précédemment, nous allons diffuser nos données statistiques sous la forme d’un élément de cadre intégré HTML (iframe en anglais). Un élément de cadre intégré HTML est un contexte de navigation incrusté à même une page Web. Pour faire simple, il s’agit d’une page Web imbriquée dans une autre page Web.

L’intérêt d’un élément de cadre intégré HTML réside dans le fait qu’il est interactif. En effet, son utilisateur ou utilisatrice peut déplacer son curseur à l’intérieur de l’élément pour, par exemple, agrandir l’image, mettre en surbrillance des contenus, faire apparaître des fenêtres contextuelles, etc. Un élément de cadre intégré HTML est par conséquent une visualisation beaucoup plus intéressante qu’une image fixe.

Étapes du scénario

■ Diffuser

Importer ses données

Une fois sur le site de l’application, cliquez sur le bouton « Start creating ». Dans l’onglet nouvellement ouvert, déplacez votre curseur à gauche, sous le titre 1 (Upload Data). Cliquez sur « XLS/CSV upload ». Votre explorateur de fichiers s’ouvrira alors. Sélectionnez et chargez vos données, puis cliquez sur le bouton bleu « Proceed » en bas à droite de l’écran.

Figure 1 – Bouton pour charger ses données

Pour ce scénario, nous avons utilisé un jeu de données sur les émissions mondiales de CO2 disponible à même le site Web de Datawrapper. Pour le charger dans l’application, cliquez sur le menu déroulant « Select a sample dataset » et sélectionnez « Global CO2 emissions ».

Valider ses données

La deuxième étape (Check & Describe) sert à prévisualiser et à valider vos données. Vérifiez que le tableau affiché respecte cette mise en forme :

  • Les colonnes doivent être en bleu ;
  • Les dates en vert ;
  • Les autres types de données en noir.

Les cellules en rouge indiquent un problème qui doit être réglé avant de pouvoir passer à l’étape suivante.

Figure 2 – Exemple de tableau généré sous le titre 2

Vous pouvez exclure des colonnes ou des lignes de votre visualisation en cliquant sur leur en-tête, puis en cochant « Hide column from visualization ».

Figure 3 – Boutons pour exclure une colonne d’une visualisation

Le bouton « Swap rows and columns (transpose) », en bas du tableau, permet quant à lui d’inverser les lignes et les colonnes.

Figure 4 – Bouton pour inverser les lignes et les colonnes du tableau

Vérifiez en outre que les noms des en-têtes vous conviennent, car ils apparaîtront dans votre figure. Pour changer le nom d’une ligne ou d’une colonne, double-cliquez sur la cellule correspondante.

Figure 5 – Saisie d’un nouveau nom de colonne

Une fois vos données validées, cliquez sur le bouton bleu « Proceed » en bas à droite de l’écran.

Pour ce scénario, nous avons masqué les colonnes « Cement production » et « Gas flaring », puisqu’elles ne décrivent pas des types de combustible. Nous avons aussi renommé les colonnes restantes pour leur attribuer un nom en français.

Créer une figure

À gauche de votre écran se trouve maintenant le menu des paramètres de visualisation. Le menu est divisé en quatre sous-menu :

  • Le sous-menu des types de figure (Chart type) vous laisse choisir une manière de visualiser vos données. Pour savoir quelle visualisation correspond le mieux à vos données, consultez cette page.
Figure 6 – Sous-menu des types de figure
  • Le sous-menu des ajustements (Refine) vous permet de peaufiner votre figure en ajustant le minimum et le maximum de données représentées, ou d’ajouter ou retirer une légende pour décrire vos données (Labeling). Nous verrons plus loin comment l’utiliser pour modifier les couleurs de l’image.
Figure 7 – Sous-menu des ajustements
  • Le sous-menu des annotations (Annotate) vous permet de changer le titre de la figure, de lui ajouter une description, d’indiquer la provenance des données utilisées, etc.

Dans le cadre de ce scénario, nous pouvons ici aussi renommer les colonnes pour leur attribuer un nom en français.

Figure 8 – Sous-menu des annotations
  • Le sous-menu de mise en page (Layout) vous permet de définir la langue de votre figure et d’autoriser ou non les internautes à télécharger les données représentées par la figure (Data download), à télécharger une image de la figure (Image download options) ou à copier-coller la figure en tant qu’élément de cadre intégré HTML.
Figure 9 – Sous-menu de mise en page

Ajustez les paramètres de votre figure jusqu’à obtenir un résultat qui vous satisfait. Si vous désirez modifier les couleurs de votre figure, passez à l’étape suivante. Si les couleurs de votre figure actuelle vous conviennent, cliquez sur le bouton bleu « Proceed » en bas à gauche de l’écran et allez à l’étape « Diffuser un élément de cadre intégré HTML » du scénario.

Pour ce scénario, nous voulions représenter nos données avec un graphique en aires. Par conséquent, nous avons sélectionné le type de figure « Area Chart ». Dans le sous-menu des annotations, nous avons ajouté un titre et une description à notre figure, puis en avons précisé l’auteur. Puis, nous avons défini la langue de la figure sur « français (fr-CA) » et autorisé les internautes à télécharger nos données et une image de la figure. Nous les avons enfin autorisés à copiez-collez la figure en tant élément de cadre intégré HTML.Modifier les couleurs d’une figure

Vous pouvez modifier les couleurs de votre figure afin d’augmenter les contrastes entre des éléments. Pour ce faire, retournez au sous-menu des ajustements. Déplacez votre curseur à gauche de l’écran, sous le titre « Customize areas ».

Vous pouvez changer la couleur de base de votre figure. Cliquez sur le bouton à droite de « Base color » et sélectionnez une nouvelle teinte. l’ensemble des éléments de votre figure seront alors représentés par différentes nuances d’une même couleur.

Figure 10 – Bouton pour changer la couleur de base de la figure
Figure 11 – Exemple de figure avec une couleur de base orange

Vous pouvez aussi attribuer une couleur distincte pour chaque élément de votre figure. Pour ce faire, sélectionnez un élément à la fois dans la colonne de gauche « Select element(s) » et cliquez sur le bouton « Choose a color ».

Figure 12 – Boutons pour attribuer une couleur par catégorie
Figure 13 – Exemple de figure avec des couleurs distinctes

Vous pouvez vérifiez si votre palette de couleurs est lisible pour les personnes atteintes de daltonisme en cliquant sur les boutons sous « Colorblind check », en bas à droite de la figure.

Figure 14 – Paramètres de visualisation pour les personnes atteintes de daltonisme

Au besoin, ajustez vos choix de couleurs pour obtenir un résultat aussi lisible que possible. Pour ce faire, déplacez votre curseur dans la colonne « Select element(s) » à gauche de l’écran. Cliquez sur l’élément de votre choix, puis sur sa teinte. Déplacez les curseurs pour modifier la nuance de la couleur, jusqu’à obtenir un résultat plus lisible.

Figure 15 – Paramètres pour ajuster la nuance d’une couleur

Lorsque vous aurez modifié les couleurs de votre figure de façon satisfaisante, cliquez sur le bouton bleu « Proceed » en bas à gauche de l’écran.

Pour ce scénario, nous avons attribué une seule couleur à notre figure, afin de faciliter la lecture pour les personnes atteintes de daltonisme.

Diffuser un élément de cadre intégré HTML

Dans la barre à gauche de votre visualisation, saisissez votre adresse courriel, puis cliquez sur « Send my embed code ». Vous recevrez alors un courriel de Datawrapper avec un lien menant à un formulaire d’inscription à Datawrapper. Créez-vous un compte en donnant un mot de passe de votre choix.

Sur la page suivante, vous aurez le choix de télécharger votre figure en format PNG ou de la publier. Cliquez sur « Publish Now ». De nouveaux paramètres apparaîtront alors. Sous « Embed code », cochez « Responsive iframe », puis copiez le lien commençant par « <iframe title= ».

Figure 16 – Boutons pour copier le lien vers l’élément de cadre intégré HTML

Collez le lien dans un site Web ou un wiki pour y insérer votre figure sous la forme d’un élément de cadre intégré HTML :

Type de données

  • Structuré

Discipline

  • Environnement

Méthode associée

Outil associé