bella/hero.html at main · Recursive-Emergence/bella · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BELLA — a worked example</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #0d1117; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    font: 13px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e6edf3;
  }
  svg { width: 100%; max-width: 1200px; height: auto; display: block; }
  .download {
    position: fixed; top: 12px; right: 16px;
    font-size: 11px; color: #6e7681; font-family: ui-monospace, monospace;
  }
</style>
</head>
<body>

<div class="download">bella/hero.html — save SVG: right-click → inspect → copy &lt;svg&gt;</div>

<svg viewBox="0 0 1200 760" xmlns="http://www.w3.org/2000/svg"
     font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif">

  <defs>
    <marker id="arr-sup" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 z" fill="#62d196"/>
    </marker>
    <marker id="arr-cnt" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 z" fill="#fb7185"/>
    </marker>
    <marker id="arr-hyp" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 z" fill="#c39bd3"/>
    </marker>
  </defs>

  <rect width="1200" height="760" fill="#0d1117"/>

  <!-- ─── TITLE ─── -->
  <g transform="translate(40, 32)">
    <text x="0" y="20" font-size="22" font-weight="500" fill="#e6edf3" letter-spacing="-0.01em">
      A worked example, Jaynes-style — with one hyperedge
    </text>
    <text x="0" y="44" font-size="13" fill="#8b949e">
      A break-in at the gallery. Two paintings on display: Sunset and Storm. Three witnesses come forward.
      Which painting (if any) was stolen?
    </text>
  </g>

  <!-- COLUMN HEADERS -->
  <text x="60" y="110" font-size="11" font-weight="600" fill="#8b949e" letter-spacing="0.12em">
    THE HYPERGRAPH
  </text>
  <text x="640" y="110" font-size="11" font-weight="600" fill="#8b949e" letter-spacing="0.12em">
    THE ACCUMULATION (decibels of evidence)
  </text>

  <line x1="610" y1="92" x2="610" y2="600" stroke="#30363d" stroke-width="1"/>

  <!-- ════════════════════════════════════════════════════════════════ -->
  <!--  LEFT PANEL — hypergraph                                         -->
  <!-- ════════════════════════════════════════════════════════════════ -->

  <!-- proposition cards -->
  <g transform="translate(60, 130)">
    <rect width="220" height="74" rx="6" fill="#161b22" stroke="#30363d" stroke-width="1"/>
    <text x="14" y="18" font-size="10" font-family="ui-monospace, monospace" fill="#6e7681">P1</text>
    <text x="14" y="38" font-size="14" font-weight="500" fill="#e6edf3">Sunset was stolen</text>
    <text x="14" y="58" font-size="11" fill="#8b949e">prior odds 1 : 9</text>
    <text x="160" y="58" font-size="11" font-family="ui-monospace, monospace" fill="#6e7681">−10 dB</text>
  </g>

  <g transform="translate(330, 130)">
    <rect width="220" height="74" rx="6" fill="#161b22" stroke="#30363d" stroke-width="1"/>
    <text x="14" y="18" font-size="10" font-family="ui-monospace, monospace" fill="#6e7681">P2</text>
    <text x="14" y="38" font-size="14" font-weight="500" fill="#e6edf3">Storm was stolen</text>
    <text x="14" y="58" font-size="11" fill="#8b949e">prior odds 1 : 9</text>
    <text x="160" y="58" font-size="11" font-family="ui-monospace, monospace" fill="#6e7681">−10 dB</text>
  </g>

  <!-- entity / witness cards -->
  <g transform="translate(60, 360)">
    <rect width="160" height="64" rx="6" fill="#161b22" stroke="#30363d" stroke-width="1"/>
    <text x="12" y="18" font-size="10" font-family="ui-monospace, monospace" fill="#6e7681">witness</text>
    <text x="12" y="36" font-size="13" font-weight="500" fill="#e6edf3">Curator</text>
    <text x="12" y="54" font-size="10" fill="#8b949e">2 separate claims</text>
  </g>

  <g transform="translate(245, 360)">
    <rect width="160" height="64" rx="6" fill="#1c1726" stroke="#c39bd3" stroke-width="1.4"/>
    <text x="12" y="18" font-size="10" font-family="ui-monospace, monospace" fill="#c39bd3">witness · hyperedge</text>
    <text x="12" y="36" font-size="13" font-weight="500" fill="#e6edf3">Guard</text>
    <text x="12" y="54" font-size="10" fill="#c39bd3">one claim · two effects</text>
  </g>

  <g transform="translate(430, 360)">
    <rect width="120" height="64" rx="6" fill="#161b22" stroke="#30363d" stroke-width="1"/>
    <text x="12" y="18" font-size="10" font-family="ui-monospace, monospace" fill="#6e7681">witness</text>
    <text x="12" y="36" font-size="13" font-weight="500" fill="#e6edf3">Camera</text>
    <text x="12" y="54" font-size="10" fill="#8b949e">one claim</text>
  </g>

  <!-- claim text under entity cards -->
  <g font-size="11" fill="#8b949e" font-style="italic">
    <text x="60" y="442">"Sunset is missing"</text>
    <text x="60" y="458">"Storm is in place"</text>
    <text x="245" y="442">"Both were there at midnight"</text>
    <text x="430" y="442">"Movement near Sunset 02:00"</text>
  </g>

  <!-- edges from witnesses up to propositions -->
  <!-- Curator → P1 (supports) -->
  <path d="M 110 360 Q 110 290 110 204" stroke="#62d196" stroke-width="1.4" fill="none" marker-end="url(#arr-sup)" opacity="0.85"/>
  <text x="118" y="290" font-size="10" font-family="ui-monospace, monospace" fill="#62d196">→ +10 dB</text>

  <!-- Curator → P2 (counters) -->
  <path d="M 175 360 Q 280 285 410 204" stroke="#fb7185" stroke-width="1.2" fill="none" marker-end="url(#arr-cnt)" opacity="0.7" stroke-dasharray="3 3"/>
  <text x="265" y="280" font-size="10" font-family="ui-monospace, monospace" fill="#fb7185">⊥ −10 dB</text>

  <!-- Guard → P1 (counters) — HYPEREDGE leg 1 -->
  <path d="M 295 360 Q 220 290 175 204" stroke="#c39bd3" stroke-width="1.6" fill="none" marker-end="url(#arr-hyp)"/>
  <text x="195" y="335" font-size="10" font-family="ui-monospace, monospace" fill="#c39bd3">⊥ −6 dB</text>

  <!-- Guard → P2 (counters) — HYPEREDGE leg 2 -->
  <path d="M 360 360 Q 405 290 460 204" stroke="#c39bd3" stroke-width="1.6" fill="none" marker-end="url(#arr-hyp)"/>
  <text x="395" y="335" font-size="10" font-family="ui-monospace, monospace" fill="#c39bd3">⊥ −6 dB</text>

  <!-- Camera → P1 (supports) -->
  <path d="M 470 360 Q 380 285 230 204" stroke="#62d196" stroke-width="1.2" fill="none" marker-end="url(#arr-sup)" opacity="0.85"/>
  <text x="370" y="320" font-size="10" font-family="ui-monospace, monospace" fill="#62d196">→ +9 dB</text>

  <!-- legend -->
  <g transform="translate(60, 510)" font-size="11">
    <rect x="-4" y="-14" width="540" height="74" rx="4" fill="#0f1419" stroke="#1f262e" stroke-width="0.5"/>
    <text fill="#62d196" y="2">→ supports</text>
    <text x="100" fill="#fb7185" y="2">⊥ counters</text>
    <text x="200" fill="#c39bd3" y="2">═ hyperedge: same claim, two propositions</text>
    <text fill="#8b949e" y="22">An entity is the hyperedge — when one source's single claim is</text>
    <text fill="#8b949e" y="38">evidence on more than one proposition, that source bridges them.</text>
  </g>

  <!-- ════════════════════════════════════════════════════════════════ -->
  <!--  RIGHT PANEL — worked accumulation                               -->
  <!-- ════════════════════════════════════════════════════════════════ -->
  <g transform="translate(640, 130)" font-family="ui-monospace, monospace" font-size="12">

    <!-- P1 block -->
    <text x="0" y="0" font-size="13" font-weight="600" fill="#e6edf3" font-family="ui-sans-serif, sans-serif">
      P1 — Sunset stolen
    </text>

    <g transform="translate(0, 24)" fill="#c9d1d9">
      <text x="0"   y="0">prior odds 1 : 9</text>
      <text x="380" y="0" text-anchor="end" fill="#6e7681">−10 dB</text>

      <text x="0"   y="22">Curator "Sunset is missing"</text>
      <text x="180" y="22" fill="#6e7681">lr = 10</text>
      <text x="380" y="22" text-anchor="end" fill="#62d196">+10 dB</text>

      <text x="0"   y="44">Guard "both there" (hyperedge)</text>
      <text x="180" y="44" fill="#6e7681">lr = 4</text>
      <text x="380" y="44" text-anchor="end" fill="#c39bd3">−6 dB</text>

      <text x="0"   y="66">Camera "movement near Sunset"</text>
      <text x="180" y="66" fill="#6e7681">lr = 8</text>
      <text x="380" y="66" text-anchor="end" fill="#62d196">+9 dB</text>

      <line x1="0" x2="380" y1="80" y2="80" stroke="#30363d" stroke-width="0.8"/>

      <text x="0"   y="100" fill="#e6edf3" font-weight="600">posterior</text>
      <text x="180" y="100" fill="#62d196">2 : 1 odds</text>
      <text x="380" y="100" text-anchor="end" fill="#62d196" font-weight="600">+3 dB &#8594; m = 0.67</text>
    </g>

    <!-- P2 block -->
    <text x="0" y="170" font-size="13" font-weight="600" fill="#e6edf3" font-family="ui-sans-serif, sans-serif">
      P2 — Storm stolen
    </text>

    <g transform="translate(0, 194)" fill="#c9d1d9">
      <text x="0"   y="0">prior odds 1 : 9</text>
      <text x="380" y="0" text-anchor="end" fill="#6e7681">−10 dB</text>

      <text x="0"   y="22">Curator "Storm is in place"</text>
      <text x="180" y="22" fill="#6e7681">lr = 10</text>
      <text x="380" y="22" text-anchor="end" fill="#fb7185">−10 dB</text>

      <text x="0"   y="44">Guard "both there" (hyperedge)</text>
      <text x="180" y="44" fill="#6e7681">lr = 4</text>
      <text x="380" y="44" text-anchor="end" fill="#c39bd3">−6 dB</text>

      <line x1="0" x2="380" y1="58" y2="58" stroke="#30363d" stroke-width="0.8"/>

      <text x="0"   y="78" fill="#e6edf3" font-weight="600">posterior</text>
      <text x="180" y="78" fill="#fb7185">1 : 400 odds</text>
      <text x="380" y="78" text-anchor="end" fill="#fb7185" font-weight="600">−26 dB &#8594; m = 0.003</text>
    </g>

    <!-- callout: the hyperedge appears in BOTH worked stacks -->
    <g transform="translate(0, 320)">
      <rect x="-10" y="-16" width="540" height="44" rx="4" fill="#1c1726" stroke="#c39bd3" stroke-width="0.6" opacity="0.85"/>
      <text x="0" y="2" font-size="11" fill="#c39bd3" font-family="ui-sans-serif, sans-serif">
        Notice the line "Guard 'both there'  −6 dB" appears in <tspan font-weight="600">both</tspan> stacks.
      </text>
      <text x="0" y="20" font-size="11" fill="#c39bd3" font-family="ui-sans-serif, sans-serif">
        One claim, two effects. That repetition is the hypergraph showing through the math.
      </text>
    </g>
  </g>

  <!-- ─── BOTTOM: entanglement ripple (R5 through R6) ─── -->
  <g transform="translate(40, 640)">
    <text x="0" y="0" font-size="11" font-weight="600" fill="#8b949e" letter-spacing="0.12em">
      AND THEN — THE ENTANGLEMENT RIPPLE
    </text>
    <text x="0" y="22" font-size="12" fill="#c9d1d9">
      The Guard's claim conflicts with the Camera. His reputation drops from <tspan fill="#e6edf3" font-family="ui-monospace, monospace">0.50</tspan>
      to about <tspan fill="#e6edf3" font-family="ui-monospace, monospace">0.40</tspan>.
      That drop modulates his evidence on <tspan font-style="italic">both</tspan> propositions —
      his counter on P2 weakens to <tspan fill="#e6edf3" font-family="ui-monospace, monospace">−5.7 dB</tspan>
      even though no new evidence about Storm arrived.
    </text>
    <text x="0" y="42" font-size="12" fill="#8b949e">
      That ripple through one entity is what "hypergraph" actually buys.
      One witness, one updated reputation, two propositions shifted.
      &#160;See SPEC.md §7.1 (Entanglement) and §8 (Entities as R5).
    </text>
  </g>

  <!-- ─── ATTRIBUTION ─── -->
  <text x="40" y="730" font-size="10" fill="#6e7681">
    Decibel evidence per Jaynes Ch. 4 · 10 dB = 10:1 odds · Bayesian update by addition · gallery example crafted to fit one image.
  </text>
</svg>

</body>
</html>