chart = {
const root = tree(data);
const svg = d3.select(DOM.svg(width, width))
.style("width", "100%")
.style("height", "auto")
.style("padding", "10px")
.style("box-sizing", "border-box")
.style("font", "20px sans-serif");
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#6cc497")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 3)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
const node = svg.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants().reverse())
.join("g")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`);
node.append("rect")
.attr("fill", "white")
.attr("stroke", "#6cc497")
.attr("r", 2.5)
.attr("transform", d => `rotate(${ d.x * -180 / Math.PI - 90}) translate(-260, -50)`)
.attr('width', 300)
.attr('height', 100)
.attr('rx', 100 / 2)
.attr('ry', 300 / 2)
node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", "start")
.attr("transform", d => `rotate(${ d.x * -180 / Math.PI + 90})`)
.text(d => d.data.name)
.clone(true).lower()
.attr("stroke", "white");
return autosize(svg.node());
}
data = ({
name: "Homepage",
children: [
{
name: "Dashboard",
children: [
{
name: "Orders",
children: [
{name: "Recent", value: 3938},
{name: "Awaiting Shipment", value: 3812},
{name: "Delivered", value: 6714},
]
},
{
name: "Pages",
children: [
{name: "Widgets", value: 3534},
{name: "Customize", value: 5731},
]
},
{
name: "Settings",
children: [
{name: "Update Profile Pic", value: 7074}
]
}
]
},
{
name: "Pricing",
children: [
{name: "Toggle Annual", value: 17010},
{name: "Contact Us", value: 5176},
]
},
{
name: "Log in",
children: [
{
name: "Enter Credentials",
children: [
{name: "Invalid Password", value: 721},
{name: "Successful Log in", value: 4294},
]
},
{name: "Reset Password", value: 1759},
]
},
{
name: "Sign up",
children: [
{name: "Invalid Email", value: 8833},
{name: "Successful Log in", value: 1732},
]
},
{
name: "Contact Us",
children: [
{name: "Fill out Conta...", value: 4116}
]
},
]
})
tree = data => d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
(d3.hierarchy(data))
width = 3000
radius = width / 2
function autosize(svg) {
document.body.appendChild(svg);
const box = svg.getBBox();
document.body.removeChild(svg);
svg.setAttribute("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
return svg;
}
d3 = require("d3@5")
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.
