Dataplatform · open source · datavisualisatie
Marquez: de herkomst van data in één oogopslag te volgen maken
Context
In een dataplatform staat niets los. Een tabel wordt geproduceerd door een job die drie andere tabellen leest, en die voeden een dashboard waarover maandagochtend iemand komt klagen. Als die afhankelijkheden alleen als ID’s in een lijst bestaan, verandert de vraag “waar komt dit getal vandaan?” in een middag navragen bij collega’s.
Uitdaging
Een dichte afhankelijkheidsgraaf zo tekenen dat hij leesbaar blijft: genoeg tegelijk zichtbaar om de vorm van het systeem te zien, genoeg detail op verzoek om een echte vraag te beantwoorden, en geen situatie waarin de gebruiker verdwaalt in zijn eigen data.
Scope
Wat ik heb gedaan
- 01Ik werkte mee aan de frontend van de open-sourcewebapplicatie Marquez.
- 02Ik werkte aan interfaces om metadata door te bladeren.
- 03Ik implementeerde de visuele weergave van afhankelijkheden tussen data.
- 04Ik gebruikte React en D3.js voor een interactieve, sterk datagedreven UI.
Belangrijkste beslissingen
Belangrijkste beslissingen
- 01
De graaf is de hoofdmanier van lezen, geen decoratie
Afhankelijkheden worden als graaf getekend omdat de vraag bijna altijd relationeel is: niet “wat is deze dataset?”, maar “wat zit er stroomopwaarts en wat valt om als ik dit wijzig?”
- 02
D3.js waar een grafiekbibliotheek ophoudt
Lineage-grafen vragen controle over de layout, het gedrag van de knooppunten en hoeveel er tegelijk wordt getekend. D3 geeft die controle ten koste van meer handwerk, en dat is de juiste afweging voor een gespecialiseerde interface waarin mensen de hele dag werken.
- 03
React als bindmiddel voor de rest van de applicatie
De componentstructuur verbond de visualisatie met de metadatapanelen en de flows eromheen, zodat de graaf een weergave in de applicatie is en geen eiland middenin.
Resultaten
Resultaten
- 01
Een interface waarin engineers metadata doorbladeren en afhankelijkheden volgen in plaats van ze met de hand te reconstrueren.
- 02
Een technische datagraaf die je kunt verkennen, in plaats van een lijst met ID’s.
- 03
Werk dat publiek te controleren is, want Marquez is open source en de code staat op GitHub.
Stack
- React
- JavaScript
- D3.js
- Open Source
Ingezette diensten
Heb je een vergelijkbaar project? Laat me weten wat je wilt bouwen, dan reageer ik meestal binnen 2 uur.