Le meetup D3.js à Paris a présenté des applications de heatmap pour suivre des objectifs sur différents marchés et produits en temps réel. La preuve de concept a été réalisée en deux jours, suivie de deux semaines de développement, et a été en production depuis plus de six mois. Les défis incluent la gestion des interactions utilisateur et le traitement de grandes quantités de données.

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)