2c:null 2d:["$","title",null,{"children":"FashionMNIST Comparison: 3D Embeddings | Molly Park | Observable"}] 32:T1b75,function plot3d(points, options = {}) { const { w = 640, h = 400, zoom = 1, background = 0xffffff, axisClr = 0x000000, radiusF = 0.005, tickF = 0.01, fontSize = 128, axisLength = null, targetTicks = 10, getX = (d) => d.dim1, getY = (d) => d.dim2, getZ = (d) => d.dim3, fill = (d) => 0x9e0142, msg = "Drag to rotate · scroll to zoom", upAxis = "y" } = options; // hovering settings const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let hovered = null; // --------------------- Data bounds const values = points.flatMap((d) => [getX(d), getY(d), getZ(d)]); const minData = Math.min(...values, 0); const maxData = Math.max(...values, 0); const span = maxData - minData || 1; const axisLen = axisLength ?? span * 1.05; // --------------------- Nice tick intervals const niceStep = (range, count) => { const raw = range / count; const exp = 10 ** Math.floor(Math.log10(raw)); const f = raw / exp; const nf = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10; return nf * exp; }; const step = niceStep(span, 2 * targetTicks); const start = Math.floor(minData / step) * step; const ticks = []; for (let t = start; t <= maxData; t += step) { ticks.push(Math.round(t * 1e6) / 1e6); } // ---------------------- Scene and lights const scene = new THREE.Scene(); scene.background = new THREE.Color(background); scene.add(new THREE.AmbientLight(0xffffff, 1.2)); const dirLight = new THREE.DirectionalLight(0xffffff, 0.8); dirLight.position.set(axisLen, axisLen, axisLen); scene.add(dirLight); // ---------------------- Tick label helper const labelCache = new Map(); const makeLabel = (txt) => { if (!labelCache.has(txt)) { const S = 256; const c = document.createElement("canvas"); c.width = c.height = S; const ctx = c.getContext("2d"); ctx.fillStyle = "#000"; ctx.font = `${fontSize}px sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(txt, S / 2, S / 2); labelCache.set(txt, new THREE.CanvasTexture(c)); } const spr = new THREE.Sprite( new THREE.SpriteMaterial({ map: labelCache.get(txt) }) ); const s = tickF * axisLen * 2; spr.scale.set(s, s, 1); return spr; }; // ----------------------- Axis ticks and labels const matAxis = new THREE.LineBasicMaterial({ color: axisClr }); const tickSize = tickF * axisLen; for (const [dir, vec] of [ ["x", [1, 0, 0]], ["y", [0, 1, 0]], ["z", [0, 0, 1]] ]) { const A = new THREE.Vector3(...vec).multiplyScalar(minData); const B = new THREE.Vector3(...vec).multiplyScalar(maxData); const offDir = new THREE.Vector3(...vec) .cross(new THREE.Vector3(1, 1, 1)) .normalize(); const tickOffset = offDir.clone().multiplyScalar(tickSize); scene.add( new THREE.Line(new THREE.BufferGeometry().setFromPoints([A, B]), matAxis) ); for (const t of ticks) { const pos = new THREE.Vector3(...vec).multiplyScalar(t); scene.add( new THREE.Line( new THREE.BufferGeometry().setFromPoints([ pos, pos.clone().add(tickOffset) ]), matAxis ) ); const lbl = makeLabel(String(t)); lbl.position.copy(pos).add(tickOffset.clone().multiplyScalar(1.5)); scene.add(lbl); } const nameLbl = makeLabel(dir.toUpperCase()); nameLbl.position.copy( B.clone().add(offDir.clone().multiplyScalar(tickSize * 3)) ); scene.add(nameLbl); } // --------------------- Plot points const radius = radiusF * axisLen; const meshes = []; for (const d of points) { const [x, y, z] = [getX(d), getY(d), getZ(d)]; const matPt = new THREE.MeshPhongMaterial({ color: fill(d), specular: 0x444444, emissive: 0xcccccc, emissiveIntensity: 0.3 }); const sph = new THREE.Mesh(new THREE.SphereGeometry(radius, 16, 16), matPt); meshes.push({ mesh: sph, datum: d }); sph.position.set(x, y, z); scene.add(sph); } // --------------------- Camera, renderer and controls const cam = new THREE.PerspectiveCamera(35, w / h, 0.1, axisLen * 10); if (upAxis === "z") { cam.up.set(0, 0, 1); } else if (upAxis === "x") { cam.up.set(1, 0, 0); } else { cam.up.set(0, 1, 0); } cam.position.set(axisLen / zoom, axisLen / zoom, axisLen / zoom); cam.lookAt(0, 0, 0); const r = new THREE.WebGLRenderer({ antialias: true }); r.setSize(w, h); r.setPixelRatio(devicePixelRatio); const ctrls = new OrbitControls(cam, r.domElement); ctrls.addEventListener("change", () => r.render(scene, cam)); r.domElement.addEventListener("mousemove", (event) => { const rect = r.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, cam); const intersects = raycaster.intersectObjects(meshes.map(m => m.mesh), false); if (intersects.length > 0) { const obj = intersects[0].object; const entry = meshes.find(m => m.mesh === obj); if (entry) { hovered = entry; tooltip.textContent = entry.datum.class ?? "(no label)"; tooltip.style.visibility = "visible"; tooltip.style.left = event.clientX - rect.left + 8 + "px"; tooltip.style.top = event.clientY - rect.top + 8 + "px"; } } else { hovered = null; tooltip.style.visibility = "hidden"; } r.render(scene, cam); }); invalidation.then(() => { r.domElement.removeEventListener("mousemove"); container.removeChild(tooltip); ctrls.dispose(); r.dispose(); }); // Initial render r.render(scene, cam); // --------------------- Render as HTML DOM node const container = html`

${r.domElement}

${msg}

`; const tooltip = document.createElement("div"); tooltip.style.position = "absolute"; tooltip.style.pointerEvents = "none"; tooltip.style.padding = "4px 6px"; tooltip.style.fontSize = "11px"; tooltip.style.background = "rgba(0,0,0,0.7)"; tooltip.style.color = "white"; tooltip.style.borderRadius = "4px"; tooltip.style.visibility = "hidden"; container.appendChild(tooltip); // This function will update the colours of the scatterplot so can be called // reactively if the fill colour function changes without a complete reset of the scatterplot. const defaultFill = fill; container.update = (newFill = defaultFill) => { for (const { mesh, datum } of meshes) { mesh.material.color.set(newFill(datum)); } r.render(scene, cam); }; return container; }33:[{"id":"96d73095801ec1169039cf486a9a4aab492164d9af57026fc26f4480d32d4a78fce53aa02fb2a5f16e01da224c9c3a710753beeb4cb35f986f47c4bd6962702b","href":"https://static.observableusercontent.com/files/96d73095801ec1169039cf486a9a4aab492164d9af57026fc26f4480d32d4a78fce53aa02fb2a5f16e01da224c9c3a710753beeb4cb35f986f47c4bd6962702b","name":"fmnist5k__pca__3D@1.csv","type":"text/csv","lastModified":1764101046802.675,"size":213858},{"id":"3792dc609266c5b7fc079aae6b87ce91adfbea9fc7c557e36c6a5418fa6806a01218a3add2c93c65d52b4c836ae54524255a1fac646e69f95230ccd39d9ab127","href":"https://static.observableusercontent.com/files/3792dc609266c5b7fc079aae6b87ce91adfbea9fc7c557e36c6a5418fa6806a01218a3add2c93c65d52b4c836ae54524255a1fac646e69f95230ccd39d9ab127","name":"fmnist.png","type":"image/png","lastModified":1764099379149.135,"size":33590},{"id":"f87c8da6edbe73bb9e249e73359bbfc8220427b047e4fd17f648a40d8e7103cbe527d3b441f03bb2f7b07acf4760a769ad1a15eb1a774a2d13b1a11c1347885a","href":"https://static.observableusercontent.com/files/f87c8da6edbe73bb9e249e73359bbfc8220427b047e4fd17f648a40d8e7103cbe527d3b441f03bb2f7b07acf4760a769ad1a15eb1a774a2d13b1a11c1347885a","name":"fmnist5k__tsne__3D@2.csv","type":"text/csv","lastModified":1764551798919.231,"size":190537},{"id":"ad887fc461fbabf64c0cd92bbf21126af62fc84d18c2e800406bbba1edde43091b10f01f18aee44ca0a2507da385455efb4bddb57b288407f1eca1c1564b2bb0","href":"https://static.observableusercontent.com/files/ad887fc461fbabf64c0cd92bbf21126af62fc84d18c2e800406bbba1edde43091b10f01f18aee44ca0a2507da385455efb4bddb57b288407f1eca1c1564b2bb0","name":"fmnist5k__umap__3D@2.csv","type":"text/csv","lastModified":1764551807787.374,"size":188076}] 30:{"id":"f00394857b14c402","slug":null,"title":"FashionMNIST Comparison: 3D Embeddings","thumbnail":"190cfa2b17b1c664373eeb22000f9a03b53c9f78419d0d4b9331714e7588ba85","access_level":"unlisted","create_time":"$D2025-11-20T20:24:03.113Z","update_time":"$D2025-12-02T23:15:58.304Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"ff422a72e6c47667","slug":"3d-scatterplot","title":"3d Scatterplot","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ad65fc0acf733416","login":"molly-park","name":"Molly Park","avatar_url":"https://avatars-next.observableusercontent.com/fb6b11e0c39e08291ad5649529ac4b94a42e9ed3c636f1ec7b6986b7f7789fac","tier":"starter_2024","bio":""},"version":590,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e302daa1e2d42379","login":"molly-park","name":"Molly Park","avatar_url":"https://avatars-next.observableusercontent.com/faa2ba29853c127b193a9ac0f8555c0307617df565865f2d2ef1f68d5e5ec6e2","tier":null,"bio":""}],"members":[{"type":"individual","id":"e302daa1e2d42379","login":"molly-park","name":"Molly Park","avatar_url":"https://avatars-next.observableusercontent.com/faa2ba29853c127b193a9ac0f8555c0307617df565865f2d2ef1f68d5e5ec6e2","tier":null,"role":"editor"},{"type":"team","id":"ad65fc0acf733416","login":"molly-park","name":"Molly Park","avatar_url":"https://avatars-next.observableusercontent.com/fb6b11e0c39e08291ad5649529ac4b94a42e9ed3c636f1ec7b6986b7f7789fac","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"FashionMNIST Comparison: 3D Embeddings","cells":[{"id":0,"value":"# FashionMNIST Comparison: 3D Embeddings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"**Dataset Background: FashionMNIST**\n\nFasionMNIST is a dataset of various grayscale images of 10 clothing items:\n(0) T-shirt/top, (1) Trouser, (2), Pullover, (3) Dress, (4) Coat, (5) Sandal, (6) Shirt, (7) Sneaker, (8) Bag, (9) Ankle boot. Note that images vary within a given class, and some can look more ambiguous than other.\n\n![image.png](${await FileAttachment(\"fmnist.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"Here, we sampled 5000 images and represent each 28 x 28 pixel image as a flattened vector with 784 dimensions (each value in the vector encodes the pixel's grayscale intensity).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"viewof plots = html`\n

PCA

\n ${plot3d(pcaData, { w: 400, fill: (d) => itemToColor[d.class]})}\n

tSNE

\n ${plot3d(tsneData, { w: 400, fill: (d) => itemToColor[d.class]})}\n

UMAP

\n ${plot3d(umapData, { w: 400, fill: (d) => itemToColor[d.class]})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"_Import [three.js](https://threejs.org) and camera controls:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"THREE = import(\"https://cdn.jsdelivr.net/npm/three@0.178/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"OrbitControls = import(\n \"three@0.178/examples/jsm/controls/OrbitControls.js\"\n).then((d) => d.OrbitControls)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"pcaData = FileAttachment(\"fmnist5k__pca__3D@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"umapData = FileAttachment(\"fmnist5k__umap__3D@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"tsneData = FileAttachment(\"fmnist5k__tsne__3D@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"itemToColor = ({\n \"T-shirt/top\": 0x9e0142,\n \"Trouser\": 0xd8434e,\n \"Pullover\": 0xf67a49,\n \"Dress\": 0xfdbf6f,\n \"Coat\": 0xfeeda1,\n \"Sandal\": 0xf1f9a9,\n \"Shirt\": 0xbfe5a0,\n \"Sneaker\": 0x74c7a5,\n \"Bag\": 0x378ebb,\n \"Ankle boot\": 0x5e4fa2\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"_The main plotting class:_ Credit to @jwolondon/3d-scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"