Skip to content

Commit 522340b

Browse files
michielkallenbergmichielkallenberg
committed
svg
1 parent e578193 commit 522340b

2 files changed

Lines changed: 44 additions & 16 deletions

File tree

‎cybench/runs/viz/global_insights_template.html‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -933,10 +933,23 @@ <h3 style="font-size:1rem;margin:1rem 0 0.5rem;">Detail per country × model</h3
933933
let worldFeatures = null;
934934
let mapProjection = d3.geoNaturalEarth1();
935935
let mapPath = d3.geoPath(mapProjection);
936-
const MAP_EXPORT_PAD_B = 34;
936+
const MAP_EXPORT_PAD_B = 42;
937937
const MAP_EXPORT_LEGEND_FS = 8;
938938
const MAP_EXPORT_LEGEND_BAR_W = 200;
939939
const MAP_EXPORT_LEGEND_BAR_H = 8;
940+
const MAP_EXPORT_FONT = "DejaVu Sans, Arial, Helvetica, sans-serif";
941+
const MAP_EXPORT_LABEL_GAP = 6;
942+
943+
function exportLegendTextX(text, anchor, refX, barW) {
944+
const estW = String(text).length * MAP_EXPORT_LEGEND_FS * 0.58;
945+
if (anchor === "middle") return refX - estW / 2;
946+
if (anchor === "end") return refX - estW;
947+
return refX;
948+
}
949+
950+
function exportLegendText(x, y, text) {
951+
return `<text x="${x}" y="${y}" dominant-baseline="hanging" font-size="${MAP_EXPORT_LEGEND_FS}" font-family="${MAP_EXPORT_FONT}" fill="#656d76">${escapeXml(text)}</text>`;
952+
}
940953
const mapSvg = d3.select("#metric-map-wrap").html("").append("svg")
941954
.attr("viewBox", `0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`)
942955
.attr("role", "img")
@@ -1174,13 +1187,13 @@ <h3 style="font-size:1rem;margin:1rem 0 0.5rem;">Detail per country × model</h3
11741187
const barX = 24;
11751188
const barW = MAP_EXPORT_LEGEND_BAR_W;
11761189
const barH = MAP_EXPORT_LEGEND_BAR_H;
1177-
const fs = MAP_EXPORT_LEGEND_FS;
1178-
const tickY = yBase + barH + fs + 3;
1190+
const labelY = yBase + barH + MAP_EXPORT_LABEL_GAP;
11791191
const spec = mapMetricSpec();
11801192
const scale = spec.scale || METRIC_MAP_SCALES[spec.metricId] || { lo: 0, hi: 1 };
1181-
const fmt = v => (Number.isFinite(v) ? v.toFixed(2) : "—");
1193+
const fmt = v => (Number.isFinite(v) ? v.toFixed(2) : "-");
11821194
const lo = fmt(scale.lo);
11831195
const hi = fmt(scale.hi);
1196+
const mid = spec.label;
11841197
return `
11851198
<defs>
11861199
<linearGradient id="export-metric-grad" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -1190,9 +1203,9 @@ <h3 style="font-size:1rem;margin:1rem 0 0.5rem;">Detail per country × model</h3
11901203
</linearGradient>
11911204
</defs>
11921205
<rect x="${barX}" y="${yBase}" width="${barW}" height="${barH}" fill="url(#export-metric-grad)" stroke="#c8d0d8" stroke-width="0.5"/>
1193-
<text x="${barX}" y="${tickY}" font-size="${fs}" text-anchor="start" font-family="system-ui,sans-serif" fill="#656d76">${escapeXml(lo)}</text>
1194-
<text x="${barX + barW / 2}" y="${tickY}" font-size="${fs}" text-anchor="middle" font-family="system-ui,sans-serif" fill="#656d76">${escapeXml(spec.label)}</text>
1195-
<text x="${barX + barW}" y="${tickY}" font-size="${fs}" text-anchor="end" font-family="system-ui,sans-serif" fill="#656d76">${escapeXml(hi)}</text>`;
1206+
${exportLegendText(exportLegendTextX(lo, "start", barX, barW), labelY, lo)}
1207+
${exportLegendText(exportLegendTextX(mid, "middle", barX + barW / 2, barW), labelY, mid)}
1208+
${exportLegendText(exportLegendTextX(hi, "end", barX + barW, barW), labelY, hi)}`;
11961209
}
11971210

11981211
function buildMapExportSvgString(exportScale = MAP_EXPORT_SCALE) {
@@ -1206,7 +1219,7 @@ <h3 style="font-size:1rem;margin:1rem 0 0.5rem;">Detail per country × model</h3
12061219
const exportW = MAP_WIDTH * exportScale;
12071220
const exportH = totalH * exportScale;
12081221
return `<?xml version="1.0" encoding="UTF-8"?>
1209-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MAP_WIDTH} ${totalH}" width="${exportW}" height="${exportH}">
1222+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MAP_WIDTH} ${totalH}" width="${exportW}" height="${exportH}" font-family="${MAP_EXPORT_FONT}">
12101223
<rect width="100%" height="100%" fill="#ffffff"/>
12111224
<svg x="0" y="${padT}" width="${MAP_WIDTH}" height="${MAP_HEIGHT}" viewBox="0 0 ${MAP_WIDTH} ${MAP_HEIGHT}">
12121225
${mapNode.innerHTML}

