chart = {
const root = pack(data);
const svg = d3.select(DOM.svg(width, height))
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", 4)
.attr("fill", "#111");
// var hitArc = d3.arc()
// .innerRadius(1)
// .outerRadius(2)
// .startAngle(0)
// .endAngle(function(d){
// var angle = (parseInt(d.data.H) / 3000)*(Math.PI / 2);
// if(angle > 1){
// console.log(angle);
// }
// return (parseInt(d.data.H) / 3000) * (Math.PI / 2)
// });
// leaf.append('path')
// .attr('d',hitArc)
// .attr('fill','red');
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
// leaf.append("title")
// .text(d => `${d.data.player}\n${format(d.value)}`);
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.
