sample = () => d3.shuffle([...all])[0]
function onClick() {
if (this.hasAttribute("data-hidden")) {
this.removeAttribute("data-hidden");
} else if (this.hasAttribute("data-unspoken")) {
say(this.innerText);
this.removeAttribute("data-unspoken");
} else {
this.innerText = sample();
if (Math.random() > 0.5) {
this.setAttribute("data-hidden", true);
say(this.innerText);
} else {
this.setAttribute("data-unspoken", true);
}
}
}
function say(text) {
const utterance = new SpeechSynthesisUtterance(text);
if (voice) utterance.voice = voice;
speechSynthesis.speak(utterance);
}
voices = speechSynthesis.getVoices().filter(d => d.lang === "en-US")
<style>
${style.innerText}
.grid {
grid-template-columns: 1fr;
}
.grid button {
font-size: 10vw;
padding: 25%;
}
.grid button[data-hidden] {
color: transparent;
}
</style>
import { all, style } from "@visnup/snap-words"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
