t-SNE and a force

100%

t-SNE and a force

✓ Published0🌍 Public

Last edited Dec 13, 2016

Created on Dec 13, 2016

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.

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
orient the space so that "reds" are more towards the bottom
collide the circles.

Based on <a href='http://bl.ocks.org/Fil/14b38853005d051573da1f2e5429a477'>t-SNE worker</a>

Built with blockbuilder.org, so double-thank-you to @enjalot.

See also <a href='http://bl.ocks.org/Fil/2dc296af097cd26242b52105e06763d8'>t-SNE Voronoi</a>

mit Licensed

Similar vizzes

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

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

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

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

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

75% match

Loading thumbnail…

d3-force-cluster and d3-force-attract

Two hundred circles, shaded by cluster with a sequential rainbow scale, are positioned by a force simulation that combines `d3.forceAttract` to pull nodes toward the screen center and `d3.forceCluster` to group them into ten distinct clusters. The layout uses `d3.forceSimulation` with a custom `d3.forceCollide` whose strength ramps up over three seconds for a smooth transition. Each node is an SVG circle, rendered with `d3.drag` for interactive repositioning, while the tick handler updates the `cx`, `cy`, and `r` attributes. The data is generated randomly, with radii varying by cluster, and the example runs in the browser using D3 v4 and the `d3-force-attract` and `d3-force-cluster` plugins.

AAlainRo

75% match

Loading thumbnail…

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.

PPhilippe Rivière

73% match

Loading thumbnail…

D3 Force Simulation

This example displays a static force-directed network of 100 circles and 100 randomly generated links on an SVG canvas, using D3 v4. Nodes are positioned randomly and rendered as steelblue circles, while links are implied but never drawn, so the visualization focuses solely on node placement. The code prepares data structures for a force simulation but does not call d3.forceSimulation, leaving the layout in its initial random state.

CCarlosACalvo

73% match