Platforma danych · open source · wizualizacja danych
Marquez: jak sprawić, by pochodzenie danych dało się prześledzić wzrokiem
01 / Kontekst
W platformie danych nic nie stoi osobno. Tabelę produkuje job, który czyta trzy inne tabele, a te zasilają dashboard, na który ktoś poskarży się w poniedziałek rano. Kiedy te zależności istnieją tylko jako identyfikatory na liście, odpowiedź na pytanie „skąd wzięła się ta liczba” zamienia się w popołudnie dopytywania kolegów.
02 / Wyzwanie
Narysować gęsty graf zależności tak, żeby pozostał czytelny: na tyle dużo widoczne naraz, by zobaczyć kształt systemu, na tyle dużo szczegółu na żądanie, by odpowiedzieć na realne pytanie, i żadnego stanu, w którym użytkownik gubi się we własnych danych.
03 / Zakres
Co zrobiłem
- 01Współtworzyłem frontend open-source'owej aplikacji webowej Marquez.
- 02Pracowałem nad interfejsami do przeglądania metadanych.
- 03Zaimplementowałem wizualne przedstawienie zależności między danymi.
- 04Użyłem React i D3.js do interaktywnego, mocno danowego UI.
04 / Kluczowe decyzje
Kluczowe decyzje
- 01
Graf jest głównym sposobem czytania, nie dekoracją
Zależności są rysowane jako graf, bo pytanie prawie zawsze jest relacyjne — nie „czym jest ten zbiór danych”, tylko „co stoi wyżej i co się przewróci, jeśli to zmienię”.
- 02
D3.js tam, gdzie biblioteka do wykresów by się skończyła
Grafy pochodzenia danych wymagają kontroli nad układem, zachowaniem węzłów i tym, ile rysuje się naraz. D3 daje tę kontrolę kosztem większej ilości ręcznej pracy — i to właściwy kompromis dla specjalistycznego interfejsu, w którym ludzie siedzą cały dzień.
- 03
React spinający resztę aplikacji
Struktura komponentowa połączyła wizualizację z panelami metadanych i otaczającymi je przepływami, dzięki czemu graf jest widokiem w aplikacji, a nie wyspą w jej środku.
05 / Rezultaty
Rezultaty
- 01
Interfejs, w którym inżynierowie przeglądają metadane i śledzą zależności zamiast odtwarzać je ręcznie.
- 02
Techniczny graf danych zamieniony w coś, co da się eksplorować, a nie w listę identyfikatorów.
- 03
Praca weryfikowalna publicznie, bo Marquez jest open source, a kod leży na GitHubie.
Stack
- React
- JavaScript
- D3.js
- Open Source
Wykorzystane usługi
Masz podobny projekt? Napisz, co chcesz zbudować, a odpowiem w ciągu 24 godzin.