Fork of World Cities

100%

Fork of World Cities

✓ Published0🌍 Public

Last edited Feb 26, 2024

Created on Feb 26, 2024

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.

AI-generated description

A world map showing cities.

Similar vizzes

Loading thumbnail…

Fork of World Cities

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.

Rreddysushma994@gmail.com

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

91% match

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

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

87% match

Loading thumbnail…

Fork of World Map

This example displays a world map using a natural Earth projection, with countries rendered as green landmasses against a light blue spherical backdrop. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. It also appends a sphere path to frame the projection, all rendered as SVG elements.

SstellaWangg

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

84% match

Loading thumbnail…

Fork of Points on a Map

This example shows a world map with over 50,000 cities plotted as semi-transparent points, using a Natural Earth projection. The visualization layers graticules, land masses, and country borders beneath the city data, with each city positioned via the `geoNaturalEarth1` projection and `geoPath`. Built with React and D3 v5, the code loads TopoJSON world atlas data and a CSV of city coordinates, rendering the map as SVG. City data comes from Simplemaps’ World Cities Database.

Wwhiteswallow87

84% match

Loading thumbnail…

Fork of

This example displays a world map using the Natural Earth projection, with countries filled in sky blue against a black spherical backdrop. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON features using `topojson.feature`. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render the countries as SVG paths, while a separate path for the sphere outlines the globe.

NNaveed945

84% match