Plateforme de données · open source · visualisation de données
Marquez : rendre l’origine des données lisible d’un coup d’œil
Contexte
Dans une plateforme de données, rien n’existe isolément. Une table est produite par un job qui lit trois autres tables, et celles-ci alimentent un tableau de bord dont quelqu’un se plaindra lundi matin. Quand ces dépendances n’existent que sous forme d’identifiants dans une liste, répondre à « d’où vient ce chiffre ? » devient un après-midi passé à interroger des collègues.
Enjeu
Dessiner un graphe de dépendances dense de façon qu’il reste lisible : assez visible d’un coup pour voir la forme du système, assez de détail à la demande pour répondre à une vraie question, et aucun état où l’utilisateur se perd dans ses propres données.
Périmètre
Ce que j'ai fait
- 01J’ai contribué au frontend de l’application web open source Marquez.
- 02J’ai travaillé sur les interfaces de parcours des métadonnées.
- 03J’ai implémenté la représentation visuelle des dépendances entre données.
- 04J’ai utilisé React et D3.js pour une interface interactive très orientée données.
Décisions clés
Décisions clés
- 01
Le graphe est le mode de lecture principal, pas un décor
Les dépendances sont dessinées sous forme de graphe parce que la question est presque toujours relationnelle : non pas « qu’est-ce que ce jeu de données ? », mais « qu’y a-t-il en amont et qu’est-ce qui s’effondre si je le modifie ? »
- 02
D3.js là où une bibliothèque de graphiques s’arrêterait
Les graphes de lineage exigent de contrôler la disposition, le comportement des nœuds et la quantité dessinée à la fois. D3 offre ce contrôle au prix de plus de travail manuel, et c’est le bon compromis pour une interface spécialisée où l’on passe la journée.
- 03
React pour relier le reste de l’application
La structure en composants a relié la visualisation aux panneaux de métadonnées et aux parcours qui les entourent, de sorte que le graphe est une vue de l’application et non un îlot en son milieu.
Résultats
Résultats
- 01
Une interface où les ingénieurs parcourent les métadonnées et suivent les dépendances au lieu de les reconstituer à la main.
- 02
Un graphe de données technique transformé en quelque chose qu’on peut explorer, plutôt qu’en liste d’identifiants.
- 03
Un travail vérifiable publiquement, car Marquez est open source et le code est sur GitHub.
Stack
- React
- JavaScript
- D3.js
- Open Source
Services mobilisés
Vous avez un projet similaire ? Écrivez-moi ce que vous souhaitez créer, je réponds généralement sous 2 heures.