SVG bar chart of tokens per second
Draw the measured speed of three models in an accessible SVG, each bar proportional to the fastest.
Write drawBars(svg, data). data is an array of { label, value } (tokens per second). For each item, in row i:
- a <rect> with x = LABEL_W, y = i * ROW_H, height = BAR_H and a width proportional to the maximum value: the maximum is MAX_W wide;
- a <text> with x = 0, y = i * ROW_H + 16 and the text label value, for example gemma4:26b 60.7.
Also add a <title> inside the <svg> with the text Tokens per second, so screen readers announce the chart. Each call replaces the previous drawing.
SVG elements are created with document.createElementNS(SVG_NS, 'rect'); with createElement they do not draw. DATA holds what we measured on our DGX Spark on 4 October 2026.
Challenges 0/5
- Draws three real SVG bars (createElementNS)
- The fastest bar is MAX_W wide and the others are proportional
- Each bar has its label with the value
- The SVG has a <title> for screen readers
- Drawing again does not duplicate the bars
function drawBars(svg, data) {
svg.replaceChildren();
// 1. find the maximum value
// 2. per row: a <rect> (createElementNS) and a <text> label
// 3. a <title> for screen readers
}
drawBars(document.getElementById('chart'), DATA);Go deeper: the MDN reference →
This in production, with your data? Let's talk for 15 minutes →