29:null 2a:["$","title",null,{"children":"Let’s Try t-SNE! (calibrated) | Jeff Baumes | Observable"}] 2f:T513,chart = { if (!restart) { yield html`

`; return; } const height = width; const context = DOM.context2d(width, height); let iter = 0; for await (const coordinates of tsne(data)) { let sum = {x: 0, y: 0}; let sumsq = {x: 0, y: 0}; for (let i = 0; i < NUM_POINTS; ++i) { const x = coordinates[(i << 1) + 0]; const y = coordinates[(i << 1) + 1]; sum.x += x; sumsq.x += x*x; sum.y += y; sumsq.y += y*y; } const mean = { x: sum.x / NUM_POINTS, y: sum.y / NUM_POINTS, }; const dev = { x: Math.sqrt(sumsq.x / NUM_POINTS - Math.pow(mean.x, 2)), y: Math.sqrt(sumsq.y / NUM_POINTS - Math.pow(mean.y, 2)), }; context.clearRect(0, 0, width, height); for (let i = 0; i < NUM_POINTS; ++i) { const x = coordinates[(i << 1) + 0]; const y = coordinates[(i << 1) + 1]; const nx = ((x - mean.x)/(6 * dev.x) + 0.5); const ny = ((y - mean.y)/(6 * dev.y) + 0.5); // context.fillStyle = '555'; context.fillStyle = colors[labels[i]]; context.fillText(labels[i], nx * width, ny * height); } if (iter % 10) yield context.canvas; iter += 1; } }30:T4b3,md`## Tidy tensors What’s up with the *tidy* function above? A note about good tensor hygiene: unlike normal values in JavaScript, tensors in TensorFlow.js *leak by default* because they are backed by resources that live on the GPU. We can’t rely on the normal garbage collector to avoid leaks—we have to dispose of tensors explicitly! Fortunately, we have two useful tools at our disposal: TensorFlow.js’ [tf.tidy](https://js.tensorflow.org/api/0.14.1/#tidy) will call the given function and automatically dispose of any allocated tensors when the function returns. Returned tensors, however, are not disposed. (That’s good, because if we’re returning a tensor from tf.tidy, that means we want to continue using that tensor.) Observable’s [Generators.disposable](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_disposable) will invoke a function when a cell is [invalidated](https://beta.observablehq.com/@mbostock/disposing-content) (re-run), such as when a referenced value changes or when the cell’s code is edited. Invalidation is a good time to dispose of a tensor that’s no longer needed. Putting the two together, we have a *tidy* helper function.`31:T457,md`## Color space conversion The t-SNE algorithm operates on [floating-point (real) numbers](https://en.wikipedia.org/wiki/Floating-point_arithmetic) in [0, 1], but our sprites are currently integers in [0, 255] in RGBA color space. To prepare the sprites for t-SNE, we must convert the sprite image to an array of floats using [*context*.getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData). Each float corresponds to the grayscale value of a pixel. Two optimizations are strongly recommended. First, rather than trying to convert the entire ${IMAGE_WIDTH.toLocaleString()}×${NUM_DATASET_ELEMENTS.toLocaleString()}px image all at once to a ${(IMAGE_WIDTH * NUM_DATASET_ELEMENTS).toLocaleString()}-element array (${(IMAGE_WIDTH * NUM_DATASET_ELEMENTS * 4 / (1024 * 1024)).toFixed()}MB!), we’ll read in the sprites in chunks of ${CHUNK_SIZE.toLocaleString()} to avoid exhausting available memory. Second, we don’t need to convert *all* of the sprites; we’re only using ${NUM_POINTS.toLocaleString()} sprites when we run t-SNE, so we can ignore the rest.`32:[] 2d:{"id":"e701b46d9e16a828","slug":"lets-try-t-sne-calibrated","title":"Let’s Try t-SNE! (calibrated)","thumbnail":"035c19c21cc6ed833fb59c8051519e730bf95fd42982bd05fc0396ad32638e5f","access_level":"public","create_time":"$D2019-07-11T19:39:36.772Z","update_time":"$D2020-01-28T16:54:45.115Z","view_time":null,"first_public_time":"$D2020-01-28T16:55:56.193Z","has_unpublished_edits":null,"fork":{"id":"ac641190f6658a52","slug":"lets-try-t-sne","title":"Let’s Try t-SNE!","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":7,"starred":false,"owner":{"type":"team","id":"e2d656a3355b8613","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":"starter_2024"},"version":1301,"publish_version":1301,"role":null,"authored":false,"authors":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null}],"members":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Let’s Try t-SNE! (calibrated)","cells":[{"id":1176,"value":"md`# Let’s Try t-SNE! (calibrated)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"md`*jeffbaumes edit: Added embedding normalization to enjoy a less jittery experience during iterations.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"md`Each number below represents a hand-drawn digit (such as ${inlineSprite(5)} or ${inlineSprite(2)}) positioned by similarity using t-SNE. Notice that digits representing the same number (say ${inlineSprite(10)}, ${inlineSprite(15)} and ${inlineSprite(19)}, in blue) tend to cluster together.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`t-SNE allows us to see patterns and clusters in many-dimensional data, such as the images of digits here, by reducing the data to two dimensions and producing something akin to a map or scatterplot. It’s a bit magical, like being able to perceive hyperdimensional space. Though see [*Wattenberg et al.*](https://distill.pub/2016/misread-tsne/) for limitations!\n\nIn this notebook, we’ll learn how to run t-SNE with TensorFlow.js.\n\nNote: [WebGL2 required](https://caniuse.com/#feat=webgl2). (Sorry, Safari.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"viewof restart = {\n const form = html`