Behavioural Atlas

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

Overview

Behavioural Atlas is a structural mapping project which meant, rather than treating biases as isolated ideas, building a relational architecture that connects foundational cognitive mechanisms to observable behavioural phenomena.

The project became an exercise in systems design where a hierarchical structure of core cognitive domains maps to mechanistic processes which in turn maps to behavioural outputs (biases, laws, fallacies).

Relational architecture

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.

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

Behavioural Atlas core node structure

Auto-generated behavioural library

A library page lists all behaviours found in the network, and rather than have this manually hard-coded, it 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 also intentionally succinct, involving nothing more than a clear definition, one key example, and practical mitigation strategies. The idea was to have 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 - it was in equal parts both fun and frustrating learning the mechanics. I learnt about rendering performance, lighting, object instancing, and text labels in 3D space. As just one example of an optimisation difficulty, at first, every node that was hovered would trigger a state update that re-rendered the entire graph, causing significant lag. I had to implement a custom hover system that only updates the hovered node and its directly connected nodes, which required a deeper understanding of both React rendering and Three.js object management.

Working with react-force-graph-3d also forced me to understand physics simulation parameters such as alpha decay, velocity damping, link distance, and clustering behaviour. The project inadvertently 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. It was also just very interesting 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, and so the system was designed to expand indefinitely without structural rewrites which meant that every addition had to slot into an existing classification. 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

More projects