Published
Edited
Oct 7, 2018
chart={
const arcs=pie(data);
const svg=d3.select(DOM.svg(width,height))
.attr("text-anchor","middle")
.attr("font","12px sans-serif")
const g=svg.append("g")
.attr("transform",`translate(${width/2},${height/2})`);
g.selectAll("path")
.data(arcs)
.enter().append("path")
.attr("fill",d=>color(d.data.key))
.attr("d",arc)
.append("title")
.text(d=>`${d.data.key}:${format(d.data.value)}`);
svg.append("text")
.attr("id","title")
.attr("x", (width / 2))
.attr("y", (height / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Review Count");
const text=g.selectAll("text")
.data(arcs)
.enter().append("text")
.attr("transform",d=> `translate(${arc.centroid(d)})`)
.attr("dy","0.35em")
.attr("font-size","10");
text.filter(d => (d.endAngle - d.startAngle) > 0.2).append("tspan")
.attr("x", 0)
.attr("y", "-0.7em")
.style("font-weight", "bold")
.text(d =>d.data.key);
text.filter(d => (d.endAngle - d.startAngle) > 0.2).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => format(d.data.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.
