Survey Donut Charts

31:Tdf2,chart = { //data const data = [ { icon: "diversity", value: 29, caption: "Loss of community and social connection" }, { icon: "heart", value: 24, caption: "Emotional devastation" }, { icon: "nature", value: 23, caption: "Loss of connection to nature and the lake" }, { icon: "health", value: 18, caption: "Negative impacts on mental health and well-being" }, { icon: "exercise", value: 15, caption: "Negative impacts on physical health and exercise habits" }, { icon: "home", value: 9, caption: "Loss of place attachment and identity" } ]; //data accessors const iconAccessor = (d) => d.icon; const valueAccessor = (d) => d.value; const captionAccessor = (d) => d.caption; //colors const iconColor = "#1c4587"; const numberColor = "#E85D1A"; const captionColor = "#1F2937"; const dividerColor = "#D4D0CA"; //dimensions const dimensions = { columnWidth: 150, iconSize: 40, height: 90, topY: 30, captionStartY: 50, lineHeight: 16 }; dimensions.width = dimensions.columnWidth * data.length; //text-wrapping helper const measureCtx = document.createElement("canvas").getContext("2d"); function wrap(text, font, maxWidth) { measureCtx.font = font; const words = text.split(/\s+/); const lines = []; let line = ""; for (const word of words) { const test = line ? `${line} ${word}` : word; if (measureCtx.measureText(test).width > maxWidth && line) { lines.push(line); line = word; } else { line = test; } } if (line) lines.push(line); return lines; } //canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); //columns const columnGroups = svg .selectAll("g.stat") .data(data) .join("g") .attr("class", "stat") .attr("transform", (d, i) => `translate(${i * dimensions.columnWidth + 8}, 0)`); //dividers columnGroups .filter((d, i) => i > 0) .append("line") .attr("x1", -14) .attr("x2", -14) .attr("y1", 4) .attr("y2", dimensions.height - 20) .style("stroke", dividerColor) .style("stroke-width", 1) .style("stroke-dasharray", "1,2"); //icons columnGroups .append("g") .attr("class", "icon") .html((d) => iconText[iconAccessor(d)]) .select("svg") .attr("width", dimensions.iconSize) .attr("height", dimensions.iconSize) .attr("x", 0) .attr("y", dimensions.topY - dimensions.iconSize + 8) .style("fill", iconColor); //numbers const numberLabels = columnGroups .append("text") .attr("x", dimensions.iconSize + 4) .attr("y", dimensions.topY) .style("font-family", "Newsreader, serif") .style("font-weight", "bold") .style("fill", numberColor); numberLabels .append("tspan") .style("font-size", "30px") .text((d) => valueAccessor(d)); numberLabels .append("tspan") .style("font-size", "16px") .attr("dy", -10) .text("%"); //captions columnGroups.each(function (d) { const lines = wrap(captionAccessor(d), "13px Inter, sans-serif", dimensions.columnWidth - 24); d3.select(this) .selectAll("text.caption") .data(lines) .join("text") .attr("class", "caption") .attr("x", 0) .attr("y", (line, i) => dimensions.captionStartY + i * dimensions.lineHeight) .style("font-family", "Inter, sans-serif") .style("font-size", "13px") .style("fill", captionColor) .text((line) => line); }); return svg.node(); }32:T94b,function drawStat(d) { //colors const iconColor = "#1c4587"; const numberColor = "#E85D1A"; const captionColor = "#1F2937"; //dimensions const dimensions = { columnWidth: 150, iconSize: 40, topY: 30, captionStartY: 50, lineHeight: 16, height: 90 }; //data accessors const iconAccessor = (d) => d.icon; const valueAccessor = (d) => d.value; const captionAccessor = (d) => d.caption; //text-wrapping helper const measureCtx = document.createElement("canvas").getContext("2d"); function wrap(text, font, maxWidth) { measureCtx.font = font; const words = text.split(/\s+/); const lines = []; let line = ""; for (const word of words) { const test = line ? `${line} ${word}` : word; if (measureCtx.measureText(test).width > maxWidth && line) { lines.push(line); line = word; } else { line = test; } } if (line) lines.push(line); return lines; } //canvas const svg = d3 .create("svg") .attr("width", dimensions.columnWidth) .attr("height", dimensions.height); const g = svg.append("g").attr("transform", "translate(8, 0)"); //icon g.append("g") .attr("class", "icon") .html(iconText[iconAccessor(d)]) .select("svg") .attr("width", dimensions.iconSize) .attr("height", dimensions.iconSize) .attr("x", 0) .attr("y", dimensions.topY - dimensions.iconSize + 8) .style("fill", iconColor); //number const numberLabel = g .append("text") .attr("x", dimensions.iconSize + 4) .attr("y", dimensions.topY) .style("font-family", "Newsreader, serif") .style("font-weight", "bold") .style("fill", numberColor); numberLabel .append("tspan") .style("font-size", "30px") .text(valueAccessor(d)); numberLabel .append("tspan") .style("font-size", "16px") .attr("dy", -10) .text("%"); //caption const lines = wrap(captionAccessor(d), "13px Inter, sans-serif", dimensions.columnWidth - 24); g.selectAll("text.caption") .data(lines) .join("text") .attr("class", "caption") .attr("x", 0) .attr("y", (line, i) => dimensions.captionStartY + i * dimensions.lineHeight) .style("font-family", "Inter, sans-serif") .style("font-size", "13px") .style("fill", captionColor) .text((line) => line); return svg.node(); }33:[{"id":"40e20005a3d8b2fd03cd9765283822853f5ab0525acc84bd459777089db117c9a63c90a72ffcb035c33ad7c4e0b1616bbc254a1e3a2c073212ff9bb0c2375712","href":"https://static.observableusercontent.com/files/40e20005a3d8b2fd03cd9765283822853f5ab0525acc84bd459777089db117c9a63c90a72ffcb035c33ad7c4e0b1616bbc254a1e3a2c073212ff9bb0c2375712","name":"self_improvement_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1788322420261,"size":605},{"id":"954d6f2c6efa9ce7ca85121ba829e309b7d308575266171f1d35d524ecff80827da7b5a112713898c85d5052653e8f3e50f746e1f5e0b1ae7c63c9c77df74362","href":"https://static.observableusercontent.com/files/954d6f2c6efa9ce7ca85121ba829e309b7d308575266171f1d35d524ecff80827da7b5a112713898c85d5052653e8f3e50f746e1f5e0b1ae7c63c9c77df74362","name":"nature_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1788322425838,"size":482},{"id":"25f39ad0911c83e9ee61afc7a73106008c82ac54d629d9538daf51ed1130bb19e58cda73422fabde274ee34df584b1d6de01155104b7ca5888392cd980224e79","href":"https://static.observableusercontent.com/files/25f39ad0911c83e9ee61afc7a73106008c82ac54d629d9538daf51ed1130bb19e58cda73422fabde274ee34df584b1d6de01155104b7ca5888392cd980224e79","name":"home_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24 (1).svg","type":"image/svg+xml","lastModified":1788322427140,"size":243},{"id":"b3df778e30e9f5e62cc3b9fe1f6289b657949748f75b37a59254f042b00e14239bc4136594e414f56aee9822b346d1bd36257c83b8dde0d406f4247d1e7d216c","href":"https://static.observableusercontent.com/files/b3df778e30e9f5e62cc3b9fe1f6289b657949748f75b37a59254f042b00e14239bc4136594e414f56aee9822b346d1bd36257c83b8dde0d406f4247d1e7d216c","name":"heart_broken_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24 (1).svg","type":"image/svg+xml","lastModified":1788322428426,"size":570},{"id":"b213c954b40b38ca9ff2196fc28c9082225778d2105859a7c3ea9f2b7c7c62e333b0b5698b7f73448865746ca35d9293f20044e190921ac20f396e0a6c06ef78","href":"https://static.observableusercontent.com/files/b213c954b40b38ca9ff2196fc28c9082225778d2105859a7c3ea9f2b7c7c62e333b0b5698b7f73448865746ca35d9293f20044e190921ac20f396e0a6c06ef78","name":"exercise_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1788322422093,"size":705},{"id":"fd60aa8845ae7cb792d66ae7f4477f9ee2410b1e541f5cf0ef6fcaaa22f0f2463d547ab33b5b4ead40cd0711da519f385b4b90c2e90a841b08c62930de250329","href":"https://static.observableusercontent.com/files/fd60aa8845ae7cb792d66ae7f4477f9ee2410b1e541f5cf0ef6fcaaa22f0f2463d547ab33b5b4ead40cd0711da519f385b4b90c2e90a841b08c62930de250329","name":"diversity_3_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1788322423797,"size":748}] 2f:{"title":"PPC | Cost of Closure","cells":[{"id":1,"value":"# PPC | Cost of Closure","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"statCommunity = drawStat(data[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"statEmotional = drawStat(data[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"statNature = drawStat(data[2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"statHealth = drawStat(data[3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"statExercise = drawStat(data[4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"statHome = drawStat(data[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = [\n { icon: \"diversity\", value: 29, caption: \"Loss of community and social connection\" },\n { icon: \"heart\", value: 24, caption: \"Emotional devastation\" },\n { icon: \"nature\", value: 23, caption: \"Loss of connection to nature and the lake\" },\n { icon: \"health\", value: 18, caption: \"Negative impacts on mental health and well-being\" },\n { icon: \"exercise\", value: 15, caption: \"Negative impacts on physical health and exercise habits\" },\n { icon: \"home\", value: 9, caption: \"Loss of place attachment and identity\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"iconText = ({\n diversity: await FileAttachment(\n \"diversity_3_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg\"\n ).text(),\n heart: await FileAttachment(\n \"heart_broken_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24 (1).svg\"\n ).text(),\n nature: await FileAttachment(\n \"nature_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg\"\n ).text(),\n health: await FileAttachment(\n \"self_improvement_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg\"\n ).text(),\n exercise: await FileAttachment(\n \"exercise_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg\"\n ).text(),\n home: await FileAttachment(\n \"home_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24 (1).svg\"\n ).text()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"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":5,"value":"fontLoader = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"2","titling":"auto"}