app/src/content/embeds/hero-axis.html

<div id="ob-hero" role="img" aria-label="An optimism axis: 16 language models placed by their directional bias, each shown as its provider's logo. Most sit on the optimistic (warm) right side; Anthropic's Opus and Sonnet sit on the pessimistic (cool) left side.">
  <svg id="ob-hero-svg" width="100%"></svg>
</div>
<style>
  #ob-hero { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: var(--surface-bg, #faf8f6); border: 1px solid var(--border-color, #e7e2dc); padding: 8px 0 4px; }
  #ob-hero svg { display: block; width: 100%; height: auto; }
  #ob-hero .obh-pole { font: 600 11px/1 system-ui, sans-serif; letter-spacing: .08em; }
  #ob-hero .obh-name { font: 11px/1 system-ui, sans-serif; }
  #ob-hero .obh-tip { position: absolute; pointer-events: none; z-index: 20; opacity: 0; transform: translate(-50%, -100%); transition: opacity .1s; background: var(--surface-bg, #fff); color: var(--text-color, #14161c); border: 1px solid var(--border-color, #ddd); border-radius: 8px; padding: 7px 10px; font: 12px/1.5 system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.18); white-space: nowrap; }
  #ob-hero .obh-tip b { font-weight: 650; }
  #ob-hero .obh-tip .obh-prov { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-color, #5b6470); }
