29:null 2a:["$","title",null,{"children":"MaxDiff Analysis | ARussell-23 | Observable"}] 2f:T58c,# MaxDiff Analysis ## Same Scale Ranking MaxDiff (Maximum Difference Scaling) identifies the relative preference of items by asking respondents to choose the best and worst option from small subsets shown at a time. This produces more discriminating preference rankings than traditional rating scales. Each respondent sees multiple sets of items and selects: - **Best** — the most preferred item in this set - **Worst** — the least preferred item in this set The output is a ranked bar chart showing the relative preference score for each item. Scores are normalized so they sum to 100, making them easy to compare across studies. This notebook works with any number of items — simply include all items in your CSV and the chart will update automatically. n=100 respondents is recommended for stable scores. n=50 is a practical minimum. ## 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) * best — 1 if this item was chosen as best in this task, 0 otherwise * worst — 1 if this item was chosen as worst in this task, 0 otherwise 2. Click the Upload CSV button below and select your file 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:T6b7,// Creates a variable named 'scores' — one entry per item // containing best counts, worst counts, and a normalized preference score // sorted from highest to lowest preference scores = { // get all unique item names from the data // d3.group() groups all rows by item name const itemGroups = Array.from( d3.group(data, d => d.item), ([item, rows]) => { // count how many times this item was chosen as best across all respondents const bestCount = rows.filter(d => d.best === 1).length; // count how many times this item was chosen as worst across all respondents const worstCount = rows.filter(d => d.worst === 1).length; // total times this item appeared in any task set const appearances = rows.length; // raw score = best count minus worst count // positive = more often chosen as best than worst // negative = more often chosen as worst than best const rawScore = bestCount - worstCount; return { item, bestCount, worstCount, appearances, rawScore }; } ); // normalize scores so they sum to 100 // this makes scores comparable across studies with different sample sizes // first find the total absolute sum of all raw scores const totalAbsolute = itemGroups.reduce((sum, d) => sum + Math.abs(d.rawScore), 0); // divide each raw score by the total and multiply by 100 const normalized = itemGroups.map(d => ({ ...d, // normalized score rounded to 1 decimal place score: parseFloat((d.rawScore / totalAbsolute * 100).toFixed(1)) })); // sort from highest to lowest score // so the most preferred item appears at the top of the chart return normalized.sort((a, b) => b.score - a.score); }31:T13e1,// Creates the MaxDiff preference ranking bar chart as a single SVG // Bars are sorted from highest to lowest preference score chart = { // ---- STEP 1: FIXED DIMENSIONS ---- const svgWidth = 620; const svgHeight = 80 + scores.length * 50; const marginTop = 60; const marginRight = 60; const marginBottom = 50; const marginLeft = 180; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: SCALES ---- // x scale converts a score value to a pixel width // scores can be negative so we span from the most negative to most positive const minScore = d3.min(scores, d => d.score); const maxScore = d3.max(scores, d => d.score); // add a little padding beyond the max score so bars don't touch the edge const xMax = maxScore * 1.1; const xMin = minScore < 0 ? minScore * 1.1 : 0; // x() converts a score value to a pixel position const x = val => marginLeft + plotWidth * ((val - xMin) / (xMax - xMin)); // x position of the zero line — where bars start from const zeroX = x(0); // bar height and spacing // each item gets a fixed height slot const barHeight = 28; // spacing between bar centers const barSpacing = plotHeight / scores.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 evenly spaced score values d3.ticks(xMin, xMax, 6).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 ZERO LINE ---- // vertical line at score = 0 // bars extend right for positive scores and left for negative scores svg.append("line") .attr("x1", zeroX) .attr("x2", zeroX) .attr("y1", marginTop) .attr("y2", marginTop + plotHeight) .attr("stroke", "#333") .attr("stroke-width", 1.5); // ---- STEP 6: DRAW BARS ---- scores.forEach((d, i) => { // vertical center of this bar const barY = marginTop + i * barSpacing + barSpacing / 2; // bar starts at zero and extends to the score position // for positive scores the bar goes right // for negative scores the bar goes left const barX = d.score >= 0 ? zeroX : x(d.score); const barWidth = Math.abs(x(d.score) - zeroX); // draw the bar rectangle svg.append("rect") .attr("x", barX) .attr("y", barY - barHeight / 2) .attr("width", barWidth) .attr("height", barHeight) .attr("fill", d.score >= 0 ? settings.barColor : "#d04242") // negative bars are red to indicate below average preference .attr("fill-opacity", 0.85); // item name label to the left of the zero line svg.append("text") .attr("x", marginLeft - 100) .attr("y", barY) .attr("dominant-baseline", "middle") .attr("text-anchor", "end") .attr("font-size", "13px") .attr("fill", "#333") .text(d.item); // score value label at the end of each bar // positive scores show to the right of the bar // negative scores show to the left of the bar svg.append("text") .attr("x", d.score >= 0 ? x(d.score) + 5 : x(d.score) - 5) .attr("y", barY) .attr("dominant-baseline", "middle") .attr("text-anchor", d.score >= 0 ? "start" : "end") .attr("font-size", "12px") .attr("fill", "#666") .text(d.score); }); // ---- STEP 7: DRAW X AXIS ---- // horizontal axis line at the bottom of the chart 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 d3.ticks(xMin, xMax, 6).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(settings.axisLabel); // ---- STEP 8: 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 9: RETURN THE SVG ---- return svg.node(); }32:T419,// ---- ALT TEXT GENERATOR ---- altText = { // build one sentence per item describing its score const itemDescriptions = scores.map((d, i) => `"${d.item}" ranks ${i + 1} with a preference score of ${d.score}.` ).join(" "); // list all item names for the opening const itemNames = scores.map(d => `"${d.item}"`).join(", "); const text = `Horizontal bar chart showing MaxDiff preference ranking of ${scores.length} items: ${itemNames}. The horizontal axis shows preference score. Positive scores indicate above average preference, negative scores indicate below average preference. Bars are colored blue for positive scores and red for negative scores. Items are sorted from most to least preferred. ${itemDescriptions}`; return html`

Alt text:

`; }33:[] 2d:{"id":"5127914688791425","slug":null,"title":"MaxDiff Analysis","thumbnail":"82983e90dcff2ac2ff1b42105bc16443bda972503961ba2d153216a069c458ba","access_level":"public","create_time":"$D2026-06-26T18:55:47.182Z","update_time":"$D2026-06-27T03:00:47.920Z","view_time":null,"first_public_time":"$D2026-06-26T20:35:41.643Z","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":48,"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":"MaxDiff Analysis","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":8,"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":10,"value":"// Creates the settings controls for the chart\nviewof settings = Inputs.form({\n\n // chart title\n title: Inputs.text({ label: \"Chart title\", value: \"MaxDiff Preference Ranking\" }),\n\n // x axis label\n axisLabel: Inputs.text({ label: \"Axis label\", value: \"Preference Score\" }),\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":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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 \"maxdiff_chart.svg\",\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// ---- CAPTION GENERATOR ----\ncaption = {\n\n // build a comma separated list of items in ranked order\n const itemList = scores.map(d => `${d.item} (${d.score})`).join(\", \");\n\n const boldSentence = `MaxDiff preference ranking of ${scores.length} items shows ${scores[0].item} as most preferred and ${scores[scores.length - 1].item} as least preferred.`;\n\n const regularSentence = `Scores are normalized to sum to 100 and reflect the relative preference of each item based on best and worst selections across all respondents. Items ranked highest to lowest: ${itemList}.`;\n\n return html`\n

${boldSentence} ${regularSentence}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"