34:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 29:null 2a:["$","title",null,{"children":"TURF Analysis (Top Choice Combinations) | ARussell-23 | Observable"}] 2f:T53f,# TURF Analysis (Top Choice Combinations) ## Optimal Combination Analysis ### Total Unduplicated Reach and Frequency TURF analysis finds the combination of items that reaches the largest number of unique respondents. A respondent is "reached" if at least one item in the combination appeals to them. Use TURF when you need to answer: *"If we can only offer a limited number of items, which combination reaches the most people?"* Common applications include product line optimization, menu design, and content selection. This notebook works with any number of items — simply include all items in your CSV. Note that computation time increases with more items and larger combination sizes. n=100 respondents is a practical minimum for stable reach estimates. ## How to use this notebook 1. Create your CSV with exactly these column names: * respondent_id — a unique row identifier * item — the item name (must match exactly across rows) * appeal — 1 if this respondent finds this item appealing, 0 if not 2. Click the Upload CSV button below and select your file 3. Use the controls below to set the combination size and number of results to show Please choose colors that are visually accessible, test your colors against each other for differentiation with the following tool: https://projects.susielu.com/viz-palette30:T4db,// Creates a variable named 'combinations' — every possible combination // of items at the selected combination size // For example with 8 items and size 3 there are 56 possible combinations combinations = { // get all unique item names from the data const items = Array.from(new Set(data.map(d => d.item))); // helper function that generates all combinations of a given size // from an array of items // this is a recursive function — it calls itself to build up combinations function getCombinations(arr, size) { // base case — if size is 1 return each item as its own combination if (size === 1) return arr.map(item => [item]); const result = []; // loop through each item arr.forEach((item, i) => { // get all combinations of the remaining items at size - 1 // slice(i + 1) ensures we only look at items after the current one // this prevents duplicate combinations like [A,B] and [B,A] const smaller = getCombinations(arr.slice(i + 1), size - 1); // add the current item to the front of each smaller combination smaller.forEach(combo => result.push([item, ...combo])); }); return result; } return getCombinations(items, settings.combinationSize); }31:T8de,// Creates a variable named 'turf' — every combination with its reach and frequency // sorted from highest to lowest reach // then sliced to show only the top N combinations from settings turf = { // build a lookup table of which respondents find each item appealing // this makes the reach calculation much faster than scanning all rows each time // the key is the item name, the value is a Set of respondent IDs who find it appealing const appealMap = new Map(); data.forEach(d => { if (!appealMap.has(d.item)) appealMap.set(d.item, new Set()); if (d.appeal === 1) appealMap.get(d.item).add(d.respondent_id); }); // total number of unique respondents const totalRespondents = new Set(data.map(d => d.respondent_id)).size; // calculate reach and frequency for each combination const results = combinations.map(combo => { // REACH — number of unique respondents reached by at least one item // union all the appeal sets for items in this combination // Set union means a respondent is counted once even if multiple items appeal to them const reachedRespondents = new Set(); combo.forEach(item => { appealMap.get(item)?.forEach(id => reachedRespondents.add(id)); }); const reach = reachedRespondents.size; // REACH PERCENTAGE — reach as a percentage of total respondents const reachPct = parseFloat((reach / totalRespondents * 100).toFixed(1)); // FREQUENCY — average number of items per combination that appeal to each reached respondent // measures how many items in the combination appeal to each reached respondent on average let totalAppeals = 0; reachedRespondents.forEach(id => { combo.forEach(item => { if (appealMap.get(item)?.has(id)) totalAppeals++; }); }); const frequency = parseFloat((totalAppeals / reach).toFixed(2)); return { // join item names with " + " for display combination: combo.join(" + "), // store items as array for reference items: combo, reach, reachPct, frequency }; }); // sort by reach percentage descending // then slice to show only the top N combinations return results .sort((a, b) => b.reachPct - a.reachPct) .slice(0, settings.topN); }32:T10d9,// Creates the TURF analysis bar chart as a single SVG // Shows top combinations ranked by reach percentage chart = { // ---- STEP 1: FIXED DIMENSIONS ---- // height scales with number of combinations shown const svgWidth = 700; const svgHeight = 80 + turf.length * 55; const marginTop = 60; const marginRight = 80; const marginBottom = 50; const marginLeft = 280; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: SCALES ---- // x axis runs from 0 to 100 (percentage) // x() converts a percentage to a pixel position const x = val => marginLeft + plotWidth * (val / 100); // bar height and spacing const barHeight = 30; const barSpacing = plotHeight / turf.length; // ---- STEP 3: CREATE SVG ---- const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .style("background", "white") .style("font-family", "sans-serif") .style("font-size", "12px"); // ---- STEP 4: DRAW GRID LINES ---- // vertical grid lines at every 20% d3.range(0, 101, 20).forEach(val => { svg.append("line") .attr("x1", x(val)) .attr("x2", x(val)) .attr("y1", marginTop) .attr("y2", marginTop + plotHeight) .attr("stroke", "#e0e0e0") .attr("stroke-width", 1); }); // ---- STEP 5: DRAW BARS ---- turf.forEach((d, i) => { // vertical center of this bar const barY = marginTop + i * barSpacing + barSpacing / 2; // draw the bar rectangle // width is proportional to reach percentage svg.append("rect") .attr("x", marginLeft) .attr("y", barY - barHeight / 2) .attr("width", plotWidth * (d.reachPct / 100)) .attr("height", barHeight) .attr("fill", settings.barColor) .attr("fill-opacity", // fade bars slightly for lower ranked combinations // top combination is full opacity, each subsequent bar slightly more transparent 1 - (i * 0.06) ); // combination label to the left of the bar // shows rank number and combination name svg.append("text") .attr("x", marginLeft - 10) .attr("y", barY) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("font-size", "12px") .attr("fill", "#333") .text(`${i + 1}. ${d.combination}`); // reach percentage label at the end of the bar svg.append("text") .attr("x", x(d.reachPct) + 6) .attr("y", barY) .attr("dominant-baseline", "middle") .attr("font-size", "12px") .attr("fill", "#666") .text(`${d.reachPct}%`); // frequency label inside the bar // shows average number of items per respondent svg.append("text") .attr("x", marginLeft + 8) .attr("y", barY) .attr("dominant-baseline", "middle") .attr("font-size", "11px") .attr("fill", "white") .text(`freq: ${d.frequency}`); }); // ---- STEP 6: DRAW X AXIS ---- svg.append("line") .attr("x1", marginLeft) .attr("x2", marginLeft + plotWidth) .attr("y1", marginTop + plotHeight) .attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1); // x axis tick marks and labels at every 20% d3.range(0, 101, 20).forEach(val => { svg.append("line") .attr("x1", x(val)) .attr("x2", x(val)) .attr("y1", marginTop + plotHeight) .attr("y2", marginTop + plotHeight + 5) .attr("stroke", "#333") .attr("stroke-width", 1); svg.append("text") .attr("x", x(val)) .attr("y", marginTop + plotHeight + 18) .attr("text-anchor", "middle") .attr("fill", "#333") .text(`${val}%`); }); // x axis title svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", svgHeight - 8) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", "13px") .text("Total Unduplicated Reach"); // ---- STEP 7: CHART TITLE ---- svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", marginTop - 20) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#333") .text(settings.title); // ---- STEP 8: RETURN THE SVG ---- return svg.node(); }33:[] 2d:{"id":"aba55f0d450eeea5","slug":null,"title":"TURF Analysis (Top Choice Combinations)","thumbnail":"14ba9c01dc00477d738c69492007b9716ca3b0a75a4e37183f4a21635655d5fe","access_level":"public","create_time":"$D2026-06-26T18:59:56.049Z","update_time":"$D2026-06-27T03:01:03.057Z","view_time":null,"first_public_time":"$D2026-06-27T00:11:37.245Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024"},"version":51,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null}],"members":[{"type":"individual","id":"20e4cf6ac4650492","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":null,"role":"editor"},{"type":"team","id":"e6c86544478da089","login":"arussell-23","name":"ARussell-23","avatar_url":"https://avatars-next.observableusercontent.com/8afab74a991063029ac3160ea38fecac0cb44f2bedfed2b819070571df7c84f5","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TURF Analysis (Top Choice Combinations)","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"// Creates a file upload button\nviewof csvFile = Inputs.file({ label: \"Upload CSV\", accept: \".csv\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Creates a variable named 'data' for other cells to reference\n// Reads the uploaded CSV and converts it to a javascript array\ndata = {\n if (csvFile === null) return [];\n const text = await csvFile.text();\n return d3.csvParse(text, d3.autoType);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Creates the settings controls for the analysis\nviewof settings = Inputs.form({\n\n // chart title\n title: Inputs.text({ label: \"Chart title\", value: \"TURF Analysis\" }),\n\n // how many items per combination to evaluate\n // e.g. 3 means find the best 3-item combinations\n combinationSize: Inputs.number({\n label: \"Items per combination\",\n value: 3,\n min: 2,\n max: 6\n }),\n\n // how many top combinations to display\n topN: Inputs.number({\n label: \"Number of top combinations to show\",\n value: 5,\n min: 1,\n max: 20\n }),\n\n // bar color\n barColor: Inputs.color({ label: \"Bar color\", value: \"#4269d0\" })\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Displays the top combinations as a readable table\nInputs.table(turf, {\n columns: [\"combination\", \"reachPct\", \"frequency\"],\n header: {\n combination: \"Combination\",\n reachPct: \"Reach %\",\n frequency: \"Avg Items Per Respondent\"\n },\n width: {\n combination: 300,\n reachPct: 100,\n frequency: 180\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// Creates a download button for the chart\nDOM.download(\n () => new Blob(\n [new XMLSerializer().serializeToString(chart)],\n { type: \"image/svg+xml\" }\n ),\n \"turf_chart.svg\",\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// ---- CAPTION GENERATOR ----\ncaption = {\n\n const boldSentence = `TURF analysis of ${new Set(data.map(d => d.item)).size} items identifies the top ${settings.topN} combinations of ${settings.combinationSize} items by total unduplicated reach.`;\n\n const regularSentence = `The top combination — ${turf[0].combination} — reaches ${turf[0].reachPct}% of respondents with an average frequency of ${turf[0].frequency} items per respondent. Reach represents the percentage of respondents for whom at least one item in the combination is appealing. Frequency represents the average number of items per combination that appeal to each reached respondent.`;\n\n return html`\n

