Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 30, 2020
1 fork
27 stars
d3.greatest(scores, ([word, score]) => score || NaN)
viewof scores = {
const form = html`<form>
<style>
button[name=listen] {
background: #2dc244;
color: white;
border: none;
border-radius: 4px;
font-size: 24px;
font-weight: bold;
padding: 8px 20px;
margin-bottom: 8px;
cursor: pointer;
width: 220px;
}
button[name=listen]:hover {
background: #0e9923;
}
button.active[name=listen] {
background: #ff4136;
}
</style>
<button name=listen>Listen</button>
</form>`;
const button = form.listen;
form.value = new Map(d3.permute(words.map(word => [word, 0]), order));
button.onclick = async event => {
event.preventDefault();
if (recognizer.isListening()) {
button.disabled = true;
button.textContent = "Stopping…";
await recognizer.stopListening();
button.classList.remove("active");
button.textContent = "Listen";
button.disabled = false;
return;
}
button.textContent = "Stop";
button.classList.add("active");
recognizer.listen(({scores}) => {
form.value = new Map(d3.permute(Array.from(scores, (s, i) => [words[i], s]), order));
form.dispatchEvent(new CustomEvent("input"));
}, {
probabilityThreshold: 0.75
});
};
invalidation.then(() => {
if (recognizer.isListening()) {
recognizer.stopListening();
}
});
return form;
}
recognizer = {
const recognizer = speechCommands.create("BROWSER_FFT");
await recognizer.ensureModelLoaded();
return recognizer;
}
words = recognizer.wordLabels()
order = [
18, // yes
9, // no
17, // up
2, // down
7, // left
11, // right
6, // go
14, // stop
19, // zero
10, // one
16, // two
15, // three
5, // four
4, // five
13, // six
12, // seven
3, // eight
8, // nine
0, // _background_noise_
1, // _unknown_
]
d3 = require("d3-array@2")
tfjs = require("@tensorflow/tfjs@0.13")
speechCommands = require("@tensorflow-models/speech-commands@0.2")
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.
