32:T51b,# Norms and central tendency ## Toph and Paul pair on a rough illustration of how mean, median, and mode minimize different norms; any errors are definitely Toph’s.

${illo(120)}

A norm is a sort of distance. The most familiar version — the straight-line distance between points, the hypotenuse of a triangle — is the 2 norm, and is given by the Pythagorean theorem. But you can also have 1 norms, 10 norms, or 0.0001 norms. In general, the 2D ${tex`p`}-norm is given by ${tex`(|x|^p + |y|^p)^{1/p}`}. They are related to three common measures of central tendency: the mean, median, and mode. Each minimizes the distance to some numbers, each for a different meaning of “distance”. The mean minimizes the 2-norm; the median minimizes 1-norm; and the mode minimizes the 0-norm (or rather, minimizes the norm as it _approaches_ 0). For example, for the numbers ${tex`[3 \; 3 \; 6]`}, what number ${tex`\mu`} minimizes… - ${tex`(|3 - \mu|^2 + |3 - \mu|^2 + |6 - \mu|^2)^{1/2}`} → the mean, 4 - ${tex`(|3 - \mu|^1 + |3 - \mu|^1 + |6 - \mu|^1)^{1/1}`} → the median, 3 - ${tex`(|3 - \mu|^{0.01} + |3 - \mu|^{0.01} + |6 - \mu|^{0.01})^{1/{0.01}}`} → the mode, 333:Taf4,chart = { const w = Math.min(width, 640); const height = 250; const normData = d3 .range(401) // max possible 347 + some padding .map((v) => ({ v, value: sumNorm(v, norm) })); const margin = { top: 60, right: 30, bottom: 60, left: 40 }; const min = d3.min(normData, (d) => d.value); const minPt = d3.least(normData, (d) => d.value); const measures = [ { name: "Mean", value: mean }, { name: "Median", value: median }, { name: "Mode", value: mode } ]; const x = d3 .scaleLinear() .domain(d3.extent(normData, (d) => d.v)) .range([margin.left, w - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(normData, (d) => d.value)) .range([height - margin.bottom, margin.top]); const xAxis = (g) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(w / 80) .tickSizeOuter(0) ); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(normData.y) ); const svg = d3 .create("svg") .attr("width", w) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 10); svg .append("text") .attr("y", margin.top) .attr("dy", "-1em") .text((norm % 1 ? norm.toFixed(1) : norm) + "-norm"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const measure = svg .selectAll("g.measure") .data(measures) .join("g") .attr("transform", (d) => `translate(${x(d.value)}, ${height - 35})`); measure .append("text") .attr("transform", "rotate(90)") .attr("dx", 2) .attr("dy", "0.3em") .attr("fill", "steelblue") .text((d) => d.name); measure .append("path") .attr("stroke", "steelblue") .attr("d", (d, i) => `M 0 0 V -${margin.bottom - 35}`); const point = svg .selectAll("circle.candidate") .data(normData) .join("circle") .attr("class", "candidate") .attr("cx", (d) => x(d.v)) .attr("cy", (d) => y(d.value)) .attr("r", 1); point .filter((d) => d.value === min) .attr("r", 3) .attr("fill", "steelblue") .raise(); svg.append("text").attr("y", 10).attr("dy", "0.31em").text("Entries"); const set = svg .selectAll("circle.set") .data(data) .join("circle") .attr("class", "set") .attr("stroke", "black") .attr("fill", "none") .attr("cx", (d) => x(d)) .attr("cy", 10) .attr("r", 2) .attr("opacity", 0.5); return svg.node(); }34:T1d8d,illo = size => svg``35:[] 30:{"title":"Norms and central tendency","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"We can see this in the chart below, which shows the entries along the x-axis and the norm (from that point to the vector of all entries relative to that point) along the y-axis. Drag the slider to the left to watch the norm go from mean, to median, to mode.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"viewof norm = Inputs.range([0.001, 3], {label: \"Norm\", value: 0.001, step: 0.001})","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"Inputs.button([\n [\"Set norm close to 0 (mode)\", () => set(viewof norm, 0.001)],\n [\"Set norm to 1 (median)\", () => set(viewof norm, 1)],\n [\"Set norm to 2 (mean)\", () => set(viewof norm, 2)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"Inputs.bind(Inputs.button(\"Regenerate set\"), viewof regenerate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"Note that as the norm goes to zero, it becomes a sort of upside-down histogram with bin size one.","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"---\n## Explanation\n\nWe’ll start by generating some random numbers.\n\nThis function generates a random number between 0 and 1, seeded so that it’s the same every time; with the seed 6, our data happens to turn out to have a single median and a single mode.","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"rand = (reset, d3.randomLcg(6))","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"Then we’ll transform them to a skewed distribution by adding 1, taking the natural logarithm, multiplying by 500, and rounding to the nearest whole number. (The lowest possible value is still ${transform(0)}, but the highest is ${transform(1)}.)","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"transform = n => Math.round(Math.log(1 + n) * 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"So we generate ${data.length} numbers like that:","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"data = (regenerate, d3.range(99).map(() => transform(rand())))","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof regenerate = Inputs.button(\"Regenerate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"In this cases, the values span from ${d3.extent(data).join(\" to \")}. The most frequent value is ${counts[0][0]}, of which there are ${counts[0][1]}:","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"counts = d3.rollups(data, arr => arr.length, d => d).sort((a, b) => b[1] - a[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"It turns out that these measures of central tendency correspond to the values that minimize different norms. So we define a function that sums the distances from a point _v_ to each point in the data:","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"sumNorm = (v, norm) => d3.sum(data.map((d) => Math.abs(d - v) ** norm))","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"And then a function that finds the value that minimizes that sum:","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"minimizeNorm = (norm) => {\n let minI = 0;\n let minNorm = Infinity;\n \n for (let i = 0; i < transform(1); i++) {\n let normSum = sumNorm(i, norm);\n if (normSum <= minNorm) {\n minI = i;\n minNorm = normSum;\n }\n }\n\n return minI;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"[It turns out](https://jsomers.net/blog/it-turns-out) that the mean is the value that minimies the 2 norm:","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"mean = d3.mean(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"minimizeNorm(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"The median is that which minimizes the 1 norm:","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"median = d3.median(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"minimizeNorm(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"And the mode is that which minimizes the norm as the norm approaches 0:","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"mode = counts[0][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"minimizeNorm(0.0001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"---\n## Links\n- https://en.wikipedia.org/wiki/Uniform_norm \n- https://math.stackexchange.com/questions/113270/the-median-minimizes-the-sum-of-absolute-deviations-the-ell-1-norm \n- https://math.stackexchange.com/questions/1458248/how-to-visualize-norm-3-norm-4-distance-between-two-points-in-x-y-plane/1492301\n- https://stats.stackexchange.com/questions/34613/l1-regression-estimates-median-whereas-l2-regression-estimates-mean\n- https://www.johnmyleswhite.com/notebook/2013/03/22/modes-medians-and-means-an-unifying-perspective/ via Adam Pearce","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"---\n## To-do\n\n- Intuition for mean, median, and mode\n- Support multiple modes in generated text\n- Visualize the norm that’s being minimized? Show distances from points to the minimizing central point?\n- Fix y-axis; I think we gotta take the p-root to get the actual norm, it's wrong right now\n- What's the infinity-norm go to?","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"---\n## Scratchpad","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"plotData = [...d3.range(-5, 0).map(d => Math.exp(d)), ...d3.range(1, 10)]\n .map(norm => ({norm, value: minimizeNorm(norm)}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"Plot.dot(plotData, { x: \"norm\", y: \"value\" }).plot({\n x: { nice: true },\n y: { nice: true },\n height: 200\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"// is the midpoint something?\n(d3.max(data) - d3.min(data)) / 2 + d3.min(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}