Markowitz Efficient Frontier

// Markowitz efficient frontier: random portfolios over 5 assets.
// Plots return vs volatility; hover to see the weight vector of the nearest dot.

const N = 5;                       // assets
const M = 5000;                    // random portfolios
const RF = 0.02;                   // risk-free rate (annualized)

// Hypothetical assets — expected return mu, volatility sigma (annualized).
const NAMES  = ['EQ', 'BND', 'COM', 'REI', 'GLD'];
const MU     = [0.11, 0.04, 0.08, 0.09, 0.06];
const SIGMA  = [0.20, 0.06, 0.22, 0.18, 0.15];

// Correlation matrix (symmetric, ones on diagonal).
const CORR = [
  [1.00, -0.10,  0.55,  0.65,  0.10],
  [-0.10, 1.00, -0.05,  0.15, -0.05],
  [0.55, -0.05,  1.00,  0.40,  0.45],
  [0.65,  0.15,  0.40,  1.00,  0.20],
  [0.10, -0.05,  0.45,  0.20,  1.00],
];

// Pre-built covariance matrix: Cov[i][j] = sigma_i * sigma_j * corr_ij.
let COV;

// Pre-computed point cloud: weights (M*N flat), rets[M], vols[M], color hue[M].
let W, R, V, H;
// Bin grid for efficient frontier hull: max return per volatility bucket.
const BINS = 80;
let binsRet, binsW;       // binsRet[k] = best return in bin k, binsW[k] = weights index
let volMin, volMax, retMin, retMax;
// Tangency portfolio (max Sharpe sample).
let tanIdx;

function gauss() {
  let u = 0, v = 0;
  while (u === 0) u = Math.random();
  while (v === 0) v = Math.random();
  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
}

function buildCov() {
  COV = new Float32Array(N * N);
  for (let i = 0; i < N; i++)
    for (let j = 0; j < N; j++)
      COV[i * N + j] = SIGMA[i] * SIGMA[j] * CORR[i][j];
}

function sampleWeights(out, off) {
  // Random Dirichlet-ish: exponentials normalized, with small chance of
  // concentration to spread the cloud closer to corners.
  let s = 0;
  const sharp = Math.random() < 0.25 ? 0.4 : 1.0;
  for (let i = 0; i < N; i++) {
    const x = Math.pow(-Math.log(Math.random() + 1e-9), 1 / sharp);
    out[off + i] = x;
    s += x;
  }
  for (let i = 0; i < N; i++) out[off + i] /= s;
}

function portfolio(w, off) {
  let r = 0, vv = 0;
  for (let i = 0; i < N; i++) r += w[off + i] * MU[i];
  for (let i = 0; i < N; i++) {
    const wi = w[off + i];
    for (let j = 0; j < N; j++) vv += wi * w[off + j] * COV[i * N + j];
  }
  return [r, Math.sqrt(Math.max(vv, 0))];
}

function init({ width, height }) {
  buildCov();
  W = new Float32Array(M * N);
  R = new Float32Array(M);
  V = new Float32Array(M);
  H = new Float32Array(M);
  volMin = Infinity; volMax = -Infinity;
  retMin = Infinity; retMax = -Infinity;
  let bestSharpe = -Infinity;
  tanIdx = 0;
  for (let k = 0; k < M; k++) {
    sampleWeights(W, k * N);
    const [r, v] = portfolio(W, k * N);
    R[k] = r; V[k] = v;
    if (v < volMin) volMin = v;
    if (v > volMax) volMax = v;
    if (r < retMin) retMin = r;
    if (r > retMax) retMax = r;
    const sh = (r - RF) / Math.max(v, 1e-9);
    if (sh > bestSharpe) { bestSharpe = sh; tanIdx = k; }
  }
  // Pad ranges a touch.
  const vp = (volMax - volMin) * 0.06;
  const rp = (retMax - retMin) * 0.10;
  volMin = Math.max(0, volMin - vp); volMax += vp;
  retMin -= rp; retMax += rp;

  // Color by Sharpe ratio: hue maps low (red) -> high (cyan).
  let shMin = Infinity, shMax = -Infinity;
  const sharpes = new Float32Array(M);
  for (let k = 0; k < M; k++) {
    const s = (R[k] - RF) / Math.max(V[k], 1e-9);
    sharpes[k] = s;
    if (s < shMin) shMin = s;
    if (s > shMax) shMax = s;
  }
  for (let k = 0; k < M; k++) {
    const t = (sharpes[k] - shMin) / Math.max(shMax - shMin, 1e-9);
    H[k] = 10 + t * 170; // 10 (red) -> 180 (cyan)
  }

  // Build efficient frontier by binning on volatility.
  binsRet = new Float32Array(BINS); binsRet.fill(-Infinity);
  binsW   = new Int32Array(BINS);   binsW.fill(-1);
  for (let k = 0; k < M; k++) {
    const t = (V[k] - volMin) / (volMax - volMin);
    const b = Math.min(BINS - 1, Math.max(0, Math.floor(t * BINS)));
    if (R[k] > binsRet[b]) { binsRet[b] = R[k]; binsW[b] = k; }
  }
}

