Slides from D3js Paris #8. "How to design a heatmap for your client"

1. D3, Heatmap et React
Meetup D3.js Paris #8 @LeBonCoin

2. Moi
2
1
• Christophe Blefari
• Data Engineer à Equancy
• Niveau D3 : moyen
❤ 💔

3. Vous
3
1
0
15
30
45
60
level
10
17
54
13
null beginner middle advanced

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

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

6. Besoin
6
2

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

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

9. Choix et réalisation
9
3
Démo finale
+
code

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

11. Merci !
11
• D3.js Paris
• à Leboncoin
• Equancy (et on recrute : data engineer / hadoop
dev / frontend)