| <!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> |
| |
| :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; |
| 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; }); |
| |
| 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> |
|
|
