31:T921,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) .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave) .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

`; const tooltip = d3.create("div") .attr("id", "tooltip") .attr("class", "tooltip") .html(` `) function onMouseEnter(d) { tooltip.style("opacity", 1); tooltip.select("#category") .text(d.data.category); tooltip.select("#quantity") .text(d.data.quantity); } function onMouseLeave() { tooltip.style("opacity", 0); } return html`

${caption} `; }32:T8ae,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) .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave); 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", "-1.2em") .attr("font-weight", "400") .text(d => d.data.category)); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("font-weight", 900) .attr("text-anchor", "middle") .append("text") .text("A Scone"); const chart = svg.node(); const caption = `

Source: Sarah Cooks: Small batch scones

`; const tooltip = d3.create("div") .attr("id", "tooltip") .attr("class", "tooltip") .html(` `); function onMouseEnter(d) { const x = arc.centroid(d)[0] + (width / 2); const y = arc.centroid(d)[1] + (height / 2); tooltip.style("opacity", 1); tooltip.style("transform", `translate(calc( -50% + ${x}px), calc(-100% + ${y}px))`); tooltip.select("#category") .text(d.data.category); tooltip.select("#quantity") .text(d.data.quantity); } function onMouseLeave() { tooltip.style("opacity", 0); } return html`

${tooltip.node()} ${chart}