D3, Heatmap et React
Meetup 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
10
17
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éat...
Besoin
5
2
• Targets mensuelles
• Données MTD (Month-To-Date) - i.e. du jour choisi
au début du mois
• Détecter rapidement...
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 i...
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
• ...
Merci !
11
• D3.js Paris
• à Leboncoin
• Equancy (et on recrute : data engineer / hadoop
dev / frontend)
Prochain SlideShare
Chargement dans…5
×

Meetup D3.js Paris - Christophe Blefari - Equancy

338 vues

Publié le

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

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
338
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Meetup D3.js Paris - Christophe Blefari - Equancy

  1. 1. D3, Heatmap et React Meetup D3.js Paris #8 @LeBonCoin
  2. 2. Moi 2 1 • Christophe Blefari • Data Engineer à Equancy • Niveau D3 : moyen ❤ 💔
  3. 3. Vous 3 1 0 15 30 45 60 level 10 17 54 13 null beginner middle advanced
  4. 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. 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. 6. Besoin 6 2
  7. 7. Besoin 7 2 http://www.trulia.com/vis/tru247/ http://bl.ocks.org/ianyfchang/8119685
  8. 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. 9. Choix et réalisation 9 3 Démo finale + code
  10. 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. 11. Merci ! 11 • D3.js Paris • à Leboncoin • Equancy (et on recrute : data engineer / hadoop dev / frontend)

×