Skip to content

Commit 539c932

Browse files
authored
Merge pull request #2 from stared/geminification
Geminification
2 parents 9368ed4 + cfa5b9f commit 539c932

32 files changed

+1291
-714
lines changed

favicon.ico

Whitespace-only changes.

index.html

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,31 @@
2020
<meta property="twitter:description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
2121
<meta property="twitter:image" content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png" />
2222

23+
<!-- Fonts -->
24+
<link rel="preconnect" href="https://fonts.googleapis.com">
25+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
26+
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
27+
2328
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
2429
</head>
2530
<body>
2631
<div id="app">
2732
<aside id="sidebar" class="sidebar">
2833
<h2>Equations</h2>
2934
<nav id="equation-selector" class="equation-selector"></nav>
35+
36+
<footer class="sidebar-footer">
37+
<p>
38+
Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a>
39+
</p>
40+
<p>
41+
Source: <a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">github.com/stared/equations-explained-colorfully</a>
42+
</p>
43+
<p>
44+
For more on interactive explanations, see:
45+
<a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
46+
</p>
47+
</footer>
3048
</aside>
3149

3250
<main id="main-content" class="main-content">
@@ -40,35 +58,23 @@ <h1 id="equation-title">Interactive Equations</h1>
4058
<div id="static-description" class="static-description"></div>
4159

4260
<div id="hover-explanation" class="hover-explanation"></div>
43-
44-
<footer class="footer">
45-
<p>
46-
Demo by <a href="https://p.migdal.pl" target="_blank" rel="noopener">Piotr Migdał</a> ·
47-
<a href="https://github.com/stared/equations-explained-colorfully" target="_blank" rel="noopener">View source on GitHub</a>
48-
</p>
49-
<p>
50-
For more on interactive explanations, see:
51-
<a href="https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/" target="_blank" rel="noopener">Science, games, and explorable explanations</a>
52-
</p>
53-
</footer>
5461
</main>
5562

5663
<aside id="editor-sidebar" class="editor-sidebar">
5764
<div class="editor-toolbar">
5865
<button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
5966
<span class="icon"></span>
6067
</button>
61-
<div class="export-dropdown">
62-
<button id="export-btn" class="toolbar-btn" title="Export">Export as...</button>
63-
<div id="export-menu" class="export-menu" style="display: none;">
64-
<button class="export-option" data-format="html">HTML</button>
65-
<button class="export-option" data-format="latex">LaTeX</button>
66-
<button class="export-option" data-format="beamer">Beamer</button>
67-
<button class="export-option" data-format="typst">Typst</button>
68-
</div>
68+
<div class="export-controls">
69+
<select id="export-format" class="toolbar-select" title="Export as...">
70+
<option value="" disabled selected>Export as...</option>
71+
<option value="html">HTML</option>
72+
<option value="latex">LaTeX</option>
73+
<option value="beamer">Beamer</option>
74+
<option value="typst">Typst</option>
75+
</select>
6976
</div>
7077
<button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>
71-
<button id="download-btn" class="toolbar-btn" title="Download file">Download</button>
7278
<a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
7379
</div>
7480
<div id="editor-container" class="editor-container"></div>

public/examples/equations.json

Lines changed: 0 additions & 32 deletions
This file was deleted.

public/examples/navier-stokes.md

Lines changed: 0 additions & 53 deletions
This file was deleted.

public/examples/schrodinger.md

Lines changed: 0 additions & 53 deletions
This file was deleted.

scripts/validate-content.ts

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,31 @@ console.log('Validating equation files...');
77

88
let hasErrors = false;
99

10-
// Load equations list
11-
const equationsJson = readFileSync('./public/examples/equations.json', 'utf-8');
12-
const equations = JSON.parse(equationsJson);
10+
// Scan src/examples directory for markdown files
11+
const examplesDir = './src/examples';
12+
const files = readdirSync(examplesDir).filter(f => f.endsWith('.md'));
13+
14+
console.log(`Found ${files.length} equation files`);
1315

