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
Tech
Turing room (S106)
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.
Romain Vuillemot
LIRIS Ecole Centrale de Lyon
Ma bio
Other talks from Romain
2016 -
Outils simples de visualisation pour le data scientist
- #WORKSHOP
-
Romain Vuillemot
Je présenterai les outils de visualisations pour la caractérisation et de modélisation d'un jeu de données (Python, Tableau), d'aide au nettoyage (Trifacta, Data wrangler) et la communication de résultats sur le web avec storytelling (D3JS, HighChart, NVD3).
Je présenterai les outils de visualisations pour la caractérisation et de modélisation d'un jeu de données (Python, Tableau), d'aide au nettoyage (Trifacta, Data wrangler) et la communication de résultats sur le web avec storytelling (D3JS, HighChart, NVD3).
2018 -
Dataviz sans data: le prototypage rapide de visualisation de données.. sans données!
- #WORKSHOP
-
Romain Vuillemot
Les dataviz sont de plus en plus populaires mais restent difficile à créer.
Ce workshop propose a pour but d'initier les participants aux méthodes de prototypes de visualisation de données sous forme de grids et de maquettes interactives, en noir et blanc. La particularité du prototypage sera d'être réalisé en live coding en JavaScript.
Les dataviz sont de plus en plus populaires mais restent difficile à créer. Ce workshop propose a pour but d'initier les participants aux méthodes de prototypes de visualisation de données sous forme de grids et de maquettes interactives, en noir et blanc. La particularité du prototypage sera d'être réalisé en live coding en JavaScript.
