Ego Graph Integration

How to add the knowledge graph widget to any CLN Wiki article

Files to deploy

graph-data.js
All 30 nodes + edges. Shared across all articles. Update once — all graphs update.
ego-graph.js
Widget renderer. Reads graph-data.js, builds ego-graph for current article, injects UI.
wiki-graph.html
Full 30-node interactive graph. Linked from widget footer "full graph →".
d3 (CDN)
Loaded from cdnjs.cloudflare.com. No local copy needed.
Deploy location: все три файла в папку /wiki/ рядом со статьями. Пути относительные — ничего настраивать не нужно.

Подключение в статью — 3 строки

Добавить перед закрывающим </body>:

<!-- Ego Graph Widget -->
<script>window.CLN_PAGE_ID = "event-boundary";</script>
<script src="graph-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="ego-graph.js"></script>
Важно: порядок скриптов фиксированный. graph-data.js → d3 → ego-graph.js. D3 нужен до ego-graph, graph-data нужен раньше всех.

PAGE_ID для каждой статьи

Поменять только CLN_PAGE_ID — всё остальное одинаково:

"tagmarry"
"event-boundary"
"cognitive-trace"
"interaction-trace"
"episodic-overlay"
"enactive-cognition"
"memory-aware-ui"
"episodic-interface"
"temporal-context"
"cognitive-gesture"
"episodic-memory"
"semantic-memory"
"spatial-memory"
"elaborative-rehearsal"
"levels-of-processing"
"generative-effect"
"enactment-effect"
"testing-effect"
"spacing-effect"
"triple-encoding"
"spatial-addressability"
"cln-addressing"
"pre-attentive"
"semantic-compression"
"associative-anchor"
"interactivity-salience"
"cognitive-workbench"
"cognitive-ecology"
"heuristic-cognition"
"dual-coding-theory"

Статьи без ID в графе

Если статьи нет в graph-data.js — виджет просто не появится, ошибок нет. Можно подключать везде без проверки.

Чтобы добавить новую статью в граф — добавить объект в NODES и рёбра в EDGES в graph-data.js. Все статьи с этим же ID обновятся автоматически.

Подключение wiki-graph.html к index

В index.html добавить кнопку рядом со статистикой:

<!-- в stats row -->
<a href="wiki-graph.html" style="...">
  ◎ Knowledge Graph
</a>

Или как отдельный nav-item в topbar рядом с "Wiki".

Что делает виджет

01
Иконка ◎ в правом нижнем углу
Цвет иконки соответствует кластеру текущей статьи. Не мешает чтению, занимает 36×36px.
02
Клик → раскрывается панель 280×220px
Текущая статья — центральный узел, зафиксирован. Соседи расходятся вокруг по силе связи. D3 force simulation, физика реальная.
03
Hover по узлу → имя в нижней строке
Появляется label + ссылка "open →". Клик по узлу — переход на статью.
04
⊞ → открывает wiki-graph.html
Полный граф в новой вкладке. Можно таскать, зумить, изучать весь граф.