Fork of World Cities

100%

Fork of World Cities

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This visualization displays a world map with cities as small dots, rendered using a Natural Earth projection. It uses D3’s `geoNaturalEarth1` for the projection and `geoPath` to draw country boundaries, graticules, and an outline. City data is loaded from a CSV containing latitude, longitude, and population, with each point plotted via `projection`. The map updates asynchronously, fetching TopoJSON country boundaries and city data before rendering. The graticule and country paths are styled with light fills and strokes, while cities appear as tiny circles, emphasizing global population distribution.

AI-generated description

A world map showing cities.

Similar vizzes

Loading thumbnail…

Fork of World Cities

This visualization displays a world map of cities, with each city represented by a small dot positioned according to its geographic coordinates. It highlights the global distribution of populated places, using a Natural Earth projection to render continents and a graticule for reference. The code loads GeoJSON country boundaries via TopoJSON and city data from a CSV, then uses D3’s geoNaturalEarth1, geoPath, and geoGraticule to project and draw the features. Circles are plotted with a radius of 0.2 pixels, while the outline path frames the projection.

Vvidiyalasahithi1999@gmail.com

94% match

Loading thumbnail…

Fork of World Cities

This visualization displays a world map with cities marked as small points, using a natural Earth projection. The map renders country boundaries from TopoJSON data and plots city coordinates from a CSV dataset, with each city’s position computed via the `d3.geoNaturalEarth1` projection and drawn using `d3.geoPath`. The code leverages `topojson-client` to convert TopoJSON features and `d3.csvParse` to load the city data, while graticule lines and an outline frame the map.

TThaverman

92% match

Loading thumbnail…

Fork of World Cities

This example renders a world map with a dot for each city, using the Natural Earth projection from the `d3.geo` module. The map draws country boundaries and a graticule via `d3.geoPath`, while city coordinates are projected using `d3.geoNaturalEarth1` and plotted as tiny circles. It fetches world atlas TopoJSON and a CSV of world cities, parsing the latter with `d3.csvParse` to display their locations.

Llingjizhu@gmail.com

91% match

Loading thumbnail…

Fork of World maping with cities

This interactive map displays world cities with circle sizes proportional to population, overlaid on a geographic projection of Earth. It renders country landmasses, graticules, and interior borders using `d3.geoPath` with `geoNaturalEarth1` projection, while city positions are projected from latitude/longitude coordinates. Population values drive a square-root scale to determine circle radii. The visualization uses React hooks to load TopoJSON world atlas data and CSV city data, with d3.v5 handling geographic calculations and SVG rendering.

Ppatasky

88% match

Loading thumbnail…

World Cities

This visualization shows the locations of cities worldwide as small dots overlaid on a Natural Earth projection map, with country boundaries rendered in light gray. The map is drawn using d3-geo’s geoNaturalEarth1 projection and geoPath, while city coordinates from a reduced World Cities CSV are projected and plotted as circles. Graticule lines and an outline frame the globe. Data loading uses fetch, topojson-client for country features, and d3.csvParse for city entries, with asynchronous state management coordinating the rendering.

CCurran Kelleher

87% match

Loading thumbnail…

Fork of WorldMap (mit Cities)

This is a world map visualization that displays global cities as circles, with their size scaled by population using a square root scale. The map is rendered using SVG paths and circles, with D3.js handling the geographic projections and data processing. The visualization uses `geoNaturalEarth1` for the map projection, `geoPath` for drawing countries and graticules, and `scaleSqrt` for city sizing. City and country data are loaded from external JSON and CSV sources, with React managing the user interface and rendering.

EEd Hutchinson

86% match

Loading thumbnail…

Fork of world map w/ cities

A world map displays cities with populations exceeding 50,000, sized by population using a square root scale. The map uses a Natural Earth projection with a rotation offset, rendering land, graticules, geographic lines, and country boundaries as SVG paths via `d3.geoPath`. City data comes from Simplemaps, while country boundaries use World Atlas TopoJSON. An animated GIF pattern fills the land, and hovering over countries highlights them. Built with React and D3.

SSnapika

86% match

Loading thumbnail…

Fork of Polished World Map

This fork of a polished world map visualizes global city populations using a natural Earth projection. The visualization displays landmasses, country interiors, graticules, and a sphere outline, with city markers sized proportionally to population using a square root scale. It loads TopoJSON country boundaries from the world-atlas package and city data from a CSV file, processing them with d3's geoNaturalEarth1, geoPath, and geoGraticule utilities. The React rendering uses SVG paths and circles, styled with custom CSS classes for a clean, refined aesthetic.

Jjchen6912

85% match