Published
Edited
Nov 17, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
rawWordList = d3.json(
'https://raw.githubusercontent.com/BilboBlockins/word-frequency-list-json/master/word_freq_32k.json'
)
Insert cell
Insert cell
scale = d3
.scaleLinear()
.domain(d3.extent(Object.values(rawWordList)))
.range([0, 100])
Insert cell
wordList = Object.entries(rawWordList).map(word => ({
word: word[0],
length: word[0].length,
frequency: word[1],
percentile: scale(word[1])
}))
Insert cell
// For testing!
wordListMini = wordList.slice(0, 50).map(d => d.word)
Insert cell
Insert cell
new Map(wordListMini.map(d => [d[0], wordListMini.filter(i => i[0] === d[0])]))
Insert cell
recursiveMap(wordListMini)
Insert cell
{
var index = 1;
console.log("START\n\n");

function recursiveMap(wordArray) {
const grouping = d3.groups(wordListMini, d => d.slice(0, index));
console.log(`Grouping @ Index ${index}:`, grouping);

if (wordArray.length === 1) {
index = 0;
return wordArray[0];
} else {
grouping.map(d => recursiveMap(d[0]));
index++;
}
}
return recursiveMap(wordListMini);
}
Insert cell
// It seems to work, but does a lot of duplicate nesting...
{
var index = 0;

function ericsMethod(array) {
index++;

const outputData = d3.groups(array, d => d.word.slice(0, index));

if (array.length === 1) {
index = 0;

return array[0].word;
} else {
return Array.from(outputData).map(d => [d[0], ericsMethod(d[1])]);
}
}
return ericsMethod(wordList);
}
Insert cell
Insert cell
// Perhaps good reference
parsed = d3.hierarchy(["Octopus", "Ocean", "October"], id => {
for (const letter of [1, 2, 3, 4, 5]) {
const children = id && id.slice(0, index);
if (children.length > 1) return children;
}
})
Insert cell
nonReursiveMap = d3.group(
wordListMini,
d => d.word.slice(0, 1),
d => d.word.slice(0, 2),
d => d.word.slice(0, 3),
d => d.word.slice(0, 4)
)
Insert cell
Insert cell
Insert cell
secretArray = secretWord.split("").map((d, i) => secretWord.slice(0, i + 1))
Insert cell
wordList.filter(d => d.word.slice(0, secretArray.length) === secretWord)
Insert cell
Insert cell
graph(d3.hierarchy(nonReursiveMap), { label: d => d.data.word })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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