2e:null 2f:["$","title",null,{"children":"Principal Components Analysis of Flags | Stephan Schiffels | Observable"}] 34:Ta6e,const euCountries = [ {code: "at", name: "Austria"}, {code: "be", name: "Belgium"}, {code: "bg", name: "Bulgaria"}, {code: "hr", name: "Croatia"}, {code: "cy", name: "Cyprus"}, {code: "cz", name: "Czechia"}, {code: "dk", name: "Denmark"}, {code: "ee", name: "Estonia"}, {code: "fi", name: "Finland"}, {code: "fr", name: "France"}, {code: "de", name: "Germany"}, {code: "gr", name: "Greece"}, {code: "hu", name: "Hungary"}, {code: "ie", name: "Ireland"}, {code: "it", name: "Italy"}, {code: "lv", name: "Latvia"}, {code: "lt", name: "Lithuania"}, {code: "lu", name: "Luxembourg"}, {code: "mt", name: "Malta"}, {code: "nl", name: "Netherlands"}, {code: "pl", name: "Poland"}, {code: "pt", name: "Portugal"}, {code: "ro", name: "Romania"}, {code: "sk", name: "Slovakia"}, {code: "si", name: "Slovenia"}, {code: "es", name: "Spain"}, {code: "se", name: "Sweden"} ]; // Fixed canvas size for consistent feature vectors (3:2 aspect ratio, common for flags) const FLAG_W = 90, FLAG_H = 60; async function loadFlag(code) { const url = `https://flagcdn.com/w160/${code}.png`; const img = new Image(); img.crossOrigin = "anonymous"; await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = url; }); return img; } function toVector(img) { const canvas = document.createElement("canvas"); canvas.width = FLAG_W; canvas.height = FLAG_H; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, FLAG_W, FLAG_H); const data = ctx.getImageData(0, 0, FLAG_W, FLAG_H).data; const vec = new Float64Array(FLAG_W * FLAG_H * 3); let j = 0; for (let i = 0; i < data.length; i += 4) { // there is a fourth value to each Pixel, which is opacity. We don't need it. vec[j++] = data[i]; // R vec[j++] = data[i + 1]; // G vec[j++] = data[i + 2]; // B } return {vec, canvas}; } const flagData = await Promise.all( euCountries.map(async (c) => { const img = await loadFlag(c.code); const {vec, canvas} = toVector(img); const emoji = c.code.toUpperCase().replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)) ) return {...c, emoji, vec, canvas, dataUrl: canvas.toDataURL()}; }) ); display(Inputs.table(flagData, { columns: ["dataUrl", "code", "name", "vec"], header: { dataUrl: "flag", code: "code", name: "name", vec: "pixel vector (first values)" }, format: { dataUrl: (url) => htl.html`

`, vec: (vec) => `{${Array.from(vec.slice(0, 9)).join(", ")}, ...}` } })); 35:T4b6,const n = flagData.length; const m = flagData[1].vec.length; const Z = new Float64Array(n * m); for (let i = 0; i < n; i++) for (let j = 0; j < m; j++) Z[i * m + j] = flagData[i].vec[j] / 256; const Zbar = new Float64Array(m); // average flag for (let j = 0; j < m; j++) for (let i = 0; i < n; i++) Zbar[j] += Z[i * m + j] / n; const X = new Float64Array(n * m); for (let i = 0; i < n; i++) for (let j = 0; j < m; j++) X[i * m + j] = Z[i * m + j] - Zbar[j]; const avgCanvas = document.createElement("canvas"); avgCanvas.width = FLAG_W; avgCanvas.height = FLAG_H; const avgCtx = avgCanvas.getContext("2d"); const avgImageData = avgCtx.createImageData(FLAG_W, FLAG_H); for (let i = 0, j = 0; i < Zbar.length; i += 3, j += 4) { avgImageData.data[j] = Zbar[i] * 256; avgImageData.data[j + 1] = Zbar[i + 1] * 256; avgImageData.data[j + 2] = Zbar[i + 2] * 256; avgImageData.data[j + 3] = 255; // full opacity. } avgCtx.putImageData(avgImageData, 0, 0); display(html`

