Skip to content

Instantly share code, notes, and snippets.

@jmikedupont2

jmikedupont2/matrix.html

Created April 3, 2026 18:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmikedupont2/c350d5684246918be7dd39a5b9663694 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmikedupont2/c350d5684246918be7dd39a5b9663694 to your computer and use it in GitHub Desktop.
Download ZIP
Monster Moonshine Matrix HTML
Raw
matrix.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monster Moonshine Matrix - SSP × 194 Irreps</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600&display=swap');
:root {
--bg: #0a0a0f;
--text: #e8e8f0;
--accent: #6366f1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'JetBrains Mono', monospace;
background: var(--bg);
color: var(--text);
min-height: 100vh;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--accent);
}
.subtitle {
color: #666;
font-size: 0.8rem;
margin-bottom: 1rem;
}
#matrix {
width: 100%;
overflow-x: auto;
}
svg {
background: #0f0f15;
border-radius: 8px;
}
.tooltip {
position: fixed;
background: #1a1a25;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
padding: 0.5rem;
pointer-events: none;
opacity: 0;
z-index: 1000;
font-size: 0.75rem;
display: block;
}
.tooltip.visible { opacity: 1; }
.tooltip-title {
font-weight: 600;
color: var(--accent);
}
</style>
</head>
<body>
<h1>MONSTER MOONSHINE MATRIX</h1>
<p class="subtitle">15 SSP Primes × 194 Irreducible Representations</p>
<div id="matrix">
<svg id="svg" viewBox="0 0 1400 400"></svg>
</div>
<div class="tooltip" id="tooltip"></div>
<script>
const PRIME_COLORS = {
2: '#E74C3C', 3: '#3498DB', 5: '#2ECC71', 7: '#F39C12',
11: '#9B59B6', 13: '#1ABC9C', 17: '#E91E63', 19: '#00BCD4',
23: '#FF5722', 29: '#673AB7', 31: '#795548', 41: '#607D8B',
47: '#FF9800', 59: '#4CAF50', 71: '#3F51B5'
};
const SSP = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 41, 47, 59, 71];
const MONSTER_REPS = [
1, 196883, 21296876, 842609326, 18538750076, 19360062527, 293553734298,
3879214937598, 36173193327999, 125510727015275, 190292345709543, 222879856734249,
1044868466775133, 1109944460516150, 2374124840062976, 8980616927734375, 8980616927734375,
15178147608537368, 39660520552077425, 60359800576579350, 251098487132187500, 290568421805921077,
336041615485626050, 2500435234254428856, 2986480825407204125, 3503434660075044981, 3503434660075044981,
3605718753596953125, 8456836343580310400, 8754193822112578125, 28585990950721640625, 30815545786259524745,
31569817307122699605, 47377503606648784400, 49609712911192813665, 77316619273928125000, 130415350420342968750,
155943076739182582850, 172399434201593354756, 172399434201593354756, 286243267692724486144,
286243267692724486144, 379913824694312370176, 640558364167263622626, 640558364167263622626,
643356925889917747200, 691170144025469730622, 691170144025469730622, 776097192277137500000,
918438233727730974720, 1201241700908448332364, 1353006807137391674268, 1480279477146615234375,
1480279477146615234375, 1768130802583126953125, 1768130802583126953125, 2351753641814605348320,
2382987417506242421875, 4567199176912486400000, 4567199176912486400000, 5578077210155766091776,
6566555764392010419123, 7226910362631220625000, 10145274012943412428800, 12810005542623250817856,
19795913912408993711352, 21803647757861753437500, 24670833602960142274950, 31714653744947491918600,
41209556844092914062500, 42940402913709544921875, 42940402913709544921875, 60683762052057587326065,
70660346341309333984375, 70660346341309333984375, 86551489469233273849000, 91068387388302451493925,
114212876389603002704448, 115192831837135016250000, 146575737439884098045700, 149614794149226010902528,
149614794149226010902528, 161649111002260792968750, 161649111002260792968750, 191259085113459945312500,
191259085113459945312500, 218028402153522030021875, 220326476909636307378168, 260799524107083767968750,
260799524107083767968750, 261575621299360905468750, 277540481294528814140625, 303379038247015811718750,
331150814995116217581480, 351532203382732066094400, 391009081837477378329600, 392611651975065600000000,
433528694560598978525184, 597787522207315571077947, 597787522207315571077947, 600020772685064502392907,
626877403613887304040448, 626877403613887304040448, 655159231073705404921875, 689763222744895005949242,
689763222744895005949242, 689766726179555080994223, 689766726179555080994223, 1037605886984697481755304,
1361549126105752982272875, 1599110387863558882812500, 1662686180483865572016128, 2181694185821505680397072,
2216343020913351966796875, 2477548750555298068681032, 3282510540283631442175104, 3537292796538741415074900,
3619209050774375426792424, 4004308274823270400000000, 4239315652979009728125000, 4926670174323484069683200,
5334046162969208352215625, 5514132424881463208443904, 5514132424881463208443904, 5514132424881463208443904,
7118465328761788475375616, 7375892500409609408203125, 7567151576542452425781250, 7567151576542452425781250,
7850934959207940600000000, 8394037047155083487634450, 8874260875527017936065100, 9416031858681585751556096,
9479495745805305653125000, 9592298143650890255171584, 9592298143650890255171584, 9592584386918582979657728,
10023854998171489083984375, 12650882100466187033706250, 14930164283563048960000000, 16109407269221032565630370,
22626621365160537099927552, 24546384719289825598186695, 27501917609709102247187500, 29734941419909382162874368,
33684388830359981044531200, 33722191327002668157047380, 37310715211546624000000000, 38471795739256565080575180,
41738941151243953804687500, 41762322738385820195625000, 42001454087954515167503490, 42601474860639579669896397,
43527130990147981755651072, 50572542024949598403750000, 51324350389558097414062500, 56356433273146675005489152,
58437394633227526183321600, 62038057486792249132974080, 63750812845035828079008441, 64326163427522624205703125,
66550339514356152000000000, 69084859008005036431224066, 74612213529720383654779356, 77423398454853064646282250,
83974774459050335630859375, 86206621680977834911875000, 88943820620288343261672393, 103354104243912727763091456,
115165062362004433625000000, 121170799240938738783416925, 124058385593021471188320256, 124982156072747647257292800,
125517264890136048242396811, 129572518017902934396764160, 130287135266837289237316743, 135226984222789977095703125,
136107644194473772613203125, 136574874874360806036041889, 136574874874360806036041889, 138988549876584520148320256,
161561864971171113287540625, 163216709667196367710937500, 172248852397651745653437500, 173865305251972140447265625,
175867626988794162227008203, 177966317773633111417870812, 198203900044423845494482560, 200390867219082687273984375,
203314261261157852274218750, 207467089840006711558593750, 212490247553365721772656250, 241866941438795926688759808,
258823477531055064045234375
];
function factorize(n) {
const factors = {};
let d = 2;
while (d * d <= n) {
while (n % d === 0) {
factors[d] = (factors[d] || 0) + 1;
n /= d;
}
d++;
}
if (n > 1) factors[n] = 1;
return factors;
}
function createMatrix() {
const svg = document.getElementById('svg');
const width = 1400;
const height = 600;
const marginT = 30, marginL = 45;
const cellW = (width - marginL) / 15;
const cellH = (height - marginT) / 194;
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
// Header - SSP primes on top (as columns)
SSP.forEach((p, i) => {
const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
label.setAttribute('x', marginL + i * cellW + cellW/2);
label.setAttribute('y', 22);
label.setAttribute('fill', PRIME_COLORS[p]);
label.setAttribute('font-size', '9');
label.setAttribute('text-anchor', 'middle');
label.setAttribute('font-family', 'JetBrains Mono');
label.textContent = p;
svg.appendChild(label);
});
// Pre-compute all factorizations
const allFactors = MONSTER_REPS.map(rep => factorize(rep));
// Matrix: SSP cols × Irrep rows
SSP.forEach((p, colIdx) => {
MONSTER_REPS.forEach((rep, rowIdx) => {
const exp = (allFactors[rowIdx][p]) || 0;
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', marginL + colIdx * cellW + 1);
rect.setAttribute('y', marginT + rowIdx * cellH);
rect.setAttribute('width', cellW - 1);
rect.setAttribute('height', cellH - 0.5);
rect.setAttribute('fill', exp > 0 ? PRIME_COLORS[p] : '#15151f');
rect.setAttribute('rx', '1');
if (exp > 0) {
rect.setAttribute('fill-opacity', Math.min(0.3 + exp * 0.15, 1));
rect.style.cursor = 'pointer';
rect.onmouseenter = function(e) {
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = '<div class="tooltip-title">Irrep ' + rowIdx + ': ' + rep.toLocaleString() + '</div><div style="color:' + PRIME_COLORS[p] + '">' + p + '^' + exp + '</div>';
tooltip.style.left = (e.clientX + 15) + 'px';
tooltip.style.top = (e.clientY + 15) + 'px';
tooltip.classList.add('visible');
};
rect.onmouseleave = function() {
document.getElementById('tooltip').classList.remove('visible');
};
}
svg.appendChild(rect);
});
});
// Left header - irrep indices (as rows)
[0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 193].forEach(idx => {
const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
label.setAttribute('x', 30);
label.setAttribute('y', marginT + idx * cellH + cellH/2 + 3);
label.setAttribute('fill', '#555');
label.setAttribute('font-size', '8');
label.setAttribute('text-anchor', 'end');
label.textContent = idx;
svg.appendChild(label);
});
}
createMatrix();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment