La conférence pour l'éthique et la diversité dans la tech
avec des crêpes et du cœur Mixit heart

#WORKSHOP

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 Tech

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 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

Ma bio

Hosted and supported by