Cities on the Globe

100%

Cities on the Globe

✓ Published0🌍 Public

Last edited Jun 9, 2018

Created on Jun 9, 2018

A rotatable and zoomable orthographic globe displays circles for cities with populations over 100,000, sized by population and colored semi-transparent blue. Dragging rotates the globe using D3’s drag and projection inversion; zooming scales the projection. Built with D3 v4, it uses `d3.geoOrthographic` and `d3.geoPath` to render country boundaries from TopoJSON world-atlas data, while city coordinates come from a preprocessed Geonames CSV. Population-based circle radii scale with zoom, and hover tooltips (via d3-tip) show each city’s name and formatted population.

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>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/115407b42ef85b0758595d05c825b346'>Cities on the Globe</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Cities on a Globe

An interactive globe displays pink circles for cities with populations over 100,000, sized by population and hoverable for tooltips. Users can drag to rotate the globe via `d3.drag` and zoom with `d3.zoom`, which adjusts an orthographic projection’s scale. The visualization draws country boundaries from TopoJSON `world-110m` and `world-50m` files, using `d3.geoPath` to project shapes and city coordinates, while switching resolution during rotation. City data comes from preprocessed GeoNames CSV, and tooltips are generated with `d3-tip`.

KKusum Naithani

93% match

Loading thumbnail…

Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 using circles sized by population. Users can pan and zoom the orthographic projection. The visualization renders country borders from world-atlas TopoJSON data and city coordinates from a Geonames CSV file. It leverages d3.geoOrthographic, d3.geoPath, d3.scaleSqrt, and d3-tip for tooltips, with d3.drag and d3.zoom handling interaction.

CCurran Kelleher

91% match

Loading thumbnail…

Cities on a Globe

This example presents an interactive orthographic globe that plots circles for cities with populations over 100,000, with circle size proportional to population. Users can pan and zoom the globe by dragging or using the scroll wheel, which triggers dynamic re-rendering of city markers. The visualization uses D3 v4 with d3.geoOrthographic projection, d3.geoPath, d3.drag, and d3.zoom, along with TopoJSON world-atlas data for country boundaries. City data originates from a preprocessed Geonames dataset, and the code displays tooltips via d3-tip on hover.

DDavid Allyn

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

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

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

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

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

89% match