Spaces:
Running
Running
Update index.html
Browse files- index.html +16 -6
index.html
CHANGED
|
@@ -1,4 +1,5 @@
|
|
| 1 |
<!DOCTYPE html>
|
|
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
|
@@ -198,9 +199,16 @@
|
|
| 198 |
const logos = raw.logos || {};
|
| 199 |
const colors = raw.colors || {};
|
| 200 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 201 |
// ---- Config ----
|
| 202 |
const topN = 15;
|
| 203 |
-
const margin = { top: 30, right:
|
| 204 |
const width = 1050;
|
| 205 |
|
| 206 |
// Fit all bars in viewport: subtract header/controls (~140px) from window height
|
|
@@ -247,7 +255,7 @@
|
|
| 247 |
const scoreG = svg.append("g");
|
| 248 |
|
| 249 |
// Dynamic sizes based on bar height
|
| 250 |
-
const nameFontSize = Math.max(
|
| 251 |
const scoreFontSize = Math.max(8, Math.min(12, barHeight * 0.33));
|
| 252 |
const watermarkSize = Math.max(36, Math.min(64, height * 0.11));
|
| 253 |
|
|
@@ -365,7 +373,7 @@
|
|
| 365 |
|
| 366 |
bars.join(
|
| 367 |
enter => enter.append("rect")
|
| 368 |
-
.attr("fill", d => colors[d
|
| 369 |
.attr("rx", 3)
|
| 370 |
.attr("height", bw)
|
| 371 |
.attr("x", x(0))
|
|
@@ -400,7 +408,8 @@
|
|
| 400 |
const a = enter.append("a")
|
| 401 |
.attr("class", "bar-name-link")
|
| 402 |
.attr("href", d => `https://huggingface.co/${d.model_id}`)
|
| 403 |
-
.attr("target", "_blank")
|
|
|
|
| 404 |
a.append("text")
|
| 405 |
.attr("class", "bar-name")
|
| 406 |
.style("font-size", nameFontSize + "px")
|
|
@@ -415,6 +424,7 @@
|
|
| 415 |
},
|
| 416 |
update => update.call(update => {
|
| 417 |
update.attr("href", d => `https://huggingface.co/${d.model_id}`);
|
|
|
|
| 418 |
update.select("text").transition(t)
|
| 419 |
.attr("y", d => yPos(d.rank) + bw / 2);
|
| 420 |
}),
|
|
@@ -469,13 +479,13 @@
|
|
| 469 |
|
| 470 |
// ---- Provider logos (at end of bar, after score) ----
|
| 471 |
const logoSize = bw * 0.65;
|
| 472 |
-
const logosData = ranked.filter(d => logos[d
|
| 473 |
|
| 474 |
const logoEls = logoG.selectAll("image").data(logosData, d => d.model_id);
|
| 475 |
|
| 476 |
logoEls.join(
|
| 477 |
enter => enter.append("image")
|
| 478 |
-
.attr("href", d => logos[d
|
| 479 |
.attr("width", logoSize)
|
| 480 |
.attr("height", logoSize)
|
| 481 |
.attr("x", d => {
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<!-- Aligned fork of davanstrien/benchmark-race: reads race_logo_key, chart_full_name from data.json (see update_data.py). -->
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
| 5 |
<meta charset="utf-8">
|
|
|
|
| 199 |
const logos = raw.logos || {};
|
| 200 |
const colors = raw.colors || {};
|
| 201 |
|
| 202 |
+
function colorKey(d) {
|
| 203 |
+
return d.race_logo_key || d.provider;
|
| 204 |
+
}
|
| 205 |
+
function logoKey(d) {
|
| 206 |
+
return d.race_logo_key || d.provider;
|
| 207 |
+
}
|
| 208 |
+
|
| 209 |
// ---- Config ----
|
| 210 |
const topN = 15;
|
| 211 |
+
const margin = { top: 30, right: 132, bottom: 10, left: 6 };
|
| 212 |
const width = 1050;
|
| 213 |
|
| 214 |
// Fit all bars in viewport: subtract header/controls (~140px) from window height
|
|
|
|
| 255 |
const scoreG = svg.append("g");
|
| 256 |
|
| 257 |
// Dynamic sizes based on bar height
|
| 258 |
+
const nameFontSize = Math.max(7, Math.min(11, barHeight * 0.31));
|
| 259 |
const scoreFontSize = Math.max(8, Math.min(12, barHeight * 0.33));
|
| 260 |
const watermarkSize = Math.max(36, Math.min(64, height * 0.11));
|
| 261 |
|
|
|
|
| 373 |
|
| 374 |
bars.join(
|
| 375 |
enter => enter.append("rect")
|
| 376 |
+
.attr("fill", d => colors[colorKey(d)] || "#999")
|
| 377 |
.attr("rx", 3)
|
| 378 |
.attr("height", bw)
|
| 379 |
.attr("x", x(0))
|
|
|
|
| 408 |
const a = enter.append("a")
|
| 409 |
.attr("class", "bar-name-link")
|
| 410 |
.attr("href", d => `https://huggingface.co/${d.model_id}`)
|
| 411 |
+
.attr("target", "_blank")
|
| 412 |
+
.attr("title", d => d.chart_full_name || "");
|
| 413 |
a.append("text")
|
| 414 |
.attr("class", "bar-name")
|
| 415 |
.style("font-size", nameFontSize + "px")
|
|
|
|
| 424 |
},
|
| 425 |
update => update.call(update => {
|
| 426 |
update.attr("href", d => `https://huggingface.co/${d.model_id}`);
|
| 427 |
+
update.attr("title", d => d.chart_full_name || "");
|
| 428 |
update.select("text").transition(t)
|
| 429 |
.attr("y", d => yPos(d.rank) + bw / 2);
|
| 430 |
}),
|
|
|
|
| 479 |
|
| 480 |
// ---- Provider logos (at end of bar, after score) ----
|
| 481 |
const logoSize = bw * 0.65;
|
| 482 |
+
const logosData = ranked.filter(d => logos[logoKey(d)]);
|
| 483 |
|
| 484 |
const logoEls = logoG.selectAll("image").data(logosData, d => d.model_id);
|
| 485 |
|
| 486 |
logoEls.join(
|
| 487 |
enter => enter.append("image")
|
| 488 |
+
.attr("href", d => logos[logoKey(d)])
|
| 489 |
.attr("width", logoSize)
|
| 490 |
.attr("height", logoSize)
|
| 491 |
.attr("x", d => {
|