Behavioural Atlas

A relational behavioural architecture mapping core cognitive structures to biases, effects, and laws.

Overview

Behavioural Atlas is a structural mapping project. Rather than treating biases as isolated ideas, the aim was to build a relational architecture that connects foundational cognitive mechanisms to observable behavioural phenomena.

The project became an exercise in systems design. I designed a hierarchical structure: core cognitive domains → mechanistic processes → behavioural outputs (biases, laws, fallacies). Every node exists within a formal structure, not as a standalone definition.

Behavioural Atlas 3D network

Relational architecture

The 3D network is not just decorative. It reflects a computed relational structure. Each node carries metadata (type, parent, weight), and links are generated programmatically from this structure.

I implemented a connection-strength equation that computes relational proximity based on hierarchy, type and the number of total nodes and connections in the network. Core nodes influence mechanisms; mechanisms influence behavioural outputs. This formal structure ensures that expansion does not collapse into visual chaos. This was especially important to myself, as I often find myself encoutering a new bias or fallacy that I want to add to the network.

Adding a new mechanism under a core automatically generates its relational links, colour state, and physics behaviour. The architecture was designed from the beginning to scale.

Behavioural Atlas core node structure

Auto-generated behavioural library

The library page is not manually curated but instead is generated directly from the same relational data structure that powers the 3D graph.

When a new bias, law, or fallacy is added to the dataset, it automatically appears in the repository, inherits its parent structure, and becomes navigable textually.

Each entry is intentionally succinct: a clear definition, one key example, and practical mitigation strategies. The aim is complete clarity in exactly what the behaviour is without bombarding a person with information.

Behavioural Atlas library view

Navigation and state logic

State management is handled through Zustand, allowing global control over selected nodes, camera transitions, and UI panels without prop drilling.

I spent some time refining the camera mathematics, for example adjusting distance scaling, focus interpolation, and orientation offsets so that node selection feels smooth rather than abrupt and clearly focuses on the node the user selects.

I also wanted the 3D space to be responsive on mobile and so this required seperate design considerations. Camera angles, zoom constraints, and label rendering had to be recalibrated for smaller screens to preserve legibility and spatial coherence and the information panels were neatly toggled, keeping all other behaviour the same.

Behavioural Atlas navigation and UI

Learning curve and technical growth

Three.js introduced a new layer of thinking for me. Rendering performance, lighting, object instancing, and text labels in 3D space required careful optimisation.

Working with react-force-graph-3d forced me to understand physics simulation parameters: alpha decay, velocity damping, link distance, and clustering behaviour.

The project strengthened both my technical and conceptual understanding of behavioural science. Designing the relational structure required me to clarify how biases actually emerge from deeper mechanisms rather than memorising them as isolated effects. And it was just pretty fun coming across new fallacies or biases that we so often fall for!

Behavioural Atlas information panel

What this project represents

Behavioural Atlas was a conceptually challenging project that took some time in designing. The act of formalising relationships between mechanisms and outputs clarified my own understanding of cognitive architecture and also helped me appreciate the need to synthesise big picture thinking with smaller, technical detail.

Architecturally, I wanted it to reflect deliberate planning. The system was designed to expand indefinitely without structural rewrites whcih meant that every addition had to slot into an existing taxonomy.

It is both a knowledge map and a design exercise in scalable relational systems and I hope that it can continue to expand as I continue to learn more about behaviour.

Built with

  • TypeScript
  • Next.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Three.js
  • Vercel
  • GitHub