Visualisations d'après le principe du "data join" de d3

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.

D3.js l'update dans le binding en v. 4 et autres notes

Évolution de l'update

Après liaison de données via .data(), l'ordre des instructions importe en version 3 pour mettre à jour des éléments pré-existants. Cette sélection est en effet enrichie de la création d'éléments via .enter(). L'update doit donc précéder .enter().
En version 4 désormais, la mise à jour devient autonome et n'est plus affectée par .enter(). Elle peut être effectuée en instruction finale.

Le traitement simultané des éléments mis à jour et créés se fait avec .merge() :

Dans la documentation : d3/CHANGES.md at master · d3/d3.
Exemple de merge.

Au sujet de .enter() et .exit()