La Data Visualization en JavaScript avec D3.js et p5.js

Pour programmer votre propre Data Visualization sur le web, rien de mieux qu’utiliser JavaScript. D3.js et p5.js qui sont les outils incontournables. Ces bibliothèques permettent à la fois de programmer des visualisations classiques (bar chart, streamgraph), mais aussi plus créatives et génératives.

D3.js permet de mapper vos données à une page web pour y dessiner des graphiques à partir d’éléments de base tels que des rectangles, cercles, et leurs propriétés comme la position et la couleur. C’est donc un outil de bas niveau, similaire à JQuery qui fonctionne aussi à base de sélecteurs. De nombreuses fonctions sont inclues afin de faciliter la création de layouts de graphs, labels pour les axes d’un graphique, transition entre les formes graphiques et leurs propriétés. D3.js possède de nombreux exemples sur le site officiel https://d3js.org/ , sous forme de Gist dans des http://bl.ocks.org/mbostock et des interfaces de live coding comme http://blockbuilder.org/ . Nous présenterons la version 4 de D3.js, ainsi que l’utilisation à la fois de SVG et Canvas.

p5.js est une référence et un couteau-suisse incontournable pour tous les designers, graphistes, vidéastes et codeurs créatifs qui souhaitent investir les pages web pour y inventer de nouvelles aventures rétiniennes et interactives. Venez apprivoiser cette merveilleuse librairie JavaScript, réécriture moderne de Processing dans l’un des langages de programmation web les plus usités qu’est le JavaScript. De nombreux exemples seront illustrés en live coding https://p5js.org/ .