Le court texte ci-dessous fait un peu peur. Mais essayez de cliquer-glisser (to drag) les informations numériques pour faire des expériences encore plus effrayantes :
En 2018 il y avait 408 ppm (parties par million) de CO2 dans l'atmosphère terrestre. Si on continue à l'augmenter de % par an, à ce train-là en l'an on arrivera à ppm de CO2 dans l'atmosphère !
Employé par Apple, Bret Victor est le principal promoteur de la lecture active. Celle-ci permet au lecteur de modifier les données numériques (et autres) du rapport afin de se livrer à des expériences du genre « et que se passerait-il si on modifiait telle variable ? ».
Créé il y a une dizaine d’années par Bret Victor, le module tangle.js permet de produire des documents basés sur la lecture active, avec une facilité qui rend cette technologie accessible à des élèves, notamment des sections technologiques et professionnelles. Le nom de tangle fait allusion au paradigme modèle-vue-contrôleur (on relie par un tangle les modifications des variables, et leur affichage), selon cette correspondance :
en MVC | modèle | vue | contrôleur |
dans Tangle | fonction JavaScript | data-var de classe TK | data-var dans html |
compétences | modéliser | représenter | communiquer |
La présentation qui ouvre cet article ne donne a priori que très peu d’informations : En 2018 il y avait 408 ppm de CO2 et cela correspond à une augmentation annuelle de 0,43 pour cent. Un modèle exponentiel (par une suite géométrique) prévoit alors qu’en l’an 2065 on en arrivera à 500 ppm. Mais en fait il y a bien plus d’informations dans ce document. Par exemple en modifiant l’année d’examen, on apprend que selon le même modèle climatologique on arrivera à 0,1% de CO2 dans l’atmosphère, en 2227. On peut même modifier le pourcentage d’augmentation annuelle pour explorer d’autres modèles climatologiques et ainsi se faire une idée par la manipulation, de l’influence des différents paramètres. Voici quelques avantages de cette façon de présenter :
Dans cet article on se propose de montrer comment a été fait le document de l’entête.
Modéliser
On modélise le taux annuel de CO2 par une suite géométrique, comme semblent le suggérer les relevés depuis l’ère industrielle :
Alors, avec comme valeur initiale VI=408 et comme raison (ou coefficient multiplicateur) CM=1,0043, la quantité de CO2 au bout d’une durée ans est VI×CMans. Les quantités qui interviennent ici seront toutes des variables appartenant au Tangle, et leurs noms seront préfixés par this. Voici les étapes du calcul, regroupées en une fonction update (appelée à chaque fois qu’une mise à jour de l’affichage est nécessaire) :
La variable ppm joue un rôle particulier : elle est en quelque sorte à l’extrémité du Tangle et c’est celle dont l’affichage est mis à jour à chaque fois que quelque chose a changé (une autre variable par exemple). À l’origine du Tangle se trouvent deux variables que le lecteur actif peut modifier : pourcent et an. Ces variables doivent donc être, au chargement de la page, initialisées, par cette fonction :
Dans le jargon de Tangle, le modèle est un objet formé par ces deux fonctions :
Un Tangle est aussi un objet, associé à un élément html (ici, le document entier) et un modèle :
Avec les liens vers tous les scripts du kit tanglekit, ce petit code JavaScript suffit à créer un Tangle. Pour le voir, ce sera l’affaire de html.
Communiquer
Pour la partie vue on crée un élément html auquel on donne la propriété data-var
avec, comme valeur, le nom de la variable à afficher. Pour un affichage directement dans le texte, Bret Victor propose un span :
<span data-var="ppm" data-format="%.0f"> ppm</span>
Cette partie de la page affiche la valeur de la variable ppm. En plus on a formaté cet affichage, en représentant 0 chiffre après la virgule (c’est-à-dire qu’on arrondit à l’entier, toujours pour faciliter la lecture).
Représenter
Pour permettre au lecteur de modifier une variable, c’est comme pour la partie communiquer (il faut bien l’afficher, cette variable !). Mais on lui donne une classe Css comme TkAdjustableNumber
(pour avoir un nombre ajustable du Tangle Toolkit) comme
En fait on a représenté ainsi un intervalle d’entiers. Il a donc fallu également fournir des valeurs aux propriétés
data-min
: la valeur minimale que peut prendre la variable ;data-max
: la valeur maximale que peut prendre la variable.La variable pourcent
n’est pas un nombre entier, donc on lui donne aussi un data-step
:
Pour finir, voici quelques autres exemples à manipuler en ligne, avec leur code source à télécharger pour utilisation locale ou examen du code :
Calcul de vitesse
Un véhicule qui parcourt km en h se déplace à une vitesse de km/h.
Table de multiplication minuscule
× =.
Numération binaire
En binaire, la notation représente le nombre :
Un autre exemple figure dans cet article.