2e:null 2f:["$","title",null,{"children":"Van Westendorp's Price Sensitivity Meter (PSM) | dgaitsgo | Observable"}] 34:T5d4,formHTML = { const form = html` ` form.random.addEventListener('click', () => { form.csvText.value = randomCSVData() form.productName.value = randomProductName() }) form.submit.addEventListener('click', () => { try { const csvData = d3.csvParse(`too_cheap,cheap,expensive,too_expensive\n` + form.csvText.value) const productName = form.productName.value const currency = form.currency.value newPSMChart(productName, csvData, currency) mutable nCharts++ } catch (e) { return (e) } }) if (mutable nCharts === 0) { form.random.click() form.submit.click() form.random.value = '' form.submit.value ='' mutable nCharts++ } return (form) }35:T5e3,md` ## About The Van Westendorp survey is a tool for marketers to understand the perceived value of their products, especially if the product is novel and does not have good pricing data from competitors. The survey asks a hypothetical consumer what they'd think is too cheap to pay for the product, a bargain, expensive to pay and too much to pay. With this data in hand, one can bin the customers responses by price as to assign a frequency for each bin, tally up the frequencies (cumulative frequency), then divide the cumulative frequency by the total number of observations, which will give us the y-axis of the target chart - cumulative percentage. Next, we plot the data with the price bins along the x-axis and invert two of the four lines (traditionally the "too cheap" and "cheap" lines), as to look for 4 key intersections that could be used to inform how the product should be priced: 1. Where too cheap and expensive cross - Point of Marginal Cheapness 2. Where too expensive and cheap cross - Point of Marginal Expensiveness 3. Where cheap and expensive cross - Indifference Price Point 4. Where too cheap and too expensive cross - Optimum Price Point Between the Point of Marginal Cheapness and the Point of Marginal Expensiveness, we have a range of acceptable prices for the product. The Optimum price point is optimum in that there are as many respondents who consider the product too cheap as those who consider the product too expensive, balancing the extreme price sensitivities.`36:T2436,function newPSMChart(name, data, currency) { /***********************************************************************/ // Selection /***********************************************************************/ // const cont = d3.create('div').attr('id', 'graph-container') const cont = d3.select('#psm-container') const contNode = cont.node() if (mutable nCharts > 0) { removeAllChildNodes(contNode) } contNode.appendChild(header(name)) /***********************************************************************/ //Data /***********************************************************************/ const colors = { too_cheap : '#008837', cheap : '#a6dba0', expensive : '#c2a5cf', too_expensive : '#7b3294' } const max = d3.max(data.map(dp => Number(dp['too_expensive']))) const paddedMax = max * 1.05 const nRows = data.length const tables = { too_cheap : [], too_expensive : [], expensive : [], cheap: [] } // split prices into bins of 20 const ranges = d3.range(0, paddedMax, 20) //get frequency for each bin Object.keys(tables).map(label => { const currData = data.map(row => Number(row[label])) ranges.map( (r, i) => { const ll = r const ul = ranges[i + 1] || paddedMax const frequency = currData.filter(dp => dp >= ll && dp < ul).length tables[label].push({ range : [ll, ul], frequency }) }) }) //get cumalitive frequency and percentage for each bin Object.keys(tables).map(label => { const currData = tables[label] let frequencies = currData.map(dp => dp.frequency) currData[0].cumPerc = currData[0].frequency / nRows * 100 frequencies.reduce( (acc, cv, i) => { const cumFreq = acc + cv const cumPerc = cumFreq / nRows * 100 currData[i].cumPerc = cumPerc return (acc + cv) }) }) /***********************************************************************/ //Format /***********************************************************************/ const dollarFormat = (d) => '$' + d3.format(',')(d) const moneyFormat = (d) => currency + d3.format(',')(d) const percentFormat = (d) => d + '%' /***********************************************************************/ //Plot Area /***********************************************************************/ const height = 600 const margin = { left : 60, right : 60, bottom : 30, top : 30 } const r = 7 const horizontalMargin = margin.right + margin.left const verticalMargin = margin.bottom + margin.top const plotAreaWidth = width - horizontalMargin const plotAreaHeight = height - verticalMargin const svg = cont .append('svg') .attr('width', width + horizontalMargin) .attr('height', height + verticalMargin) const g = svg.append('g') .attr('class', 'transform-group') .attr('transform', 'translate (' + margin.left + ',' + margin.top + ')') /***********************************************************************/ //Scale /***********************************************************************/ const xScale = d3.scaleLinear() .domain([0, paddedMax]) .range([0, plotAreaWidth]) const invXScale = d3.scaleLinear() .domain([1000, 0]) .range([0, plotAreaWidth]) const yScale = d3.scaleLinear() .domain([0, 100]) .range([plotAreaHeight, 0]) const invYScale = d3.scaleLinear() .domain([100, 0]) .range([plotAreaHeight, 0]) /***********************************************************************/ //Axes /***********************************************************************/ const xAxisG = g.append('g').classed('axis', true) .attr('id', 'xAxis') .attr('transform', 'translate(0,' + plotAreaHeight + ')') .style('font-size', '16px') const yAxisG = g.append('g').classed('axis', true) .attr('id', 'yAxis') .style('font-size', '16px') const xTicks = Math.round(plotAreaWidth / 100) const yTicks = Math.round(plotAreaHeight / 50) const xAxis = d3.axisBottom(xScale) .ticks(xTicks) .tickFormat(moneyFormat) .tickSize(-plotAreaHeight) .tickSizeOuter(0) .tickPadding(16) const yAxis = d3.axisLeft(yScale) .ticks(yTicks) .tickFormat(percentFormat) .tickSize(-plotAreaWidth) .tickSizeOuter(0) .tickPadding(16) xAxisG.call(xAxis) yAxisG.call(yAxis) /***********************************************************************/ // Plotting /***********************************************************************/ const line = d3.line() .curve(d3.curveCardinal.tension(0.5)) .x(dp => { const avg = (dp.range[0] + dp.range[1]) / 2 const pos = xScale(avg) return (pos) }) .y(dp => { const pos = yScale(dp.cumPerc) return (pos) }) const invLine = d3.line() .curve(d3.curveCardinal.tension(0.5)) .x(dp => { const avg = (dp.range[0] + dp.range[1]) / 2 const pos = xScale(avg) return (pos) }) .y(dp => { const pos = invYScale(dp.cumPerc) return (pos) }) Object.keys(tables).forEach( (label, i) => { //lines const table = tables[label] g.append('path') .datum(table) .attr('fill', 'none') .attr('stroke', colors[label]) .attr('opacity', '1.0') .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('stroke-width', 4) .attr('d', label === 'too_cheap' || label === 'cheap' ? invLine : line) .attr('class', `plotLine_${i}`) .attr('id', `line_${label}`) .attr('stroke-dasharray', label === 'cheap' || label === 'expensive' ? 10 : 0) }) /***********************************************************************/ // Annotations /***********************************************************************/ function findIntersectionById(line0_ID, line1_ID) { const l0_d = d3.select(line0_ID).attr('d') const l1_d = d3.select(line1_ID).attr('d') const intersection = intersect(l0_d, l1_d)[0] return (intersection) } const marginalCheapnessPoint = findIntersectionById('#line_expensive', '#line_too_cheap'), marginalExpensiveNessPoint = findIntersectionById('#line_too_expensive', '#line_cheap'), indifferencePoint = findIntersectionById('#line_cheap', '#line_expensive'), optimumPoint = findIntersectionById('#line_too_cheap', '#line_too_expensive') const points = [marginalCheapnessPoint, marginalExpensiveNessPoint, indifferencePoint, optimumPoint] const priceRange = [points[0].x, points[1].x] // Point of Marginal Cheapness and the Point of Marginal Expensiveness g.append('rect') .attr('width', priceRange[1] - priceRange[0]) .attr('height', plotAreaHeight) .attr('x', priceRange[0]) .attr('y', 0) .attr('fill', 'rgba(0.3, 0.3, 0.3, 0.1') const type = d3Annotations.annotationCustomType( d3Annotations.annotationCalloutCurve, {'className':'custom', 'connector':{'type':'curve', 'end':'dot'}, 'note':{'lineType':'vertical', 'align':'middle'}}) const annotations = [ { note : { title : 'Acceptable Price Range', label : moneyFormat(priceRange[0].toFixed(2)) + ' - ' + moneyFormat(priceRange[1].toFixed(2)) }, data: { x : priceRange[0], y : 50 }, className: 'show-bg', dy: 0, dx: 0, type : type, connector: { points: 1, end : 'dot', endScale : 3 } }, { note: { title: 'Indifference Price Point', label : moneyFormat(indifferencePoint.x.toFixed(2)) }, //can use x, y directly instead of data data: { x : indifferencePoint.x, y : indifferencePoint.y }, dy: -50, dx: 70, type : type, connector: { points: 1, end : 'dot', endScale : 3 }}, { note: { title : 'Point of Marginal Expensiveness', label : moneyFormat(marginalExpensiveNessPoint.x.toFixed(2)) }, data: { x : marginalExpensiveNessPoint.x, y : marginalExpensiveNessPoint.y }, dy: -20, dx: 180, type : d3.annotationLabel, connector: { points: 1, end : 'dot', endScale : 3 }, }, { note: { title: 'Point of Marginal Cheapness', label: moneyFormat(marginalCheapnessPoint.x.toFixed(2)) }, //can use x, y directly instead of data data: { x : marginalCheapnessPoint.x, y : marginalCheapnessPoint.y }, dy: -20, dx: -180, type : d3.annotationLabel, connector: { points: 1, end : 'dot', endScale : 3 }, }, { note: { title: 'Optimum Price', label : moneyFormat(optimumPoint.x.toFixed(2)) }, //can use x, y directly instead of data data: { x : optimumPoint.x, y : optimumPoint.y }, dy: -160, dx: -130, type : d3.annotationLabel, connector: { points: 1, end : 'dot', endScale : 5 }, }, ] const makeAnnotations = d3Annotations.annotation() .editMode(false) .notePadding(5) .accessors({ x: d => d.x, y: d => d.y }) .accessorsInverse({ x: d => xScale.invert(d.x), y: d => yScale.invert(d.y) }) .annotations(annotations) g.append('g') .attr('class', 'annotation-group') .call(makeAnnotations) return (contNode) }37:T683,html``38:[] 32:{"id":"3225cf2cc8b539ce","slug":"van-westendorps-price-sensitivity-meter-psm","title":"Van Westendorp's Price Sensitivity Meter (PSM)","thumbnail":"44a5a18fff20d5351640e55f1d4605e8825dff925ba1a5e83a5bc59d396b3068","access_level":"public","create_time":"$D2020-06-14T21:20:06.238Z","update_time":"$D2024-02-14T15:11:00.699Z","view_time":null,"first_public_time":"$D2020-06-15T05:45:55.021Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7975ac2b6aec485b","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":"starter_2024"},"version":513,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null}],"members":[{"type":"individual","id":"e53a932b36973270","login":"dgaitsgo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/96700308e3747f74725b45a16864bb7193903f78917a9486b3a70ea5a1bf5645","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"736c3a47e7ee2733","slug":"marketing","title":"Marketing","owner":{"id":"7975ac2b6aec485b","login":"dgaitsgo","name":""}},"type":"notebook","body":{"title":"Van Westendorp's Price Sensitivity Meter (PSM)","cells":[{"id":0,"value":"md`# Van Westendorp's Price Sensitivity Meter (PSM)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`## Make a PSM Chart\n\nName your product, paste survey data and choose a currency to create a Van Westendorp graph. Make sure the data is a CSV with 4 columns in ascending order for \"too cheap\", \"cheap\", \"expensive\" and \"too expensive\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"chart = {\n return html`

` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function header(productName) {\n return (html`\n

\n\t\t\t\t

\n\t\t\t\t\t

Price sensitivity metrics for:

${productName}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tToo Cheap\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tCheap\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tExpensive\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tToo Expensive\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t

\n `)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"mutable nCharts = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"function removeAllChildNodes(parent) {\n while (parent.firstChild) {\n parent.removeChild(parent.firstChild);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"//https://en.wikipedia.org/wiki/List_of_Black_Mirror_episodes\n//Array.from(document.querySelectorAll('.summary > a')).map(a => a.innerText)\nproductNames = [\n \"The National Anthem\",\n \"Fifteen Million Merits\",\n \"The Entire History of You\",\n \"Be Right Back\",\n \"White Bear\",\n \"The Waldo Moment\",\n \"White Christmas\",\n \"Nosedive\",\n \"Playtest\",\n \"Shut Up and Dance\",\n \"San Junipero\",\n \"Men Against Fire\",\n \"Hated in the Nation\",\n \"USS Callister\",\n \"Arkangel\",\n \"Crocodile\",\n \"Hang the DJ\",\n \"Metalhead\",\n \"Black Museum\",\n \"Striking Vipers\",\n \"Smithereens\",\n \"Rachel, Jack and Ashley Too\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"function randomProductName() {\n return (randomFromList(productNames))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"function randomFromList(list) {\n return (list[Math.round(Math.random() * list.length - 1)])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"//thank you Tom Liao : https://spin.atomicobject.com/2019/09/30/skew-normal-prng-javascript/\nfunction randomCSVData() {\n \n let csv = ``\n const nums = randomData(100, 100)\n for (let i = 0; i < 100; i += 4) {\n csv+= nums\n .slice(i, i+4)\n .map(n => n.toFixed(2))\n .sort()\n .join(',') + '\\n'\n }\n \n return(csv)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"function randomData(max, nPoints) {\n\n let randomNums = []\n for (let i = 0; i < nPoints; i++) {\n randomNums.push(max * randomSkewNormal(Math.random, 5, 1, 0))\n }\n return (randomNums)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function randomNormals(rng) {\n let u1 = 0, u2 = 0;\n //Convert [0,1) to (0,1)\n while (u1 === 0) u1 = rng();\n while (u2 === 0) u2 = rng();\n const R = Math.sqrt(-2.0 * Math.log(u1));\n const Θ = 2.0 * Math.PI * u2;\n return [R * Math.cos(Θ), R * Math.sin(Θ)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"//thank you Tom Liao : https://spin.atomicobject.com/2019/09/30/skew-normal-prng-javascript/\nfunction randomSkewNormal(rng, ξ, ω, α = 0) {\n const [u0, v] = randomNormals(rng);\n if (α === 0) {\n return ξ + ω * u0;\n }\n const 𝛿 = α / Math.sqrt(1 + α * α);\n const u1 = 𝛿 * u0 + Math.sqrt(1 - 𝛿 * 𝛿) * v;\n const z = u0 >= 0 ? u1 : -u1;\n return ξ + ω * z;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"intersect = require('https://bundle.run/path-intersection@2.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3Annotations = require('d3-svg-annotation@2.5.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"