Survey Donut Charts

31:Tad5,chart = { //data const data = [ { percent: "99%", counts: [678, 5], color: "#142543", caption: ["feel safe at", "the Point"] }, { percent: "98%", counts: [660, 10], color: "#142543", caption: ["their experience", "meets expectations"] }, { percent: "95%", counts: [653, 33], color: "#E85D1A", caption: ["would face hardship if", "closed for 3-5 years"] } ]; //data accessors const percentAccessor = (d) => d.percent; const countsAccessor = (d) => d.counts; const captionAccessor = (d) => d.caption; const colorAccessor = (d) => d.color; //dimensions const dimensions = { chartWidth: 200, height: 240, radius: 90, innerRadius: 50, centerY: 100 }; dimensions.width = dimensions.chartWidth * data.length; dimensions.captionY1 = dimensions.radius + 22; dimensions.captionY2 = dimensions.captionY1 + 20; //generators const pieGenerator = d3.pie().value((d) => d.value); const arcGenerator = d3 .arc() .innerRadius(dimensions.innerRadius) .outerRadius(dimensions.radius); //canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); //chart groups const chartGroups = svg .selectAll("g") .data(data) .join("g") .attr( "transform", (d, i) => `translate(${dimensions.chartWidth * (i + 0.5)}, ${dimensions.centerY})` ); //donut arcs chartGroups.each(function (d) { const [yes, no] = countsAccessor(d); const pieData = pieGenerator([ { name: "Yes", value: yes }, { name: "No", value: no } ]); d3.select(this) .selectAll("path") .data(pieData) .join("path") .attr("d", arcGenerator) .attr("fill", (p) => (p.data.name === "Yes" ? colorAccessor(d) : "#D4D0CA")) .attr("stroke", "white") .attr("stroke-width", 1); }); //percent labels chartGroups .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "Newsreader, serif") .style("font-size", "34px") .style("font-weight", "bold") .style("fill", "#142543") .text((d) => percentAccessor(d)); //captions chartGroups.each(function (d) { d3.select(this) .selectAll(".caption") .data(captionAccessor(d)) .join("text") .attr("class", "caption") .attr("text-anchor", "middle") .attr("y", (line, i) => (i === 0 ? dimensions.captionY1 : dimensions.captionY2)) .style("font-family", "Inter, sans-serif") .style("font-size", "18px") .style("font-style", "italic") .style("fill", "#1F2937") .text((line) => line); }); return svg.node(); }32:T802,chartSafety = { //data const data = { percent: "99%", counts: [678, 5], caption: ["feel safe at", "the Point"] }; //data accessors const percentAccessor = (d) => d.percent; const countsAccessor = (d) => d.counts; const captionAccessor = (d) => d.caption; //dimensions const dimensions = { chartWidth: 200, height: 240, radius: 90, innerRadius: 50, centerY: 100 }; dimensions.captionY1 = dimensions.radius + 22; dimensions.captionY2 = dimensions.captionY1 + 20; //generators const pieGenerator = d3.pie().value((d) => d.value); const arcGenerator = d3 .arc() .innerRadius(dimensions.innerRadius) .outerRadius(dimensions.radius); //canvas const svg = d3 .create("svg") .attr("width", dimensions.chartWidth) .attr("height", dimensions.height); const g = svg .append("g") .attr("transform", `translate(${dimensions.chartWidth / 2}, ${dimensions.centerY})`); //donut arc const [yes, no] = countsAccessor(data); const pieData = pieGenerator([ { name: "Yes", value: yes }, { name: "No", value: no } ]); g.selectAll("path") .data(pieData) .join("path") .attr("d", arcGenerator) .attr("fill", (d) => (d.data.name === "Yes" ? "#142543" : "#D4D0CA")) .attr("stroke", "white") .attr("stroke-width", 1); //percent label g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "Newsreader, serif") .style("font-size", "34px") .style("font-weight", "bold") .style("fill", "#142543") .text(percentAccessor(data)); //captions g.selectAll(".caption") .data(captionAccessor(data)) .join("text") .attr("class", "caption") .attr("text-anchor", "middle") .attr("y", (line, i) => (i === 0 ? dimensions.captionY1 : dimensions.captionY2)) .style("font-family", "Inter, sans-serif") .style("font-size", "18px") .style("font-style", "italic") .style("fill", "#1F2937") .text((line) => line); return svg.node(); }33:T814,chartExperience = { //data const data = { percent: "98%", counts: [660, 10], caption: ["their experience", "meets expectations"] }; //data accessors const percentAccessor = (d) => d.percent; const countsAccessor = (d) => d.counts; const captionAccessor = (d) => d.caption; //dimensions const dimensions = { chartWidth: 200, height: 240, radius: 90, innerRadius: 50, centerY: 100 }; dimensions.captionY1 = dimensions.radius + 22; dimensions.captionY2 = dimensions.captionY1 + 20; //generators const pieGenerator = d3.pie().value((d) => d.value); const arcGenerator = d3 .arc() .innerRadius(dimensions.innerRadius) .outerRadius(dimensions.radius); //canvas const svg = d3 .create("svg") .attr("width", dimensions.chartWidth) .attr("height", dimensions.height); const g = svg .append("g") .attr("transform", `translate(${dimensions.chartWidth / 2}, ${dimensions.centerY})`); //donut arc const [yes, no] = countsAccessor(data); const pieData = pieGenerator([ { name: "Yes", value: yes }, { name: "No", value: no } ]); g.selectAll("path") .data(pieData) .join("path") .attr("d", arcGenerator) .attr("fill", (d) => (d.data.name === "Yes" ? "#142543" : "#D4D0CA")) .attr("stroke", "white") .attr("stroke-width", 1); //percent label g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "Newsreader, serif") .style("font-size", "34px") .style("font-weight", "bold") .style("fill", "#142543") .text(percentAccessor(data)); //captions g.selectAll(".caption") .data(captionAccessor(data)) .join("text") .attr("class", "caption") .attr("text-anchor", "middle") .attr("y", (line, i) => (i === 0 ? dimensions.captionY1 : dimensions.captionY2)) .style("font-family", "Inter, sans-serif") .style("font-size", "18px") .style("font-style", "italic") .style("fill", "#1F2937") .text((line) => line); return svg.node(); }34:T852,chartHardship = { //data const data = { percent: "95%", counts: [653, 33], color: "#E85D1A", caption: ["would face hardship if", "closed for 3-5 years"] }; //data accessors const percentAccessor = (d) => d.percent; const countsAccessor = (d) => d.counts; const captionAccessor = (d) => d.caption; const colorAccessor = (d) => d.color; //dimensions const dimensions = { chartWidth: 200, height: 240, radius: 90, innerRadius: 50, centerY: 100 }; dimensions.captionY1 = dimensions.radius + 22; dimensions.captionY2 = dimensions.captionY1 + 20; //generators const pieGenerator = d3.pie().value((d) => d.value); const arcGenerator = d3 .arc() .innerRadius(dimensions.innerRadius) .outerRadius(dimensions.radius); //canvas const svg = d3 .create("svg") .attr("width", dimensions.chartWidth) .attr("height", dimensions.height); const g = svg .append("g") .attr("transform", `translate(${dimensions.chartWidth / 2}, ${dimensions.centerY})`); //donut arc const [yes, no] = countsAccessor(data); const pieData = pieGenerator([ { name: "Yes", value: yes }, { name: "No", value: no } ]); g.selectAll("path") .data(pieData) .join("path") .attr("d", arcGenerator) .attr("fill", (d) => (d.data.name === "Yes" ? colorAccessor(data) : "#D4D0CA")) .attr("stroke", "white") .attr("stroke-width", 1); //percent label g.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "Newsreader, serif") .style("font-size", "34px") .style("font-weight", "bold") .text(percentAccessor(data)); //captions g.selectAll(".caption") .data(captionAccessor(data)) .join("text") .attr("class", "caption") .attr("text-anchor", "middle") .attr("y", (line, i) => (i === 0 ? dimensions.captionY1 : dimensions.captionY2)) .style("font-family", "Inter, sans-serif") .style("font-size", "18px") .style("font-style", "italic") .style("fill", "#1F2937") .text((line) => line); return svg.node(); }35:[] 2f:{"title":"PPC | Safety and Experience","cells":[{"id":1,"value":"# PPC | Safety and Experience","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"downloadLink = {\n const svgNode = chart;\n const html = `\n\n\n\nSurvey Donut Charts\n\n\n${svgNode.outerHTML}\n\n`;\n const blob = new Blob([html], { type: \"text/html\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = \"survey-charts.html\";\n a.textContent = \"⬇ Download HTML file\";\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"fontLoader = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"2","titling":"auto"}