Les transitions D3.js m'ont tuer (mon CPU)! Une comparaison entre d3.js & pixi.js

D3.js  est certainement la libraire JavaScript  de visualisation la plus complète du moment: les possibilités pour transformer vos données en data viz époustouflantes ne sont en fait que limitées par votre imagination. Et une des clés du succès de D3 réside dans la facilité avec laquelle on peut animer des graphiques grâce aux puissantes selection transitions. Hélas!  Ces animations se payent comptant et mettent rapidement votre processeur à genou. D'où cet article.

Si le problème était tapis dans les méandres de plusieurs projets, il est apparu au grand jour lors de tentatives d'affichage des transports public suisses en temps réel sur une carte. L'outil, basé sur du SVG et D3, proposait des perspectives intéressantes mais la réalisation souffrait d'à-coups et les batteries des laptops disparaissaient à grande vitesse. Une vidéo d'un premier projet est disponible et peut être comparée à une deuxième réalisation, basée sur des techniques présentées dans cet article. Pour rendre le problème encore plus universel, nous nous sommes rendus compte que le simple affichage d'une horloge, basée sur une transition/rotation, pouvait consommer jusqu'à 20% du CPU d'un laptop moderne!

Si D3 n'a aucun concurrent sérieux pour de nombreux problèmes, nous avons décidé d'essayer une autre approche, issue des jeux en ligne. Une libraire (parmi d'autres) permet de se servir de la puissance d'HTML5 et du GPU: pixi.js.

Nous commencerons cet article par une comparaison entre les deux librairies en termes de performance de rendering. Pour clore cet aspect du débat, nous aborderons aussi les transitions CSS natives. Dans un second temps, nous aborderons quelques trucs et astuces pour tirer le meilleur parti de chacun des frameworks et nous verrons même comment combiner les deux.

Le code et les mesures sont disponibles sur github et une démo sur github.io.

Le reste de l'article est en anglais.