Article original : Learn D3 in this free 10-part data visualization course
Par Per Harald Borgen
_Cliquez ici pour accéder au cours._
D3.js est une bibliothèque JavaScript qui vous permet de donner vie aux données en utilisant HTML, SVG et CSS. L'apprendre vous donnera des superpouvoirs lorsqu'il s'agira d'extraire de la valeur des données, car vous serez essentiellement en mesure de créer n'importe quelle visualisation à laquelle vous pouvez penser.
Cependant, ce n'est pas la bibliothèque la plus facile à apprendre, donc commencer peut être un peu délicat. C'est pourquoi nous nous sommes associés avec le développeur web et instructeur Sohaib Nehal et avons créé un cours complet gratuit sur le sujet. Tout au long du cours, Sohaib vous donnera une introduction en douceur à cette bibliothèque puissante.
Jetons un coup d'œil à la manière dont il est structuré !
Le contenu
Le cours se compose de 10 screencasts qui durent au total moins d'une heure. Il commence par les concepts les plus basiques, comme la sélection, la manipulation, le chargement de données, et plus encore. Cela pose les bases pour les diverses visualisations que vous apprendrez à créer tout au long du reste du cours.
#1 : Introduction au cours
Comme d'habitude avec les cours Scrimba, il commence par un rapide aperçu du contenu du cours, ainsi qu'une introduction à D3.js et à l'instructeur.
#2 : Sélection et manipulation
La première chose que vous devez apprendre est comment sélectionner et manipuler des éléments du DOM avec D3.js. La bibliothèque est en fait assez puissante en termes de manipulation du DOM, donc vous pourriez théoriquement l'utiliser comme remplacement pour jQuery.
#3 : Chargement et liaison de données
Puisque vous allez créer des visualisations, il est important d'apprendre comment charger des données et aussi comment les lier au DOM. Donc, dans cette leçon, vous apprendrez cela.
#4 : Création d'un simple graphique à barres
Dans la troisième leçon, vous apprendrez à construire votre toute première visualisation : un simple graphique à barres. La raison pour laquelle nous vous introduisons à la construction de choses si tôt est que c'est beaucoup plus amusant de créer des visualisations que de simplement parler de théorie. Donc, nous pensons que vous apprécierez cette leçon.
#5 : Création de labels
L'étape suivante consiste à ajouter des labels au graphique à barres, comme vous voudriez souvent le faire dans la vie réelle. Il s'agit d'une leçon courte et simple. Ici, je vous recommande de jouer avec les positions des labels, car c'est un moyen simple et amusant d'interagir avec le code.
#6 : Échelles
Les échelles sont un concept critique dans D3. Elles vous permettent de mapper vos données à d'autres plages pertinentes, par exemple, la quantité d'espace dont vous disposez. Donc, dans cette leçon, vous apprendrez la méthode scaleLinear() :
var yScale = d3.scaleLinear()
.domain(\[0, d3.max(dataset)\])
.range(\[0, svgHeight\]);
#7 : Axes
Les axes sont une partie intégrante de tout graphique, et D3 vous fournit quelques méthodes simples pour les créer. Cette leçon s'appuie sur la précédente, car elle tire parti des échelles lors de la création des axes. Elle vous prépare également à comprendre le graphique en ligne super cool que vous apprendrez dans le dernier screencast du cours.
#8 : Création d'éléments SVG
Même si vous avez déjà créé des éléments SVG précédemment dans le cours, c'est un concept si important qu'il mérite sa propre leçon. Dans celle-ci, vous apprendrez les éléments <rect>, <circle> et <line>.
#9 : Création d'un graphique en secteurs
Les graphiques en secteurs sont pratiques dans de nombreux cas, donc dans cette leçon, vous apprendrez à en créer un. D3 fournit une API simple pour cela, donc cela ne devrait pas être difficile pour vous à ce stade.
#10 : Création d'un graphique en ligne
Enfin, vous apprendrez à créer un graphique en ligne pour visualiser le prix du Bitcoin. Pour obtenir les données, vous utiliserez une API externe. Ce projet rassemblera également de nombreux concepts que vous avez appris tout au long du cours, donc c'est une excellente visualisation pour terminer.
Et c'est tout ! Après avoir suivi ces dix leçons, vous devriez être bien préparé pour commencer à utiliser D3.js dans votre travail ou pour des projets personnels.
Si vous atteignez ce point, nous apprécierions vraiment que vous donniez un coup de projecteur à Sohaib sur Twitter !
Le format Scrimba
Avant de partir, jetons également un rapide coup d'œil à la technologie derrière le cours. Il est construit en utilisant Scrimba, un outil de screencast de codage interactif. Un "scrim" ressemble à une vidéo normale, cependant, il est entièrement interactif. Cela signifie que vous pouvez modifier le code à l'intérieur du screencast.
Voici un gif qui explique le concept :
Pausez le screencast → Modifiez le code → Exécutez-le ! → Voyez vos changements
C'est génial lorsque vous sentez que vous devez expérimenter avec le code afin de bien le comprendre, ou lorsque vous voulez simplement copier un morceau de code.
Alors, qu'attendez-vous ? Rendez-vous sur Scrimba et suivez le cours gratuit dès aujourd'hui !
Merci d'avoir lu ! Je m'appelle Per Borgen, je suis le cofondateur de Scrimba – la manière la plus facile d'apprendre à coder. Vous devriez consulter notre bootcamp de design web responsive si vous voulez apprendre à construire des sites web modernes à un niveau professionnel.
_