t-SNE, a force, and voronoi

100%

t-SNE, a force, and voronoi

✓ Published0🌍 Public

Last edited Dec 14, 2016

Created on Dec 14, 2016

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.

AI-generated description

This is a t-SNE representation of an array of (random) circles : red, green, blue, opacity and radius are 5 independent dimensions.

The t-SNE is computed by a javascript worker, using science.ai's implementation.

A force is created that tries to:

follow the positions given by t-SNE
collide the centers.

The result is displayed with a Voronoi.

(A mix of <a href='http://bl.ocks.org/Fil/33066cb4f74d35a737355f3b7a2c26b1'>t-SNE and a force</a> and <a href='http://bl.ocks.org/Fil/2dc296af097cd26242b52105e06763d8'>t-SNE Voronoi</a>.)

mit Licensed

Similar vizzes

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

88% match

Loading thumbnail…

t-SNE and a force

Randomly generated circles with five independent dimensions (red, green, blue, opacity, radius) are projected onto a plane using a t-SNE algorithm running in a web worker via the science.ai implementation. A d3.forceSimulation then applies three concurrent forces: attracting each circle toward its t-SNE position, rotating the whole layout so circles with high red values appear at the bottom, and colliding circles to prevent overlap. The SVG rendering updates continuously as the worker streams new t-SNE coordinates and cost values.

PPhilippe Rivière

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

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

83% match

Loading thumbnail…

t-SNE with Levenshtein distances

The visualization maps 800 city names as colored circles, positioned by t-SNE based on Levenshtein distances between their first two letters. A force simulation using `d3.forceSimulation` interpolates between geographic starting coordinates and the t-SNE output, while a `d3.forceCollide` prevents overlaps. City markers render as SVG circles with labels, using data from `cities.csv` and processing through a Web Worker running the tsnejs library.

PPhilippe Rivière

76% match

Loading thumbnail…

d3 Voronoi Worker

A thousand randomly moving points drive a live Voronoi tessellation, visualized as colored cells on a Canvas. A separate SVG circle tracks the mouse, while the page displays the frame rates of the data updates, the tessellation computation, and the overall rendering. The heavy Voronoi calculation runs in a Web Worker using `d3.voronoi()`, keeping the mouse tracking responsive even when the tessellation lags behind.

PPhilippe Rivière

74% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

72% match

Loading thumbnail…

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

PPhilippe Rivière

72% match