t-SNE with Levenshtein distances

100%

t-SNE with Levenshtein distances

✓ Published0🌍 Public

Last edited Dec 22, 2016

Created on Dec 22, 2016

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.

AI-generated description

800 city names, grouped according to their first 2 letters:

Levenshtein distance
t-SNE

Original work by Philippe Rivière for Visionscarto.net. Comments and variants very welcome!

Forked from <a href='http://bl.ocks.org/Fil/b07d09162377827f1b3e266c43de6d2a'>tsne world</a>

mit Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

tsne world with labels

A map of the world’s 800 largest cities, repositioned by t-SNE so that geographic proximity becomes visual proximity based on geodesic distances. Each city appears as a colored dot sized by population, with its name labeled in black text. The visualization runs on a Canvas, using `d3.forceSimulation` to integrate the t-SNE step and a collision force, while `d3.scaleOrdinal` assigns country colors and `d3.geoDistance` computes the pairwise distances from the cities.csv dataset.

MMNoichl

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

81% match

Loading thumbnail…

Travelling salesman with t-SNE (in 1 dimension and on a US map)

A one-dimensional t-SNE projection of major U.S. cities arranges them along a line, and the code then draws links between consecutive cities in that order onto a map of the United States using `d3.geoAlbersUsa` and `d3.geoPath`. This produces a rough travelling-salesman route whose total geodesic distance is displayed and updated live. The t-SNE computation runs in a Web Worker, using `d3.geoDistance` for pairwise distances, while city circles and links are rendered as SVG. City data comes from a CSV of urban agglomerations and their projected 2015 populations.

PPhilippe Rivière

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

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

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

74% match