Dernièrement, je me suis donc amusé un peu avec Quartz Composer et avec d3.js.

Ces deux outils ont en effet l’avantage d’être simples et rapides à appréhender, ce qui permet d’obtenir un résultat relativement intéressant en un minimum de temps.

Or, le temps est une ressource rarissime dans mon univers et ces outils sont donc très intéressants pour moi.

J’ai donc développé il y a quelque temps un économiseur d’écran pour OS X prenant la forme d’une horloge binaire, et j’ai créé une représentation du taux de couverture d’un code par ses tests unitaires originale à l’aide de d3.js.

Et comme j’ai vraiment pris un grand plaisir à utiliser d3.js, car tout comme atoum, son utilisation est simple et intuitive, j’ai décidé de l’utiliser à nouveau à l’occasion de la publication de PHP 5.5.

En effet, lorsque j’ai commencé la rédaction de mon précédent billet, mon objectif était de décrire les apports de cette nouvelle version.

Cependant, depuis un certain temps, je me disais que le rythme de publication des versions du langage s’était considérablement accéléré, à tel point que j’ai du mal à le suivre.

Et après réflexion, il m’a semblé plus pertinent de mettre en lumière ce phénomène qui montre la vitalité de PHP sur la durée plutôt que les nouvelles fonctionnalités de cette version 5.5.

Je me suis donc mis en quête à la fois des données nécessaires et d’un outil capable de les représenter efficacement sous une forme graphique.

Mon premier réflexe a donc été de lancer Numbers, mais j’ai bien vite compris que je ne parviendrais pas à obtenir ce que je désirais avec ce logiciel et j’ai alors pensé à d3.js.

Ce projet se présente en effet lui-même comme un outil conçu pour manipuler des documents représentant des données, ce qui correspondait exactement à mon besoin et allait même au-delà puisqu’il permet de générer des graphiques interactifs.

J’ai donc demandé à mon moteur de recherche favori de me localiser un script utilisant d3.js me permettant d’obtenir une représentation graphique des dates de sorties des différentes versions de PHP.

Las, je n’ai pas trouvé de solution clef en main me satisfaisant et j’ai donc décidé de développer la mienne en me basant sur celle qui correspondait le plus à mon besoin.

Grâce à la puissance de d3.js, mais également de moment.js, j’ai donc obtenu relativement rapidement un résultat suffisant pour me permettre de publier un graphique acceptable dans mon billet.

Et cerise sur le gâteau, j’ai même lié à cette image la page permettant la génération du graphique.

Cependant, je ne me suis pas arrêté là et j’ai poursuivi mon développement, car je souhaitais ajouter un certain nombre de fonctionnalités.

Un profond remaniement de code plus tard afin d’avoir un code plus efficace et plus facile à maintenir et à faire évoluer, j’avais donc ajouté la possibilité de visualiser d’une manière plus précise une partie du graphe, amélioré la gestion des informations affichées et géré un nouveau paramètre permettant de représenter graphiquement le temps depuis lequel une version est obsolète.

timelined3js.png

Donc si vous êtes dans le rouge, vous êtes très mal et je vous encourage à mettre à jour votre version de PHP le plus rapidement possible !

Il ne me reste aujourd’hui qu’à nettoyer un peu le code, permettre d’acquérir les données via une requête asynchrone afin de permettre la mise à jour automatique du graphe et corriger quelques problèmes esthétiques mineurs.

Accessoirement, je viens de le mettre sur github.

Le développement de ce code ne m’a pas posé de problème particulier, même si la programmation orientée objet en javascript ne s’appréhende pas du tout de la même façon dans ce langage qu’en PHP et qu’il est assez facile d’obtenir des comportements très étranges lorsque l’on n’a pas pleinement conscience de ce que représente this lorsqu’on le manipule (dire qu’on dit que PHP a des comportements étranges…).

La gestion du temps, absolument indispensable dans le cadre de ce graphique, n’a pas non plus été un problème grâce à moment.js.

Tout comme d3.js, cet outil est en effet un véritable concentré de simplicité et d’efficacité qui permet au développeur de s’affranchir totalement de la problématique habituellement posée par la manipulation de données temporelles tous langages confondus, à tel point que sa documentation est presque inutile alors qu’elle est juste parfaite.

D3.js ne m’a pas non plus posé de problèmes particuliers, si ce n’est à cause de ma propre bêtise et de la fatigue induite par le fait que je m’obstine à coder jusqu’à minuit passé.

Sa documentation est en effet excellente et il existe de très nombreux exemples d’utilisation sur Internet dont l’étude permet de trouver le moyen d’obtenir un résultat particulier.

O'reilly publie de plus un excellent livre intitulé « Interactive Data Visualization for the Web » qui a l’énorme avantage d’être lisible gratuitement en ligne et dans son intégralité et qui explique très bien les différents concepts mis en œuvre par d3.js.

Il est donc très facile de trouver une solution à un problème.

Bref, j’ai passé un excellent moment loin de PHP, et non, ce billet n'est pas sponsorisé.