Pannable & zoomable, interactive SVG map rendering data nodes as hexagons
Aug 2021 - February 2023
One Data
Cross functional team of 8
One Data, a leading software company based in Germany, is revolutionizing data management with their flagship product, One Data—an AI-powered Data Product Builder. One of the main components of their product is the data cartography map.
The data cartography map is an interactive data map that allows powerful visibility to quickly discover and access available data assets & the relations between them.
At it's core, it's a large SVG component rendering each data asset as a hexagon, automatically clustering them together based on relevant attributes. The map can be zoomed & panned, viewed in different levels of detail and quality layers can be enabled to examine data assets with issues. Each data asset can be individually interacted with and multiple assets can be connected together with a "connection".
As an early team member on this project, I helped shape the base framework this component. During my tenure in this team, the team grew from 4 to 6 developers including 2 juniors, me as a senior & 3 principals / staff.
One Data's core software i.e. the Data Product Builder consists of many components such as App Builder, Data Source Manager, Workflow Builder, etc. allowing a data scientist to rapidly prototype & build custom data products as per their requirements. Initially, Data Cartography Map was built to be one of the custom components that could be configured in the App Builder. The source code for each custom component was packaged separately and versioned & released regularly. This unorthodox setup introduced many challenges not only in developing the component but also in it's usage. Some examples are:
Although it was initially quite difficult to navigate all those challenges and iterate quickly, the initial prototype's success allowed more time to be spent in refactoring & improving the stack.
Searching the map
Toggling connections & Layers