Data Coding
Introduction
2025 - 2026
Atelier
La finalité sera de concevoir lors d’un atelier une expérience de scrollytelling, c’est-à-dire une narration interactive qui se déroule au fil du défilement de la page. Ce dispositif permet de combiner textes, visuels, animations, sons et données de manière fluide pour guider progressivement l’utilisateur dans la découverte d’un contenu.
Concrètement
Ce cours introduit aux techniques de gestion et de transformation de données brutes en représentations visuelles dynamiques. Grâce à l'HTML, CSS et JavaScript, on apprendra à coder des visualisations interactives et raconter des histoires à travers des données. L’accent est mis sur l’expérimentation créative et l’interprétation narrative des informations.
Critères
d'évaluations
Les critères seront une représentation de votre atelier:
- Qualité de l’expérience
- Qualité graphique
- Qualité technique
- Qualité sonore
- Qualité des data employées et du storytelling
- Planification et organisation
- Qualité du rapport de production
Nos outils
- Codepen
- VS code
- APIs
- Bases de données
JS 101
Rappel de concepts clés
Récupérer un élement HTML
Ceci est un paragraphe
// Retourne notre p.myText
const myText = document.querySelector( ".myText" );
Récupérer un ou plusieurs élement HTML
Ceci est un paragraphe
Un autre paragraphe
// Retourne toute les balises "p" du document sous forme de liste.
const sentences = document.querySelectorAll( "p" );
Créer un
élement HTML
// Crée un nouvel élement HTML
// mais qui n'est pas encore inséré
// dans notre document.
const myText = document.createElement( "p" );
Insérer un
élement HTML
const wrapper = document.querySelector( ".wrapper" );
const myText = document.createElement( "p" );
// Insère notre nouvel élément "p" dans notre "div.wrapper"
// Attention, notre "p" est vide, il n'a aucune contenu.
wrapper.append( myText );
Modifier le contenu d'un élément HTML
Ceci est un paragraphe
const myText = document.querySelector();
myText.textContent = "Contenu mis à jour";
textContent permet aussi de récupérer le contenu textuel d'un élément.
Générer un nombre aléatoire
// Retourne un nombre décimal entre 0 et 0.99999…
let randomNumber1 = Math.random();
// Retourne un nombre décimal entre 0 et 9.99999…
let randomNumber2 = Math.random() * 10;
Meilleur random
const rand = ( max = 1, min = 0, { round = false } = {} ) => {
let n = Math.random() * ( max - min ) + min;
if( round ){
return Math.round( n );
}
return n;
};
Arrondir un nombre
Avoir un nombre décimal nous permet entre autre d'être précis. Dans certains cas il sera nécessaire d'avoir des nombres entiers.
Ex: accéder aux éléments d'un tableau, éviter les demi-pixels, améliorer les performances, etc.
Math.floor( 10.50 );
Math.floor( -3.65 ); // -4
Math.ceil( 10.50 ); // 11
Math.ceil( -3.65 ); // -3
Math.round( 10.50 ); // 11
Math.round( -3.50 ); // -3
Math.round( -3.65 ); // -4
Concaténation vs
Template literals
Dans certains cas, on aura besoin de transformer une string avec des données dynamiques. Commençons par une phrase simple:
const sentence = "Un pokemon sauvage apparaît !";
Concaténation
La concaténation permet de fusionner une string et une variable. Pour cela nous utilisons l'opérateur + entre ce que nous voulons voir concaténer:
const pokemon = "Mystherbe"
const sentence = "Un " + pokemon + " sauvage apparaît !";
// Retourne "Un Mystherbe sauvage apparaît !";
Template literals
Il existe une manière plus propre pour arriver à ce résultat, les templates literals. Le plus dur est de trouver sur votre clavier comment faire des backtick (accent grave). Ces symboles remplace les habituels guillemets pour entourer une string, mais permette de rajouter des expressions en javascript directement dans notre phrase via des ${ some javascript }:
const pokemon = "Mystherbe"
const sentence = `Un ${ pokemon } sauvage apparaît !`;
// Retourne "Un Mystherbe sauvage apparaît !";
Position aléatoire
Boucle simple
for( let i = 0; i < 3; i++ ) {
console.log( i );
// 0 pour la première itération
// 1 pour la seconde
// 2 pour la dernière
}
Plus de particules
Récupérer un élément aléatoire dans un tableau
const getRandomElement = ( array ) => {
const randomIndex = Math.floor( Math.random() * array.length );
return array[ randomIndex ];
}
Plus de couleurs
Data ?
JSON
JavaScript Object Notation est un format de données textuel dérivé de la notation des objets du langage JavaScript. Beaucoup d'APIs ou de base de données accessible en ligne seront retournées au format JSON.
Objet ?
Un objet permet de stocker et manipuler des données dans une variable. Il est plus facile à gérer que des dizaines de variables directement dans votre code.
Voici les valeurs possibles:
- string
- number
- boolean
- array
- object
- null
// Crée une variable "myPokemon" qui contient
// un objet de données sur mon pokemon.
const myPokemon = {
name: "Carapuce",
canEvolve: true,
nationalNumber: 007,
types: [ "eau" ],
evolution: {
name: "Carabaffe"
}
};
// Pour accéder à nos propriétés, on utilise le nom
// de notre variable qui contient votre objet suivi
// d'un point "." et du nom de la propriété visée.
// {myObject}.{property}
console.log( myPokemon.name );
// Affiche 'Carapuce' dans la console
console.log( myPokemon.evolution.name );
// Affiche 'Carabaffe' dans la console
Exemple d'API
SWAPI est une API sur l'univers de Star Wars. Elle permet de faire des requêtes précise afin de récupérer certaines données comme des personnages, des planètes, etc. Chaque API aura ses propres données lié à son contexte.
May the code
be with you
En partant de SWAPI, nous allons utiliser les données des 10 premières planètes dans la base de données et créer une visualisation sur base de leurs tailles.
Préparer HTML & CSS
Une bonne pratique est de prévoir notre HTML & CSS avant d'y ajouter des éléments dynamquement. Cela permet de se focaliser d'abord sur la mise en page et les styles statiques.
Ajouter les planètes
Maintenant que nous avons mis en place nos styles, nous allons pouvoir utiliser une boucle sur nos données pour ajouter chaque planète dans notre document.
Interpréter les données
Nous avons nos 10 planètes, mais elles sont toutes similaires. Si on regarde dans nos données on peut voir que nous avons plus informations intéressantes comme:
- name
- diameter
- gravity
- population
Puisque nous avons accès a la propriété diameter, autant l'utilisée pour modifier la taille de nos planètes. Nous allons minimiser notre utilisation du JavaScript et maximiser celui du CSS.
2 techniques CSS seront pratiques: calc() et les custom properties.
CSS Custom properties
Syntax
// Crée les variables de manière globale
:root{
--background: red;
}
.myElement{
background: var(--background);
}
En pratique
Récupération &
modification
// Crée les variables de manière globale
:root{
--background: red;
}
.myElement{
background: var(--background);
}
// Retourne notre élément ":root" (balise html)
const root = document.querySelector( ':root' );
// Récupère toute les styles définis en CSS
const rootStyles = getComputedStyle( root );
// Retourne le style de notre propriété "--background"
// Attention, le style récupéré sera toujours sous
// le format string, ce qui veut dire qu'il faudra
// faire attention avec les valeurs chiffrées.
const background = rootStyles.getPropertyValue( "--background" );
calc( )
calc( ) permet de faire des opérations mathématiques + - / * à l'intérieur du CSS. Cette fonction magique permet de comblé le manque de logique dans nos styles, mais demande un peu de réflexion.
Il y a 2 grands avantages: celui de pouvoir mélanger diffentes unités (px, em, vw, etc.) et d'utiliser des custom properties.
.myElement{
// Calcule une taille d'élément basé
// sur 100% de son parent moins 48px.
// Cela permet de mélanger valeur relative
// & valeur absolue.
width: calc( 100% - 48px );
}
:root{
--width-offset: 48px;
}
// Même résultat, mais en y incorporant
// une custom property
.myElement{
width: calc( 100% - var(--width-offset) );
}
Modifier la taille
Nous avons donné une taille fixe à nos planètes. Et si nous utilisions une custom property pour modifier sa taille ?
:root{
--ratio: 1;
}
// Cela permet de créer un facteur
// qui changera la taille de notre planète.
.planet__orb{
width: calc( 100vmin * var(--ratio) );
}
On peut déjà tester de modifier la valeur de --ratio pour voir comment cela se comporte.
Dynamiser la taille
En normalisant la taille de chaque planète sur la taille maximum nous calculerons un facteur entre 0 et 1. Ensuite nous pourrons mettre à jour --ratio.
Rajoutons une étape avant la création de nos planètes: une première boucle pour déterminer du diamètre le plus grand. Ensuite on ajoute le calcul du ratio dans la boucle de création.
Normaliser un nombre
Cela permet de retranscrire un nombre entre 0 et 1+, basé sur une valeur maximale. L'avantage est de transformé une valeur absolute en une valeur relative.
// Admettons que ceci une distance totale
// pour un trajet qui ferait 2000km.
const distance = 2000;
// Représente la distance actuellement parcourue
const currentDistance = 1200;
// En divisant la valeur actuelle et la valeur totale
// Nous allons avoir une réprésentation chiffrée entre
// 0 -> 1 ou 0 = 0% et 1 = 100% // 1 = la distance totale est parcourue ou 100%
const normalizedCurrantDistance = currentDistance / distance;
// Retourne 0.6, ou 60% du trajet
Améliorer le facteur
Puisque que nous prenons le diamètre le plus grand pour normaliser nos tailles, cela crée des énormes écarts. Solution: utiliser le diamètre moyen de nos 10 planètes.
Si on trouve la taille moyenne de nos 10 planètes, en prenant compte du plus petit et du plus grand diamètre, la valeur normalisée nous donnera plus de contrôle sur notre représentation.
Math.min &
Math.max
Ces méthodes permettent de retourner la valeur la plus petite ou la plus grande entre une infinité d'arguments de type number.
const min = Math.min(10, 223, 2);
// Retourne 2
const max = Math.max(10, 223, 2);
// Retourne 223
Spread
Spread est une syntaxe de décomposition, qui permet de transformer un tableau en une suite d'arguments.
const numbers = [ 10, 223, 2 ];
const min = Math.min(...numbers);
// Retourne 2
const max = Math.max(...numbers);
// Retourne 223
Pistes d'améliorations ?
Pour le prochain cours
- Mettre en place des améliorations sur notre exercice
- Rechercher des APIs accessibles
- Trouver des pistes d'interprétations graphiques avec ces APIs
See you
