Skip to main content
SimilarExport ZIP
100%

tSNE + Tensorflow

✓ Published0🌍 Public
MMNoichl
Last edited Jul 2, 2018
Created on Jul 2, 2018

This example uses a TensorFlow-based t-SNE optimizer within a webpage to reduce 200 random 10-dimensional points to a 2D embedding. The code initializes a `tf.randomUniform` tensor, passes it to `tsne.tsne()`, and calls `compute()` to produce coordinates, which are printed to the console. The visualization relies on the TensorFlow.js and tfjs-tsne libraries, with D3 v4 loaded but not actively used for rendering in this minimal setup.

AI-generated description

Trying to get Nicola Pezzotti Tensorflow t-SNE to work.

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example visualizes a high-dimensional random dataset by projecting it into two-dimensional space. The visualization uses TensorFlow.js and its `tfjs-tsne` library to compute a t-SNE embedding, which is then printed as coordinates. The code generates 200 data points with 10 features each via `tf.randomUniform`, runs the embedding computation asynchronously, and outputs the resulting x, y coordinates using the optimizer's `coordinates()` method. The visualization is built with d3.v4 for page layout, though no graphical rendering is implemented; the output is numeric coordinate data.

MMNoichl
78% match
Loading thumbnail…

test-tsne

This example demonstrates how to project high-dimensional data onto a two-dimensional plane using t-SNE (t-Distributed Stochastic Neighbor Embedding). The visualization displays the resulting coordinates as small circles within an SVG canvas, with each point representing an item from a small dataset of twelve samples. The t-SNE algorithm is implemented through the custom `tsnejs` library, which processes pairwise distances calculated from the input data. The rendering uses D3.js v4 to create the SVG elements and position them according to the computed embedding coordinates.

MMNoichl
78% match
Loading thumbnail…

t-SNE and Urquhart w/distances study

Two side-by-side canvases display a t-SNE projection of 300 random five-dimensional points, rendered as colored circles with an Urquhart graph overlay. The left view uses projected distances for graph pruning, while the right uses original distances, highlighting how projection distorts spatial relationships. A d3.forceSimulation with 'tsne' and 'collide' forces continuously adjusts positions, while d3.voronoi computes the underlying diagram. T-SNE runs in a Web Worker via science.ai’s implementation, and canvas 2D contexts draw the results.

PPhilippe Rivière
72% match
Loading thumbnail…

t-SNE, a force, and Urquhart graph

This example visualizes 300 randomly generated circles, each with five independent dimensions (red, green, blue, opacity, and radius), projected into 2D space using t-SNE. The t-SNE computation runs in a JavaScript worker via the science.ai implementation, while the visual result is refined by a force simulation that both follows the t-SNE positions and applies collision avoidance between circle centers. The layout is rendered on a Canvas and enhanced with an Urquhart graph, which draws edges derived from the Voronoi diagram of the projected points, highlighting the local neighborhood structure of the high-dimensional data.

PPhilippe Rivière
72% match
Loading thumbnail…

t-SNE Voronoi

A t-SNE Voronoi diagram visualizes 200 random four-dimensional colors projected into two dimensions in real time. Each point is rendered as a polygon according to its Voronoi cell, colored by its RGB values and with opacity derived from its fourth dimension, while a grey line chart displays the algorithm's cost per iteration. The t-SNE computation runs in a JavaScript worker using science.ai's TSNE implementation, and the visualization is rendered with d3.v4's d3.voronoi, d3.area, d3.scaleLinear, and d3.timer APIs. The SVG output animates as points converge, with polygons updating their shape each frame.

PPhilippe Rivière
71% match
Loading thumbnail…

tsne world

The visualization maps the 800 largest cities worldwide by computing pairwise geodesic distances and reducing them to two dimensions with t-SNE, producing a derived "world" where proximity reflects spatial similarity rather than actual geography. Each city appears as a colored dot, with size scaled by population and color assigned by country using `d3.scaleOrdinal`. The t-SNE algorithm runs iteratively within a `d3.forceSimulation`, stepping the model and interpolating positions toward the latest solution. Custom canvas rendering draws the animated nodes, while data loads from a local CSV via `d3.csv`.

MMNoichl
70% match
Loading thumbnail…

t-SNE, a force, and voronoi

A t-SNE projection of 300 random five-dimensional points is rendered as a Voronoi diagram, with each cell colored by the point's RGB values and opacity. A d3.forceSimulation combines a custom force that follows the t-SNE coordinates with forceCollide to separate overlapping centers, updating the Voronoi polygons on each tick. The computation runs asynchronously in a Web Worker using the tsne-js library.

PPhilippe Rivière
70% match
Loading thumbnail…

tsne world

This visualization uses t-SNE to map the 800 largest cities by population, computing geodesic distances between all pairs and projecting them into a 2D layout that reveals spatial clusters. Each city appears as a colored dot, sized by population and colored by country, rendered on a canvas. The code relies on the `tsnejs` library for dimensionality reduction, `d3.forceSimulation` to animate the solution, and D3 scales for mapping coordinates and sizes. Data comes from a CSV of city populations for 2015.

PPhilippe Rivière
69% match