Survey Donut Charts

31:T1113,chart = { // data accessors const yearFieldAccessor = (d) => d["What year did you first come to the Point?"]; const parseYear = (raw) => { if (raw == null) return null; const match = String(raw).match(/(19|20)\d{2}/); if (!match) return null; const year = +match[0]; return year >= 1900 && year <= 2025 ? year : null; }; // data: count of respondents per first-visit year const parsedYears = data.map((d) => parseYear(yearFieldAccessor(d))).filter((y) => y != null); const countsByYear = d3.rollup(parsedYears, (v) => v.length, (y) => y); const timelineData = Array.from(countsByYear, ([year, count]) => ({ year, count })).sort( (a, b) => a.year - b.year ); const yearAccessor = (d) => d.year; const countAccessor = (d) => d.count; const minYear = d3.min(timelineData, yearAccessor); const maxYear = d3.max(timelineData, yearAccessor); const peakYear = timelineData.reduce((a, b) => (countAccessor(b) > countAccessor(a) ? b : a)); // years to visually highlight — earliest and peak const highlightYears = new Set([minYear, yearAccessor(peakYear)]); // dimensions const dimensions = { width: 400, height: 400 }; const outerRadius = 130; const maxBubbleRadius = 18; const centerX = dimensions.width / 2; const centerY = 225; // recentered for the 400×400 canvas — was 260 // angle scale: a 270° arc, open at the bottom, sweeping clockwise from lower-left (earliest) to lower-right (most recent) const startAngleDeg = 135; const sweepDeg = 270; const angleScale = d3.scaleLinear().domain([minYear, maxYear]).range([startAngleDeg, startAngleDeg + sweepDeg]); const toRad = (deg) => (deg * Math.PI) / 180; const positionOn = (year, radius) => { const angle = toRad(angleScale(year)); return [centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle)]; }; // radius scale for bubble size — widened range for more contrast between counts const rScale = d3 .scaleSqrt() .domain([0, d3.max(timelineData, countAccessor)]) .range([2, 24]); // canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .style("font-family", "sans-serif") .style("font-size", "14px"); // year tick markers: start, 1960, center, 2000, and end const midYear = Math.round((minYear + maxYear) / 2); const tickYears = [minYear, 1960, midYear, 2000, maxYear]; const tickGroup = svg.append("g"); tickYears.forEach((year) => { const [x1, y1] = positionOn(year, outerRadius + maxBubbleRadius + 6); const [x2, y2] = positionOn(year, outerRadius + maxBubbleRadius + 12); tickGroup .append("line") .attr("x1", x1) .attr("y1", y1) .attr("x2", x2) .attr("y2", y2) .attr("stroke", "#142543") .style("opacity", 0.4); const [lx, ly] = positionOn(year, outerRadius + maxBubbleRadius + 24); tickGroup .append("text") .attr("x", lx) .attr("y", ly) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "10px") .style("fill", "#142543") .style("opacity", 0.6) .text(year); }); // bubbles svg .selectAll("circle") .data(timelineData) .join("circle") .attr("cx", (d) => positionOn(yearAccessor(d), outerRadius)[0]) .attr("cy", (d) => positionOn(yearAccessor(d), outerRadius)[1]) .attr("r", (d) => rScale(countAccessor(d))) .attr("fill", (d) => (highlightYears.has(yearAccessor(d)) ? "#E85D1A" : "#142543")) .attr("stroke", "white") .attr("stroke-width", 1) .style("opacity", (d) => (highlightYears.has(yearAccessor(d)) ? 1 : 0.55)) .append("title") .text((d) => `${yearAccessor(d)}: ${countAccessor(d)} respondent${countAccessor(d) === 1 ? "" : "s"}`); // hero stat, centered inside the open arc svg .append("text") .attr("x", centerX) .attr("y", centerY - 10) .attr("text-anchor", "middle") .style("font-size", "26px") .style("font-weight", "bold") .style("fill", "#142543") .text(`${maxYear - minYear} years`); svg .append("text") .attr("x", centerX) .attr("y", centerY + 13) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#142543") .text("of first-time visitors to the Point"); return svg.node(); }32:[{"id":"70e1cc9d3eb2764412691404a7ed59c44b614be06d000b0692e0772749fcb210a89225ca48e07c97090f23ffa98c9b1a8476190f123475feb7fd479cfac5ad9a","href":"https://static.observableusercontent.com/files/70e1cc9d3eb2764412691404a7ed59c44b614be06d000b0692e0772749fcb210a89225ca48e07c97090f23ffa98c9b1a8476190f123475feb7fd479cfac5ad9a","name":"ppc_data_formatted.csv","type":"text/csv","lastModified":1788327615493,"size":547877},{"id":"46f8c29e5e1ab305b55bccb4b9c2c77de7e20930821169d203d0c553906fa4a5b73cea376ab4abba6e73ae08090646c62ac1c9784fbbfefd8a4a2fb0c3fad9d1","href":"https://static.observableusercontent.com/files/46f8c29e5e1ab305b55bccb4b9c2c77de7e20930821169d203d0c553906fa4a5b73cea376ab4abba6e73ae08090646c62ac1c9784fbbfefd8a4a2fb0c3fad9d1","name":"person_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1788385248172,"size":573}] 2f:{"title":"PPC | Decades of Enjoyment","cells":[{"id":1,"value":"# PPC | Decades of Enjoyment","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"ppc_data_formatted.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"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"}],"files":"$W32","stdlib":"2","titling":"auto"}