chart = {
const width = 928;
const height = width;
const cx = width * 0.5;
const cy = height * 0.59;
const radius = Math.min(width, height) / 2 - 30;
const tree = d3.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-cx, -cy, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
const color = d3.scaleSequential(d3.interpolateCool)
.domain(d3.extent(root.descendants(), d => d.data.value))
const defs = svg.append("defs");
const gradient = defs.append("linearGradient")
.attr("id", "gradient");
gradient.selectAll("stop")
.data(color.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: color(t) })))
.join("stop")
.attr("offset", d => d.offset)
.attr("stop-color", d => d.color);
const legendWidth = 300;
const legendHeight = 20;
svg.append("rect")
.attr("width", legendWidth)
.attr("height", legendHeight)
.style("fill", "url(#gradient)")
.attr("transform", `translate(${cx - legendWidth / 2}, ${cy + radius + 30})`);
const legendScale = d3.scaleLinear()
.domain(color.domain())
.range([0, legendWidth]);
const legendAxis = d3.axisBottom(legendScale).ticks(5);
svg.append("g")
.attr("transform", `translate(${cx - legendWidth / 2}, ${cy + radius + 50})`)
.call(legendAxis);
svg.append("g")
.selectAll()
.data(root.descendants())
.join("circle")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.attr("fill", d => color(d.data.value))
.attr("r", 5);
return svg.node();
}