Le récit défilant : le moment dataviz¶

Ce qui fait un bon moment dataviz¶

Une dataviz de récit n'est pas un tableau de bord. Elle ne montre pas toutes les données : elle en montre une, au moment où le lecteur en a besoin.

Des formes simples qui marchent¶

Pas besoin de librairie de graphiques : ces formes se font en HTML, en CSS et avec un peu de JavaScript.

• Le chiffre géant : une seule valeur, très grande, qui compte jusqu'à sa valeur finale.
• Une unité par donnée : un point, une icône ou un carré par élément. Le nombre devient visible.
• Les barres : comparer quelques valeurs. Elles poussent quand on les atteint. Attention : c'est la forme la plus courante, donc la moins mémorable (voir plus bas).
• L'échelle : comparer une valeur à quelque chose de connu (la hauteur d'un immeuble, la taille d'un terrain de soccer).
• La ligne du temps : une valeur qui change avec les années, révélée au fil du défilement.

Visez plus loin que le graphique à barres¶

Un graphique à barres ou en pointe de tarte, c'est la forme par défaut : il informe, mais il ne raconte rien, et il ressemble à tous les rapports. Dans un récit défilant, la donnée doit prendre la forme de votre histoire.

Le graphique à barres n'est pas interdit, mais c'est le minimum. La créativité compte aussi pour votre moment dataviz.

Une seule idée, bien réalisée, suffit. Et aucune de ces idées n'a besoin d'une librairie de graphiques.

Des exemples à décortiquer¶

Ouvrez-les sur un ordinateur, défilez lentement, et repérez les 5 ingrédients.

Vous trouverez d'autres exemples, dont The Pudding et Pixel Space, dans la page exemples et inspirations.

La démo : la Terre bouge¶

Une petite démo avec deux moments dataviz et des données réelles, chargées au moment où on les atteint :

1. Un chiffre géant, puis une unité par donnée : le nombre de séismes de la semaine (API USGS), puis un point par séisme, dont la taille suit la magnitude.
2. Des barres qui poussent : la température maximale des 7 prochains jours à Montréal (API Open-Meteo).

Le code est commenté dans js/dataviz.js. Il suit toujours les mêmes 4 étapes : attendre que le moment approche (IntersectionObserver), charger les données (fetch), construire la forme, puis révéler avec une classe CSS.

Voir la démo

Des pistes pour choisir votre API¶

Voici plusieurs pistes à explorer pour trouver l'API de votre moment dataviz :

