Blame for figures/data-mixture.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carbon-X data mixture</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* Tokens from the Carbon-X release blog (release_blog/space/index.html). */
:root {
  --paper: #f7f5ee; --ink: #1f1f1d; --soft: #5b5b56; --muted: #8a8a83; --rule: #e3e1d6;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light;
}
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); }
.chart { position: relative; max-width: 760px; margin: 0 auto; padding: 16px; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
.slice { cursor: pointer; transition: opacity .15s; stroke: var(--paper); stroke-width: 2; stroke-linejoin: round; }
.dim .slice:not(.on) { opacity: .25; }
.dim .lbl:not(.on) { opacity: .3; }
.lbl { transition: opacity .15s; pointer-events: none; }
.lbl-name { font: 500 14px var(--sans); fill: var(--soft); }
.lbl-pct { font: 600 21px var(--sans); fill: var(--ink); letter-spacing: -.01em; }
.c-big { font: 600 28px var(--sans); fill: var(--ink); letter-spacing: -.01em; }
.c-small { font: 400 10.5px var(--mono); fill: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; padding: 9px 12px; border-radius: 8px;
       font-size: 13px; line-height: 1.45; width: 250px; opacity: 0; transition: opacity .1s; z-index: 5; }
.tip b { font-weight: 600; font-size: 13.5px; }
.tip .n { font-family: var(--mono); font-size: 11.5px; color: #d9d6cf; }
.tip .s { color: #c9c5bc; margin-top: 3px; }
.tip .r { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #e8e5de; }
.tip .r span:last-child { font-family: var(--mono); color: #c9c5bc; }
.tip hr { border: 0; border-top: 1px solid #4a4843; margin: 6px 0; }
</style>
</head>
<body>
<div class="chart" id="card">
  <svg id="donut" viewBox="-330 -215 660 430" role="img" aria-labelledby="t">
    <title id="t">Carbon-X midtraining data: 55% raw DNA, 20% English, 15% biology text, 10% instruction data</title>
  </svg>
  <div class="tip" id="tip"></div>
</div>
<script>
const TOTAL = 300; // B tokens, final midtraining run (302B exactly; shown as 300B)
const DATA = [
  { name: "Raw DNA", color: "#317f3f", tints: ["#317f3f", "#4a9356", "#6aa874", "#8dbd94"], children: [
    { name: "Eukaryote genomes", share: 38.5, src: "GENERator", rows: [["Other vertebrates", 16.2], ["Mammals", 10.3], ["Invertebrates", 7.6], ["Plants", 3.1], ["Fungi", 1.1], ["Protozoa", 0.2]] },
    { name: "mRNA", share: 8.8, src: "OpenGenome2" },
    { name: "Prokaryote genomes", share: 5.5, src: "OpenGenome2" },
    { name: "mRNA with splice sites & promoters", share: 2.2, src: "OpenGenome2" } ] },
  { name: "English", color: "#8a8a83", tints: ["#7d7d76", "#9a9a92", "#b5b4ac"], children: [
    { name: "FineWeb-Edu", share: 8, src: "Educational web pages" },
    { name: "DCLM", share: 8, src: "Quality-filtered web text" },
    { name: "FinePDFs-Edu", share: 4, src: "Educational PDFs" } ] },
  { name: "Biology text", color: "#9cc5a1", tints: ["#9cc5a1", "#b4d3b8", "#cbe1ce"], children: [
    { name: "Documents with long DNA sequences", share: 7, src: "Papers, preprints, web pages and forums",
      rows: [["FinePDFs", 4.6], ["PubMed", 2.0], ["bioRxiv", 0.2], ["FineWeb", 0.2], ["Biostars", 0.01]] },
    { name: "Other biology documents", share: 7, src: "Same sources, few long sequences" },
    { name: "Synthetic sequence descriptions", share: 1, src: "Gemini on annotated RefSeq sequences" } ] },
  { name: "Instruction data", color: "#b8862c", tints: ["#b8862c"], children: [
    { name: "Instruction following & chat", share: 10, src: "Nemotron post-training data" } ] },
];
DATA.forEach(g => { g.share = g.children.reduce((a, c) => a + c.share, 0);
  g.children.forEach((c, i) => { c.color = g.tints[i % g.tints.length]; c.group = g; });
  g.src = g.children.map(c => c.name).join(", "); g.rows = g.children.map(c => [c.name, c.share]); });

const pct = v => (v >= 1 ? (v % 1 ? v.toFixed(1) : v.toFixed(0)) : v.toFixed(2)) + "%";
const tok = v => { const t = v / 100 * TOTAL; return (t >= 10 ? t.toFixed(0) : t >= 1 ? t.toFixed(1) : t.toFixed(2)) + "B"; };
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("donut"), tip = document.getElementById("tip"), card = document.getElementById("card");
const el = (tag, attrs, parent = svg) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); parent.appendChild(e); return e; };
const P = (r, a) => [r * Math.sin(a), -r * Math.cos(a)];
function arc(r0, r1, a0, a1) {
  const L = a1 - a0 > Math.PI ? 1 : 0, [x0, y0] = P(r1, a0), [x1, y1] = P(r1, a1), [x2, y2] = P(r0, a1), [x3, y3] = P(r0, a0);
  return `M${x0},${y0}A${r1},${r1} 0 ${L} 1 ${x1},${y1}L${x2},${y2}A${r0},${r0} 0 ${L} 0 ${x3},${y3}Z`;
}

const R = { i0: 88, i1: 138, o0: 142, o1: 172, lab: 200 };
const slices = [], labels = [];
let a = 0;
DATA.forEach(g => {
  const a0 = a, a1 = a + g.share / 100 * 2 * Math.PI;
  slices.push({ e: el("path", { d: arc(R.i0, R.i1, a0, a1), fill: g.color, class: "slice" }), item: g });
  let b = a0;
  g.children.forEach(c => { const b1 = b + c.share / 100 * 2 * Math.PI;
    slices.push({ e: el("path", { d: arc(R.o0, R.o1, b, b1), fill: c.color, class: "slice" }), item: c }); b = b1; });
  // default label outside the ring: leader line + name + share
  const m = (a0 + a1) / 2, right = Math.sin(m) >= 0;
  const [sx, sy] = P(R.o1 + 4, m), [ex, ey] = P(R.lab, m), hx = ex + (right ? 26 : -26);
  const gl = el("g", { class: "lbl" });
  el("path", { d: `M${sx},${sy}L${ex},${ey}L${hx},${ey}`, fill: "none", stroke: "#8A867C", "stroke-width": 1.2 }, gl);
  const tx = hx + (right ? 6 : -6), anchor = right ? "start" : "end";
  el("text", { x: tx, y: ey - 2, "text-anchor": anchor, class: "lbl-pct" }, gl).textContent = pct(g.share);
  el("text", { x: tx, y: ey + 17, "text-anchor": anchor, class: "lbl-name" }, gl).textContent = g.name;
  labels.push({ e: gl, item: g });
  a = a1;
});
const cg = el("g", { "pointer-events": "none" });
el("text", { y: 2, "text-anchor": "middle", class: "c-big" }, cg).textContent = "300B";
el("text", { y: 24, "text-anchor": "middle", class: "c-small" }, cg).textContent = "training tokens";

function highlight(item) {
  card.classList.toggle("dim", !!item);
  const grp = item && (item.group || item);
  slices.forEach(s => s.e.classList.toggle("on", !!item && (s.item === item || s.item === grp || (!item.group && s.item.group === item))));
  labels.forEach(l => l.e.classList.toggle("on", l.item === grp));
}
slices.forEach(s => {
  const it = s.item;
  s.e.addEventListener("mouseenter", () => {
    highlight(it);
    let h = `<b>${it.name}</b><br><span class="n">${pct(it.share)} of training · ${tok(it.share)} tokens</span>`;
    if (!it.children) h += `<div class="s">${it.src}</div>`;
    if (it.rows && it.rows.length > 1) h += `<hr>` + it.rows.map(([n, v]) => `<div class="r"><span>${n}</span><span>${pct(v)}</span></div>`).join("");
    tip.innerHTML = h; tip.style.opacity = 1;
  });
  s.e.addEventListener("mousemove", e => {
    const r = card.getBoundingClientRect(), x = e.clientX - r.left, y = e.clientY - r.top;
    tip.style.left = (x > r.width / 2 ? x - 266 : x + 16) + "px";
    tip.style.top = Math.min(y + 12, r.height - tip.offsetHeight - 4) + "px";
  });
  s.e.addEventListener("mouseleave", () => { tip.style.opacity = 0; highlight(null); });
});
</script>
</body>
</html>