Платформа данных · open source · визуализация данных
Marquez: как сделать происхождение данных тем, что можно проследить глазами
01 / Контекст
В платформе данных ничто не стоит отдельно. Таблицу производит job, который читает три другие таблицы, а те питают дашборд, на который в понедельник утром кто-то пожалуется. Когда эти связи существуют только как идентификаторы в списке, ответ на вопрос «откуда взялось это число» превращается в полдня расспросов коллег.
02 / Задача
Нарисовать плотный граф зависимостей так, чтобы он оставался читаемым: достаточно видно сразу, чтобы понять форму системы, достаточно деталей по запросу, чтобы ответить на реальный вопрос, и ни одного состояния, в котором пользователь теряется внутри собственных данных.
03 / Объём работ
Что я сделал
- 01Участвовал во фронтенд-разработке open-source веб-приложения Marquez.
- 02Работал над интерфейсами просмотра метаданных.
- 03Реализовал визуальное представление зависимостей между данными.
- 04Использовал React и D3.js для интерактивного, насыщенного данными UI.
04 / Ключевые решения
Ключевые решения
- 01
Граф — основной способ чтения, а не украшение
Зависимости рисуются графом, потому что вопрос почти всегда реляционный: не «что это за датасет», а «что стоит выше по потоку и что упадёт, если я это поменяю».
- 02
D3.js там, где библиотека графиков закончилась бы
Графы происхождения данных требуют контроля над раскладкой, поведением узлов и тем, сколько рисуется одновременно. D3 даёт этот контроль ценой большего объёма ручной работы — правильный размен для специализированного интерфейса, в котором люди сидят весь день.
- 03
React, держащий остальную часть приложения
Компонентная структура связала визуализацию с панелями метаданных и окружающими сценариями, поэтому граф читается как вид внутри приложения, а не как остров посреди него.
05 / Результаты
Результаты
- 01
Интерфейс, в котором инженеры просматривают метаданные и прослеживают зависимости вместо того, чтобы восстанавливать их вручную.
- 02
Технический граф данных, превращённый в исследуемую форму, а не в список идентификаторов.
- 03
Работа, проверяемая публично: Marquez — open source, код лежит на GitHub.
Стек
- React
- JavaScript
- D3.js
- Open Source
Использованные услуги
Похожий проект? Напишите, что хотите построить, и я отвечу в течение 24 часов.