chart = {
const svg = d3.create("svg")
.attr('width', width)
.attr('style', 'background: rgb(241, 239, 229);')
.attr("viewBox", [-10, -10, width+20, height+20])
.style("font", "10px sans-serif")
.attr("text-anchor", "middle");
const shadow = DOM.uid("shadow");
svg.append("filter")
.attr("id", shadow.id)
.attr("x", "-200%")
.attr("y", "-200%")
.attr("width", "400%")
.attr("height", "400%")
.append("feDropShadow")
.attr("flood-opacity", 1)
.attr("dx", 1.2)
.attr("dy", 1.2);
const zoomable_layer = svg.append('g')
const is_component = (d) => d.depth == 2 || d.parent && d.parent.children.length > 2
const node = zoomable_layer.selectAll("g")
.data(tree.root.descendants())
.join("g")
.attr("transform", d => `translate(${d.xr},${d.yr})`);
const folder = node.filter(d => d.children);
folder.append("circle")
.attr("r", d => d.r)
.attr("fill", d => d.depth <= 1 ? 'none' : color(d.depth-2))
//.attr("stroke-width", d => d.depth == 2 ? 0.2 : ((d.depth-2) % 10 ? 0.08: 0.15) )
.attr("stroke-width", d => is_component(d) ? 0.3 : 0) //((d.depth-2) % 10 ? 0.08: 0.15) )
.attr("stroke", d => d.depth <= 1 ? 'none' : 'black')
.attr("vector-effect", "non-scaling-stroke");
folder.append("title")
.text(d => d.depth-2)
const leaf = node.filter(d => !d.children);
leaf.append("circle")
.attr("r", d => d.r)
.attr("fill", 'black')/*
.append("rect")
.attr("width", d => d.r*Math.sqrt(2))
.attr("height", d => d.r*Math.sqrt(2))
.attr("x", d => -d.r*Math.sqrt(2)/2)
.attr("y", d => -d.r*Math.sqrt(2)/2)
.attr("fill", 'black')
//.attr("fill-opacity", 0.5);
/*leaf.each(d => d.rand = d.data.size / Math.pow(d.data.order,2))
.append("rect")
.attr("width", d => d.r*Math.sqrt(2))
.attr("height", d => d.r*d.rand*Math.sqrt(2))
.attr("x", d => -d.r*Math.sqrt(2)/2)
.attr("y", d => (1/2 - d.rand)*d.r*Math.sqrt(2))
.attr("fill", 'black');*/
// .attr("id", d => (d.leafUid = DOM.uid("leaf")).id);
/*
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)
.text(d => d);
*/
/*node.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
*/
leaf.append("title")
.text(d => d.data.size)
/*const link = zoomable_layer.selectAll("path")
.data(tree.links)
.join("path")
.attr("d", d => `M${d.source.xr} ${d.source.yr} C${d.source.xr} ${d.source.yr-Math.abs(d.target.xr-d.source.xr)*0.5} ${d.target.xr} ${d.target.yr-Math.abs(d.target.xr-d.source.xr)*0.5} ${d.target.xr} ${d.target.yr}`)
.attr("stroke", "rgba(255,255,255,0.1)")
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("vector-effect", "non-scaling-stroke");*/
function zoomed() {
zoomable_layer.attr('transform', d3.event.transform);
}
svg.call(d3.zoom()
.scaleExtent([0, Infinity])
.on('zoom', zoomed));
return svg.node();
}