Survey Donut Charts

31:T11bd,chart = { //data const data = [ { value: 92.7, text: "Kept most of the park open during construction" }, { value: 90.6, text: "Harmed few, if any, trees during construction" }, { value: 88.8, text: "Allowed for genuine community input into design" }, { value: 81.8, text: "Fixed the limestone step-stone revetment and promenade" }, { value: 81.1, text: "Provided an economical solution vs. demolition + concrete" }, { value: 80.3, text: "Provided gentle ramps for ADA compliance and water access" } ]; //data accessors const xAccessor = (d) => d.value; const textAccessor = (d) => d.text; //dimensions const dimensions = { width: 650, height: 400, margin: { right: 50, bottom: 50, left: 20, top: 20 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.right - dimensions.margin.left; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; //scales const xScale = d3 .scaleLinear() .domain([0, 100]) .range([0, dimensions.boundedWidth]) .nice(); const yScale = d3 .scaleBand() .domain(data.map((d, i) => i)) .range([0, dimensions.boundedHeight]) .padding(0.2); //row layout const captionHeight = 17.5; const barHeight = yScale.bandwidth() - captionHeight; //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})` ); //gradient const gradient = svg .append("defs") .append("linearGradient") .attr("id", "myGradient"); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", "#ffffff") .attr("stop-opacity", 1); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#E85D1A") .attr("stop-opacity", 0.8); //background bounds .append("rect") .attr("width", xScale(80)) .attr("height", dimensions.boundedHeight) .attr("fill", "url(#myGradient)") .attr("opacity", 0.2); //line bounds .append("line") .attr("x1", xScale(80)) .attr("x2", xScale(80)) .attr("y1", 0) .attr("y2", dimensions.boundedHeight) .style("stroke", "#E85D1A") .style("stroke-width", 4); //bars const barGroups = bounds .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(0, ${yScale(i)})`); //captions const captionLabels = barGroups .append("text") .attr("x", 0) .attr("y", 12) .attr("text-anchor", "start") .style("font-family", "Inter, sans-serif") .style("font-size", "0.85em") .style("font-weight", "600") .style("fill", "#1F2937") .text((d) => textAccessor(d)); const barRects = barGroups .append("rect") .attr("y", captionHeight) .attr("width", (d) => xScale(xAccessor(d))) .attr("height", barHeight) .attr("fill", "#142543"); const barLabels = barGroups .append("text") .attr("x", (d) => xScale(xAccessor(d)) + 5) .attr("y", captionHeight + barHeight / 2) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .style("font-family", "Inter, sans-serif") .style("font-size", ".75em") .style("font-weight", "600") .style("fill", "#142543") .text((d) => `${xAccessor(d)}%`); //axis const yAxisGenerator = d3 .axisBottom() .scale(xScale) .tickValues([0, 80, 100]) .tickFormat((d) => `${d}%`) .tickPadding(10) .offset(0); const yAxis = bounds .append("g") .attr("transform", `translate(0, ${dimensions.boundedHeight})`) .style("font-family", "Inter, sans-serif") .style("font-size", "1em") .style("font-weight", "bold") .call(yAxisGenerator); yAxis.selectAll(".tick line").style("stroke-width", 4); const tick80 = yAxis.selectAll(".tick").filter((d) => d === 80); tick80.select("line").style("stroke", "#E85D1A").style("stroke-width", 4); tick80.select("text").style("fill", "#E85D1A"); const tickEnds = yAxis.selectAll(".tick").filter((d) => d === 0 || d === 100); tickEnds.select("line").style("stroke", "#D4D0CA").style("stroke-width", 2); tickEnds .select("text") .style("font-weight", "normal") .style("fill", "#8C8880"); yAxis.select(".domain").remove(); return svg.node(); }32:[] 2f:{"title":"PPC | Strong Consensus on Preservation","cells":[{"id":0,"value":"# PPC | Strong Consensus on Preservation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"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":113,"value":"fontLoader = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"2","titling":"auto"}