tsne world

100%

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Dec 20, 2016

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.

AI-generated description

The 800 largest cities in the world. Compute all geodesic distances between them, feed that to t-sne et voilà.

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

(Research block at <a href='http://bl.ocks.org/Fil/972e78a78e3f3ceb81051cc649460bbf'>tsne world</a>.)

mit Licensed

Similar vizzes

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

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

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

84% match

Loading thumbnail…

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

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.

PPhilippe Rivière

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

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

Cities on the Globe

This interactive globe displays all cities with populations over 100,000 as proportional circles, rendered in SVG with d3.geoOrthographic projection and d3.geoPath. Users pan by dragging and zoom with the mouse wheel, swapping between low- and high-resolution TopoJSON world boundaries (110m and 50m) during movement for performance. City data comes from a CSV of 250 cities, with tooltips via d3-tip showing population counts.

CCurran Kelleher

75% match

Loading thumbnail…

World city population

This visualization displays a world map with dots representing cities, sized by population. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country borders rendered as SVG paths from TopoJSON data. City coordinates are projected using the same projection function, and each city is drawn as a small semi-transparent circle. The data comes from a CSV file loaded with `d3.csv` in React, and the visualization is built with React components, D3 v5, and SVG, styled with a clean, minimalist aesthetic.

Jjabowen2020@gmail.com

75% match