Published
Edited
Jan 2, 2021
6 stars
// a_text = fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_proverbial_phrases§ion=1`).then(response => response.json())
parsed = d3.hierarchy(
clean_phrases[0],
id => {
for (const split of [/[^\w\s]/, /\s/]) {
const children = id && id.split(split).filter(id => id.length > 0);
if (children.length > 1) return children;
}
}
)
graph(parsed, {marginLeft: 200, label: d => d.data})
data = {
function populate(tree, words) {
if (words.length === 0) { // condition for ending recursion
return;
}
let word = words[0]; // words = ["A", "bad", "excuse", "is", "better", "than", "none."]
let node = tree['children'].find(t => t.text === word);
if (!node) { // if we haven't seen this word before
node = {
text: word,
children: []
};
tree['children'].push(node);
}
populate(node, words.slice(1)); // keep populating without the first, already-processed word
}
let root = {
text: '💬',
children: []
};
let i = 0;
const len = clean_phrases.length;
for (i; i < len; i++) {
const phrase = clean_phrases[i]; // "A bad excuse is better than none."
const words = phrase.split(" "); // ["A", "bad", "excuse", "is", "better", "than", "none."]
populate(root, words);
}
return root;
}
tree = data => {
const root = d3.hierarchy(data);
root.dx = 10;
root.dy = width / (root.height + 1);
return d3.tree().nodeSize([root.dx, root.dy])(root);
}
// data = {
// text: "A",
// children: [
// {
// text: "bad",
// children: [
// { text: "excuse", children: [{text: "is", children: …}]},
// { text: "penny", children: [{text: "always", children: …}]},
// { text: "workman", children: [{text: "always", children: …}]}
// ]
// },
// {
// text: "bird",
// children: [
// { text: "in", children: [{text: "the", children: …}]}
// ]
// }
// ]
// }
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
margin = ({top: 48, right: 0, bottom: 48, left: 0})
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.
