Designing a navigable legal map for the Law Observatory

Legislation does not behave like a flat list. One law can amend, supplement, regulate, or repeal parts of another. When those relationships only appear as scattered references, finding context takes too much manual work.

The map's goal was to make those connections visible without replacing the reading of the legal source. The interface had to guide exploration, retain verifiable links to regulations, and coexist with the Observatory's text search.

The visualisation is not the source of truth. Regulations and their links should first be expressed in a relational model that can query source, target, relationship type, and evidence. That makes the graph a derived view rather than a set of frontend-hardcoded connections.

With NestJS, Prisma, and PostgreSQL, the backend can serve both search results and a subset of relationships for each regulation. The same data layer prevents the map and the document detail from telling different stories.

D3 makes it possible to represent a network without turning it into a static image. The challenge is not only drawing links: it is controlling density, prioritising nearby context, and offering a clear way into each regulation's text.

That is why the map is treated as an entry point. Selected nodes should reveal meaningful relationships and lead to a document or filtered search. Visual navigation complements search; it does not compete with it.

A legal map becomes useful when it can explain why it shows a relationship. Traceability for every link, handling incomplete data, and predictable behaviour when no connections exist matter as much as the graph's animation.

The broader lesson is simple: before choosing a visualisation library, define which decision the interface helps make and what verifiable source stands behind every element it displays.