Gráfico de barras SVG con tokens por segundo
Dibuja la velocidad medida de tres modelos en un SVG accesible, con cada barra proporcional a la más rápida.
Escribe drawBars(svg, data). data es un array de { label, value } (tokens por segundo). Para cada elemento, en la fila i:
- un <rect> con x = LABEL_W, y = i * ROW_H, height = BAR_H y una anchura proporcional al valor máximo: el máximo mide MAX_W;
- un <text> con x = 0, y = i * ROW_H + 16 y el texto etiqueta valor, por ejemplo gemma4:26b 60.7.
Añade también un <title> dentro del <svg> con el texto Tokens per second (en inglés, como el resto de la interfaz), para que el lector de pantalla anuncie el gráfico. Cada llamada sustituye el dibujo anterior.
Los elementos SVG se crean con document.createElementNS(SVG_NS, 'rect'); con createElement no se dibujan. DATA contiene lo que medimos en nuestro DGX Spark el 4 de octubre de 2026.
Retos 0/5
- Dibuja tres barras SVG reales (createElementNS)
- La barra más rápida mide MAX_W y las demás son proporcionales
- Cada barra tiene su etiqueta con el valor
- El SVG lleva un <title> para lectores de pantalla
- Volver a dibujar no duplica las barras
function drawBars(svg, data) {
svg.replaceChildren();
// 1. busca el valor máximo
// 2. por fila: un <rect> (createElementNS) y una etiqueta <text>
// 3. un <title> para lectores de pantalla
}
drawBars(document.getElementById('chart'), DATA);Para profundizar: la referencia de MDN (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →