Knowledge Graph is an information-design piece: a force-directed visualisation of a connected body of work, the Parlance platform, the Lexicon design system, and the thePace sites, drawn from a knowledge base of roughly 1,600 notes and auto-clustered into 37 communities. It exists to answer a single question: what is connected to what?
The challenge
Systems thinking has an output problem. The relationships between projects, systems and decisions are real, but they live in folders and links where nobody can see the shape of them. Without a picture, the structure stays in one person’s head, and leaves when they do.
- Relationships between projects and systems are invisible in folders
- The structure of a body of work lives only in someone’s head
- Auto-generated graphs are accurate but visually unreadable
- Importance and clustering are lost in a flat link list
Discovery & research
The raw graph already existed, auto-generated and auto-clustered by tooling. The research was entirely about legibility: what a 1,594-node graph has to encode to be read at a glance, what to suppress so it isn't a hairball, and how a stranger can name the structure in seconds.
Accuracy and readability pull in opposite directions
A faithful drawing of ~1,600 connected nodes is a hairball; a pretty drawing usually lies. The whole design problem was keeping the truth of the data while making its structure pop, a legibility problem, not a layout one.
Evidence1,594 nodes, 1,606 edges and 37 auto-detected communities in graphify-out/graph.json.
Importance has to be seen, not inferred
The hubs, the nodes everything else connects to, carry the meaning of the system. They had to be obvious without reading a single label, so importance is encoded as node size plus a glow on dark.
EvidenceNodes sized and glowed by connection count in the render.
Colour-coded clusters are useless if you can't name them
Thirty-seven coloured blobs say 'there is structure here' but not what it is. A legend names every community, Lexicon Design System, ParlanceClient, the thePace sites, so the picture becomes navigable, not just decorative.
EvidenceA live legend listing all 37 communities beside the graph.
Layout is the algorithm's job; legibility is the designer's
The node positions come from a force-directed solver, that part is data, not design. The contribution was the visual language laid on top: community colour, importance encoding, edge styling and the legend that turn an accurate-but-noisy graph into something a person can actually read.
EvidenceforceAtlas2 layout in graph.html, with the colour / size / glow / legend treatment designed on top.
How I approached it
The raw graph came from tooling; the design job was to make it legible. I gave each community a colour, sized nodes by importance, the hub nodes that everything connects to, and used a glowing-node-on-dark treatment so the clusters read instantly. The legend names the communities, so a stranger can read the whole system in a few seconds.
Took an auto-generated force-directed graph as the raw material
Coloured nodes by community (Parlance / Lexicon / thePace)
Sized and glowed nodes by importance so hubs are obvious
Styled edges to show connection without visual noise
Added a legend so the clusters are nameable, not just visible
Trade-offs
The challenge with any knowledge graph is that accuracy and readability pull against each other. A faithful graph of ~1,600 nodes is a hairball; the design had to keep the truth while making the structure pop.
- Keeping ~1,600 nodes readable without hiding the truth
- Encoding importance and community without clutter
- Making a technical artifact feel like a designed object
Final direction
The final piece is a dark, glowing, clustered graph with a clear legend, the whole ecosystem (Parlance, Lexicon, thePace) as a single, readable image. It works as both a navigational aid and a portfolio statement about how the pieces fit.
Outcomes
Knowledge Graph is a small but pointed demonstration of systems thinking made visible, turning an accurate, unreadable data structure into a designed picture that communicates the shape of an entire body of work at a glance.
You cannot see a system until someone draws it.
Systems thinking is invisible until you draw it. The job of the visualisation is not to add information, it is to make the structure that was already there finally readable.