Published
Edited
Aug 24, 2021
1 star
Insert cell
Insert cell
chart = {
const arcs = pie(data);

const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);

svg
.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data))
.attr("d", arc)
.style("opacity", .5);

svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.style("font-family", 'The Girl Next Door')
.style("font-size", "70px")
.text(d => d.data)
.attr("transform", d => {
const [x, y] = arc.centroid(d);
const rotation = ((d.startAngle / 2 + d.endAngle / 2) * 180) / Math.PI;
return "translate(" + [x, y] + ") rotate(-90) rotate(" + rotation + ")";
})
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle");

return svg.node();
}
Insert cell
data = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
]
Insert cell
color = d3
.scaleOrdinal()
.domain(data)
.range(['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])
Insert cell
height = Math.min(864, 864)
Insert cell
arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
Insert cell
arcLabel = {
const radius = Math.min(width, height) / 2 * 0.8;
return d3.arc().innerRadius(radius).outerRadius(radius);
}
Insert cell
pie = d3
.pie()
.sort(null)
.value(d => 1)
Insert cell
d3 = require("d3@6")
Insert cell
html`<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=The+Girl+Next+Door&display=swap" rel="stylesheet">`
Insert cell

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.
Learn more