Une interface avec des visualisations sur le principe "data join" :
démo des opérations de "join" - passant sur Firefox et Chrome Mac.
- version 1 au premier novembre.
Comment
Le bouton "join d3.js" en haut à gauche crée un jeu de données d'une longueur comprise entre 2 et 12. Ce jeu est relié à une liste HTML. En fonction de sa longueur, la liste est mise à jour, rallongée ou rétrécie…
Les data visualisations attenantes ont pour objectif d'illustrer les données quantitatives de ce processus.
Ces données concernent la sélection initiale, la liaison, l'update, la création d'éléments, les éléments déclassés et la sélection finale. Une partie des éléments déclassés est conservée et indiquée comme telle, l'autre est supprimée.
La suppression des éléments suit une transition paramétrable en durée et en délai. Si le troisième paramètre, boucle, est positif, l'interface s'anime indépendamment du bouton "join d3.js". La remise à zéro de ce paramètre interrompt l'animation.
Join ?
Sur la notion de "data join" : Thinking with Joins
Sa mise en œuvre avec la version 4 : d3/CHANGES.md at master · d3/d3
Le mapping en soi dans le chapitre "6 - Lier les données" du tutoriel de Scott Murray traduit par Sylvain Kieffer.
Pourquoi
Outre l'approfondissement d'une notion centrale (cf. aussi), cette réalisation me fournit l'occasion de mettre en œuvre dans un cadre d3.js des éléments de méthode, organisation des SVG<>, instanciation d'objets prototypés<> ('class' en ES6), espaces de nom<> etc. - code sur Github.
Aucun commentaire:
Enregistrer un commentaire