1416
// Validate each equation file
15-
for (const equation of equations) {
16-
const filePath = `./public/examples/${equation.file}`;
17-
console.log(`\nChecking ${equation.title} (${equation.file})...`);
17+
for (const file of files) {
18+
const filePath = `${examplesDir}/${file}`;
19+
console.log(`\nChecking ${file}...`);
1820

1921
try {
2022
const content = readFileSync(filePath, 'utf-8');
2123
const parsed = parseContent(content);
24+
console.log(` ✓ Title: ${parsed.title || '(no title)'}`);
2225
console.log(` ✓ ${parsed.termOrder.length} terms found`);
26+
27+
if (parsed.errors.length > 0) {
28+
console.error(` ✗ Validation errors:`);
29+
parsed.errors.forEach(err => console.error(` - ${err}`));
30+
hasErrors = true;
31+
}
32+
if (parsed.warnings.length > 0) {
33+
parsed.warnings.forEach(warn => console.warn(` ⚠ ${warn}`));
34+
}
2335
} catch (error) {
2436
console.error(` ✗ Validation failed:`);
2537
if (error instanceof Error) {

src/examples/bayes.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Bayes' Theorem
2+
3+
## Equation
4+
5+
$$
6+
\mark[posterior]{P(H|E)} = \frac{\mark[likelihood]{P(E|H)} \mark[prior]{P(H)}}{\mark[evidence]{P(E)}}
7+
$$
8+
9+
## Description
10+
11+
Your [updated belief]{.posterior} is your [prior view]{.prior} re-weighted by its [predictive power]{.likelihood} and normalized by the [total probability of the evidence]{.evidence}.
12+
13+
## .posterior
14+
15+
Posterior Probability $P(H|E)$.
16+
17+
What you believe *after* seeing the data. It is the probability of the Hypothesis ($H$) being true given the Evidence ($E$). This is the output of the learning process.
18+
19+
## .likelihood
20+
21+
Likelihood $P(E|H)$.
22+
23+
How well the hypothesis explains the data. It asks: "If my theory were true, how likely would this outcome be?" High likelihood means the theory strongly predicts the observed evidence.
24+
25+
## .prior
26+
27+
Prior Probability $P(H)$.
28+
29+
Your starting assumption *before* seeing new data. It represents base rates or previous knowledge. Strong priors are hard to shift; weak priors change easily with new evidence.
30+
31+
## .evidence
32+
33+
Marginal Likelihood $P(E)$.
34+
35+
The total probability of seeing the evidence under *all* possible hypotheses. It acts as a normalization factor. If the evidence is surprising (low $P(E)$), it has a stronger effect on updating your beliefs.
36+

src/examples/dft.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Discrete Fourier Transform
2+
3+
## Equation
4+
5+
$$
6+
\mark[amplitude]{X}_{\mark[freq]{k}} = \mark[average]{\frac{1}{N}} \mark[average]{\sum_{n=0}^{N-1}} \mark[signal]{x_n} \mark[spin]{e}^{\mark[spin]{i} \mark[circle]{2\pi} \mark[freq]{k} \mark[average]{\frac{n}{N}}}
7+
$$
8+
9+
## Description
10+
11+
To find [the amplitude]{.amplitude} [at a particular frequency]{.freq}, [spin]{.spin} [your signal]{.signal} [around a circle]{.circle} [at that frequency]{.freq}, and [average a bunch of points along that path]{.average}.
12+
13+
## .amplitude
14+
15+
The transform output $X_k$.
16+
17+
Represents the **complex amplitude** (magnitude and phase) of the signal at a specific frequency. Its magnitude tells you "how much" of that frequency is present.
18+
19+
## .freq
20+
21+
The frequency index $k$.
22+
23+
Determines which frequency we are analyzing. It appears both in the output index (which bin?) and in the rotation term (how fast do we spin?).
24+
25+
## .average
26+
27+
The averaging operation.
28+
29+
Combines the summation ($\sum$) and the division by $N$ (and the time index term $\frac{n}{N}$). It turns the sum into an average value over the signal's duration.
30+
31+
## .signal
32+
33+
The input signal $x_n$.
34+
35+
Your raw data points (audio, image, stock prices) sampled over time.
36+
37+
## .spin
38+
39+
The exponential term $e^i$.
40+
41+
This is the rotation operator basis.
42+
43+
## .circle
44+
45+
The full circle constant $2\pi$.
46+
47+
Represents one full rotation in radians.

src/examples/einstein.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Einstein Field Equations
2+
3+
## Equation
4+
5+
$$
6+
\mark[ricci]{R_{\mu\nu}} \mark[scalar]{- \frac{1}{2}R g_{\mu\nu}} + \mark[dark-energy]{\Lambda g_{\mu\nu}} = \mark[coupling]{\frac{8\pi G}{c^4}} \mark[matter]{T_{\mu\nu}}
7+
$$
8+
9+
## Description
10+
11+
The [Ricci curvature]{.ricci} and [scalar curvature]{.scalar} combined with [dark energy]{.dark-energy} are determined by the [matter distribution]{.matter} scaled by the [gravitational constant]{.coupling}.
12+
13+
## .ricci
14+
15+
Ricci Curvature Tensor ($R_{\mu\nu}$).
16+
17+
This describes how the volume of a shape changes as it moves through spacetime. It represents the part of curvature that causes matter to converge or diverge, directly corresponding to the presence of mass and energy.
18+
19+
## .scalar
20+
21+
Scalar Curvature Term ($-\frac{1}{2}R g_{\mu\nu}$).
22+
23+
This geometric correction involves the Ricci scalar $R$ and metric tensor $g_{\mu\nu}$. It ensures that the geometry side of the equation mathematically conserves energy and momentum, matching the physics of the matter side.
24+
25+
## .dark-energy
26+
27+
The Cosmological Constant ($\Lambda$).
28+
29+
An intrinsic energy of empty space that pushes the universe apart. It opposes gravity and is responsible for the accelerating expansion of the universe.
30+
31+
## .coupling
32+
33+
Gravitational Coupling.
34+
35+
This tiny factor ($\approx 2 \times 10^{-43}$) describes how "stiff" spacetime is. It explains why gravity is so weak: it takes a massive amount of matter (like the Earth) to produce even a modest curvature.
36+
37+
## .matter
38+
39+
Stress-Energy Tensor ($T_{\mu\nu}$).
40+
41+
The source of gravity. It tells space how to curve using mass density ($\rho$), pressure ($p$), and momentum flux. In General Relativity, all energy gravitates, not just mass.

0 commit comments

Comments
 (0)