Public
Edited
Jan 31, 2023
data = [
{"emp": "足立", "boss": "NULL", "role": "社長"},
{"emp": "猪狩", "boss": "足立", "role": "部長"},
{"emp": "上田", "boss": "足立", "role": "部長"},
{"emp": "江崎", "boss": "上田", "role": "課長"},
{"emp": "大神", "boss": "上田", "role": "課長"},
{"emp": "加藤", "boss": "上田", "role": "課長"},
{"emp": "木島", "boss": "江崎", "role": "ヒラ"}
];
root = d3.hierarchy(data.reduce((acc, curr) => {
acc[curr.emp] = {boss: curr.boss, role: curr.role};
return acc;
}, {}))
.sum(() => 1)
.sort((a, b) => (a.value - b.value) || (a.data.role.length - b.data.role.length));
svg = d3.select("svg")
.attr("viewBox", [0, 0, 500, 500])
.style("width", "100%")
.style("height", "auto");
node = svg
.selectAll("circle")
.data(d3.pack(root).descendants())
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r)
.attr("fill", "none")
.attr("stroke", "black");
node.append("title").text(d => d.data.role);
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.
