La DataViz avancée sur le Web en JavaScript avec D3.js

D3.js est depuis quelques années la bibliothèque standard pour la création de visualisation de données (dataviz) sur le web. Il est donc indispensable de maîtriser cette bibliothèque si un programmeur souhaite :

• Créer sa propre dataviz from scratch à partir de mockups
• Adapter un des nombreux exemples D3.js disponibles sur https://d3js.org/
• Contribuer à une bibliothèque de visualisation basée sur D3.js (c3js, nvd3, ..)
• Intégrer une visualization ou une bibliothèque basée sur D3.js dans un framework (react, angular) sous forme de component

D3.js a les caractéristiques suivantes que je présenterai dans l'atelier, afin de :

• Facilement manipuler le DOM d'une page web à la JQuery, aussi bien en SVG qu'en Canvas
• Facilement créer des axes, labels et autres finitions indispensables à une dataviz professionnelle
• Interpoler différents états du DOM pour faire des transitions animées
• Création des layouts complexes de graphes ou de Treemap

Ce workshop a pour but d'être très technique et s'adresse à un publique qui maitrise au moins la programmation web en général, mais idéalement JavaScript niveau avancé et maitrise l'utilisation de bibliothèques (JQuery, ..) ou framework JS (mais ce n'est pas indispensable).

Nous verrons donc pendant ce workshop :

• Les principes de D3 évoqués ci-dessus en détails, et des exemples simples
• Les spécificités de la V4 de D3 et ES6 et la création de modules https://github.com/romsson/d3-gridding
• L'utilisation de graphiques ré-utilisables https://bost.ocks.org/mike/chart/
• La création d'une mini biblio dataviz réutilisable https://github.com/cid-harvard/vis-toolkit
• Le détail de nombreux exemples et quelques points intéressants dans le code source de D3.js https://github.com/d3

Les participants pourront coder en live les exemples fournis au préalable dans l'interface http://blockbuilder.org/ . Les principes de base de la visualisation seront aussi rapidement rappelés, ainsi que l'utilisation de vrais jeux de données pour les exemples.

Le code du workshop sera disponible sur GitHub, et il est fortement recommandé de venir avec une machine, sur laquelle Node JS sera pré-installé. Une bonne prise en main de Git est aussi utile.