Public
Edited
Aug 24, 2023
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cmudict.lookup("CRUELLEST")
Insert cell
cmudict.lookup("GENE")
Insert cell
getPhones("GENE")
Insert cell
cmudict.phones
Insert cell
function getPhones(text) {
const words = text.toUpperCase().split(/[ -]+/);
const result = [];
words.forEach(function (word) {
console.log(word);
const noVariants = cmudict.lookup(word).replace(/\d+/g, "");
result.push(...noVariants.split(" ").map((d) => cmudict.phones[d]));
});
return result;
}
Insert cell
getPhones("hello world I am batman")
Insert cell
new Set(Object.values(cmudict.phones))
Insert cell
allPhones = sentences.map((s) => s.map(getPhones)).map(_.flatten)
Insert cell
Insert cell
maxPhoneLength = Math.max(...allPhones.map((d) => d.length))
Insert cell
spacing = 0.2
Insert cell
<svg width=${phoneSize.width/3} height=${phoneSize.height/3} viewBox="-0.1 -0.1 ${(2 + spacing) * maxPhoneLength + .2} ${(2 + spacing) * sentences.length + 0.2}">
${allPhones.map((line, j) => svg`
${line.map((phone, i) => svg`<rect class="phone" x="${(2 + spacing) * i}" y="${(2 + spacing) * j}" width="2" height="2" fill="${colorScale(phone)}"/>`)}
`)}
</svg>
Insert cell
Insert cell
colorScale = d3
.scaleOrdinal()
.domain(new Set(Object.values(cmudict.phones)))
.range(d3.schemeAccent)
Insert cell

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.
Learn more