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()

D3.js outils pour la version 4

Les différences entre la version 3 et la version 4 de d3 marquent une évolution importante. Outre la modularisation de la librairie, l'évolution du troisième paramètre des fonctions de callback, l'aplatissement des espaces de nom - cf. dans la présentation de Mike Bostock :
d3.scale.linear ↦ d3.scaleLinear
D'où quelques outils et tests - scripts passant sur Firefox Mac.

Terminaux avec les versions 3 et 4

Des interpréteurs d3.js en ligne :

• pour la version 3
• pour la version 4 directement et en modules

montés grâce au JQuery Terminal Emulator Plugin, afin d'à la volée évaluer des instructions d3.

Adaptation de la version 3 à la version 4

Partant de la démonstration Chained Transitions dont le script fait une quarantaine de lignes, adaptation à la version 4.

D3.js notes brèves

Notes brèves et pratiques pour d3.js :

• étude de cas pour créer un tableau HTML à partir d'une matrice JavaScript, avec les versions 3 et 4 de d3.js - noter l'évolution du troisième paramètre…
• expressions équivalentes au paramètre "d" - la donnée liée - dans les fonctions de callback (.style("color", function (d){})) :

  this.__data__

  d3.select(this).data()[0]

  Pour une itération au niveau inférieur (à stocker dans une variable) :

  this.parentNode.__data__

• toujours dans les callback, test des deux paramètres qui suivent "d", les index "i" (l'élément) et "j" (sa racine) - version 3 uniquement

Last version of Chromium on Mountain Lion

According to my tests, version 51.0.2666.0 is the last version of Chromium for Mountain Lion, with "base position" 378843:
Index of chromium-browser-snapshots/Mac/378843/

I followed these steps: Download Chromium - The Chromium Projects
Note: we can find several "base positions" equivalent to the same version - so there are some upper "base position" for versions 51.0.2666.0 which are not Mountain Lion compatible (379000 for instance).

Croiser des séries de données

De nouveau sur l'établi, une interface que j'avais réalisée en 2014 pour comparer des séries de données numériques.

Je propose de visualiser les ensembles de données communes : les intersections entre les séries, les intersections minimales et maximales, les données partagées sur l'ensemble ou sur une série, les données les plus représentées…
Ainsi que d'introduire ses propres données.

Croiser des séries de données sur Equatorium.

Edit du 11/02 : ce billet a été remanié depuis sa publication le 21 janvier 2016, l'interface ayant encore évolué depuis.
(Mais n'a pas encore été testée sur Internet Explorer 10+.)

Outre l'amélioration du design, une dynamisation de l'interface

Promesses et récursivité : ordonnancer des promesses simultanées

Lorsqu'on lance un groupe de promesses simultanées avec la méthode Promise.all(), l'on peut lier une instruction finale à leur accomplissement. Quand certaines de ces promesses de base dépendent des autres pour atteindre des objectifs intermédiaires, comme la définition d'un objet intermédiaire, il faut en répéter certaines selon la façon dont l'ensemble se synchronise.
L'enjeu est alors de reprendre, en la prolongeant, l'enrichissant ou la raffinant, la promesse itérative ".all()" à laquelle vient se lier l'instruction finale.