data = await FileAttachment("links@5.csv").csv()
// one extra data cleaning step; haven't resolved relative backpaths yet
records = data.filter(r => r.link.indexOf('..') === -1)
function createTree() {
let root = {name: '/', children: [], links: []}
records.forEach(record => {
// add nodes for parent page link
let path = record.parent
let parentNode = root
path.split('/').map((pathSegment, i) => {
let nextNode
if (pathSegment === '') {
pathSegment = '/'
nextNode = root
}
else {
nextNode = parentNode.children.filter(child => child.name === pathSegment)[0]
}
if (!nextNode) {
nextNode = {name: pathSegment, children: [], links: []}
parentNode.children.push(nextNode)
}
if (path.split('/').length === i + 2) {
nextNode.links.push(record.link)
}
parentNode = nextNode
})
// add nodes for link
let anotherPath = record.link
parentNode = root
anotherPath.split('/').map((pathSegment, i) => {
let nextNode
if (pathSegment === '') {
pathSegment = '/'
nextNode = root
}
else {
nextNode = parentNode.children.filter(child => child.name === pathSegment)[0]
}
if (!nextNode) {
nextNode = {name: pathSegment, children: [], links: []}
parentNode.children.push(nextNode)
}
parentNode = nextNode
})
})
return root
}
createTree()
import {Tree} from "@d3/tree-component"
basictreechart = Tree(createTree(), {
label: d => d.name,
title: (d, n) => `${n.ancestors().reverse().map(d => d.data.name).join("/").substring(1)}`, // hover text
width: 1152
})
basiccirclechart = {
const width = 2000
const radius = width / 2
const halo = "#fff" // color of label halo
const haloWidth = 3 // padding around the labels
const tree = d3.cluster()
.size([2 * Math.PI, radius - 100]);
const root = tree(d3.hierarchy(createTree())
.sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name)));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width)
.attr("viewBox", [-width / 2, -width / 2, width, width])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");
const link = svg.append("g")
.attr("stroke", '#ccc')
.attr("fill", "black")
.selectAll()
.data(root.leaves())
.join("path")
.style("mix-blend-mode", "multiply")
// .attr("d", (d) => d3.line(d.path(root))) // calculate traversal of hierarchy from start node to dest node
.attr("d", (d) => d3.line(root.path(d)))
.each(function(d) { d.path = this; });
const node = svg.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
.attr("paint-order", "stroke")
.attr("stroke", halo)
.attr("stroke-width", haloWidth)
.text(d => d.data.name)
.each(function(d) { d.text = this; })
.call(text => text.append("title").text(d => ``));
return svg.node()
}
function reconstructPath(node) {
if (node.data.name === '/') {return '/'}
let result = ''
while (node) {
result = node.data.name + '/' + result
node = node.parent
}
return result.substring(2)
}
d3.hierarchy(createTree()).descendants().map(reconstructPath).filter(x => x.length < 10)
function createId(node) {
return reconstructPath(node).substring(1)
}
new Map( d3.hierarchy(createTree()).descendants().map(node => [reconstructPath(node), node]))
function customBilink(root) {
const map = new Map(root.descendants().map(node => [reconstructPath(node), node]));
for (const node of root.descendants()) {
node.incoming = []
node.outgoing = node.data.links.map(link => [node, map.get(link)])
}
// for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);
for (const node of root.descendants()) {
node.data.links.map(link => {
// node.test = link //map.get(link)
// let otherNode = map.get(link)
// otherNode.incoming.push(node)
})
node.incoming.push(1)
}
return root;
}
customBilink(d3.hierarchy(createTree()))
.descendants()
.map(d => d.outgoing.map(pair => pair[1]))
.flatMap(x => x)
.indexOf(undefined)
customBilink(d3.hierarchy(createTree()))
.descendants()
.map(d => d.outgoing)
// TODO:
// only render labels for top N / top N% children of parent node? since chart is way too cluttered
chartwithedges = {
const width = 1000;
const radius = width / 2;
const halo = "#fff" // color of label halo
const haloWidth = 3 // padding around the labels
const tree = d3.cluster()
.size([2 * Math.PI, radius - 100]);
const root = tree(customBilink(d3.hierarchy(createTree()))
.sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name))
)
const svg = d3.create("svg")
.attr("width", width)
.attr("height", width)
.attr("viewBox", [-width / 2, -width / 2, width, width])
.attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;");
const line = d3.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x);
// usage:
// line([[x0,0y],[x1,y1],[x2,y2],...])
const link = svg.append("g")
.attr("stroke", '#ccc')
.attr("fill", "none")
.selectAll()
.data(root.descendants().flatMap(node => node.outgoing)) // [[srcNode,destNode], [srcNode,destNode], ...]
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", ([i, o]) => line(i.path(o))) // calculate traversal of hierarchy from incoming node to outgoing node
.each(function(d) { d.path = this; });
const node = svg.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
.attr("paint-order", "stroke")
.attr("stroke", halo)
.attr("stroke-width", haloWidth)
.text(d => d.data.name)//d.data.name)
.each(function(d) { d.text = this; })
.call(text => text.append("title").text(d => `a/b/c/sample/`));
return svg.node()
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.