Survey Donut Charts

31:T195d,chart = { //data const data = [ { label: "First Time", lines: ["First", "Time"], value: 28, hardship: 64.0, bold: true, annotation: ["Already a", "majority"] }, { label: "Once a Year", lines: ["Once a", "Year"], value: 31, hardship: 74.3, bold: false }, { label: "Every 3-4 Months", lines: ["Every 3-4", "Months"], value: 49, hardship: 87.2, bold: false }, { label: "Once a Month", lines: ["Once a", "Month"], value: 152, hardship: 97.4, bold: false }, { label: "Once a Week", lines: ["Once a", "Week"], value: 239, hardship: 98.9, bold: true, annotation: ["Biggest group,", "high risk"] }, { label: "Every Day", lines: ["Every", "Day"], value: 148, hardship: 99.3, bold: false } ]; data.forEach((d) => { d.hardshipHeight = d.value * (d.hardship / 100); d.remainder = d.value - d.hardshipHeight; }); //data accessors const labelAccessor = (d) => d.label; const linesAccessor = (d) => d.lines; const valueAccessor = (d) => d.value; const hardshipAccessor = (d) => d.hardship; const boldAccessor = (d) => d.bold; const annotationAccessor = (d) => d.annotation; //fonts + colors const fontHeading = "Newsreader, serif"; const fontBody = "Inter, sans-serif"; const colBlue = "#1C4587"; const colGray = "#D4D0CA"; const colAccent = "#E85D1A"; const colNormal = "#1F2937"; const colGrid = "#E4E4E4"; const dimOpacity = 0.5; //dimensions const dimensions = { width: 540, height: 360, margin: { top: 96, right: 20, bottom: 60, left: 96 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; //scales const xScale = d3 .scaleBand() .domain(data.map(labelAccessor)) .range([0, dimensions.boundedWidth]) .padding(0.35); const yScale = d3 .scaleLinear() .domain([0, d3.max(data, valueAccessor)]) .range([dimensions.boundedHeight, 0]); //canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); const bounds = svg .append("g") .attr("transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})`); //legend, sized/colored to match the y-axis labels, sitting just above the top gridline const legendData = [ { color: colBlue, label: "Hardship" }, { color: colGray, label: "No hardship" } ]; const legendGroups = bounds .selectAll("g.legend-item") .data(legendData) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(${i * 80}, -16)`); legendGroups .append("rect") .attr("width", 8) .attr("height", 8) .attr("fill", (d) => d.color); legendGroups .append("text") .attr("x", 12) .attr("y", 8) .style("font-family", fontBody) .style("font-size", "12px") .style("fill", colNormal) .text((d) => d.label); //y-axis: faint gridlines, no axis line, "Visitors" unit labeled on the top tick const yAxis = bounds .append("g") .call( d3 .axisLeft(yScale) .tickValues([0, 50, 100, 150, 200]) .tickFormat((d) => (d === 200 ? `${d} Visitors` : d)) .tickSize(-dimensions.boundedWidth) ); yAxis.select(".domain").remove(); yAxis.selectAll(".tick line").style("stroke", colGrid); yAxis .selectAll(".tick text") .style("fill", colNormal) .style("font-family", fontBody) .style("font-size", "12px"); //stacked bars (hardship share + remainder), dimmed unless the bar is called out const stacked = d3.stack().keys(["hardshipHeight", "remainder"])(data); const barColor = { hardshipHeight: colBlue, remainder: colGray }; bounds .selectAll("g.series") .data(stacked) .join("g") .attr("class", "series") .attr("fill", (d) => barColor[d.key]) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xScale(labelAccessor(d.data))) .attr("width", xScale.bandwidth()) .attr("y", (d) => yScale(d[1])) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .style("opacity", (d) => (boldAccessor(d.data) ? 1 : dimOpacity)); //hardship % label above each bar bounds .selectAll("text.value") .data(data) .join("text") .attr("class", "value") .attr("x", (d) => xScale(labelAccessor(d)) + xScale.bandwidth() / 2) .attr("y", (d) => yScale(valueAccessor(d)) - 9) .attr("text-anchor", "middle") .style("font-family", fontHeading) .style("font-size", (d) => (boldAccessor(d) ? "14px" : "12px")) .style("font-weight", "bold") .style("fill", colBlue) .style("opacity", (d) => (boldAccessor(d) ? 1 : dimOpacity)) .text((d) => `${hardshipAccessor(d).toFixed(1)}%`); //wrapped, centered category label bounds .selectAll("text.category") .data(data) .join("text") .attr("class", "category") .attr("x", (d) => xScale(labelAccessor(d)) + xScale.bandwidth() / 2) .attr("y", dimensions.boundedHeight + 18) .attr("text-anchor", "middle") .style("font-family", fontBody) .style("font-size", "12px") .style("font-weight", (d) => (boldAccessor(d) ? "bold" : "normal")) .style("fill", "black") .style("opacity", (d) => (boldAccessor(d) ? 1 : dimOpacity)) .each(function (d) { d3.select(this) .selectAll("tspan") .data(linesAccessor(d)) .join("tspan") .attr("x", xScale(labelAccessor(d)) + xScale.bandwidth() / 2) .attr("dy", (_, i) => (i === 0 ? 0 : 14)) .text((t) => t); }); //annotations, above and to the right of the two called-out bars bounds .selectAll("text.annotation") .data(data.filter(annotationAccessor)) .join("text") .attr("class", "annotation") .attr("x", (d) => xScale(labelAccessor(d)) + xScale.bandwidth() / 2 + 16) .attr("y", (d) => yScale(valueAccessor(d)) - 9 - 40) .attr("text-anchor", "start") .style("font-family", fontBody) .style("font-size", "12px") .style("font-style", "italic") .style("font-weight", "bold") .style("fill", colAccent) .each(function (d) { d3.select(this) .selectAll("tspan") .data(annotationAccessor(d)) .join("tspan") .attr("x", xScale(labelAccessor(d)) + xScale.bandwidth() / 2 + 16) .attr("dy", (_, i) => (i === 0 ? 0 : 14)) .text((t) => t); }); return svg.node(); }32:[] 2f:{"title":"PPC | Nearest Residents Visit Most","cells":[{"id":1,"value":"# PPC | Nearest Residents Visit Most","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"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":"$W32","stdlib":"2","titling":"auto"}