Public
Edited
Nov 9, 2024
1 fork
Insert cell
Insert cell
data = await FileAttachment("links@5.csv").csv()
Insert cell
// one extra data cleaning step; haven't resolved relative backpaths yet
records = data.filter(r => r.link.indexOf('..') === -1)
Insert cell
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
}
Insert cell
createTree()
Insert cell
import {Tree} from "@d3/tree-component"
Insert cell
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
})
Insert cell
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()
}
Insert cell
function reconstructPath(node) {
if (node.data.name === '/') {return '/'}
let result = ''
while (node) {
result = node.data.name + '/' + result
node = node.parent
}
return result.substring(2)
}
Insert cell
d3.hierarchy(createTree()).descendants().map(reconstructPath).filter(x => x.length < 10)
Insert cell
function createId(node) {
return reconstructPath(node).substring(1)
}
Insert cell
new Map( d3.hierarchy(createTree()).descendants().map(node => [reconstructPath(node), node]))
Insert cell
Insert cell
customBilink(d3.hierarchy(createTree()))
.descendants()
.map(d => d.outgoing.map(pair => pair[1]))
.flatMap(x => x)
.indexOf(undefined)
Insert cell
customBilink(d3.hierarchy(createTree()))
.descendants()
.map(d => d.outgoing)
Insert cell
Insert cell
Insert cell
Insert cell
// 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()
}
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