00Case study · Apr 2023 – Oct 2023

In-house graph engine

Replaced a licensed graph library (about $50K a year) with a D3 engine that draws straight to SVG.

LeadShipped

My roleLead: evaluated the options, designed and built the engine, and removed the licensed library.

~$50K/yr saved
3 layouts
30 PRs

01Overview

What it is, and why

The product’s asset relationship graph ran on a commercial graph library licensed at about $50K a year. I compared three alternatives, built an in-house engine on low-level D3 primitives that draws straight to SVG, and removed the licensed library once every graph view was covered. It ran in production until mid-2025, and part of its layout code is still in use.

A licence is a recurring cost, and a library the team cannot change. The question was build or buy: could an in-house engine cover every graph view the product needed, without breaking any of them on the way?

At a glance

How it works, in short

Layouts: a force-directed view that nests assets inside their groups with collision forces so nodes never overlap, a tree view and a general network view.
Interaction by hand: centred initial zoom with scale limits, panning, dragging, selection, arrowheads and link colours by connection type.
Product features on top: root-cause emphasis, data-asset highlighting, owned-by relations and loading states.

React
D3 v7
SVG

02Timeline

How it came together

Apr 2023 to Oct 2023.

Nov 2022
Node labels, layouts and the icon pipeline, still on the licensed library.
Apr 2023
Prototype of the in-house engine.
May 2023
Engine merged.
Aug 2023
Licensed library removed.
Oct 2023
Last refactor; dead graph code cleaned up in Mar 2024.
Jun 2025
Another developer moved the view to React Flow; part of my layout code is still in use.

03Architecture

How the parts fit

Three layouts on low-level D3 primitives feed one SVG renderer; interaction is written by hand on top.

graph · data to pixels

Data
- Asset graphAssets, groups and their connections
Layout · D3 v7
- Nested force layoutAssets inside groups, with collision forces
- Treed3-hierarchy
- NetworkGeneral connections
Rendering · SVG
- Icon fontGenerated from cloud and security-product SVGs
- SVG rendererNodes, links, arrowheads, colours by type
- InteractionZoom, pan, drag, select

Asset graph to Nested force layoutAssets nested inside their groups
Asset graph to TreeThe same data as a hierarchy
Asset graph to NetworkConnections between assets
Nested force layout to SVG rendererPositions on every simulation tick
Tree to SVG rendererTree positions
Network to SVG rendererNetwork positions
Icon font to SVG rendererOne glyph per node type
Interaction to SVG rendererCentred start, scale limits, selection

Point at a box or a flow to trace it. The numbers match the list.

04Inside the system

The parts that matter

01
Three layouts
- A force-directed “enclosure” view that nests assets inside their groups, with collision forces so nodes never overlap.
- A tree view and a general network view, with switching between them.
02
Interaction by hand
- Centred initial zoom with scale limits, panning, dragging and selection.
- Arrowheads and link colours by connection type; link and arrow geometry from custom trigonometry.
03
Product features on top
- Root-cause emphasis, data-asset highlighting, “owned by” relations and loading states.
04
Icons for every node
- A separate generator turns cloud and security-product SVG icons into an icon font and a stylesheet for the graph’s nodes.

05Deep dive

Hard problems

What stood in the way, what I did, and what came of it. Where nothing was measured, it says so.

Hard problem 01

Replacing a dependency without breaking the product

Problem: Every graph view in the product depended on the licensed library.
What I did: Compared three alternatives first.
Built the engine on low-level D3 primitives (force, hierarchy, zoom) that draw straight to SVG.
Moved the views over and removed the library only once every view was covered.
Result: The licensed library was removed in Aug 2023, saving about $50K a year (owner-stated).

Hard problem 02

Groups that hold their shape

Problem: Assets sit inside their groups. A plain force layout lets nodes collide and drift out of the group they belong to.
What I did: A nested-group force layout with collision forces per node.
Link and arrow geometry computed with custom trigonometry.
Result: Nodes never overlap, and each stays inside its group.

06Decisions

Trade-offs I made

What I chose, what I passed on, and why.

Decision · Build or buy
An in-house engine on D3 v7
OverRenewing the licence, or another library
Three alternatives were compared; low-level D3 primitives covered every view with nothing to license.
Decision · Abstraction level
Low-level primitives (d3-force, d3-hierarchy, d3-zoom)
OverA higher-level graph framework
Full control of layout and interaction, which the nested-group view needed.

07Outcomes

What came of it

Measured or owner-stated

Results

About $50K a year in licensing removed (owner-stated figure).
3 layouts, 36 files in the graph module, 30 pull requests.
In production from 2023 until mid-2025.

Said plainly

Limits

No rendering-performance benchmark is quoted.