Skip to main content
SimilarExport ZIP
100%

Fork of World Cities - PKS

✓ Published0🌍 Public
PPrajanya Shrestha
Last edited Jul 9, 2024
Created on Jul 9, 2024
Forked from World Cities

A world map displays cities as points positioned using latitude and longitude coordinates from a Simplemaps database. The visualization projects geographic coordinates onto a two-dimensional plane using D3.js with the `d3.geoProjection` API, while country boundaries render through `d3.geoPath` with a light gray fill. The map loads TopoJSON data via the `topojson-client` library and draws projected city locations using D3’s SVG rendering, producing a clean scatter-like overlay on the geopolitical base.

AI-generated description

A world map showing cities.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of World Cities

This visualization displays a world map with cities plotted as small circles, using geographic coordinates to position each point. The rendering fetches country boundaries from a TopoJSON atlas and city data from a CSV file, then applies the Natural Earth projection via `geoNaturalEarth1` and `geoPath` from d3-geo. City circles are added through D3’s data join, while graticule and outline paths provide spatial context. The code also uses `topojson-client` to convert TopoJSON features and relies on D3’s `csvParse` to handle the dataset.

Aamrouni.kahina2002@gmail.com
86% match
Loading thumbnail…

Fork of World Cities

This map visualizes the locations of cities worldwide using a Natural Earth projection. The visualization displays each city as a small point, with country boundaries in light gray and a graticule overlay. Built with d3-geo, the code uses `geoNaturalEarth1` for projection, `geoPath` for rendering country outlines, and `geoGraticule` for the coordinate grid. City coordinates from a CSV dataset are projected and plotted as circles, while geographic data comes from the visionscarto-world-atlas TopoJSON file. The visualization asynchronously loads both datasets before rendering.

Aamrouni.kahina2002@gmail.com
85% 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
85% 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
84% match
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
83% match
Loading thumbnail…

Fork of World Cities

This visualization shows the world's cities as tiny dots on a natural Earth projection, with country boundaries rendered in light gray and graticule lines overlaid for geographic context. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, while fetching geographic data from a TopoJSON world atlas and city coordinates from a CSV file. Each city’s population is parsed but not visually encoded; instead, all cities appear as uniform 0.2-pixel-radius circles. The rendering is driven by D3 selections with data joins, and topojson-client converts the TopoJSON features into GeoJSON for mapping.

BBen Trantanella
83% 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
82% 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
81% match