Survey Donut Charts

31:T684,//the map itself chart = { //data accessors const zipAccessor = (d) => d.properties.zip; const countAccessor = (d) => d.properties.count; const isMergedAccessor = (d) => zipAccessor(d) === mergedLabel; //dimensions const dimensions = { width: 700, height: 700 }; //projection + path const projection = d3.geoMercator().fitSize( [dimensions.width, dimensions.height], { type: "FeatureCollection", features: finalFeatures } ); const pathGenerator = d3.geoPath(projection); //canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .attr("viewBox", [0, 0, dimensions.width, dimensions.height]); //map regions const regions = svg .selectAll("path") .data(finalFeatures) .join("path") .attr("d", pathGenerator) .attr("fill", (d) => (isMergedAccessor(d) ? "#142543" : colorIndividual(countAccessor(d)))) .attr("stroke", (d) => (isMergedAccessor(d) ? "#E85D1A" : "white")) .attr("stroke-width", (d) => (isMergedAccessor(d) ? 4 : 1)) .style("stroke-linejoin", "round"); regions .append("title") .text((d) => `${zipAccessor(d)}: ${countAccessor(d)} respondents`); //merged-region percent label const [cx, cy] = pathGenerator.centroid(mergedFeature); const mergedPercent = 72; svg .append("text") .attr("x", cx - 8) .attr("y", cy) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("fill", "white") .style("font-family", "Newsreader, serif") .style("font-size", "20px") .style("font-weight", 800) .text(`${mergedPercent}%`); return svg.node(); }32:T55f,legend = { //buckets const buckets = colorIndividual.range().map((c) => { const [lo, hi] = colorIndividual.invertExtent(c); return { color: c, label: `${Math.round(lo)}–${Math.round(hi)}` }; }); buckets.push({ color: "#142543", label: "Combined" }); //data accessors const colorAccessor = (d) => d.color; const labelAccessor = (d) => d.label; //dimensions const dimensions = { width: 320, height: 36, swatchHeight: 15 }; dimensions.cellWidth = dimensions.width / buckets.length; //canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .attr("viewBox", [0, 0, dimensions.width, dimensions.height]); //swatches const swatchGroups = svg .selectAll("g") .data(buckets) .join("g") .attr("transform", (d, i) => `translate(${i * dimensions.cellWidth}, 0)`); swatchGroups .append("rect") .attr("width", dimensions.cellWidth - 2) .attr("height", dimensions.swatchHeight) .attr("fill", (d) => colorAccessor(d)); //labels swatchGroups .append("text") .attr("x", (dimensions.cellWidth - 2) / 2) .attr("y", 31) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-family", "Inter, sans-serif") .style("fill", "#1F2937") .text((d) => labelAccessor(d)); return svg.node(); }33:[{"id":"50a2b35ac94e1a8f212ceedfba34db6284b8a5bbd5356bcbc0e05a1b72d43054bf4266b43c0d64fe6f6449030ac26efb900786b5755bb888525c401461e8bffe","href":"https://static.observableusercontent.com/files/50a2b35ac94e1a8f212ceedfba34db6284b8a5bbd5356bcbc0e05a1b72d43054bf4266b43c0d64fe6f6449030ac26efb900786b5755bb888525c401461e8bffe","name":"promontory_point_zip_counts.json","type":"application/json","lastModified":1788322430017,"size":1987}] 2f:{"title":"PPC | Where Users Come From","cells":[{"id":1,"value":"# PPC | Where Users Come From","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"//color scale for the individual (non-merged) zips only\ncolorIndividual = d3.scaleQuantize(\n d3.extent(\n finalFeatures.filter((f) => f.properties.zip !== mergedLabel),\n (f) => f.properties.count\n ),\n [\"#c6dbef\", \"#9ecae1\", \"#4a92c2\", \"#1b6ca8\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"totalCount = d3.sum(zipCounts, (d) => d.count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"//every non-merged zip, plus the merged shape, ready for the map\nfinalFeatures = [\n ...topojson.feature(topology, {\n type: \"GeometryCollection\",\n geometries: topology.objects.collection.geometries.filter(\n (g) => !mergedZips.has(g.properties.zip)\n )\n }).features,\n mergedFeature\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"//dissolve the call-out zips' shared arcs into one shape\nmergedFeature = ({\n type: \"Feature\",\n geometry: topojson.merge(topology, mergedGeometries),\n properties: {\n zip: mergedLabel,\n count: d3.sum(mergedGeometries, (g) => g.properties.count)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"//a single readable identifier for the combined region\nmergedLabel = [...mergedZips].join(\"/\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"//the individual geometries for the zips being combined\nmergedGeometries = topology.objects.collection.geometries.filter((g) =>\n mergedZips.has(g.properties.zip)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"//build a topology so adjacent zip shapes share arcs — this is what lets us merge them cleanly\ntopology = topojson.topology({ collection: zipsWithCounts })","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"//join respondent counts onto Chicago's zip boundaries, defaulting to 0 where nobody responded\nzipsWithCounts = {\n const countAccessor = (zip) => zipCounts.find((d) => d.zip === zip)?.count ?? 0;\n return {\n type: \"FeatureCollection\",\n features: chicagoZips.features.map((f) => ({\n ...f,\n properties: { ...f.properties, count: countAccessor(f.properties.zip) }\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"//load your uploaded respondent counts\nzipCounts = FileAttachment(\"promontory_point_zip_counts.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"//the zips to combine into one highlighted region\nmergedZips = new Set([\"60615\", \"60637\", \"60649\", \"60653\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"//Chicago's official zip code boundaries\nchicagoZips = fetch(\n \"https://data.cityofchicago.org/resource/unjd-c2ca.geojson?$limit=100\"\n).then((r) => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import * as topojson from \"npm:topojson\";","pinned":false,"hidden":false,"mode":"js"},{"id":4,"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":3,"value":"fontLoader = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"2","titling":"auto"}