56 lines
3.5 KiB
XML
56 lines
3.5 KiB
XML
<svg width="700" height="340" xmlns="http://www.w3.org/2000/svg">
|
||
<text x="350" y="22" fill="#333" font-size="14" font-weight="bold" text-anchor="middle">Surprisal and Entropy</text>
|
||
|
||
<!-- Left: Surprisal bars -->
|
||
<text x="200" y="50" fill="#333" font-size="12" font-weight="bold" text-anchor="middle">Surprisal of individual events</text>
|
||
|
||
<!-- Axes -->
|
||
<line x1="60" y1="260" x2="340" y2="260" stroke="#333" stroke-width="1.2"/>
|
||
<line x1="60" y1="260" x2="60" y2="60" stroke="#333" stroke-width="1.2"/>
|
||
<text x="200" y="285" fill="#666" font-size="10" text-anchor="middle">Event</text>
|
||
<text x="35" y="160" fill="#666" font-size="10" text-anchor="middle" transform="rotate(-90,35,160)">Surprisal (bits)</text>
|
||
|
||
<!-- High probability event (low surprise) -->
|
||
<rect x="90" y="225" width="60" height="35" fill="#3498db" opacity="0.7" rx="2"/>
|
||
<text x="120" y="218" fill="#3498db" font-size="10" text-anchor="middle">0.74 bits</text>
|
||
<text x="120" y="278" fill="#333" font-size="9" text-anchor="middle">Sunny day</text>
|
||
<text x="120" y="293" fill="#666" font-size="9" text-anchor="middle">(p = 0.6)</text>
|
||
|
||
<!-- Medium probability event -->
|
||
<rect x="170" y="155" width="60" height="105" fill="#f39c12" opacity="0.7" rx="2"/>
|
||
<text x="200" y="148" fill="#f39c12" font-size="10" text-anchor="middle">2.32 bits</text>
|
||
<text x="200" y="278" fill="#333" font-size="9" text-anchor="middle">Rainy day</text>
|
||
<text x="200" y="293" fill="#666" font-size="9" text-anchor="middle">(p = 0.2)</text>
|
||
|
||
<!-- Low probability event (high surprise) -->
|
||
<rect x="250" y="80" width="60" height="180" fill="#e74c3c" opacity="0.7" rx="2"/>
|
||
<text x="280" y="73" fill="#e74c3c" font-size="10" text-anchor="middle">4.32 bits</text>
|
||
<text x="280" y="278" fill="#333" font-size="9" text-anchor="middle">Snow day</text>
|
||
<text x="280" y="293" fill="#666" font-size="9" text-anchor="middle">(p = 0.05)</text>
|
||
|
||
<!-- Arrow and insight -->
|
||
<text x="200" y="315" fill="#666" font-size="10" text-anchor="middle">Rare events carry more information</text>
|
||
|
||
<!-- Divider -->
|
||
<line x1="380" y1="40" x2="380" y2="310" stroke="#ccc" stroke-width="1" stroke-dasharray="4,4"/>
|
||
|
||
<!-- Right: Entropy concept -->
|
||
<text x="540" y="50" fill="#333" font-size="12" font-weight="bold" text-anchor="middle">Entropy = average surprisal</text>
|
||
|
||
<!-- Weighted average visual -->
|
||
<rect x="420" y="85" width="240" height="55" rx="6" fill="#f5f5f5" stroke="#333" stroke-width="1"/>
|
||
<text x="540" y="105" fill="#333" font-size="11" text-anchor="middle">H = Σ p(x) · log₂(1/p(x))</text>
|
||
<text x="540" y="125" fill="#666" font-size="10" text-anchor="middle">weight each surprise by its probability</text>
|
||
|
||
<!-- Calculation -->
|
||
<text x="540" y="165" fill="#3498db" font-size="10" text-anchor="middle">0.6 × 0.74 = 0.44</text>
|
||
<text x="540" y="185" fill="#f39c12" font-size="10" text-anchor="middle">0.2 × 2.32 = 0.46</text>
|
||
<text x="540" y="205" fill="#e74c3c" font-size="10" text-anchor="middle">0.05 × 4.32 = 0.22</text>
|
||
<text x="540" y="225" fill="#666" font-size="10" text-anchor="middle">+ rest (0.15 × 2.74 = 0.41)</text>
|
||
|
||
<line x1="460" y1="235" x2="620" y2="235" stroke="#333" stroke-width="1"/>
|
||
<text x="540" y="255" fill="#333" font-size="12" text-anchor="middle" font-weight="bold">H ≈ 1.53 bits</text>
|
||
|
||
<text x="540" y="285" fill="#666" font-size="10" text-anchor="middle">Higher entropy = more uncertain</text>
|
||
<text x="540" y="302" fill="#666" font-size="10" text-anchor="middle">Lower entropy = more predictable</text>
|
||
</svg> |
