Session 4 — Visual Brain

What We Built

A standalone browser-based visualizer for the NCI Knowledge Landscape. Loads a brain_visual.json export and renders clusters as an interactive force-directed graph using D3.js.

How To Use

Run python export_brain.py in the NCI project folder
Double-click brain_visual.html to open in any browser
Click Load .nci Export and select brain_visual.json

No server required — it's a single self-contained HTML file.

What Each Visual Element Means

Element	Represents	Driven By
Node (circle)	One cluster in the Knowledge Landscape	clusters[] array
Node size	How many times the cluster has fired	cluster.fired
Node colour	Active vs inactive status	cluster.is_relevant
Glow effect	Cluster is relevant to last query	SVG feGaussianBlur filter
Connection line	Inter-cluster relationship	connections[] array
Blue highlighted lines	Connections of hovered node	mouseover event
Concept tags	Concepts living in this cluster	cluster.concepts[]

Interactions

Hover a node — tooltip shows fired count, size, status, connections, and all concept names in that cluster
Scroll — zoom in/out (10% to 800%)
Click and drag — pan the graph

Tech Stack

Plain HTML + CSS + vanilla JavaScript
D3.js v7.8.5 (loaded from CDN)
SVG for rendering — force simulation for physics

End Goal — Living Brain Visualizer

Vision

Like the time threads in Loki — flowing, luminous, alive. Every thought leaves a trail of light.

Future visual elements planned:

Bezier curve threads — flowing organic connections instead of straight lines
Traveling light pulse — animated dot moving along a thread toward a firing node
Node fire burst — warm amber glow explosion when a cluster activates
New node bloom — a thread extends outward, a new node blooms at the tip
WebSocket real-time mode — live firing events streamed from a running NCI instance

Key Files

brain_visual.html — the visualizer
export_brain.py — generates brain_visual.json from a .nci file
brain_visual.json — the exported brain data