Fork of Cities on a Globe

100%

Fork of Cities on a Globe

✓ Published0🌍 Public

Last edited Sep 28, 2021

Created on Sep 28, 2021

This interactive globe visualization displays cities with over 100,000 inhabitants as circles sized by population, rendered as SVG with D3 v4. Users can pan and zoom the orthographic projection, with drag interactions updating the rotation and a zoom handler adjusting scale. The globe alternates between 110m and 50m resolution land boundaries from the World Atlas TopoJSON during motion, while city data from a GeoNames CSV is projected using `d3.geoPath`. Hovering reveals a tooltip with city name and population via `d3-tip`.

AI-generated description

A globe with pan & zoom showing circles for each city of over 100,000 inhabitants. Data from Geonames, preprocessed. The same data is used in World City Explorer.

Uses world-110m and world-50m geographic shapes from TOPOJSON World Atlas.

Inspired by

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/0bb64d8f56042e2480c908b0985f063b'>Orthographic Zoom III</a>

Imported to VizHub from bl.ocks.org: Cities on the Globe

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays over 100,000 cities as circles sized by population, with hover tooltips showing names and population counts. Users can pan by dragging and zoom via scroll or pinch gestures, swapping between 110m and 50m resolution land boundaries during motion for performance. The visualization uses d3.geoOrthographic for projection, d3.geoPath for rendering, d3.drag and d3.zoom for interaction, and d3-tip for tooltips. City data comes from a preprocessed GeoNames CSV, while geographic shapes use TopoJSON world-atlas data.

Zzenoalive

96% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

PPiotr Paszek

95% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization presents a rotatable orthographic globe populated with circles representing cities of over 100,000 inhabitants, sized by population. Users can drag to rotate the globe and zoom, with low-resolution country boundaries shown during movement and higher-resolution shapes when stopped. The code uses d3.geoOrthographic, d3.geoPath, and d3.drag, with TopoJSON world atlas data for countries and a preprocessed Geonames dataset for cities. Hovering over a circle reveals a tooltip via d3-tip, displaying the city name and population.

PPioustu

95% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays cities with populations over 100,000 as pink circles, with size scaled by population and hover tooltips showing city names and populations. Users can drag to rotate the globe and zoom to adjust the scale, switching between 110m and 50m resolution world boundaries during interaction. Built with D3 v4, it uses `d3.geoOrthographic` for projection, `d3.geoPath` for rendering country shapes, `d3.drag` and `d3.zoom` for interaction, and `d3-tip` for tooltips. City data comes from a preprocessed GeoNames CSV, while country geometries use TopoJSON from the world-atlas package.

Ccriancinhazinha

95% match

Loading thumbnail…

Fork of Cities on a Globe

An interactive SVG globe shows the world’s cities with over 100,000 inhabitants, sized by population; hovering reveals names and counts. Panning by dragging and zooming via the mouse wheel or pinch gestures rotates the orthographic projection, with lower-resolution country boundaries during active motion. The visualization uses d3.geoPath, d3.geoOrthographic, d3.drag, d3.zoom, and d3.queue to load and project GeoJSON from world-atlas and CSV population data from Geonames.

AAki78

95% match

Loading thumbnail…

Fork of Cities on a Globe

This interactive globe displays all cities with populations over 100,000 as pink circles, with size proportional to population and hover tooltips showing names and counts. Users can drag to rotate the Earth and zoom to magnify regions, with low-resolution country boundaries shown during rotation and high-resolution shapes when idle. Built with D3 v4, it uses `d3.geoOrthographic()` for projection, `d3.geoPath` for rendering TopoJSON world atlas boundaries, and `d3.drag` and `d3.zoom` for interaction. Data comes from preprocessed Geonames city coordinates and populations.

Kkaalshouq

94% match

Loading thumbnail…

Fork of Cities on a Globe

This visualization displays a three-dimensional globe with colored circles marking cities with populations over 100,000, drawn from preprocessed Geonames data. Users can drag to rotate the Earth and scroll to zoom, with smooth transitions between low- and high-resolution country boundaries from the TopoJSON World Atlas. The code uses d3.geoOrthographic for projection, d3.geoPath to render geographic features, and d3.drag with d3.zoom for interaction. Circle sizes scale with population using d3.scaleSqrt, and hovering reveals a city’s name and population via d3-tip tooltips.

CCristina Macaraig

94% match

Loading thumbnail…

Fork of Cities on a Globe

This visualization presents an interactive orthographic globe displaying circles for cities with populations exceeding 100,000, sourced from preprocessed Geonames data. Users can pan and zoom the globe using drag gestures and the mouse wheel, with low-resolution country boundaries shown during movement and high-resolution shapes rendered when stopped. The code leverages d3.geoOrthographic, d3.geoPath, topojson, and d3-tip for hover tooltips, while a square-root scale maps population to circle radius. Hovering over a city reveals its name and population in a formatted tooltip.

EEngineerRajeev

94% match