31:T409,function renderRadial(triangles, options) { if(!options) options = {} let baseSize = options.baseSize || width let baseScale = options.baseScale || 100 let downScale = options.downScale || 0.2 console.log("base", baseSize, baseScale, downScale) const canvas = DOM.canvas(baseSize, baseSize) const ctx = canvas.getContext("2d") let scale = baseScale * downScale let padding = downScale * basePadding let nx = Math.floor(baseSize / (scale + padding)) let radscale = d3.scaleLinear() .domain([0, d3.max(triangles, (d) => d.scale)]) .range([0, baseSize/2 - basePadding]) // ctx.fillRect(0,0,width, 140) triangles.forEach(function(triangle, i) { // let rad = (height/2 - padding * 4) * (triangle.scale/baseScale) renderTriangle(ctx, geometric.polygonScale(triangle, downScale), [ baseSize/2 + Math.cos(triangle.angle * Math.PI/180) * radscale(triangle.scale), baseSize/2 + Math.sin(triangle.angle * Math.PI/180) * radscale(triangle.scale)], 1) }) return canvas }32:[] 2f:{"title":"Triangle World: Datasets","cells":[{"id":0,"value":"md`# Triangle World: Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"viewof t = select(Object.keys(randomTypes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"md`### random samples in a grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"{\n await visibility();\n return renderGrid(triangles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"md`### polar coordinates using scale and rotation of each triangle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"{\n await visibility();\n return renderRadial(triangles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"md`### scale vs angle scatter plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"{\n await visibility();\n return renderScatter(triangles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"md`### table of datapoints`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"html`\n\n\n\n${d3.range(6).map( (d) => `` )}\n\n\n\n${trianglesToPoints(triangles).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":1391,"value":"baseSize = width/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1404,"value":"downScale = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"baseScale = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"basePadding = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"md`## Data Generating Distribution`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"tex`ε \\sim µ(0,1) \\newline\ns = 10 + 90*ε \\newline\nθ = 360 * ε\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"randomu = d3.randomUniform.source(seeded)(0, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"randomn = d3.randomNormal.source(seeded)(0, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"makeTriangle = function(rotation, scale) {\n // the original way i did it for ease of thinking\n // let vertices = [ [0,0], [1,0], [Math.cos(60 * Math.PI/180), Math.sin(60 * Math.PI/180)] ]\n // want the centroid to be on 0,0\n let vertices = [ \n [-0.5, -Math.sin(60 * Math.PI/180)/2], \n [0.5, -Math.sin(60 * Math.PI/180)/2], \n [0, Math.sin(60 * Math.PI/180) / 2] \n ]\n let centroid = geometric.polygonCentroid(vertices)\n let rotated = geometric.polygonRotate(vertices, rotation, centroid)\n let scaled = geometric.polygonScale(rotated, scale)\n scaled.angle = rotation\n scaled.scale = scale\n return scaled\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"md`## Various distributions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"triangles1u = d3.range(1500).map(function(i) {\n // it can be interesting to play with uniform vs normal, as well as single random variable vs independent\n let z = randomu()\n // let z2 = Math.abs(randomu())\n return makeTriangle(360 * z * 7, 10 + z * 90)\n// return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomUniform.source(seeded)(10, 100)())\n // return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomNormal.source(seeded)(45, 15)())\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"triangles2u = d3.range(1500).map(function(i) {\n return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomUniform.source(seeded)(10, 100)())\n // return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomNormal.source(seeded)(45, 15)())\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"triangles1u1n = d3.range(1500).map(function(i) {\n // return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomUniform.source(seeded)(10, 100)())\n return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomNormal.source(seeded)(45, 15)())\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1432,"value":"triangles1n1u = d3.range(1500).map(function(i) {\n // return makeTriangle(d3.randomUniform.source(seeded)(0, 360)(), d3.randomUniform.source(seeded)(10, 100)())\n return makeTriangle(d3.randomNormal.source(seeded)(180, 60)(), d3.randomUniform.source(seeded)(10, 100)())\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"triangles2n = d3.range(1500).map(function(i) {\n return makeTriangle(d3.randomNormal.source(seeded)(180, 360)(), d3.randomNormal.source(seeded)(45, 15)())\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"randomTypes = {\n return {triangles1u, triangles2u, triangles1u1n, triangles1n1u, triangles2n}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1303,"value":"triangles = randomTypes[t]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1309,"value":"md`# Data transformation functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"trianglesToPoints = function(triangles) {\n return triangles.map(function(d) {\n let e = []\n d.forEach(function(v) { \n e.push(v[0])\n e.push(v[1])\n })\n return e\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"triangleFromPoints = function(points) {\n return [\n [points[0], points[1]],\n [points[2], points[3]],\n [points[4], points[5]],\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"normalize = function(embeddings) {\n let subs = embeddings.map(function(d) {\n let mean = d3.mean(d)\n return d.map(function(p,i) { return p - mean })\n })\n let mags = embeddings.map(function(d) {\n return Math.sqrt(d3.sum(d, function(p) { return p*p }))\n })\n let max = d3.max(mags)\n return subs.map(function(d) {\n return d.map(function(p,i) { return p/max})\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"normalizedTriangles = function(normalized, triangles) {\n normalized.map(function(t,i) { \n let triangle = triangleFromPoints(t.map(function(p) { \n return p * 100\n }))\n triangle.scale = triangles[i].scale\n triangle.angle = triangles[i].angle\n return triangle\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"md`# Rendering functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"function* renderGrid(triangles, options) {\n if(!options) options = {}\n let baseSize = options.baseSize || width\n let baseScale = options.baseScale || 100\n let downScale = options.downScale || 0.2\n \n const ctx = DOM.context2d(baseSize, baseSize - 30);\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":218,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"function renderScatter(triangles, options) {\n if(!options) options = {}\n let baseSize = options.baseSize || width\n let baseScale = options.baseScale || 100\n let downScale = options.downScale || 0.2\n \n const canvas = DOM.canvas(baseSize, baseSize)\n const ctx = canvas.getContext(\"2d\")\n \n let scale = baseScale * downScale\n let padding = downScale * basePadding\n let nx = Math.floor(width / (scale + padding))\n \n\n\n let sScale = d3.scaleLinear()\n .domain(d3.extent(triangles, (d) => d.scale))\n .range([padding, baseSize - padding])\n let aScale = d3.scaleLinear()\n .domain([0, d3.max(triangles, (d) => d.angle)])\n .range([baseSize - padding, padding])\n\n \n // ctx.fillRect(0,0,width, 140)\n triangles.forEach(function(triangle, i) {\n renderTriangle(ctx, geometric.polygonScale(triangle, downScale), \n [sScale(triangle.scale), aScale(triangle.angle)],\n 1)\n })\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"renderTriangle = function(ctx, triangle, offset, strokeWidth, monochrome) {\n let x = offset[0]\n let y = offset[1]\n // blues\n // let colors = [\"#004ba0\", \"#1976d2\", \"#63a4ff\"]\n // blue-green\n // let colors = [\"rgb(35,139,69)\", \"rgb(65,174,118)\", \"rgb(153,216,201)\"]\n // material colors\n let color = colors\n if(monochrome) {\n color = [\"#111\", \"#111\", \"#111\"]\n }\n ctx.lineWidth = strokeWidth ? strokeWidth: 3\n \n let t = triangle\n\n ctx.lineCap = \"round\";\n \n ctx.beginPath()\n ctx.strokeStyle = color[0]\n ctx.moveTo(t[0][0] + x, t[0][1] + y)\n ctx.lineTo(t[1][0] + x, t[1][1] + y)\n ctx.stroke()\n \n ctx.beginPath()\n ctx.strokeStyle = color[1]\n ctx.moveTo(t[1][0] + x, t[1][1] + y)\n ctx.lineTo(t[2][0] + x, t[2][1] + y)\n ctx.stroke()\n \n ctx.beginPath()\n ctx.strokeStyle = color[2]\n ctx.moveTo(t[2][0] + x, t[2][1] + y)\n ctx.lineTo(t[0][0] + x, t[0][1] + y)\n ctx.stroke()\n\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"md`### Demonstrate what a uniform sampling of the space would look like`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"\nuniformSample = {\n let n = 3600\n let downScale = 0.2\n let scale = baseScale * downScale\n let padding = downScale * basePadding\n let nx = Math.floor(width / (scale + padding))\n console.log(\"NX\", nx)\n nx = 60\n \n return d3.range(n).map(function(i) {\n return makeTriangle(7 * 360 * (i % nx)/nx, 10 + 90 * Math.floor(i/nx)/nx)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"{\n await visibility();\n return renderScatter(uniformSample)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"{\n await visibility();\n return renderRadial(uniformSample)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"colors = [\"#304ffe\", \"#4DB6AC\", \"#FF4081\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"makeTriangle(0, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"{\n let height = 150\n const canvas = DOM.canvas(width, height)\n const ctx = canvas.getContext(\"2d\")\n let triangle = makeTriangle(0, 100)\n let offset = [60, 60]\n \n // x axis\n ctx.beginPath()\n ctx.moveTo(0, offset[1])\n ctx.lineTo(width, offset[1])\n ctx.stroke()\n \n ctx.beginPath()\n ctx.moveTo(offset[0], 0)\n ctx.lineTo(offset[0], height)\n ctx.stroke()\n \n renderTriangle(ctx, triangle, offset, 5)\n \n return canvas\n}","pinned":false,"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":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"},{"id":1417,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}