</style>
<script>
(function () {
  var root = document.getElementById("ob-hero");
  var svg = root && window.d3 ? window.d3.select("#ob-hero-svg") : null;
  if (!svg) { return; }
  var d3 = window.d3;
  function cssVar(n, fb) { var v = getComputedStyle(document.documentElement).getPropertyValue(n); return (v && v.trim()) || fb; }
  var ICON = { OpenAI: "openai", Anthropic: "anthropic", Google: "google", Mistral: "mistral", Alibaba: "alibaba", DeepSeek: "deepseek", Meta: "meta", NVIDIA: "nvidia", Zhipu: "zhipu" };
  var tip = document.createElement("div"); tip.className = "obh-tip"; root.appendChild(tip);
  var DATA = null;

  function show(ev, m) {
    var pr = root.getBoundingClientRect(), slug = ICON[m.provider];
    var mark = slug ? '<img src="icons/' + slug + '.svg" alt="" style="width:13px;height:13px;object-fit:contain">' : "";
    tip.innerHTML = '<b>' + m.name + '</b> &nbsp; <span style="font-variant-numeric:tabular-nums">Skew ' + (m.skew > 0 ? "+" : "") + m.skew.toFixed(1) + '</span>' +
      '<br><span class="obh-prov">' + mark + m.provider + '</span>';
    tip.style.left = (ev.clientX - pr.left) + "px"; tip.style.top = (ev.clientY - pr.top - 6) + "px"; tip.style.opacity = 1;
  }
  function hide() { tip.style.opacity = 0; }

  function draw() {
    if (!DATA) { return; }
    var OPT = cssVar("--opt", "#e07a5f"), PES = cssVar("--pes", "#3d5a80"),
        MUT = cssVar("--muted-color", "#888"), TXT = cssVar("--text-color", "#222"),
        BD = cssVar("--border-color", "#e7e2dc"), SF = cssVar("--surface-bg", "#fff");
    var W = root.clientWidth || 900, H = Math.max(210, Math.min(280, W * 0.30));
    var mX = 116, axisY = H * 0.56;
    svg.attr("viewBox", "0 0 " + W + " " + H).attr("height", H).selectAll("*").remove();

    var ext = d3.extent(DATA.models, function (d) { return d.skew; });
    var x = d3.scaleLinear().domain([Math.min(-10, ext[0] - 1), ext[1] + 1]).range([mX, W - mX]);

    var defs = svg.append("defs");
    var grad = defs.append("linearGradient").attr("id", "obh-grad").attr("x1", "0").attr("x2", "1");
    grad.append("stop").attr("offset", "0%").attr("stop-color", PES);
    grad.append("stop").attr("offset", "50%").attr("stop-color", MUT);
    grad.append("stop").attr("offset", "100%").attr("stop-color", OPT);
    svg.append("rect").attr("x", mX).attr("y", axisY - 1.5).attr("width", W - 2 * mX).attr("height", 3).attr("rx", 1.5).style("fill", "url(#obh-grad)").attr("opacity", 0.7);

    svg.append("line").attr("x1", x(0)).attr("x2", x(0)).attr("y1", axisY - 26).attr("y2", axisY + 26).style("stroke", BD).attr("stroke-dasharray", "3 3");
    svg.append("text").attr("x", x(0)).attr("y", axisY + 42).attr("text-anchor", "middle").style("fill", MUT).attr("font-size", 10).text("0  (coherent)");

    svg.append("text").attr("class", "obh-pole").attr("x", 10).attr("y", axisY + 4).attr("text-anchor", "start").style("fill", PES).text("PESSIMISTIC");
    svg.append("text").attr("class", "obh-pole").attr("x", W - 10).attr("y", axisY + 4).attr("text-anchor", "end").style("fill", OPT).text("OPTIMISTIC");

    // bracket grouping the two pessimists (left)
    var pess = DATA.models.filter(function (m) { return m.skew < 0; });
    if (pess.length >= 2) {
      var pxs = pess.map(function (m) { return x(m.skew); });
      var bL = Math.min.apply(null, pxs) - 18, bR = Math.max.apply(null, pxs) + 18, bY = axisY - 62;
      svg.append("path").attr("d", "M" + bL + "," + (bY + 8) + " L" + bL + "," + bY + " L" + bR + "," + bY + " L" + bR + "," + (bY + 8))
        .style("fill", "none").style("stroke", PES).attr("stroke-width", 1.2).attr("opacity", 0.8);
      svg.append("text").attr("x", (bL + bR) / 2).attr("y", bY - 6).attr("text-anchor", "middle").style("fill", PES).attr("font-size", 11).attr("font-weight", 600).text("Anthropic models are pessimistic");
    }

    var topSkew = d3.max(DATA.models, function (m) { return m.skew; });
    var rows = DATA.models.map(function (m, i) { return { m: m, jit: (32 + (i % 4) * 16) * (i % 2 ? 1 : -1) }; });
    var g = svg.append("g");
    rows.forEach(function (r) {
      var pesDot = r.m.skew < 0, cx = x(r.m.skew);
      var cy = pesDot ? axisY - 34 : axisY + r.jit;
      var slug = ICON[r.m.provider], R = 13;
      // stem
      g.append("line").attr("x1", cx).attr("x2", cx).attr("y1", axisY).attr("y2", cy)
        .style("stroke", pesDot ? PES : BD).attr("stroke-width", pesDot ? 1.2 : 0.8).attr("opacity", pesDot ? 0.6 : 0.7);
      // backing disc (legibility) + pessimist ring
      g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", R).style("fill", SF).style("stroke", pesDot ? PES : BD).attr("stroke-width", pesDot ? 1.6 : 1);
      var grp = g.append("g").style("cursor", "pointer").on("mousemove", function (ev) { show(ev, r.m); }).on("mouseleave", hide);
      grp.append("circle").attr("cx", cx).attr("cy", cy).attr("r", R).style("fill", "transparent");
      if (slug) {
        grp.append("image").attr("href", "icons/" + slug + ".svg").attr("x", cx - 9).attr("y", cy - 9).attr("width", 18).attr("height", 18).attr("preserveAspectRatio", "xMidYMid meet");
      } else {
        grp.append("text").attr("x", cx).attr("y", cy + 4).attr("text-anchor", "middle").style("fill", TXT).attr("font-size", 10).text(r.m.provider.slice(0, 2));
      }
      if (pesDot) {
        g.append("text").attr("class", "obh-name").attr("x", cx).attr("y", pesDot ? cy + R + 13 : cy - R - 5).attr("text-anchor", "middle")
          .style("fill", pesDot ? PES : TXT).attr("font-weight", pesDot ? 700 : 500)
          .text(r.m.name + " " + (r.m.skew > 0 ? "+" : "") + r.m.skew.toFixed(1));
      }
    });
  }

  fetch("data/skew_models.json").then(function (r) { if (!r.ok) { throw new Error("x"); } return r.json(); })
    .then(function (j) { DATA = j; draw(); }).catch(function () {});
  if (window.ResizeObserver) { var t = null; new ResizeObserver(function () { clearTimeout(t); t = setTimeout(draw, 140); }).observe(root); }
  else { window.addEventListener("resize", draw); }
  new MutationObserver(draw).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
})();
</script>