Plataforma de datos · código abierto · visualización de datos
Marquez: cómo hacer que el origen de los datos se pueda seguir a simple vista
Contexto
En una plataforma de datos nada está aislado. Una tabla la produce un job que lee otras tres tablas, y estas alimentan un panel por el que alguien se quejará el lunes por la mañana. Cuando esas dependencias existen solo como identificadores en una lista, responder a «de dónde sale esta cifra» se convierte en una tarde preguntando a los compañeros.
El reto
Dibujar un grafo denso de dependencias de modo que siga siendo legible: con tanto a la vista como haga falta para ver la forma del sistema, con tanto detalle bajo demanda como haga falta para responder a la pregunta real, y sin ningún estado en el que el usuario se pierda en sus propios datos.
Alcance
Qué hice
- 01Colaboré en el frontend de la aplicación web de código abierto Marquez.
- 02Trabajé en las interfaces para explorar metadatos.
- 03Implementé la representación visual de las dependencias entre datos.
- 04Usé React y D3.js para una interfaz interactiva y muy centrada en los datos.
Decisiones clave
Decisiones clave
- 01
El grafo es la forma principal de leer, no un adorno
Las dependencias se dibujan como un grafo porque la pregunta casi siempre es relacional: no «qué es este conjunto de datos», sino «qué hay aguas arriba y qué se caerá si lo cambio».
- 02
D3.js donde una biblioteca de gráficos se quedaría corta
Los grafos de origen de datos exigen control sobre la distribución, el comportamiento de los nodos y cuánto se dibuja a la vez. D3 da ese control a costa de más trabajo manual, y es el compromiso correcto para una interfaz especializada en la que la gente pasa el día entero.
- 03
React uniendo el resto de la aplicación
La estructura de componentes unió la visualización con los paneles de metadatos y los flujos que la rodean, de modo que el grafo es una vista dentro de la aplicación y no una isla en medio.
Resultados
Resultados
- 01
Una interfaz en la que los ingenieros exploran metadatos y siguen las dependencias en lugar de reconstruirlas a mano.
- 02
Un grafo técnico de datos convertido en algo que se puede explorar, no en una lista de identificadores.
- 03
Un trabajo verificable públicamente, porque Marquez es de código abierto y el código está en GitHub.
Stack
- React
- JavaScript
- D3.js
- Open Source
Servicios aplicados
¿Tiene un proyecto parecido? Cuénteme qué quiere construir y le responderé, normalmente, en 2 horas.