function tick({ ctx, width, height, input }) {
  // Background.
  const g = ctx.createLinearGradient(0, 0, 0, height);
  g.addColorStop(0, '#070a12');
  g.addColorStop(1, '#0c1322');
  ctx.fillStyle = g; ctx.fillRect(0, 0, width, height);

  const padL = 56, padR = 12, padT = 28, padB = 38;
  const pw = width - padL - padR;
  const ph = height - padT - padB;
  const x0 = padL, y0 = padT;

  // Plot helpers.
  const X = v => x0 + ((v - volMin) / (volMax - volMin)) * pw;
  const Y = r => y0 + ph - ((r - retMin) / (retMax - retMin)) * ph;

  // Grid.
  ctx.strokeStyle = 'rgba(120,150,200,0.10)';
  ctx.lineWidth = 1;
  for (let i = 1; i < 5; i++) {
    const yy = y0 + (ph * i) / 5;
    ctx.beginPath(); ctx.moveTo(x0, yy); ctx.lineTo(x0 + pw, yy); ctx.stroke();
  }
  for (let i = 1; i < 6; i++) {
    const xx = x0 + (pw * i) / 6;
    ctx.beginPath(); ctx.moveTo(xx, y0); ctx.lineTo(xx, y0 + ph); ctx.stroke();
  }
  ctx.strokeStyle = 'rgba(180,200,240,0.35)';
  ctx.strokeRect(x0 + 0.5, y0 + 0.5, pw, ph);

  // Axis labels.
  ctx.fillStyle = 'rgba(200,220,255,0.55)';
  ctx.font = '10px monospace';
  ctx.textAlign = 'center';
  for (let i = 0; i <= 6; i++) {
    const v = volMin + (volMax - volMin) * i / 6;
    ctx.fillText((v * 100).toFixed(0) + '%', x0 + (pw * i) / 6, y0 + ph + 14);
  }
  ctx.textAlign = 'right';
  for (let i = 0; i <= 5; i++) {
    const r = retMin + (retMax - retMin) * (1 - i / 5);
    ctx.fillText((r * 100).toFixed(1) + '%', x0 - 6, y0 + (ph * i) / 5 + 3);
  }
  ctx.textAlign = 'center';
  ctx.fillStyle = 'rgba(180,200,240,0.55)';
  ctx.fillText('Volatility σ', x0 + pw / 2, y0 + ph + 28);
  ctx.save();
  ctx.translate(14, y0 + ph / 2);
  ctx.rotate(-Math.PI / 2);
  ctx.fillText('Expected Return μ', 0, 0);
  ctx.restore();

  // Cloud — draw all M points as 2px squares (cheap; no per-frame alloc).
  for (let k = 0; k < M; k++) {
    const x = X(V[k]), y = Y(R[k]);
    ctx.fillStyle = 'hsla(' + H[k].toFixed(0) + ',75%,55%,0.55)';
    ctx.fillRect(x - 1, y - 1, 2, 2);
  }

  // Efficient frontier hull.
  ctx.strokeStyle = 'rgba(255,230,140,0.85)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  let first = true;
  for (let b = 0; b < BINS; b++) {
    if (binsW[b] < 0) continue;
    const k = binsW[b];
    const x = X(V[k]), y = Y(R[k]);
    if (first) { ctx.moveTo(x, y); first = false; } else { ctx.lineTo(x, y); }
  }
  ctx.stroke();

  // Tangency portfolio + capital allocation line.
  const tv = V[tanIdx], tr = R[tanIdx];
  const slope = (tr - RF) / Math.max(tv, 1e-9);
  // Draw CAL from (0, RF) extended past the tangency.
  ctx.strokeStyle = 'rgba(120,220,255,0.65)';
  ctx.setLineDash([5, 4]);
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(X(0), Y(RF));
  const vEnd = volMax;
  ctx.lineTo(X(vEnd), Y(RF + slope * vEnd));
  ctx.stroke();
  ctx.setLineDash([]);
  // Risk-free anchor.
  ctx.fillStyle = '#7fe3ff';
  ctx.beginPath(); ctx.arc(X(0), Y(RF), 3.5, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = 'rgba(120,220,255,0.85)';
  ctx.textAlign = 'left';
  ctx.fillText('r_f = ' + (RF * 100).toFixed(1) + '%', X(0) + 6, Y(RF) - 6);
  // Tangency marker.
  ctx.fillStyle = '#ffe680';
  ctx.beginPath(); ctx.arc(X(tv), Y(tr), 5, 0, Math.PI * 2); ctx.fill();
  ctx.strokeStyle = 'rgba(20,28,46,0.9)'; ctx.lineWidth = 1.5;
  ctx.stroke();
  ctx.fillStyle = 'rgba(255,230,140,0.9)';
  ctx.font = '10px monospace';
  ctx.fillText('Tangency  Sharpe=' + slope.toFixed(2), X(tv) + 8, Y(tr) - 8);

  // Hover: find nearest sampled portfolio to the cursor in plot space.
  const mx = input.mouseX, my = input.mouseY;
  let hover = -1;
  if (mx >= x0 && mx <= x0 + pw && my >= y0 && my <= y0 + ph) {
    let best = Infinity;
    for (let k = 0; k < M; k++) {
      const dx = X(V[k]) - mx, dy = Y(R[k]) - my;
      const d = dx * dx + dy * dy;
      if (d < best) { best = d; hover = k; }
    }
  }

  // Title bar.
  ctx.fillStyle = '#e8ecf4';
  ctx.font = 'bold 12px monospace';
  ctx.textAlign = 'left';
  ctx.fillText('Markowitz Efficient Frontier  ' + M + ' random portfolios over ' + N + ' assets', 10, 18);

  // Hover panel with weight vector.
  if (hover >= 0) {
    const off = hover * N;
    const x = X(V[hover]), y = Y(R[hover]);
    ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5;
    ctx.beginPath(); ctx.arc(x, y, 5.5, 0, Math.PI * 2); ctx.stroke();

    const bw = 168, bh = 14 + N * 14 + 24;
    let bx = x + 10, by = y + 10;
    if (bx + bw > width - 4) bx = x - bw - 10;
    if (by + bh > height - 4) by = y - bh - 10;
    ctx.fillStyle = 'rgba(10,16,30,0.92)';
    ctx.fillRect(bx, by, bw, bh);
    ctx.strokeStyle = 'rgba(180,210,255,0.5)';
    ctx.strokeRect(bx + 0.5, by + 0.5, bw - 1, bh - 1);
    ctx.fillStyle = '#e8ecf4';
    ctx.font = '10px monospace';
    ctx.fillText('μ = ' + (R[hover] * 100).toFixed(2) + '%    σ = ' + (V[hover] * 100).toFixed(2) + '%',
                  bx + 8, by + 14);
    for (let i = 0; i < N; i++) {
      const wi = W[off + i];
      const yy = by + 28 + i * 14;
      ctx.fillStyle = 'rgba(200,220,255,0.75)';
      ctx.fillText(NAMES[i], bx + 8, yy);
      // Weight bar.
      const barX = bx + 42, barW = 80;
      ctx.fillStyle = 'rgba(120,150,200,0.18)';
      ctx.fillRect(barX, yy - 8, barW, 9);
      ctx.fillStyle = 'hsl(' + (200 - i * 35) + ',70%,60%)';
      ctx.fillRect(barX, yy - 8, barW * wi, 9);
      ctx.fillStyle = '#e8ecf4';
      ctx.fillText((wi * 100).toFixed(1) + '%', bx + 130, yy);
    }
    const sh = (R[hover] - RF) / Math.max(V[hover], 1e-9);
    ctx.fillStyle = 'rgba(255,230,140,0.9)';
    ctx.fillText('Sharpe = ' + sh.toFixed(2), bx + 8, by + bh - 6);
  } else {
    ctx.fillStyle = 'rgba(200,220,255,0.55)';
    ctx.font = '10px monospace';
    ctx.textAlign = 'right';
    ctx.fillText('hover a dot to see its weights', width - 10, 18);
  }
}