29:null 2a:["$","title",null,{"children":"Kano Model Analysis | ARussell-23 | Observable"}] 2f:Taf0,# Kano Model Analysis ## Feature Categorization and Satisfaction Mapping The Kano Model categorizes product or service features based on how their presence or absence affects customer satisfaction. Each feature is evaluated with two questions per respondent: - **Functional** — how do you feel if this feature IS present? - **Dysfunctional** — how do you feel if this feature is NOT present? Answers use a 5-point scale: - 1 = Like - 2 = Expect - 3 = Neutral - 4 = Tolerate - 5 = Dislike Features are classified into five categories: - **Attractive (A)** — delights when present but not expected - **Performance (P)** — more is better, satisfaction scales with presence - **Must-be (M)** — expected, causes dissatisfaction when absent - **Indifferent (I)** — presence or absence doesn't matter - **Reverse (R)** — actually preferred absent - **Questionable (Q)** — contradictory answer, excluded from analysis The scatter plot places each feature at its average satisfaction and dissatisfaction coordinates. The summary table shows the category breakdown and dominant category per feature. This notebook works with any number of features — simply include all features in your CSV and the chart and table will update automatically. Note that the scatter plot can become crowded with more than 10 features and may require cleanup in Illustrator. n=30 respondents per feature is a safe minimum. ## How to use this notebook 1. Create your CSV with exactly these column names: * respondent_id — a unique row identifier * feature — the feature name (must match exactly across rows) * functional — answer when feature IS present (1=Like, 2=Expect, 3=Neutral, 4=Tolerate, 5=Dislike) * dysfunctional — answer when feature is NOT present (1=Like, 2=Expect, 3=Neutral, 4=Tolerate, 5=Dislike) 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-palette **A note on dot placement vs color:** Each feature is colored by its dominant Kano category — the category that received the most responses. However, the position of each dot on the chart is determined by the Satisfaction (CS) and Dissatisfaction (CD) coefficients, which reflect the full distribution of all responses rather than just the winning category. As a result, a dot may not sit exactly on its matching reference curve. This is statistically correct — it reflects the real complexity of mixed responses. A feature with a dominant Must-be classification may still have meaningful Attractive responses that pull its CS/CD position away from the Must-be curve. Use the summary table alongside the chart for a complete picture.30:T4cf,// Creates a variable named 'categories' — every row in the dataset // with its Kano category classification added // The Kano evaluation table maps functional + dysfunctional answer combinations // to one of six categories: A, P, M, I, R, Q categories = { // The Kano evaluation table // rows are functional answers (1-5), columns are dysfunctional answers (1-5) // 1=Like, 2=Expect, 3=Neutral, 4=Tolerate, 5=Dislike // A=Attractive, P=Performance, M=Must-be, I=Indifferent, R=Reverse, Q=Questionable const kanoTable = { "1,1": "Q", "1,2": "A", "1,3": "A", "1,4": "A", "1,5": "P", "2,1": "R", "2,2": "I", "2,3": "I", "2,4": "I", "2,5": "M", "3,1": "R", "3,2": "I", "3,3": "I", "3,4": "I", "3,5": "M", "4,1": "R", "4,2": "I", "4,3": "I", "4,4": "I", "4,5": "M", "5,1": "R", "5,2": "R", "5,3": "R", "5,4": "R", "5,5": "Q" }; // map over every row in the dataset and add a category column return data.map(d => ({ // spread operator copies all existing columns from the row ...d, // look up the category using functional and dysfunctional answers as the key // the key is a string like "1,2" or "3,5" category: kanoTable[`${d.functional},${d.dysfunctional}`] || "Q" })); }31:Ta67,// Creates a variable named 'features' — one entry per feature // containing category counts, dominant category, and scatter plot coordinates features = { // get unique feature names from the data // d3.group() groups all rows by feature name // Array.from() converts the Map to an array we can work with const featureGroups = Array.from( d3.group(categories, d => d.feature), ([feature, rows]) => { // count how many responses fell into each category const n = rows.length; const countA = rows.filter(d => d.category === "A").length; const countP = rows.filter(d => d.category === "P").length; const countM = rows.filter(d => d.category === "M").length; const countI = rows.filter(d => d.category === "I").length; const countR = rows.filter(d => d.category === "R").length; const countQ = rows.filter(d => d.category === "Q").length; // find the dominant category — the one with the most responses // excluding Q (questionable) from dominance calculation // Object.entries() converts the counts object to an array of [category, count] pairs // reduce() finds the pair with the highest count const counts = { A: countA, P: countP, M: countM, I: countI, R: countR }; const dominant = Object.entries(counts) .reduce((best, [cat, count]) => count > best[1] ? [cat, count] : best, ["I", 0])[0]; // calculate satisfaction coefficient (CS) // measures how much this feature increases satisfaction when present // formula: (A + P) / (A + P + M + I) // higher = more satisfaction when present const cs = (countA + countP) / (countA + countP + countM + countI) || 0; // calculate dissatisfaction coefficient (CD) // measures how much this feature decreases satisfaction when absent // formula: (P + M) / (A + P + M + I) — shown as negative value // more negative = more dissatisfaction when absent const cd = -1 * (countP + countM) / (countA + countP + countM + countI) || 0; return { feature, n, // category counts as percentages for the summary table A: Math.round(countA / n * 100), P: Math.round(countP / n * 100), M: Math.round(countM / n * 100), I: Math.round(countI / n * 100), R: Math.round(countR / n * 100), Q: Math.round(countQ / n * 100), dominant, // cs and cd are the x,y coordinates on the scatter plot // rounded to 2 decimal places for clean display cs: parseFloat(cs.toFixed(2)), cd: parseFloat(cd.toFixed(2)) }; } ); return featureGroups; }32:Ta9b,// Displays a summary table of Kano category breakdowns per feature // Category names are spelled out in full and color coded by dominant category Inputs.table( // map over features to add a spelled-out category name // and reorder columns for display features.map(d => ({ // feature name gets more space via the width option below feature: d.feature, // spell out the dominant category in full category: { "A": "Attractive", "P": "Performance", "M": "Must-be", "I": "Indifferent", "R": "Reverse", "Q": "Questionable" }[d.dominant], attractive: d.A, performance: d.P, mustBe: d.M, indifferent: d.I, reverse: d.R, questionable: d.Q, satisfaction: d.cs, dissatisfaction: d.cd })), { // column order columns: ["feature", "category", "attractive", "performance", "mustBe", "indifferent", "reverse", "questionable", "satisfaction", "dissatisfaction"], // column header labels header: { feature: "Feature", category: "Dominant Category", attractive: "Attractive %", performance: "Performance %", mustBe: "Must-be %", indifferent: "Indifferent %", reverse: "Reverse %", questionable: "Questionable %", satisfaction: "Satisfaction (CS)", dissatisfaction: "Dissatisfaction (CD)" }, // column widths — feature and category get more space width: { feature: 160, category: 140, attractive: 90, performance: 90, mustBe: 90, indifferent: 90, reverse: 90, questionable: 90, satisfaction: 90, dissatisfaction: 90 }, // color code the category cell by dominant category // format lets us return an HTML element for any cell format: { category: d => { // sample d3.interpolateWarm at the same positions as the chart curves // so table colors exactly match dot and curve colors const colors = { "Attractive": d3.color(d3.interpolateWarm(0.1)).formatHex(), "Performance": d3.color(d3.interpolateWarm(0.35)).formatHex(), "Must-be": d3.color(d3.interpolateWarm(0.65)).formatHex(), "Indifferent": d3.color(d3.interpolateWarm(0.9)).formatHex(), "Reverse": "#888", "Questionable": "#555" }; const color = colors[d] || "#333"; // return an HTML span with a colored background pill return htl.html`${d}`; } } } )33:T1e3d,// Creates the Kano Model scatter plot as a single SVG // Background reference curves show the shape of each category // Feature dots sit clearly on top chart = { // ---- STEP 1: FIXED DIMENSIONS ---- const svgWidth = 620; const svgHeight = 620; const marginTop = 100; const marginRight = 100; const marginBottom = 80; const marginLeft = 80; const plotWidth = svgWidth - marginLeft - marginRight; const plotHeight = svgHeight - marginTop - marginBottom; // ---- STEP 2: SCALES ---- // x axis runs from -1 to 1 (dysfunctional to functional) // y axis runs from -1 to 1 (dissatisfied to satisfied) // these match the classic Kano diagram axes const x = val => marginLeft + plotWidth * ((val + 1) / 2); const y = val => marginTop + plotHeight * (1 - (val + 1) / 2); // ---- STEP 3: COLORS ---- // category colors sampled from d3.interpolateWarm to match the reference curves // sampled at the same positions as the curves: 0.1, 0.35, 0.65, 0.9 const categoryColors = { "A": d3.color(d3.interpolateWarm(0.1)).formatHex(), "P": d3.color(d3.interpolateWarm(0.35)).formatHex(), "M": d3.color(d3.interpolateWarm(0.65)).formatHex(), "I": d3.color(d3.interpolateWarm(0.9)).formatHex(), "R": "#888", "Q": "#555" }; // ---- STEP 4: 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 5: DRAW REFERENCE CURVES ---- // these are illustrative curves — visually accurate to the Kano model // numeric analysis comes from the dots and summary table, not these curves // each curve is defined by a simple set of hand-tuned SVG cubic bezier paths // cubic bezier paths use control points to create smooth predictable curves // format: M startX,startY C cp1x,cp1y cp2x,cp2y endX,endY function drawBezierCurve(pathData, color, label, labelX, labelY) { svg.append("path") .attr("d", pathData) .attr("fill", "none") .attr("stroke", color) .attr("stroke-opacity", 0.8) .attr("stroke-width", 3); svg.append("text") .attr("x", labelX) .attr("y", labelY) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", color) .attr("fill-opacity", 0.9) .text(label); } // helper that converts data coordinates (-1 to 1) to pixel coordinates // makes it easier to specify curve paths in data space const px = val => marginLeft + plotWidth * ((val + 1) / 2); const py = val => marginTop + plotHeight * (1 - (val + 1) / 2); // Sample d3.interpolateWarm at 4 evenly spaced positions // d3.interpolateWarm takes a value 0-1 and returns a color string // d3.color() parses it and .formatHex() converts to hex for consistent use const warmColors = [0.1, 0.35, 0.65, 0.9].map(t => d3.color(d3.interpolateWarm(t)).formatHex() ); // ATTRACTIVE — starts flat near zero, curves sharply upward to the right drawBezierCurve( `M ${px(-0.95)},${py(0.05)} C ${px(-0.3)},${py(0.05)} ${px(0.2)},${py(0.2)} ${px(0.95)},${py(0.95)}`, warmColors[0], "Attractive", px(0.72), py(0.9) ); // PERFORMANCE — straight diagonal through origin drawBezierCurve( `M ${px(-0.95)},${py(-0.85)} C ${px(-0.5)},${py(-0.4)} ${px(0.5)},${py(0.4)} ${px(0.95)},${py(0.85)}`, warmColors[1], "Performance", px(0.85), py(0.48) ); // MUST-BE — drops sharply when absent, barely rises when present drawBezierCurve( `M ${px(-0.95)},${py(-0.95)} C ${px(-0.2)},${py(-0.2)} ${px(0.3)},${py(-0.05)} ${px(0.95)},${py(-0.05)}`, warmColors[2], "Must-Be", px(0.82), py(-0.12) ); // INDIFFERENT — flat line at zero drawBezierCurve( `M ${px(-0.95)},${py(0)} L ${px(0.95)},${py(0)}`, warmColors[3], "Indifferent", px(-0.45), py(-0.1) ); // ---- STEP 6: DRAW AXES ---- // y axis — vertical line through center svg.append("line") .attr("x1", x(0)).attr("y1", marginTop - 20) .attr("x2", x(0)).attr("y2", marginTop + plotHeight + 20) .attr("stroke", "#555") .attr("stroke-width", 1.5); // x axis — horizontal line through center svg.append("line") .attr("x1", marginLeft - 20).attr("y1", y(0)) .attr("x2", marginLeft + plotWidth + 20).attr("y2", y(0)) .attr("stroke", "#555") .attr("stroke-width", 1.5); // axis arrows — small triangles at the ends of each axis // top arrow on y axis svg.append("polygon") .attr("points", `${x(0)},${marginTop - 24} ${x(0) - 5},${marginTop - 14} ${x(0) + 5},${marginTop - 14}`) .attr("fill", "#555"); // bottom arrow on y axis svg.append("polygon") .attr("points", `${x(0)},${marginTop + plotHeight + 24} ${x(0) - 5},${marginTop + plotHeight + 14} ${x(0) + 5},${marginTop + plotHeight + 14}`) .attr("fill", "#555"); // right arrow on x axis svg.append("polygon") .attr("points", `${marginLeft + plotWidth + 24},${y(0)} ${marginLeft + plotWidth + 14},${y(0) - 5} ${marginLeft + plotWidth + 14},${y(0) + 5}`) .attr("fill", "#555"); // left arrow on x axis svg.append("polygon") .attr("points", `${marginLeft - 24},${y(0)} ${marginLeft - 14},${y(0) - 5} ${marginLeft - 14},${y(0) + 5}`) .attr("fill", "#555"); // axis labels // satisfaction label at top of y axis svg.append("text") .attr("x", x(0)) .attr("y", marginTop - 30) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "#333") .text(settings.satisfactionLabel); // functionality label at right of x axis svg.append("text") .attr("x", marginLeft + plotWidth + 30) .attr("y", y(0)) .attr("dominant-baseline", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Functionality"); // ---- STEP 7: DRAW FEATURE DOTS AND LABELS ---- // convert cs/cd coordinates to the -1 to 1 scale // cs ranges 0 to 1 — map to 0 to 1 on y axis // cd ranges -1 to 0 — map to -1 to 0 on x axis // we use cd directly for x and cs directly for y since they already fit the scale features.forEach(d => { // cd is already -1 to 0, use directly as x // cs is already 0 to 1, use directly as y const cx = x(d.cd); const cy = y(d.cs); const color = categoryColors[d.dominant] || "#333"; // white border circle so dots stand out against curves svg.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 9) .attr("fill", "white") .attr("stroke", "White") .attr("stroke-width", 2.5); // filled inner circle svg.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 6) .attr("fill", color) .attr("fill-opacity", 1); // label offset at 45 degrees above and to the right of the dot // increasing both x and y offset by the same amount creates a 45 degree angle // adjust the offset value to control how far the label sits from the dot const offset = 12; svg.append("text") .attr("x", cx + offset) .attr("y", cy - offset) .attr("dominant-baseline", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "#333") .text(d.feature); }); // ---- STEP 8: CHART TITLE ---- svg.append("text") .attr("x", marginLeft + plotWidth / 2) .attr("y", marginTop - 65) .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(); }34:T464,// ---- CAPTION GENERATOR ---- // Builds a formatted caption from the chart settings and feature results // Updates automatically whenever data changes caption = { // build a comma separated list of features and their dominant categories const featureList = features.map(d => { const categoryNames = { "A": "Attractive", "P": "Performance", "M": "Must-be", "I": "Indifferent", "R": "Reverse", "Q": "Questionable" }; return `${d.feature} (${categoryNames[d.dominant]})`; }).join(", "); const boldSentence = `Kano Model analysis of ${features.length} features plots each on satisfaction and dissatisfaction axes based on customer response coefficients.`; const regularSentence = `Features are colored by dominant Kano category. Dot position reflects the full distribution of responses via Satisfaction (CS) and Dissatisfaction (CD) coefficients. Features assessed: ${featureList}.`; return html`

