t-SNE, a force, and Urquhart graph

100%

t-SNE, a force, and Urquhart graph

✓ Published0🌍 Public

Last edited Dec 14, 2016

Created on Dec 14, 2016

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.

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 an Urquhart graph.

Forked from <a href='http://bl.ocks.org/Fil/5724c516d6e51f4a2aaf0edae83e0dca'>t-SNE, a force, and voronoi</a>.

mit Licensed

Similar vizzes

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

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

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

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

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

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

74% 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…

Gist b90900e705a70b8c3a48b3ec6651dc97

This example visualizes a synthetic dataset of points distributed across a Cartesian plane, showing how a force-directed layout positions them relative to one another. The code uses `d3.forceSimulation` with collision and centering forces to compute node positions, then renders the result as SVG circles via `d3.select` and `d3.forceCollide`. The simulation runs in the browser, and the visualization updates in real time as forces settle, with each node’s color and radius set from the generated data. No external data file is loaded; all values are produced programmatically.

PPeleke

72% match