Public
Edited
Nov 27, 2022
1 star
data = d3.csv(
"https://raw.githubusercontent.com/bumbeishvili/sample-data/main/data-oracle.csv"
)
createHierarchicalData = d3.stratify()
hierarchicalData = createHierarchicalData(data)
layoutFunc = d3.tree()
hierarchicalDataWithPositions = layoutFunc(hierarchicalData.copy())
descendants = hierarchicalDataWithPositions.descendants()
updatedCoords = descendants.map((d) => {
Object.assign(d, {
_newX: d.x * width,
_newY: d.y * height
});
return d;
})
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("overflow", "visible");
const g = svg.append("g");
g.selectAll("path.links")
.data(updatedCoords.filter((d) => d.parent))
.join("path")
.attr("d", (d) => link(d))
.attr("stroke", "black");
const nodes = g
.selectAll("g.node")
.data(updatedCoords)
.join("g")
.attr("transform", (d) => `translate(${d._newX},${d._newY})`);
nodes.append("circle").attr("r", 3);
nodes
.append("text")
.text((d) => d.data.name)
.attr("font-size", 10)
.attr("transform", "translate(3.5,-5) rotate(-90)")
.attr("stroke", "white")
.attr("stroke-width", 5)
.clone(true)
.attr("stroke", "none");
return svg.node();
}
function link(d) {
return `M ${d._newX}, ${d._newY} L ${d.parent._newX}, ${d.parent._newY}`;
}
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.