${boldSentence} ${regularSentence}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// ---- ALT TEXT GENERATOR ----\naltText = {\n\n // build one sentence per combination\n const combinationDescriptions = turf.map((d, i) =>\n `Combination ${i + 1}: \"${d.combination}\" reaches ${d.reachPct}% of respondents with a frequency of ${d.frequency}.`\n ).join(\" \");\n\n const text = `Horizontal bar chart showing TURF analysis results. The horizontal axis shows total unduplicated reach from 0% to 100%. Each bar represents one combination of ${settings.combinationSize} items, ranked from highest to lowest reach. Frequency values shown inside each bar indicate the average number of items per combination that appeal to each reached respondent. ${combinationDescriptions}`;\n\n return html`\n

Alt text:

\n \n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 22:null 26:[["$","title","0",{"children":"TURF Analysis (Top Choice Combinations) | ARussell-23 | Observable"}],["$","meta","1",{"property":"og:title","content":"TURF Analysis (Top Choice Combinations)"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by ARussell-23"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/d/aba55f0d450eeea5"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/14ba9c01dc00477d738c69492007b9716ca3b0a75a4e37183f4a21635655d5fe.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"TURF Analysis (Top Choice Combinations)"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by ARussell-23"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/14ba9c01dc00477d738c69492007b9716ca3b0a75a4e37183f4a21635655d5fe.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L34","17",{}]]