The average of all 27 EU flags, pixel by pixel

`);36:T57d,OK, not very pretty, but now we can properly define covariances. We represent each flag as a vector of pixel-values. This means we forget about the rectangular shape of the flag and instead consider each of our ${tex`n`} flags to be represented by a long vector of ${tex`m=60\times90\times3=16200`} values. We have ${tex`n`} such vectors, and together they form a matrix, ${tex`\mathbf{Z}`} with ${tex`n`} rows and ${tex`m`} columns, where ${tex`Z_{ij}`} is the pixel value of flag ${tex`i`} at pixel-vector position ${tex`j`}. With this definition, the average flag above is a vector ${tex`\bar{\mathbf{z}}`} with elements ${tex`\bar{z}_j=\sum_i Z_{ij}`}. We can then produce a set of _centered_ flag-vectors, which are the original vectors minus the average flag-vector: ${tex.block`\mathbf{x}=\mathbf{z}-\bar{\mathbf{z}}`} This centered flag vectors also form a matrix ${tex`\mathbf{X}`}, where each row contains the centered pixel-vector of a flag. Covariances between flags are now simply ${tex`\mathbf{M}=\mathbf{X}\mathbf{X}^T`}, with every element ${tex`M_{ij}=\sum_k X_{ik}X_{kj}`} representing how much flag ${tex`i`} and ${tex`j`} _covary_ with each other, i.e. have similar deviations from the mean. The covariance matrix ${tex`\mathbf{M}`} is a measure of pairwise similarity of flags. Because our covariance matrix is small (in our case ${tex`27\times 27`}), we can visualize it nicely:37:T4ef,import dgemm from 'https://cdn.jsdelivr.net/gh/stdlib-js/blas-base-dgemm@esm/index.mjs'; const M = new Float64Array(n * n); dgemm( 'row-major', 'no-transpose', 'transpose', n, n, m, 1.0, X, m, X, m, 0, M, n ); const Mdat = Array.from({ length: n }).flatMap((_, i) => Array.from({length: n}, (_, j) => ( { tickX: flagData[i].emoji, tickY: flagData[j].emoji, tooltipLabelX: flagData[i].name + flagData[i].emoji, tooltipLabelY: flagData[j].name + flagData[j].emoji, value: M[i * n + j] }))) const offDiagonalExtent = d3.extent(Mdat.filter(m => m.tickX != m.tickY).map(m => m.value)); display(Plot.plot({ title: "Pairwise covariance between EU flags", subtitle: "Based on flag pixels", color: {type: "diverging", scheme: "BuRd", legend: true, label: "covariance", domain: offDiagonalExtent}, x: {label: null, axis: null}, y: {label: null, axis: null}, marks: [ Plot.rect(Mdat, { x: "tickX", y: "tickY", fill: "value", channels: {Country_X: "tooltipLabelX", Country_Y: "tooltipLabelY"}, tip: { format: {x: false, y: false} // hide raw emoji x/y, keep the named channels + fill } }), Plot.axisX({fontSize: 16}), Plot.axisY({fontSize: 16}), ] }))38:T514,OK nice, we can see some definite patterns here. For example, pairs of similar flags have large positive covariances, like the two flags on the lower right corner, Slovenia vs. Slovakia, but also Bulgaria vs. Slovenia. Strongly _negatively_ correlated are Cyprus vs. Portugal, which indeed have very little in common and apparently deviate from the mean in an opposing way. Note that the diagonal elements of the covariance matrix are by construction positive and large (because they're effectively just a sum of squares), but not as meaningful here as the off-diagonal elements. ## Eigenvectors Now, with this covariance matrix at hand, we can precisely define what PCA does: We are looking for a low-dimensional representation of each flag in such a way that the pairwise covariances in that lower-dimensional space _most closely match_ the real covariance matrix. As the most trivial case, let's say we are looking for just one dimension. In other words, we're looking to assign _a single number_ ${tex`u_i`} to each flag ${tex`i`}, such that the pairwise products between these numbers ${tex`u_iu_j`} match the pairwise covariances ${tex`M_{ij}`}. So mathematically, we're trying to find a vector ${tex`\mathbf{u}=\{u_j\}`}, which minimizes the squared difference to the real covariance matrix:39:T716,This is what's called a [Rayleigh quotient](https://en.wikipedia.org/wiki/Rayleigh_quotient) and it is maximised by the eigenvector corresponding to the top Eigenvalue for ${tex`\mathbf{M}`}. If you recall that an eigenvector has the property that it maintains its direction under ${tex`\mathbf{M}`}, you can get some intuition here by appreciating that only if ${tex`\mathbf{u}`} is not rotated by ${tex`\mathbf{M}`}, will the product with itself (${tex`\mathbf{u}^T`}) be maximal. You can now ask, what is the optimal representation in not 1, but _n_ dimensions, under the constraint that the resulting _n_ vectors ${tex`\mathbf{u}`} be orthogonal to each other? Cutting short some of the mathematical details, the answer is still given by Eigenvectors, just not only the one for the top Eigenvalue, but for the top-n Eigenvalues of ${tex`\mathbf{M}`}. Each Eigenvector is then scaled by ${tex`\sqrt{\lambda}`}, where ${tex`\lambda`} is the eigenvalue of the respective eigenvector. So that's it. So we just need to compute eigenvalues and vectors of the covariance matrix. One of the most trusted linear algebra libraries out there is [LAPACK](https://de.wikipedia.org/wiki/LAPACK), which is more than 30 years old, was originally written in Fortran, and has since then been ported to many other programming languages, including Javascript. While LAPACK is being implemented in [stdlib.js](https://stdlib.io/docs/api/latest/@stdlib/lapack) in a heroic long-term effort, the specific function that we need is not yet there, so we use a port [from github](https://github.com/rreusser/blahpack/tree/main) and import it here. The resulting plot, where each flag gets placed according to its **top 2 Eigenvectors**, nicely visualises the relationships between the flags, as informed by the covariance matrix above:3a:T925,import dsyevr from 'https://esm.sh/gh/rreusser/blahpack@390b5c32a64611a66703efd4658752ced0722bc7/lapack/base/dsyevr?bundle'; let out = {}; const evals = new Float64Array(n); // eigenvalues, ascending order const evecs = new Float64Array(n * n); // eigenvectors, one per column const ISUPPZ = new Int32Array(2 * n); const Mcopy = Float64Array.from(M); // protect the real M from being destroyed const info = dsyevr( 'compute-vectors', // jobz 'index', // range: select eigenvalues by index 'upper', // uplo n, // N Mcopy, // A (destroyed on exit -- hence the copy) n, // LDA (leading dimension, >= N) 0, 0, // vl, vu (unused since range='index') n - 1, n, // il, iu -- eigenvalues come back ASCENDING, so the // top two eigenvalues are at indices n-1, n 0, // abstol: 0 means "use LAPACK's default tolerance" out, // out.M will hold how many eigenvalues were found evals, 1, // w, strideW evecs, n, // Z, LDZ ISUPPZ, 1, // ISUPPZ, strideISUPPZ null, 1, // WORK, strideWork -- null lets it auto-allocate null, 1 // IWORK, strideIWork -- same ); const plotDat = flagData.map((f, i) => ( { ...f, pc2: evecs[i] * Math.sqrt(evals[0]), pc1: evecs[n + i] * Math.sqrt(evals[1]), } )); const traceM = Array.from({length: n}, (_, i) => M[i * n + i]).reduce((acc, v) => acc + v, 0); const varExplained = [0, 1].map(i => evals[1 - i] / traceM); const pc1Label = `PC1 (${(varExplained[0] * 100).toFixed(1)}% variance explained)`; const pc2Label = `PC2 (${(varExplained[1] * 100).toFixed(1)}% variance explained)`; display(Plot.plot({ width: 900, height: 700, title: "Principal Components Analysis of Flags", subtitle: `First two PCs explain ${(varExplained[0] * 100).toFixed(1)}% and ${(varExplained[1] * 100).toFixed(1)}% of variance`, x: {label: pc1Label}, y: {label: pc2Label}, marks: [ Plot.image(plotDat, { x: "pc1", y: "pc2", src: "dataUrl", width: 45, height: 30, preserveAspectRatio: "none" }), Plot.text(plotDat, { x: "pc1", y: "pc2", text: "code", dy: 28, fontSize: 9, fill: "black" }) ] }))3b:Ta0b,import dgemv from 'https://cdn.jsdelivr.net/gh/stdlib-js/blas-base-dgemv@esm/index.mjs';// Pixel-space loading vectors v1 (PC1) and v2 (PC2), via v = X^T u / sqrt(lambda) const u1 = evecs.slice(n, 2 * n); // eigenvector for the top eigenvalue -> PC1 const u2 = evecs.slice(0, n); // eigenvector for the 2nd eigenvalue -> PC2 const lambda1 = evals[1]; const lambda2 = evals[0]; const v1 = new Float64Array(m); const v2 = new Float64Array(m); dgemv( 'row-major', 'transpose', n, m, 1.0 / Math.sqrt(lambda1), X, m, u1, 1, 0, v1, 1) dgemv( 'row-major', 'transpose', n, m, 1.0 / Math.sqrt(lambda2), X, m, u2, 1, 0, v2, 1) // Reconstruct a "predicted" flag at coordinates (a, b) in PC1/PC2 space: // zbar + a * v1 + b * v2, clipped back into the [0, 255] pixel range. function reconstructFlag(a, b) { const canvas = document.createElement("canvas"); canvas.width = FLAG_W; canvas.height = FLAG_H; const ctx = canvas.getContext("2d"); const imageData = ctx.createImageData(FLAG_W, FLAG_H); for (let i = 0, j = 0; i < m; i += 3, j += 4) { const r = Zbar[i] + a * v1[i] + b * v2[i]; const g = Zbar[i + 1] + a * v1[i + 1] + b * v2[i + 1]; const bl = Zbar[i + 2] + a * v1[i + 2] + b * v2[i + 2]; imageData.data[j] = Math.max(0, Math.min(255, r * 256)); imageData.data[j + 1] = Math.max(0, Math.min(255, g * 256)); imageData.data[j + 2] = Math.max(0, Math.min(255, bl * 256)); imageData.data[j + 3] = 255; } ctx.putImageData(imageData, 0, 0); return canvas; } // Use the actual observed range of scores among the 27 EU flags as the "extreme" positions const [pc1Min, pc1Max] = d3.extent(plotDat, d => d.pc1); const [pc2Min, pc2Max] = d3.extent(plotDat, d => d.pc2); const gridData = []; for (const b of [pc2Max, 0, pc2Min]) { for (const a of [pc1Min, 0, pc1Max]) { gridData.push({ a, b, dataUrl: reconstructFlag(a, b).toDataURL(), label: `(${a.toFixed(0)}, ${b.toFixed(0)})` }); } } const reconstructionPlot = display(Plot.plot({ width: 640, height: 640, title: "Predicting flags from PC1/PC2 coordinates", subtitle: "The average flag (center), plus reconstructions at the observed extremes of PC1 and PC2", x: {label: pc1Label, domain: [pc1Min * 1.4, pc1Max * 1.4]}, y: {label: pc2Label, domain: [pc2Min * 1.4, pc2Max * 1.4]}, marks: [ Plot.ruleX([0], {stroke: "#ccc"}), Plot.ruleY([0], {stroke: "#ccc"}), Plot.image(gridData, { x: "a", y: "b", src: "dataUrl", width: 80, height: 53, preserveAspectRatio: "none" }) ] }));3c:T654,const newFlags = [ {code: "ch", name: "Switzerland"}, {code: "in", name: "India"}, {code: "gb", name: "United Kingdom"} ]; const newFlagData = await Promise.all(newFlags.map(async (f) => { const img = await loadFlag(f.code); const {vec, canvas} = toVector(img); return {...f, vec, canvas, dataUrl: canvas.toDataURL()}; })); const k = newFlagData.length; const Vproj = new Float64Array(2 * m); Vproj.set(v1, 0); Vproj.set(v2, m); const R = new Float64Array(k * m); for (let i = 0; i < k; i++) for (let j = 0; j < m; j++) R[i * m + j] = newFlagData[i].vec[j] / 256 - Zbar[j]; const scores = new Float64Array(2 * k); // row 0 = pc1's, row 1 = pc2's dgemm('row-major', 'no-transpose', 'transpose', 2, k, m, 1.0, Vproj, m, R, m, 0, scores, k); const newFlagResults = newFlagData.map((f, i) => ({ ...f, pc1: scores[i], pc2: scores[k + i] })); display(Plot.plot({ width: 900, height: 700, title: "Projecting three non-EU flags onto the EU flags' PCA", subtitle: "Switzerland, India and the United Kingdom", x: {label: pc1Label}, y: {label: pc2Label}, marks: [ Plot.image(plotDat, { x: "pc1", y: "pc2", src: "dataUrl", width: 45, height: 30, preserveAspectRatio: "none", opacity: 0.3 }), Plot.image(newFlagResults, { x: "pc1", y: "pc2", src: "dataUrl", width: 70, height: 47, preserveAspectRatio: "none" }), Plot.text(newFlagResults, { x: "pc1", y: "pc2", text: "name", dy: 33, fontSize: 12, fontWeight: "bold", fill: "#a5490a" }) ] })); 3d:[] 32:{"id":"efef1c0014ff892c","slug":"pca-of-flags","title":"Principal Components Analysis of Flags","thumbnail":"2b72e9eac8f7ebf7b650ec66bc4b00a3adbc140ad0cf4ed67fd1863c71109849","access_level":"public","create_time":"$D2026-08-05T14:14:10.987Z","update_time":"$D2026-09-14T19:27:02.503Z","view_time":null,"first_public_time":"$D2026-08-24T07:57:20.728Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"48ba1e88623b6a86","login":"stschiff","name":"Stephan Schiffels","avatar_url":"https://avatars-next.observableusercontent.com/863823ada38c58ba7f4a2f5b9a3a3afaf79d295ec58a949418f22f48c94e2da5","tier":"pro_2024"},"version":755,"publish_version":755,"role":null,"authored":false,"authors":[{"type":"individual","id":"228aaec6cf9785d6","login":"stephan-schiffels","name":"Stephan Schiffels","avatar_url":"https://avatars-next.observableusercontent.com/229efd5356ed4cb3e1c62bbdd5444bd5e6c51f55cdf4810a675e4c7992a94124","tier":null}],"members":[{"type":"team","id":"48ba1e88623b6a86","login":"stschiff","name":"Stephan Schiffels","avatar_url":"https://avatars-next.observableusercontent.com/863823ada38c58ba7f4a2f5b9a3a3afaf79d295ec58a949418f22f48c94e2da5","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Principal Components Analysis of Flags","cells":[{"id":1,"value":"# Principal Components Analysis of Flags\n## A tutorial for one of the most important dimension-reduction techniques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Principal Components Analysis (PCA) is an important dimension-reduction technique, which enables visualising high-dimensional data into lower dimensions. A prime example is genetics, where an individual is represented by millions of genotypes, and PCA enables us to arrange hundreds and even thousands of individuals on a genetic map, which then exposes patterns of ancestry and relatedness.\n\nTo illustrate how PCA works, we here choose an example that I prepared for a class once: Instead of abstract genotypes, we use images of flags.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## From Flags to RGB-pixels\n\nTo use a manageable collection of flags, we choose the 27 EU member states, and load the flag images from [flagcdn.com](https://flagcdn.com/) via their country codes, and transform them into 60x90 (landscape) Color Pixel (R,G,B), using Javascript canvas (as always with Observable Notebooks, you can view the underlying code by clicking on the orange pen in the lower right of the page and then clicking on the appearing bar to the left of the cell you would like to inspect):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":false,"hidden":true,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Notice how the first RGB pixel triples for Belgium are all 0, because of the black in the first vertical stripe, the first values for Bulgaria are all 255 for white, and for Croatia we have triples of `(255, 0, 0)` showing red pixels (and zero for green and blue).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"## Covariances\n\nThe first step of analysing the pixel-wise flag data is to consider how similar the flags are to one another. For Principal Component Analysis, we need to specifically consider the covariance between the pixel-vectors. And in order to do this, we first need to consider the _average flag_, which is a pixel vector which contains literally the average value of all the flags. It's fun to actually display this and see what happens:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$35","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$37","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"\\begin{aligned}\n&\\argmin_{\\|\\mathbf{u}\\|=1}\\sum_{i,j}\\left(M_{ij}-u_iu_j\\right)^2\\\\\n=&\\argmin_{\\|\\mathbf{u}\\|=1}\\sum_{i,j}\\left(M_{ij}^2-2M_{ij}u_iu_j+(u_i u_j)^2\\right)\\\\\n\\end{aligned}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Now the first and last term in the bracket are fixed (${tex`\\mathbf{M}`} is not up for negotiation and ${tex`\\mathbf{u}`} is a unit vector of fixed length), so we can finally turn this around to a maximum:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"=\\argmax_{\\|\\mathbf{u}\\|}\\mathbf{u}^T\\mathbf{M}\\mathbf{u}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$3a","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Note that the Eigenvalues conveniently can be used to compute the fraction of variance explained by this lower dimensional space (in our case it's ${((varExplained[0] + varExplained[1]) * 100).toFixed(1)}% of the total variance from the covariance matrix). I will skip the math for this part, but you can check it out in the code underlying this Figure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"## Understanding the directions in pixel-space\n\nWe can gain more understanding on what's happening here by trying to understand what the lower-dimensional representation of the data means in terms of pixel-space. So far we have operated purely on the pairwise sample-covariance matrix ${tex`\\mathbf{M}=\\mathbf{X}\\mathbf{X}^T`}. Specifically, we have determined Eigenvectors of that matrix. Let's consider the top Eigenvector ${tex`\\mathbf{u}`}, with ${tex`\\mathbf{M}\\mathbf{u}=\\lambda\\mathbf{u}`} (property of Eigenvectors). Let's now multiply both sides with ${tex`\\mathbf{X}^T`} and put in some brackets to expose a new pattern:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"\\begin{aligned}\n\\mathbf{X}^T\\mathbf{M}\\mathbf{u}&=\\mathbf{X}^T\\lambda\\mathbf{u}\\\\\n\\mathbf{X}^T(\\mathbf{X}\\mathbf{X}^T)\\mathbf{u})&=\\mathbf{X}^T\\lambda\\mathbf{u}\\\\\n(\\mathbf{X}^T\\mathbf{X})(\\mathbf{X}^T\\mathbf{u})&=\\lambda(\\mathbf{X}^T\\mathbf{u})\\\\\n\\end{aligned}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"This now shows that ${tex`\\mathbf{X}^T\\mathbf{u}`} is itself an Eigenvector of another matrix, namely ${tex`\\mathbf{G}=\\mathbf{X}^T\\mathbf{X}`}, with the same Eigenvalue ${tex`\\lambda`}. Matrix ${tex`\\mathbf{G}`} is _also_ a covariance matrix, but not between pairs of samples, but between pairs of pixels. Eigenvectors of covariance matrices always can be interpreted as a linear mixture. In the case of the flag-by-flag covariance matrix ${tex`\\mathbf{C}`}, the top Eigenvectors represent mixes (coordinates) of _flags_ such that they maximize variation between them in low-dimensional space. In the case of our pixel-covariance matrix ${tex`\\mathbf{G}`} as defined above, the top Eigenvectors represent mixes of _pixels_ (sometimes called weights, or loadings), which drive most of the variation across the observed flags.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"To make this concrete, we can run the relationship in reverse: instead of projecting flags down onto PC1/PC2, we can pick *any* point in PC1/PC2 space and reconstruct the pixel pattern it corresponds to. In pixel space, PC positions (so-called scores) are given by ${tex`\\mathbf{X}\\mathbf{v}`}, so a projection of the centered data _onto_ the Eigenvectors, with ${tex`\\mathbf{v}=\\mathbf{X}^T\\mathbf{u}/\\sqrt{\\lambda}`} is the (unit-length) pixel-space loading derived above. We can invert this: given target coordinates ${tex`(a,b)`} on PC1 and PC2, the \"predicted\" flag is\n\n${tex.block`\\hat{\\mathbf{z}}(a,b)=\\bar{\\mathbf{z}}+a\\,\\mathbf{v}_1+b\\,\\mathbf{v}_2`}\n\ni.e. the average flag ${tex`\\bar{\\mathbf{z}}`} plus a bit of the PC1 loading pattern and a bit of the PC2 loading pattern. Below we do exactly this for a 3×3 grid: the center is the average flag (0,0), the outer points use the actual min/max scores observed among the 27 EU flags, and the corners mix both directions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$3b","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"Since we only kept the top two dimensions, this is a *rank-2 approximation* — it won't perfectly recreate any single real flag (that would need all ${n} dimensions), but it should recover the dominant color blocks. Pick a country below to compare its real flag against the reconstruction from just its (PC1, PC2) score:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"const compareCountry = view(Inputs.select(flagData.map(f => f.name), {label: \"Country\", value: \"Sweden\"}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"const compareIdx = flagData.findIndex(f => f.name === compareCountry);\nconst compareFlag = plotDat[compareIdx];\nconst compareRecon = reconstructFlag(compareFlag.pc1, compareFlag.pc2);\n\ndisplay(html`

