D3 Example

100%

✓ Published0🌍 Public

Last edited May 6, 2015

Created on May 4, 2015

This interactive visualization displays global cities with populations over 100,000 as circles on a world map. Using SVG rendering within a Vue application, each city is represented by a circle whose area corresponds to population, with one filled pixel per 50,000 people. Overlapping city circles create brighter regions, visually encoding population density. Users can pan and zoom to explore, and hovering reveals a tooltip with the city name and population via d3-tip. The visualization supports scroll-wheel zooming and drag-based panning, with data sourced from GeoNames.

AI-generated description

This program allows you to explore the world's cities.

Zoom in and out with the scroll wheel.
Pan by dragging.
Hover over a city to get its name and population.

Each circle represents a city. Each filled in pixel of a circle represents 50,000 people. When city circles overlap, they appear brighter, so brightness can be interpreted as population density.

The data comes from Geonames and shows only cities with population >100,000.

Draws from:

Enjoy exploring!

--Curran, April 2015

Similar vizzes

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

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

87% match

Loading thumbnail…

Simplemaps: World Cities Database

This example visualizes a world map of cities with populations over 50,000, using a dataset sourced from Simplemaps. It plots each city as a point positioned by latitude and longitude, with point size reflecting population. The visualization uses Vue for the application structure and D3’s `d3.geoPath` for rendering map outlines, while city markers are drawn on a canvas using `getImageData` to sample pixel colors for styling.

CCurran Kelleher

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

82% match

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

82% match

Loading thumbnail…

Dataviz 2020_Ep37 - 29. Using Size

This visualization displays global city populations using circles overlaid on a world map, with area encoding population size. The map uses natural Earth projection with graticules and land boundaries from TopoJSON. The data comes from a CSV of world cities with latitude, longitude, and population values. React manages the component state while d3.scaleSqrt maps population to circle radius, and d3.geoPath renders the geographic features. SVG circles are drawn with semi-transparent teal fill, and the rendering uses d3.json and d3.csv for data loading.

MMinwoo Pak

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

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

81% match