Mental Map

A Visualisation of My Interests

An interactive ~400-node / ~660-edge graph of recurring concepts

  • Frontend
  • Conceptual Direction
  • Data Visualization
  • React
  • Performance
  • CSS
  • Animation

Overview

  • A map of the ideas that recur across my engineering, taste, and philosophy, and how they connect. An interesting map is a big one (~400 nodes), and big interactive graphs are where browsers fall over: layout cost, re-render storms on hover, scroll hijacking.

  • Every decision here trades runtime cost for build-time cost. The force-directed layout runs offline at build and ships as static JSON. Hover and focus are CSS-only wherever they can be, so panning 400 pills never triggers a React re-render. Each category carries its own 13-colour scale, and the filter chips double as the legend.

  • Separate renderer from the per-feature system diagrams, even though they share a data shape. The needs diverge enough — scale, theming, interaction — that forcing them into one component would be the wrong abstraction.

System Design