${boldSentence} ${regularSentence}

`; }35:T5fc,// ---- ALT TEXT GENERATOR ---- // Builds detailed alt text for the Kano scatter plot altText = { const categoryNames = { "A": "Attractive", "P": "Performance", "M": "Must-be", "I": "Indifferent", "R": "Reverse", "Q": "Questionable" }; // build a list of all feature names for the opening const featureNameList = features.map(d => `"${d.feature}"`).join(", "); // build one sentence per feature describing its position and category // using cartesian coordinates (x, y) instead of cs/cd coefficient labels const featureDescriptions = features.map(d => { return `"${d.feature}" is classified as ${categoryNames[d.dominant]} and is plotted at coordinates (${d.cd}, ${d.cs}).`; }).join(" "); const text = `Kano Model scatter plot showing ${features.length} product features: ${featureNameList}. The vertical axis shows Satisfaction ranging from -1 to 1. The horizontal axis shows Functionality ranging from -1 to 1. Four reference curves show the characteristic shapes of the Attractive, Performance, Must-be, and Indifferent categories. Each feature is represented by a colored dot positioned at its cartesian coordinates and colored by its dominant Kano category. ${featureDescriptions}`; return html`

Alt text:

`; }36:[{"id":"b3416ecd067273f38d09e760abb852198358b72d26408ba3957eb3b5326ee5fd00a7032d254939fa3a8e92422bc666a7644c3717af80a09f27c51510a6dd7022","href":"https://static.observableusercontent.com/files/b3416ecd067273f38d09e760abb852198358b72d26408ba3957eb3b5326ee5fd00a7032d254939fa3a8e92422bc666a7644c3717af80a09f27c51510a6dd7022","name":"kano_data.csv","type":"text/csv","lastModified":1782502874920.232,"size":4390}] 2d:{"id":"b6ce823c6c586153","slug":null,"title":"Kano Model Analysis","thumbnail":"e3e423184766172619427574443c9a64110e65e38a9383425881f37a3ef7a7e0","access_level":"public","create_time":"$D2026-06-26T18:54:22.457Z","update_time":"$D2026-06-27T03:00:32.471Z","view_time":null,"first_public_time":"$D2026-06-26T18:54:22.457Z","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":77,"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":"Kano Model 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 — appears at the top of the scatter plot\n title: Inputs.text({ label: \"Chart title\", value: \"Kano Model Analysis\" }),\n\n // y axis label for the scatter plot\n satisfactionLabel: Inputs.text({ label: \"Satisfaction axis label\", value: \"Satisfaction\" }),\n\n // x axis label for the scatter plot\n dissatisfactionLabel: Inputs.text({ label: \"Dissatisfaction axis label\", value: \"Dissatisfaction\" })\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":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// Creates a download button for the chart\n// Downloads the chart as a single clean SVG file for Illustrator or Figma\nDOM.download(\n () => new Blob(\n [new XMLSerializer().serializeToString(chart)],\n { type: \"image/svg+xml\" }\n ),\n \"kano_chart.svg\",\n \"Download chart as SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"