{ // 1. Data definitions (words per minute) const data = [ { category: "Fastest Typer", wordsPerMin: 305 }, { category: "Fastest Reader", wordsPerMin: 800 }, { category: "Fastest Rapper", wordsPerMin: 450 }, { category: "Stenographer", wordsPerMin: 360 }, { category: "Fastest Speaker", wordsPerMin: 655 } ]; // 2. Sort the data in ascending order const sortedData = data.slice().sort((a, b) => a.wordsPerMin - b.wordsPerMin); // 3. Compute cumulative word counts for correct highlighting let cum = 0; const cumulative = {}; const cumulativeArray = []; sortedData.forEach((d, index) => { let increment = index === 0 ? d.wordsPerMin : d.wordsPerMin - sortedData[index - 1].wordsPerMin; cum += increment; // Accumulate only the new difference cumulative[d.category] = cum; cumulativeArray.push({ category: d.category, threshold: cum }); }); // 4. Get sorted category names const sortedCategories = sortedData.map(d => d.category); // 5. Define background gradient colors const gradients = { "Fastest Typer": "rgba(89, 143, 177, 0.75)", // Deep Blue "Stenographer": "rgba(42, 157, 143, 0.75)", // Teal Green "Fastest Rapper": "rgba(233, 196, 106, 0.75)", // Golden Yellow "Fastest Speaker": "rgba(244, 162, 97, 0.75)", // Vibrant Orange "Fastest Reader": "rgba(231, 111, 81, 0.75)" // Soft Red }; // 6. Custom label definitions including an extra phrase and custom top spacing per category const customLabels = { "Fastest Typer": { label: "Fastest Typer, 305WPM", extra: "MythicalRocket - QWERTY Keys", topSpacing: "-5px" // Adjust spacing as needed }, "Fastest Reader": { label: "Speedreader, 800WPM", extra: "N.D.", topSpacing: "-5px" }, "Fastest Rapper": { label: "Fastest Rapper, 450WPM", extra: "Eminem - Rap God", topSpacing: "-5px" }, "Stenographer": { label: "Fastest Stenographer, 360WPM", extra: "Mark Kislingbury - Stenotype", topSpacing: "-5px" }, "Fastest Speaker": { label: "Fastest Speaker, 655WPM", extra: "Sean Shannon - Hamlet", topSpacing: "-5px" } }; // 7. Sample text const words = `The clock tower stood at the edge of the coastal town, its face bleached by salt winds, hands perpetually frozen at 2:17. For decades, it had been silent—gears rusted, weights scattered like forgotten bones—until Emil arrived. He came at dawn on a Tuesday, a leather tool roll slung over his shoulder, his boots crunching over seashells embedded in the gravel path. The town council had hired him to restore the clock, though most locals doubted it would ever chime again. Emil didn’t mind their skepticism. Silence suited him. He’d left the city after the divorce, the echoes of his ex-wife’s ultimatum still sharp in his mind. You care more about broken things than living people. Maybe she’d been right. Broken things were easier. They didn’t demand answers. His workshop was the tower’s base, a cramped room with a single grime-coated window. He spent days scrubbing grease from gears, his fingers stained with oil, the tang of metal and brine clinging to his clothes. At noon, he’d climb the spiral stairs to the belfry, where pigeons cooed in the rafters, and eat lunch overlooking the sea. That’s where he first saw her—a girl in a faded yellow raincoat, standing ankle-deep in the tide pools below. She held a sketchbook, her head tilted as if listening to the waves’ secrets. She began appearing daily. Emil noticed peculiarities: the way she tucked her hair into her coat collar during gusts, the careful distance she kept from the town’s fishermen, the fact that she never smiled. Once, he found a charcoal sketch wedged in the tower’s door—a detailed rendering of the clock’s corroded hands, annotated with tiny questions. Why did they stop at 2:17? Who wound them last? Emil pinned it to his workshop wall. The next morning, he left a response on the back of a gear diagram: The clockmaker died mid-repair. Heart attack, 1949. They say his ghost still tinkers here. He placed it in the same door crack. By afternoon, it was gone. A reply appeared two days later—a smudged portrait of a man hunched over a workbench, a shadowy figure peering over his shoulder. Beneath it, she’d written, Does the ghost approve of your work? Emil laughed, a sound so unfamiliar it startled the pigeons. He learned her name was Clara. Not from her, but from Mrs. Doyle, the postmistress, who mentioned the reclusive artist living in the cliffside cottage. Lost her father young, Mrs. Doyle said, sorting envelopes with practiced efficiency. Stays out there painting, won’t say boo to a soul. Strange girl. Emil didn’t think she was strange. He understood the comfort of solitude. They developed a ritual. Emil left technical schematics, notes on horology, once even a pocket watch he’d repaired. Clara responded with sketches—the tower at twilight, the sea kaleidoscoping through broken clock glass, Emil himself bent over his workbench, the lines of his shoulders softened by her hand. Her art revealed things he’d never noticed: the way sunlight fractured through the tower’s louvers at 3 p.m., the resemblance between clock gears and seashell spirals. One foggy morning, he found a painting leaning against the tower door. It depicted the belfry filled not with pigeons but with hundreds of origami cranes, their wings edged in gold. A note fluttered beneath it: Fold one with me? Inside the tower, she’d left a stack of navy-blue paper. Emil hadn’t folded origami since he was a boy, but his fingers remembered. He made a crane, clumsy-winged, and placed it on the windowsill. The next day, it was joined by a second, perfectly creased. By week’s end, a flock dangled from the belfry rafters, twisting in coastal drafts. The townsfolk began noticing. Fishermen paused to watch the cranes dance. Children left pennies on the tower steps, whispering that the ghost had learned origami. Mrs. Doyle brought Emil a meat pie, eyeing the workshop’s new art with a bemused frown. You’ve made a friend, she said. Emil merely nodded, sanding a gear until it shone. Winter arrived, sharp and salted. Clara’s visits grew sporadic. When she did come, her sketches turned darker—storm clouds devouring the horizon, waves clawing at the cliffs. Emil started leaving a thermos of ginger tea by the door, which she always emptied. Once, he found her asleep in the workshop, cheek smudged with charcoal, her fingers curled around a half-folded crane. He draped his coat over her and pretended not to notice when it reappeared, neatly folded, on his bench the next day. The clock’s heart began beating again in February. Emil had replaced the final gear, his hands steady as he set the pendulum in motion. For the first time in seventy-three years, the hands crept forward—2:17, 2:18, 2:19—each tick a thunderclap in the hollow tower. He raced to the belfry, leaning over the rail to see Clara standing below, her face upturned. She raised her sketchbook, and though he couldn’t read the words, he knew her smile was there, in the curve of the letters: You did it. That night, a storm ravaged the coast. Emil woke to the tower groaning, the sea screaming against cliffs. He pulled on his boots and ran through lashing rain, fearing the old walls wouldn’t hold. But it wasn’t the tower that worried him. Clara’s cottage was half-swallowed by mudslides, its foundation cracked. He found her on the beach, clutching her sketchbook to her chest, raincoat flapping like a wounded wing. Without speaking, he led her to the tower. They huddled in the belfry as wind screamed through the louvers, the clock’s ticks a steady counterpoint to chaos. Clara shivered, her sketches strewn around them—angry seas, fractured skies. Emil hesitated, then wrapped an arm around her shoulders. She leaned in, her hair smelling of turpentine and kelp. `; return html`

How many words can they cover in a minute?

960 words

${words.split(/\s+/).map((word, i) => { let layers = []; sortedCategories.forEach(cat => { if (i < cumulative[cat]) { layers.push(gradients[cat]); } }); // Build the inline style dynamically (Controls background color for each word) const color = gradients[sortedCategories.find(cat => i < cumulative[cat])]; // Apply the solid color directly to the background (Can adjust color opacity and style) const style = color ? `background-color: ${color}; display: inline-block;` : "display: inline-block;"; // Create the span element with a custom attribute that holds the cumulative threshold const spanElement = html` ${word} `; // Add event listeners for hover effect (Controls hover behavior) spanElement.addEventListener("mouseover", () => { const category = spanElement.getAttribute("data-category"); const categoryThreshold = cumulative[category]; // Highlight all words within the category threshold document.querySelectorAll(".highlighted-word").forEach((el) => { const wordIndex = parseInt(el.getAttribute("data-index")); el.style.opacity = wordIndex < categoryThreshold ? 1 : 0.2; }); // Fade the corresponding labels (both main and extra phrases) document.querySelectorAll(".category-label, .extra-label").forEach((labelEl) => { labelEl.style.opacity = labelEl.getAttribute("data-category") === category ? 1 : 0.2; }); }); spanElement.addEventListener("mouseout", () => { document.querySelectorAll(".highlighted-word").forEach((el) => { el.style.opacity = 1; }); document.querySelectorAll(".category-label, .extra-label").forEach((labelEl) => { labelEl.style.opacity = 1; }); }); return spanElement; })}

${sortedCategories.map((cat, i) => { // Retrieve the custom label information for this category const { label, extra, topSpacing } = customLabels[cat] || { label: cat, extra: "", topSpacing: "0px" }; // Font properties for the labels (can change font family, size, weight) const labelFontFamily = "Apple Garamond, sans-serif"; // Font family for labels const labelFontSize = "14px"; // Font size for labels const labelFontWeight = "regular"; // Font weight for labels // Calculate the position where the category starts (Can adjust positioning calculation) const categoryThreshold = cumulative[cat]; const prevThreshold = i === 0 ? 0 : cumulative[sortedCategories[i - 1]]; const totalWords = words.split(/\s+/).length; const categoryHeight = ((categoryThreshold - prevThreshold) / totalWords) * 100; // Height as a percentage const topPosition = ((prevThreshold / totalWords) * 100); // Top position as a percentage return html`

${html([label])} ${extra}

`; })}

`; }