30:T870,md`## TODO: * show a [scatterplot matrix](https://observablehq.com/@d3/scatterplot-matrix) before revealing that the data is triangles * use javascript PCA on the 6d vectors and see if it finds scale and rotation * figure out how to introduce scale and rotation as the "features" (does it remain a mystery that we unveal via AE? ) * latent variables vs confounding variables. the AE learned to represent the data in lower dimensions but it didn't map them to scale and rotation (but some linear combination) * How does UMAP fit in? The embedding it gives of the 6d definitely organizes the data in a way that we might notice scale and rotation. Will it be relevant given PCA/ AE? * is a uniform random distribution ok to make this point? should we instead use some weird bi-modal or a normal distribution? * what does the spiral visualization vs the regular scaterplot tell us about what happens when we apply intuition to our visualization? Spiral seems to be a more "natural" visual mapping of scale and angle, which also gives better visibility of the data than the traditional scatter plot, but may not be as obvious to those used to staring at scatter plots * try 3D plot to show manifold of cone with normal distribution (density on top of 2d manifold) * comparing the 1 random var and 2 random var triangles the datasets look the same until we start using our techniques * what happens when we run cone dataset through spiral encoder? should be able to see that anything that doesn't fall on the spiral doesn't work. or that the further it gets from it the worse it does? ### goal: get to high-dim latent variables go up to 3,4 and maybe 6 dimensions of independent variables underlying. introduce non-geometric things like fill color, line style. Want to be able to learn or "reduce" to representations of other underlying factors, not able to directly visualize them but get at that information. then dim reduction techniques get mixed, first for learning representation then for visualizing representations. can we guide the representation learning to capture only certain factors i care about? modify the cost function to guide it? ` 31:[] 2e:{"title":"Triangle World","cells":[{"id":0,"value":"md`# Triangle World`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`This is a story about what happens when we can see everything there is to know about a dataset. It is a powerful feeling, to see everything, because we usually can't. This series of notebooks hopes to share an appreciation for this feeling.\n\n### Work In Progress\nThe primary purpose of writing these notebooks is to clarify and refine our own knowledge of dimensionality reduction and data visualization techniques. As such we might as well learn together, but the text and structure may change substantially.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"{\n const ctx = DOM.context2d(width, 400);\n let downScale = 0.2;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n let nx = Math.floor(width / (scale + padding));\n // ctx.fillRect(0,0,width, 140)\n for (let i = 0, n = triangles.length / nx; i < 400/scale; i++) {\n for (let j = 0; j < nx; j++) {\n const triangle = triangles[i * nx + j];\n if (triangle)\n renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [\n scale / 2 + j * (scale + padding),\n (scale + padding) * (i + 1)\n ], 1);\n }\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"authors = md`## Authors\n[Ian Johnson](https://observablehq.com/@enjalot) \n[Nathan Crock](https://observablehq.com/@mathnathan) \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"contributors = md`## Contributors\n[Fil](https://observablehq.com/@fil) helped get UMAP working properly and graphics rendering efficiently as well as general advice on the prompt. \n[Kai Chang](https://observablehq.com/@syntagmatic) gave invaluable feedback on the visualizations. \n[Chris Olah](https://observablehq.com/@colah) has taught me a lot of what I needed to write this, and gave valuable editorial feedback. \n[Shan Carter](https://observablehq.com/@shancarter) gave thoughtful feedback on the essence of the article. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"references = md`## References\n\n[Dimensionality reduction with Autoencoder](https://observablehq.com/@jerdak/tensorflow-js-dimensionality-reduction-autoencoder) by [@jerdak](https://observablehq.com/@jerdak) \n[Hello, UMAP](https://observablehq.com/@fil/hello-umap-js) by [@fil](https://observablehq.com/@jerdak) \n[Scatterplot Matrix](https://observablehq.com/@d3/scatterplot-matrix) by [@mbostock](https://observablehq.com/@d3)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"md`# The data\nAllow me introduce you to a dataset.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"points = trianglesToPoints(triangles)","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"html`\n\n\n\n${d3.range(6).map( (d) => `` )}\n\n\n\n${points.slice(0,10).map( (d,i) => {\n return `` + \n d.map( (x) => `` ).join(\"\")\n + `` \n}).join(\"\")}\n\n

index	x_${d}
${i}	${d3.format('.6n')(x)}

\n...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`What can we see when we look at this table? To be fair, it is only a sample of 10 out of ${points.length} data points, but would it help to show a longer table? Probably not. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"md`\nLet's start by pointing out that there are 6 **dimensions** of our data, otherwise known as columns in our table. If we didn't know anything else about them, what they measure, what might we do to get an idea?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"md`In reality, we usually have some idea of what the dimensions of our raw dataset represent. Take for example an image, each pixel could be considered a dimension (or really, each color of each pixel). So even though we know something about the location of the pixel, and we can represent it easily, it's not necessarily easy to say something about a bunch of images.\n\nSo in our dataset each row is actually a triangle, an equilateral triangle to be specific. The 6 columns are really 3 x,y coordinate pairs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"html`\n\n\n\n${d3.range(6).map( (i) => `` )}\n\n\n\n${points.slice(0,10).map( (d,i) => {\n return `` + \n d.map( (x) => `` ).join(\"\")\n + `` \n}).join(\"\")}\n\n

index	${i % 2 ? 'y' : 'x'}_{${Math.floor(i/2)}}
${i}	${d3.format('.6n')(x)}

\n...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"md`Here is the first row of our table where each pair of columns is rendered as an x,y coordinate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"{\n const canvas = DOM.canvas(width, 140)\n const ctx = canvas.getContext(\"2d\")\n \n let downScale = 0.75;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n \n triangles.slice(0,1).forEach(function(triangle, i) {\n let smallt = geometric.polygonScale(triangle, downScale)\n smallt.forEach(function(t,j) {\n ctx.beginPath()\n let x = padding + t[0] + scale / 2 + i * (scale + padding)\n let y = padding + t[1] + scale /2 + padding\n ctx.arc(x, y, 5, 0, 2*Math.PI)\n ctx.fill()\n })\n // renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [\n // scale / 2 + i * (scale + padding),\n // scale /2 + padding\n // ],3, true);\n })\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`Ok, cool, we know what triangles look like, let's render out these first 10 and get a real look at our data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"{\n const canvas = DOM.canvas(width, 140)\n const ctx = canvas.getContext(\"2d\")\n \n let downScale = 0.75;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n \n triangles.slice(0,10).forEach(function(triangle, i) {\n renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [\n scale / 2 + i * (scale + padding),\n scale /2 + padding\n ],3, true);\n })\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`Alright, fair enough, we see some triangles. What we really want to see though is some patterns. What is it about these triangles? How are they similar, how are they different? What are the underlying **features** of this dataset, what kind of distribution brought them into existence?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"{\n await visibility();\n const ctx = DOM.context2d(width, width - 30);\n let downScale = 0.2;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n let nx = Math.floor(width / (scale + padding));\n // ctx.fillRect(0,0,width, 140)\n for (let i = 0, n = triangles.length / nx; i < n; i++) {\n for (let j = 0; j < nx; j++) {\n const triangle = triangles[i * nx + j];\n if (triangle)\n renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [\n scale / 2 + j * (scale + padding),\n (scale + padding) * (i + 1)\n ], 1);\n }\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"triangles = randomTypes[\"triangles1u\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"md`\n### notebook logistics\n\n* ~~move data generation and saving to another notebook~~\n* ~~move AE training to another notebook, enable training multiple models~~\n* ~~make a UMAP notebook that runs with various params?~~\n* make it a collection where the story progresses through the notebooks\n* link to each of the notebooks from here\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`Let's stack them and see what happens`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"{\n await visibility();\n const ctx = DOM.context2d(width, width - 30);\n let downScale = width/baseScale/1.5;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n let nx = Math.floor(width / (scale + padding));\n // ctx.fillRect(0,0,width, 140)\n ctx.globalAlpha = 0.05\n for (let i = 0, n = triangles.length; i < n; i++) {\n const triangle = triangles[i];\n renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [\n width/2,\n width/2\n ], 5);\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"{\n await visibility();\n let baseScale = 100\n const ctx = DOM.context2d(width, width - 30);\n let downScale = width/baseScale/1.5;\n let scale = baseScale * downScale;\n let padding = downScale * basePadding;\n let nx = Math.floor(width / (scale + padding));\n // ctx.fillRect(0,0,width, 140)\n ctx.globalAlpha = 0.05\n for (let i = 0, n = triangles.length; i < n; i++) {\n const triangle = triangles[i];\n geometric.polygonScale(triangle, downScale).forEach(function(t,j) {\n ctx.fillStyle = colors[j]\n ctx.beginPath()\n let x = t[0] + width/2\n let y = t[1] + width/2\n ctx.arc(x, y, 5, 0, 2*Math.PI)\n ctx.fill()\n })\n \n yield ctx.canvas;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"baseScale = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"basePadding = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`### If we knew the underlying distribution of the data (triangle points rotated and scaled) we might map them to 2d in more intuitive ways`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"{\n await visibility();\n return renderRadial(triangles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`### More likely, we would start with a more straightforward scatterplot of scale vs. rotation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"{\n await visibility();\n return renderScatter(triangles)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`### We can generate a dataset of triangles that evenly samples the space created by rotation and scale, this is kind of like plotting a grid of all possible values. What we really want to explore is the underlying distribution of data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"colors = [\"#304ffe\", \"#4DB6AC\", \"#FF4081\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"import {\n randomTypes,\n trianglesToPoints, triangleFromPoints,\n renderTriangle, renderGrid, renderRadial, renderScatter\n} from \"@enjalot/the-sixth-dimension-datasets\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1220,"value":"randomTypes","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"geometric = require(\"geometric\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"tf = require('@tensorflow/tfjs@1.3.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"ModelView = require('tfjs-model-view@0.1.6');","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"seedrandom = require(\"seedrandom@3/seedrandom.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"seed = \"life, the universe and everything\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"seeded = seedrandom(seed)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}