D3, Heatmap et ReactMeetup D3.js Paris #8 @LeBonCoin

Moi

2

1

• Christophe Blefari

• Data Engineer à Equancy

• Niveau D3 : moyen

❤ 💔

Vous

3

1

0

15

30

45

60

level

1017

54

13

null beginner middle advanced

Besoin

4

2

• Nécessité de piloter au jour le jour l’atteinte ou non d’objectifs sur X marchés et Y produits

*valeurs aléatoires

Besoin

5

2

• Targets mensuelles

• Données MTD (Month-To-Date) - i.e. du jour choisi au début du mois

• Détecter rapidement les problèmes pour activer une action de résolution

• Besoin de creuser dans l’historique

Besoin

6

2

Besoin

7

2

http://www.trulia.com/vis/tru247/ http://bl.ocks.org/ianyfchang/8119685

Choix et réalisation

8

3

• PoC sur la Heatmap en 2 jours

• Environ 2 semaines pour avoir l’ensemble fonctionnel avec les interactions

• En prod depuis + de 6 mois et utilisé tous les jours

• D3 + JQuery + DataTables

Choix et réalisation

9

3

Démo finale+

code

Remarques générales

10

4

• Pattern enter() + update() + exit()

• L’utilisateur cliquera partout => prévoir des réponses

• 10 MB de données

• Utiliser les animations avec parcimonie

• Code long ~1200 lignes

Merci !

11

• D3.js Paris

• à Leboncoin

• Equancy (et on recrute : data engineer / hadoop dev / frontend)