Travelling salesperson with t-SNE (in 1 dimension and on a world map)

100%

Travelling salesperson with t-SNE (in 1 dimension and on a world map)

✓ Published0🌍 Public

Last edited Feb 18, 2018

Created on Feb 22, 2017

A world map rendered with d3-geo-projection’s Bertin projection shows cities as colored circles by population and country. A t-SNE algorithm (tsne.js) runs in a Web Worker, reducing the geographic coordinates to a single dimension. The resulting order sorts cities along a line, and d3.geoPath draws links between consecutive cities in that order, revealing a rough approximation of the travelling salesperson problem. The total great-circle distance of the route is displayed and updated live as the optimization iterates.

AI-generated description

tSNE in 1D is supposed to give interesting results, maybe an approximate solution to the travelling salesman's problem

trying to reproduce http://gis.stackexchange.com/questions/15528/one-dimensional-map-of-the-world/15567#15567

Similar vizzes

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

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

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

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

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

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

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

70% match

Loading thumbnail…

Let's make a World Map with D3!

A world map is rendered as a collection of individual country paths, each filled with light green and outlined with a subtle black stroke, against a blue sphere background. The visualization uses D3 v5 and TopoJSON to load and convert world atlas data from a remote unpkg URL. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG path strings, and the `feature` function from TopoJSON to transform the TopoJSON format into GeoJSON for rendering.

Nnkohdatavis

69% match