‎cybench/runs/viz/model_family_radar_template.html‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1173,10 +1173,23 @@ <h2>Country-level AI advantage (bootstrap)</h2>
11731173
const MAP_HEIGHT = 694;
11741174
const MAP_MARGIN = 8;
11751175
const MAP_EXPORT_SCALE = 4;
1176-
const MAP_EXPORT_PAD_B = 34;
1176+
const MAP_EXPORT_PAD_B = 42;
11771177
const MAP_EXPORT_LEGEND_FS = 8;
11781178
const MAP_EXPORT_LEGEND_BAR_W = 200;
11791179
const MAP_EXPORT_LEGEND_BAR_H = 8;
1180+
const MAP_EXPORT_FONT = "DejaVu Sans, Arial, Helvetica, sans-serif";
1181+
const MAP_EXPORT_LABEL_GAP = 6;
1182+
1183+
function exportLegendTextX(text, anchor, refX, barW) {
1184+
const estW = String(text).length * MAP_EXPORT_LEGEND_FS * 0.58;
1185+
if (anchor === "middle") return refX - estW / 2;
1186+
if (anchor === "end") return refX - estW;
1187+
return refX;
1188+
}
1189+
1190+
function exportLegendText(x, y, text) {
1191+
return `<text x="${x}" y="${y}" dominant-baseline="hanging" font-size="${MAP_EXPORT_LEGEND_FS}" font-family="${MAP_EXPORT_FONT}" fill="#656d76">${escapeXml(text)}</text>`;
1192+
}
11801193
const mapSvg = d3.select("#winner-map-wrap").html("").append("svg")
11811194
.attr("viewBox", `0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`)
11821195
.attr("role", "img")
@@ -1403,7 +1416,7 @@ <h2>Country-level AI advantage (bootstrap)</h2>
14031416
const color = swatch ? (swatch.style.background || "#999") : "#999";
14041417
const text = span.textContent.trim();
14051418
out += `<rect x="${x}" y="${yBase}" width="${sw}" height="${sw}" fill="${color}" rx="1.5"/>`;
1406-
out += `<text x="${x + sw + 4}" y="${yBase + sw - 1}" font-size="${fs}" font-family="system-ui,sans-serif" fill="#656d76">${escapeXml(text)}</text>`;
1419+
out += `<text x="${x + sw + 4}" y="${yBase + 1}" dominant-baseline="hanging" font-size="${fs}" font-family="${MAP_EXPORT_FONT}" fill="#656d76">${escapeXml(text)}</text>`;
14071420
x += Math.min(160, Math.max(56, text.length * (fs * 0.52) + sw + 10));
14081421
});
14091422
return out;
@@ -1416,8 +1429,10 @@ <h2>Country-level AI advantage (bootstrap)</h2>
14161429
const barX = 24;
14171430
const barW = MAP_EXPORT_LEGEND_BAR_W;
14181431
const barH = MAP_EXPORT_LEGEND_BAR_H;
1419-
const fs = MAP_EXPORT_LEGEND_FS;
1420-
const tickY = yBase + barH + fs + 3;
1432+
const labelY = yBase + barH + MAP_EXPORT_LABEL_GAP;
1433+
const left = `-${extent}%`;
1434+
const mid = "0%";
1435+
const right = `+${extent}%`;
14211436
return `
14221437
<defs>
14231438
<linearGradient id="export-benefit-grad" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -1429,9 +1444,9 @@ <h2>Country-level AI advantage (bootstrap)</h2>
14291444
</linearGradient>
14301445
</defs>
14311446
<rect x="${barX}" y="${yBase}" width="${barW}" height="${barH}" fill="url(#export-benefit-grad)" stroke="#c8d0d8" stroke-width="0.5"/>
1432-
<text x="${barX}" y="${tickY}" font-size="${fs}" text-anchor="start" font-family="system-ui,sans-serif" fill="#656d76">−${extent}%</text>
1433-
<text x="${barX + barW / 2}" y="${tickY}" font-size="${fs}" text-anchor="middle" font-family="system-ui,sans-serif" fill="#656d76">0%</text>
1434-
<text x="${barX + barW}" y="${tickY}" font-size="${fs}" text-anchor="end" font-family="system-ui,sans-serif" fill="#656d76">+${extent}%</text>`;
1447+
${exportLegendText(exportLegendTextX(left, "start", barX, barW), labelY, left)}
1448+
${exportLegendText(exportLegendTextX(mid, "middle", barX + barW / 2, barW), labelY, mid)}
1449+
${exportLegendText(exportLegendTextX(right, "end", barX + barW, barW), labelY, right)}`;
14351450
}
14361451

14371452
function buildMapExportSvgString(exportScale = MAP_EXPORT_SCALE) {
@@ -1448,7 +1463,7 @@ <h2>Country-level AI advantage (bootstrap)</h2>
14481463
const exportW = MAP_WIDTH * exportScale;
14491464
const exportH = totalH * exportScale;
14501465
return `<?xml version="1.0" encoding="UTF-8"?>
1451-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MAP_WIDTH} ${totalH}" width="${exportW}" height="${exportH}">
1466+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MAP_WIDTH} ${totalH}" width="${exportW}" height="${exportH}" font-family="${MAP_EXPORT_FONT}">
14521467
<rect width="100%" height="100%" fill="#ffffff"/>
14531468
<svg x="0" y="${padT}" width="${MAP_WIDTH}" height="${MAP_HEIGHT}" viewBox="0 0 ${MAP_WIDTH} ${MAP_HEIGHT}">
14541469
${mapContent}

0 commit comments

Comments
 (0)