D3 Example

100%

✓ Published0🌍 Public

Last edited Feb 7, 2017

Created on Feb 7, 2017

This interactive visualization displays world cities with populations over 100,000, rendered as SVG circles on a map. Each city is represented by a circle where every filled pixel corresponds to 50,000 people, and overlapping circles appear brighter, indicating population density. Users can zoom with the scroll wheel, pan by dragging, and hover over a circle to view the city’s name and population. The visualization is built with Vue and uses d3-tip for tooltips, drawing on a tutorial and a drag-and-zoom example by Mike Bostock. City data is 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

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/752b97cef3f880a813ab'>World City Explorer</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Example

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.

CCurran Kelleher

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

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

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

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

82% match

Loading thumbnail…

D3 course - World Map With Cities >50000

This interactive world map displays all cities with populations exceeding 50,000, using circle size to encode population magnitude through a square-root scale. Built with React and D3 v7, the visualization renders SVG paths from TopoJSON world atlas data alongside city coordinates from a CSV dataset. The natural Earth projection draws graticules and styled landmasses, while hover tooltips reveal country, city name, and formatted population using d3.format.

JJames Rhodes

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

82% match

Loading thumbnail…

SVG intro

A scatterplot of global cities maps each location with a circle scaled by population, using longitude and latitude for positioning on an 800×400 SVG canvas. Built with Vue and D3.js, the visualization loads city data from a CSV file and applies a square-root scale so circle area corresponds to population size. The code uses `d3.scale.sqrt()` and `d3.extent()` to set scales, then renders semi-transparent white circles against a black background.

SSazerland

82% match