PhD Candidate @densitydesign
chart = {
const root = tree(hierarchy);
const svg = d3.create("svg");
svg
.append("g")
.attr("fill", "none")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr(
"d",
d3
.linkRadial()
.angle((d) => d.x)
.radius((d) => d.y)
)
.attr("stroke", (d) => linkColor(d.target.data.is_subsid));
svg
.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr(
"transform",
(d) => `
rotate(${(d.x * 180) / Math.PI - 90})
translate(${d.y},0)
`
)
.attr("fill", (d) => linkColor(d.data.is_subsid))
.attr("r", 2.5);
svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 8)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr(
"transform",
(d) => `
rotate(${(d.x * 180) / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`
)
.attr("dy", "0.31em")
.attr("x", (d) => (d.x < Math.PI === !d.children ? 6 : -6))
.attr("text-anchor", (d) =>
d.x < Math.PI === !d.children ? "start" : "end"
)
.text((d) => d.data.child)
.clone(true)
.lower()
.attr("stroke", "white");
return svg.attr("viewBox", autoBox).node();
}
linkColor = d3.scaleOrdinal(d3.schemeCategory10)
function links2dot(links) {
return links
.map((l) => [l[links.columns[1]], l[links.columns[0]]])
.filter(([source, target]) => source && target)
.map(([source, target]) => `${source} -> ${target}`)
.join("; ");
}
hierarchy = {
const h = d3
.stratify()
.id((d) => d.child)
.parentId((d) => d.parent)(data);
return h;
}
filteredData = data.filter((d) => d.year < 2010)
Inputs.table(data)
data = await FileAttachment("FB.tsv").tsv()
dot = require("@observablehq/graphviz@0.2")
function autoBox() {
document.body.appendChild(this);
const { x, y, width, height } = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
tree = d3
.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
width = 750
radius = width / 3
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.
