Général — NE PAS UTILISER CETTE CATEGORIE

Général -- NE PAS UTILISER CETTE CATEGORIE

Visualiser de volumineux flux de données: un problème de transports publics

Les entreprises de transports publics mettent chaque jour à disposition de plus en plus de données. Certaines ont franchi le pas et ouvrent leurs systèmes d’information et exposent même des flux de données en temps réels, comme par exemple les CFF en Suisse, la RATP à Paris ou les TPG à Genève). Des horizons s’ouvrent pour de nouvelles  expériences!

Ces entreprises publient aussi les horaires de tous leurs trajets. En Suisse, l’Union des Transports Publics donne ainsi accès aux horaires des trains, bus, tramways, bateaux et même des téléphériques.

Nous nous proposons de décrire une application construite pour visualiser, en temps accéléré, un jour de l’activité des transports à travers le pays, comme exposé dans ce film. Comme les informations en temps réel ne sont pas encore totalement disponibles à large échelle, nous sommes servis des horaires comme source de simulation. L’occasion était trop belle pour ne pas connecter cette mine d’information à une application mêlant Play/Scala/Akka sur le serveur et Angular 2/Pixi/D3/Topojson dans le browser, liés entre eux par un flux de Server Side Events.

Le but de ce prototype est d’explorer les possibilités pour afficher de gros volumes de données géographiques, en appliquant une méthode décrite dans un précédent post.
La suite de l’article (en anglais).

Général -- NE PAS UTILISER CETTE CATEGORIE

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

www.octo.chD3.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.