test-tsne

100%

✓ Published0🌍 Public

Last edited May 4, 2018

Created on Apr 26, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

tSNE + Tensorflow

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.

MMNoichl

78% match

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

76% 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

75% 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

75% 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

73% 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

73% 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

72% match

Loading thumbnail…

t-SNE with Levenshtein distances, colored by K-means (work in progress)

This example visualizes 800 city names on a plane, positioned by t-SNE using a weighted Levenshtein distance that compares the first four letters of each name. The positions are colored by a K-means clustering algorithm into 18 groups, highlighting phonetic or orthographic similarities among city names. It uses d3.v4 with `d3.forceSimulation`, `d3.forceCollide`, and `d3.queue` to run t-SNE computations in a worker thread, with the result rendered as an SVG of circles and text. The code is based on the tsnejs library and demonstrates an ongoing work-in-progress, as indicated by the title.

PPhilippe Rivière

71% match