The Package Dependence browser is an interactive data visualization interface for understanding dependencies in object-oriented programming languages built in D3.js and Angular.

As an interface in Sema's enterprise SaaS platform, it's used by architects and software leads to come up to speed on new code, migrate out dependencies and understand the structure of their code. As product manager and designer, I worked with one developer to iterate from a static graphviz chart to a feature rich interactive interface for exploring code over a few development cycles.

I led the product research and design, prioritizing potential new functionality, as well as the UX and interaction of both the chart and a material design menu & context menu components.

Users can switch between two graph types - a force-directed network graph & a treemap.

Initially showing only outgoing dependencies, we added the ability to toggle between incoming and outgoing views. To help organize the chaotic code bases of our enterprise organizations (generally the reason they hired Sema), we gave them the ability to assign colors to the packages that persisted across both graph types. Users could save off a snapshot of their code base, and had the ability to toggle on package names for anything they assigned a color to.