Introduction à D3.js
Atelier thématique en visualisation de données
Qui suis-je?
- Baccalauréat en génie logiciel
- Maîtrise recherche en génie informatique (en cours)
- Spécialisation en visualisation de données
- Collaboration avec « Le Devoir »
Qui êtes-vous?
- Expérience en programmation?
- Expérience en JavaScript?
- Expérience avec D3.js?
Objectifs des ateliers pratiques
- Se familiariser avec les fonctionnalités de D3.js
- Connaître les possibilités qu'offre D3.js
- Être en mesure de réaliser une visualisation de base avec D3.js
Plan de l'après-midi
- Qu'est-ce que D3.js?
- Exemples d'application
- Introduction aux langages web
- Introduction aux fonctionnalités de D3.js
- Mise en pratique
Qu'est-ce que D3.js?
- Bibliothèque JavaScript permettant de réaliser des visualisations sur le web
- Version initiale en 2011, développée par Mike Bostock
- Fournie une panoplie de fonctions utiles pour faciliter la création d'une visualisation
- Permet de personnaliser grandement le rendu
Pour l'atelier, nous utiliserons la version 5 de D3.js.
Exemples d'application
Exemple 1: carte proportionnelle
Treemap Mike Bostock, 2018
Exemple 2: diagramme de flux
Navettage à partir du lieu de résidence au lieu de travail Antoine Béland, 2017
Exemple 3: choroplèthe
Population Choropleth Mike Bostock, 2016
Introduction aux langages web
HTML
HTML — Exemple d'une page
<!DOCTYPE html>
<html>
<body>
<h1>Le titre de ma page</h1>
<p>Un <strong>paragraphe</strong> associé à ma page.</p>
</body>
</html>
HTML — Balise SVG
- Permet de dessiner des éléments vectoriels sur une page web
- Balise très importante pour D3.js
- Non destructif aux agrandissements
HTML — Matriciel vs SVG
Différence conceptuelle entre les images matricielles et vectorielles Yug, 2011 | CC BY-SA 2.5
HTML — Éléments vectorielles
HTML — Exemple d'une balise SVG
<svg width="300" height="200">
<!-- Un rectangle -->
<rect width="100" height="80" x="0" y="70" fill="green"/>
<!-- Une ligne -->
<line x1="5" y1="5" x2="250" y2="95" stroke="red"/>
<!-- Un cercle -->
<circle cx="90" cy="80" r="50" fill="blue"/>
<!-- Un texte -->
<text x="180" y="60">Un texte</text>
</svg>
HTML — Pour en savoir en plus
CSS
- Langage permettant de décrire la présentation d'un document HTML
- Applique un style particulier en utilisant des règles et des sélecteurs
CSS — Règles
Durant l'atelier, nous utiliserons principalement:
fill: couleur de remplissageheight: hauteur d'un élémentstroke: couleur de la bordurestroke-width: taille de la bordurewidth: largeur d'un élément
CSS — Sélecteurs
Pour appliquer un style, il faut utiliser un sélecteur:
element: applique un style à tous les éléments sélectionnés.classe: applique un style à tous les éléments ayant la classe sélectionnée#identifiant: applique un style à l'élément ayant l'identifiant sélectionné
CSS — Exemple
line {
stroke: green;
stroke-width: 4px;
}
.rouge {
fill: red;
}
#rectangle {
fill: yellow;
stroke: blue;
stroke-width: 5px;
}
CSS — Pour en savoir en plus
- Tutoriel sur le langage CSS
JavaScript
- Langage de programmation de script faiblement typé
- Permet de manipuler une page web, soit le DOM (Document Object Model)
- Permet l'interaction avec l'utilisateur via des évènements
JavaScript — Syntaxe
var variable = 1; // Déclaration d'une variable
var liste = [ 1, 2, 3, 4, 5 ]; // Déclaration d'une liste
var obj = { // Déclaration d'un objet
prenom: 'Antoine',
nom: 'Béland'
};
function fct1() { /* ... */ } // Déclaration d'une fonction
const fct2 = () => {} // Déclaration d'une fonction
if (variable === 1) { // Condition
console.log('OUI');
}
JavaScript — Trucs et astuces
- Utiliser la console web pour votre débogage (
console.log) - Utiliser l'inspecteur du DOM du navigateur
JavaScript — Pour en savoir plus
Introduction aux fonctionnalités de D3.js
D3.js — À savoir
- L'appel aux fonctions de D3.js commence toujours par l'appel à l'objet
d3 - Il est possible d'effectuer un chainage de fonctions:
d3.fonction1() .fonction2() .fonction3();
D3.js — Sélection d'éléments
- Élément fondamental de la bibliothèque
- Permet de sélectionner un ou plusieurs éléments dans le document HTML
- On utilise la fonction
d3.selectou la fonctiond3.selectAll - Les fonctions de sélection prennent en paramètre un sélecteur CSS (élément, classe ou identifiant)
D3.js — Modification d'une propriété
D3.js — Exemple (sélection simple)
d3.select('line')
.attr('x1', 50) // Modification de la position X1
.attr('y1', 150) // Modification de la position Y1
.style('stroke', 'purple'); // Modification de la couleur
D3.js — Exemple (sélection multiple)
d3.selectAll('.rouge')
.style('fill', 'gray'); // Modification de la couleur
D3.js — Création d'un élément
- Une fois une sélection effectuée, il est possible d'ajouter de nouveaux éléments
- On utilise la fonction
appendpour créer un nouvel élément dans l'élément sélectionné
D3.js — Exemple (création)
d3.select('svg')
.append('rect') // Création d'un rectangle
.attr('x', 10)
.attr('y', 10)
.attr('width', 50)
.attr('height', 50)
.style('fill', 'red');
D3.js — Association de données
- L'association de données (data binding) est un autre concept fondamental à comprendre
- Permet de lier des données aux éléments d'une sélection
- On utilise la fonction
datasur une sélection multiple pour y associer un tableau de données
D3.js — Association de données
D3.js — Association de données
const svg = d3.select('svg'); // Élément de base
svg.selectAll('rect') // Sélection multiple
.data([ 15, 8, 42, 4 ]) // Association des données
.enter() // Doit créer de nouveaux éléments
.append('rect'); // Création d'un rectangle
.attr('width', d => d); // Utilise les données courantes
D3.js — Exemple (association)
const data = [ 100, 50, 75 ];
d3.select('svg')
.selectAll('rect') // Sélection multiple
.data(data) // Association des données
.enter()
.append('rect')
.attr('x', (d, i) => i * 50) // i représente l'index courant
.attr('y', d => 100 - d)
.attr('width', 50)
.attr('height', d => d)
.style('fill', 'red');
D3.js — Évènements
- Lorsqu'un élément est sélectionné, il est possible de lui associer des évènements.
- On utilise la fonction
onpour y associer un évènement particulier
D3.js — Évènements
click: survient lorsque l'élément est cliquémouseenter: survient lorsque la souris vient de commencer à survolé l'élémentmouseleave: survient lorsque la souris vient de finir de survoler l'élément- etc.
D3.js — Exemple (évènements)
const colors = [ 'yellow', 'blue', 'green' ];
d3.select('svg')
.selectAll('rect')
.data([ 100, 50, 75 ])
.enter()
.append('rect')
.attr('x', (d, i) => i * 50)
.attr('y', d => 100 - d)
.attr('width', 50)
.attr('height', d => d)
.style('fill', 'red')
.on('click', (d, i, elements) => {
d3.select(elements[i]).style('fill', colors[i]);
});
Mise en pratique
Mise en pratique
- Réaliser un bar chart horizontal à partir des données sur le nombre de députés élus par parti
Mise en pratique — Directives
- La longueur maximale d'une barre doit être de 300 px (si 100% des députés élus)
- La hauteur de chacune des barres doit être de 50 px
- Un espacement de 5 px doit être présent entre les barres
- Une ligne pointillée doit indiquer une majorité
Mise en pratique
- Pour débuter, téléchargez le dossier ZIP contenant le code de départ pour l'exercice
- Complétez, par la suite, le fichier script.js