actual ${compareFlag.emoji} ${compareFlag.name}

reconstructed from (PC1=${compareFlag.pc1.toFixed(1)}, PC2=${compareFlag.pc2.toFixed(1)})

`);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"So you can see that our low-dimensional representation is far from being perfect. And for some flags it works a lot better than for others. Check out Netherlands, for example, which very well fits its 2-dimensional representation, whereas Estonia or Germany for example fit relatively poorly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Projecting new flags\n\nWe can use the pixel-space representation of PCA (the \"loadings\" vectors ${tex`\\mathbf{v}_1`} and ${tex`\\mathbf{v}_2`}), to _project_ new flags onto the existing PCA. These projections are just dot products: For a given new flag (pixel-vector ${tex`\\mathbf{z}^*`}), subtract the average flag ${tex`\\bar{\\mathbf{z}}`} to get a centered pixel vector ${tex`\\mathbf{x}^*=\\mathbf{z}^*-\\bar{\\mathbf{z}}`}, and then compute ${tex`a^*=\\mathbf{v}_1^T\\mathbf{x}^*`} and ${tex`b^**=\\mathbf{v}_2^T\\mathbf{x}^*`}.\n\nWe here pick three additional flags: Switzerland, India and the UK:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$3c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"The three flags fall intuitively close to other flags which look a like (and the UK flag looks a bit alike many flags, which is why it falls close to the center of the plot).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"## Conclusion\nThis concludes the little exploration of PCA with flags. To me, these examples helped a lot to build intuition for what PCA is actually doing under the hood. And it's cool to see how all this computation can be done in the browser.\n\n## References\nThe flag data comes from [flagcdn](https://flagcdn.com)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2","titling":"auto"}} 33:"$32:body"