Public
Edited
Oct 17, 2022
1 fork
4 stars
{
//Load data
const data = [
{
root: "project",
project_nr: "project 1",
department: "1",
division: "A"
},
{
root: "project",
project_nr: "project 1",
department: "1",
division: "B"
},
{
root: "project",
project_nr: "project 1",
department: "2",
division: "A"
},
{ root: "project", project_nr: "project 2", department: "3", division: "A" }
];
var margin = { top: 10, right: 40, bottom: 10, left: 50 },
width = 550 - margin.left - margin.right,
height = 230 - margin.top - margin.bottom;
var tree = d3
.cluster()
.size([height, width])
.size([
height - margin.top - margin.bottom,
width - margin.left - margin.right
]);
var groupedData = d3.group(
data,
(d) => d.project_nr,
(d) => d.department
);
//Create root
var root = d3.hierarchy(groupedData);
//Attach canvas element
var svg = d3.create("svg").attr("width", width).attr("height", 250);
var g = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")");
var link = g
.selectAll(".link")
.data(tree(root).links())
.enter()
.append("path")
.attr("class", "link")
.attr(
"d",
d3
.linkHorizontal()
.x((d) => d.y)
.y((d) => d.x)
);
var node = g
.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "link")
.attr(
"class",
(d) => "node" + (d.children ? " node--internal" : " node--leaf")
)
.attr("transform", (d) => {
return "translate(" + d.y + "," + d.x + ")";
});
var text = g
.selectAll("text")
.data(root.descendants())
.enter()
.append("text")
.text(({ data }) =>
Array.isArray(data) ? data[0] || "project" : data.division
)
.attr("dy", "0.32em")
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("dx", 4)
.attr("class", "label glow")
.attr("text-anchor", "center")
.attr("x", (d) => d.y)
.attr("y", (d) => d.x);
node.append("circle").attr("r", 2.5);
return svg.node();
}
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.
