Skip to main content
SimilarExport ZIP
100%

Fork of World Cities

✓ Published0🌍 Public
Vvidiyalasahithi1999@gmail.com
Last edited Mar 22, 2024
Created on Mar 22, 2024
Forked from 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.

AI-generated description

A world map showing cities.

See also:

MIT Licensed

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
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
90% 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
89% 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 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
86% 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
85% 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
84% match
Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with dots marking cities whose population exceeds 50,000, plotted using the Natural Earth projection. The map displays country boundaries and graticules for geographic context, with cities rendered as semi-transparent circles. Built with React and D3 v5, the example uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features, while TopoJSON provides land and interior mesh data. City coordinates come from a CSV file sourced from the Simplemaps World Cities Database, and all marks are rendered as SVG elements.

AARAVIND MJ
83% match