open web tools for creativity and community
// Override this from your app
inputEl = html`<div class="paper_content-section w-dyn-items"><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-1b" data-doc-parent-href="/docs/">Document 1b</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-2c" data-doc-parent-href="/docs/document-1a">Document 2c</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-4b" data-doc-parent-href="/docs/document-3a">Document 4b</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-4a" data-doc-parent-href="/docs/document-3a">Document 4a</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-3c" data-doc-parent-href="/docs/document-2c">Document 3c</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-3b" data-doc-parent-href="/docs/document-2c">Document 3b</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-3a" data-doc-parent-href="/docs/document-2b">Document 3a</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-2b" data-doc-parent-href="/docs/document-1a">Document 2b</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-1a" data-doc-parent-href="/docs/" class="w--current">Document 1a</a></div></div><div class="d-aside_link w-dyn-item"><div class="w-embed"><a href="/docs/document-2a" data-doc-parent-href="/docs/document-1a">Document 2a</a></div></div></div>`
linksData = {
const docList = Array.from(
inputEl.querySelectorAll('[data-doc-parent-href]')
).map(docLink => {
const docHref = docLink.getAttribute('href');
const docParentHref = docLink.getAttribute('data-doc-parent-href');
return {
el: docLink,
id: docHref,
parent: docParentHref,
title: docLink.textContent
};
});
docList.push({
el: null,
id: "/docs/",
parent: null,
title: "All Docs"
});
return docList;
}
// Note: treeData will be mutated by the main viz code on expand / collapse / layout
treeData = {
const tree = d3
.stratify()
.id(d => d.id)
.parentId(d => d.parent)(linksData);
return tree;
}
makeIndentedTree = root => {
const output = html`<div>`;
const indentChildren = function(node, parentEl) {
if (!node.children) return;
const ul = html`<ul class="doc-tree-list">`;
parentEl.appendChild(ul);
node.children.forEach(child => {
if (child.data && child.data.el) {
const cloned = child.data.el.cloneNode(true);
const li = html`<li class="doc-tree-list-item">${cloned}</li>`;
ul.appendChild(li);
}
indentChildren(child, ul);
});
};
indentChildren(root, output);
return output;
}
outputEl = makeIndentedTree(treeData)
d3 = require("d3@5")
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.