• Public APIs : une grande liste d'API gratuites, classées par thème. Visez les colonnes Auth : No (sans clé d'identification : ni apiKey, ni OAuth) et CORS : Yes (utilisable depuis le navigateur; Unknown est permis, mais testez avant de choisir). L'index des catégories est loin dans la page : les liens directs par catégorie.
• Données Québec et les données ouvertes de Montréal : des données d'ici, en français. Plusieurs jeux de données sont des fichiers à télécharger plutôt qu'une API : on en reparlera au cours.
• Quelques API sans clé, prêtes à tester : Open-Meteo (météo, climat), REST Countries (pays), Cleveland Museum of Art (œuvres d'art, avec images), USGS (séismes en temps réel), PokéAPI , Open Library (livres), Sunrise-Sunset (lever et coucher du soleil).

Choisir et tester votre API¶

Une API, c'est une adresse web qui renvoie des données en JSON au lieu d'une page. Vous connaissez déjà fetch() : vous l'utilisez pour data.json. Interroger une API, c'est le même fetch(), avec une adresse sur un autre site.

Ce qui est nouveau, c'est seulement : choisir l'API, lire sa réponse, et prévoir qu'elle tombe en panne.

1. Choisir une API¶

Une bonne API pour votre récit coche ces 4 cases :

• sans clé d'identification : pas d'inscription, pas de jeton (token). Dans Public APIs, c'est la colonne Auth : visez No. Évitez apiKey (une clé à demander et à cacher) et OAuth (une connexion avec un compte);
• CORS : Yes (ou Unknown) : utilisable depuis le navigateur. Sans CORS, le navigateur bloque la réponse. Unknown veut dire que personne ne l'a vérifié : l'API fonctionne peut-être. Testez-la avant de la choisir (tester le CORS) : si la console affiche blocked by CORS policy, choisissez-en une autre;
• elle renvoie du JSON;
• elle contient votre donnée, celle qui répond à la question de votre moment dataviz.

Des pistes : la liste Public APIs , et les API sans clé de la section Des pistes pour choisir votre API.

Public APIs, par catégorie¶

La liste Public APIs est classée par thème, mais l'index des catégories est loin dans la page. Allez-y directement :

• Animaux
• Art et design
• Livres
• Environnement
• Nourriture
• Jeux et BD
• Géolocalisation
• Santé
• Musique
• Données ouvertes
• Sciences et maths
• Sports
• Transport
• Météo

Dans chaque catégorie, un tableau : regardez les colonnes Auth (No) et CORS (Yes, ou Unknown à tester).

2. Tester l'adresse dans le navigateur¶

Avant d'écrire une ligne de code, collez l'adresse dans la barre d'adresse du navigateur. Firefox affiche le JSON joliment, avec des triangles pour plier et déplier. Dans Chrome, cochez Impression élégante.

Par exemple, la température maximale des 7 prochains jours à Montréal : l'adresse Open-Meteo .

La plupart des API se règlent dans l'adresse, après le ? : latitude=45.5, daily=temperature_2m_max. Changez une valeur, rechargez : vous voyez tout de suite ce que ça change. Plusieurs API, comme Open-Meteo, ont même un générateur d'adresse dans leur documentation.

Tester le CORS¶

La barre d'adresse ne vérifie pas le CORS : une API peut s'afficher très bien là, et être bloquée dans votre page. Le test se fait depuis une page web :

1. Ouvrez n'importe quelle page web, par exemple ces notes de cours.
2. Ouvrez la console (F12, onglet Console).

3. Collez ces lignes, avec l'adresse de votre API, puis Enter :

   const url = "https://openaccess-api.clevelandart.org/api/artworks/";
   await fetch(url + "?limit=1").then((r) => r.json());
   

4. Lisez le résultat : - un objet s'affiche : le CORS passe, l'API est utilisable; - un message rouge avec blocked by CORS policy : le navigateur bloque la réponse. Choisissez une autre API.

3. Trouver le chemin vers votre donnée¶

La réponse contient souvent beaucoup plus que ce qu'il vous faut. Cherchez le chemin vers votre valeur, comme dans un objet JS :

data                        l'objet reçu
  .daily                    la propriété « daily »
    .temperature_2m_max     un tableau de 7 températures

En code : data.daily.temperature_2m_max. Un tableau d'objets? data.features[0].properties.mag.

Trouver une donnée dans un JSON complexe : la méthode, et un outil pour tester vos chemins

4. Le fetch(), dans le fichier de votre chapitre¶

Le moment dataviz appartient à un chapitre : son code va dans le fichier de ce chapitre.

// js/chapitres/ch-05.js
const WEATHER_URL = "https://api.open-meteo.com/v1/forecast"
  + "?latitude=45.5&longitude=-73.57"
  + "&daily=temperature_2m_max&timezone=auto";

async function loadWeather() {
  const response = await fetch(WEATHER_URL);
  if (!response.ok) {
    throw new Error("Météo introuvable (" + response.status + ")");
  }
  const data = await response.json();
  console.log(data); // d'abord, regardez ce qui arrive
  return data.daily.temperature_2m_max; // 7 valeurs
}

C'est le même fetch() que pour data.json : voir Récap JS : async / await.

5. Charger au bon moment¶

Pas au chargement de la page : quand le visiteur approche du chapitre. C'est le rôle d'IntersectionObserver, avec un rootMargin qui le déclenche un peu avant, pour que les données soient là à temps.

6. Prévoir la panne¶

Une API externe peut être lente, changer, ou tomber en panne. Le jour de votre présentation aussi. Votre récit doit rester lisible si elle ne répond pas :

async function showWeather(section) {
  let temperatures;
  try {
    temperatures = await loadWeather();
  } catch (error) {
    console.error(error);
    // Valeurs de secours : le récit continue
    temperatures = [4, 6, 3, 2, 5, 7, 4];
    section.querySelector(".source").textContent =
      "Données hors ligne : relevé du 13 novembre";
  }
  // ... construire la forme avec temperatures
}

Gardez des valeurs de secours réelles (copiées de la réponse un jour où l'API fonctionnait), et dites-le au lecteur.

7. Documenter votre choix¶

Dans la section 6 de votre CAHIER-DE-CHARGES.md, ajoutez :

• l'API : son nom et le lien vers sa documentation;
• l'adresse que vous interrogez;
• le chemin de la valeur utilisée (ex. data.daily.temperature_2m_max).

Puis commit (Cahier : ajoute l'API de la dataviz) et push.

Pour votre cahier de charges¶

Dans la section 6 du gabarit, décrivez votre idée :

• dans quel chapitre arrive le moment dataviz;
• la question à laquelle il répond, et le genre de données que vous aimeriez montrer;
• la forme que vous imaginez : une donnée qui change le décor, des unités à l'image de votre sujet, une donnée qui pilote une animation, une échelle au défilement… (voir plus haut);
• la chute : ce que la donnée raconte dans votre histoire.

Ajoutez un cadre pour ce moment dans votre storyboard. L'API se choisit au cours du ven. 13 nov. : voir Choisir et tester votre API.