31:T68a,donutChart = { const arcs = pie(data); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.category)) .attr("d", arc) .append('title') .text(d => `${d.data.category}: ${d.data.quantity.toLocaleString()}`); const sources = svg.append('text') .attr("class", "caption") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("x", -(Math.min(width, height) / 2 * 0.9)) .attr("y", (height / 2) - 6) .style('text-anchor', 'start') .html('Source: Sarah Cooks: Small batch scones') svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.category)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.quantity.toLocaleString())); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .append("text") .text("A Scone"); return svg.node(); }32:T646,donutChart2 = { const arcs = pie(data); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.category)) .attr("d", arc) .append('title') .text(d => `${d.data.category}: ${d.data.quantity.toLocaleString()}`); const sources = svg.append('g') .html(`Source: Sarah Cooks: Small batch scones`); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.category)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.quantity.toLocaleString())); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .append("text") .text("A Scone"); return svg.node(); }33:T651,donutChart3 = { const arcs = pie(data); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.category)) .attr("d", arc) .append('title') .text(d => `${d.data.category}: ${d.data.quantity.toLocaleString()}`); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.category)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.quantity.toLocaleString())); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .append("text") .text("A Scone"); const chart = svg.node(); const caption = `

`; return container; }34:T662,donutChart4 = { const arcs = pie(data); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.category)) .attr("d", arc) .append('title') .text(d => `${d.data.category}: ${d.data.quantity.toLocaleString()}`); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.category)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.quantity.toLocaleString())); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("text-anchor", "middle") .append("text") .text("A Scone"); const chart = svg.node(); const caption = `

Source: Sarah Cooks: Small batch scones

`; return html`

Source: Sarah Cooks: Small batch scones

\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"md`A few folk wrap the chart in a \\`figure\\` element along with the \\`figcaption\\` element:\n\n~~~js\n const chart = svg.node();\n const caption = \\`

Source: Sarah Cooks: Small batch scones

\\`;\n \n return html\\`\n

\n \\${chart}\n \\${caption}\n \n