30:[] 2e:{"title":"UMAP in A-Frame","cells":[{"id":0,"value":"md`# UMAP in A-Frame\n\n[UMAP-o-Matic](https://observablehq.com/@fil/umap-o-matic) in 3 dimensions, thanks to [A-Frame](https://aframe.io).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof nComponents = Inputs.select([3, 2, 1], {\n label: \"UMAP dimensions (nComponents)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof distanceType = Inputs.select([\"euclidian\", \"cosine\"], {\n value: \"cosine\",\n label: \"Distance function\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chart = {\n if (this) return this; // avoids a crash when going fullscreen (??)\n\n const scene = html`\n \n \n \n \n \n `,\n chart = html`

${scene}

`;\n\n create(chart, penguinData);\n\n return chart;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"penguinData = penguins\n .filter(d => d.culmen_length_mm && d.culmen_depth_mm && d.flipper_length_mm && d.body_mass_g)\n .map(d => ({\n ...d,\n label: d.species,\n color: d.species === \"Adelie\" ? \"#e05c5c\"\n : d.species === \"Chinstrap\" ? \"#5c8fe0\"\n : \"#5cc47a\" // Gentoo\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// https://observablehq.com/@enjalot/hello-a-frame-vr\nfunction create(chart, data) {\n var scene = d3.select(chart).select(\"a-scene\");\n\n scene.selectAll(\".dot\").remove();\n\n const r = 0.05; // radius or half-width\n\n scene\n .selectAll(\".dot\")\n .data(data)\n .join(\"a-sphere\") // or \n .classed(\"dot\", true)\n .attr(\"color\", d => d.color)\n .attr(\"radius\", r) // for \n .attr(\"width\", 2 * r) // for \n .attr(\"height\", 2 * r)\n .attr(\"depth\", 2 * r)\n .attr(\"position\", (_, i) =>\n [3 * Math.random(), 3 * Math.random(), 3 * Math.random()].join(\" \")\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"// Run UMAP and update the chart each time new positions are yielded\ncomputeUMAP(penguinData, { nComponents, nNeighbors: 15, distanceType })(\n (positions) => update(chart, positions)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"function update(chart, values) {\n const x = d3\n .scaleLinear()\n .range([-4, 4])\n .domain(d3.extent(values.flat()));\n\n d3.select(chart)\n .selectAll(\".dot\")\n .transition()\n .duration(5000)\n //.attr(\"material\", \"shader: flat\")\n .attr(\"position\", (_, i) => values[i].map(x).join(\" \"));\n\n return html`> updated ${\n values.length\n } values at ${new Date().toLocaleString(undefined, {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\"\n })}.`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`## A-Frame`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"aframe = require(\"aframe\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`## UMAP`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { computeUMAP } from \"@fil/umap-o-matic\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"// Inspect data and computeUMAP signature\ndisplay(data)\ndisplay(data.length)\ndisplay(computeUMAP.toString())","pinned":true,"hidden":false,"mode":"js"}],"files":"$W30","stdlib":"1","titling":"auto"}