Points on a Map

100%

Points on a Map

✓ Published2🌍 Public

Last edited Dec 10, 2020

Created on Nov 4, 2020

This visualization displays world cities with populations exceeding 50,000 as semi-transparent dots on an equal-earth projection map. The map shows landmasses, graticules, and country interiors using the `d3.geoPath` and `d3.geoEqualEarth` projections, while city points are positioned via the same projection and scaled using `d3.scaleSqrt`. Built with React and D3 v5, it loads GeoJSON world data from the `world-atlas` package and city coordinates from a CSV, rendering everything as SVG circles with opacity for overlapping points.

AI-generated description

A geojson World Map displaying cities with a population += 50,000.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent points on an equal-Earth projection map, with circle size encoding each city’s population using d3.scaleSqrt. It renders the landmasses, graticules, and interiors from the World Atlas TopoJSON via d3.geoPath and topojson.mesh. City coordinates and populations come from a CSV loaded with d3.csv. Data loading is managed through React hooks (useState, useEffect), and the SVG scene is composed with React components, using d3.geoNaturalEarth1 for projection and d3.geoGraticule for grid lines.

PPedro Henrique Vanali

92% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

92% match

Loading thumbnail…

Points on a Map

This example displays a world map with dots marking cities that have populations exceeding 50,000. The map uses a Natural Earth projection and renders land masses, graticules, and country borders as SVG paths. City positions are projected from longitude and latitude coordinates using `d3.geoPath` with `geoNaturalEarth1`, and each city is drawn as a semi-transparent circle. The visualization loads world atlas TopoJSON data and a city CSV dataset, with React managing the component lifecycle.

CCurran Kelleher

92% match

Loading thumbnail…

Points on a map

This visualization displays world cities as points on a natural Earth projection, with point size mapped to population via a square-root scale. The map renders landmasses, graticules, and country interiors using `d3.geoPath` from the `d3` library. City data is loaded as a CSV, while world topology comes from the `world-atlas` package, with React managing the application state and SVG rendering. Hovering over a city reveals a tooltip with its name, country, and population.

MmohitPassan

92% match

Loading thumbnail…

Points on a Map

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

GGiovanniD_

92% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent dots. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic features with d3.geoPath, including land masses and graticules. City coordinates are projected from latitude and longitude into SVG circle positions. The map loads country boundaries from World Atlas TopoJSON and city data from a Simplemaps CSV, with React managing the data-fetching hooks and rendering the SVG marks.

GGeniXiong

92% match

Loading thumbnail…

Points on a Map

A world map displays the locations of cities with populations over 50,000 as small semi-transparent dots, overlaid on landmasses with country borders and graticules. Using React, the visualization loads GeoJSON world-atlas topology and city data via D3’s `json` and `csv` methods, then projects coordinates with `geoNaturalEarth1` and renders SVG paths and circles through `geoPath`. The map’s gray land, interiors, and sphere are styled distinctly, while city points use D3’s `projection` to convert longitude and latitude into screen positions.

LLove Wessman

92% match

Loading thumbnail…

Points on a Map

This example displays a world map with small, semi-transparent dots marking cities with populations over 50,000. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City locations are projected from latitude and longitude coordinates loaded from a CSV file, with each point drawn as a circle. The React application uses custom hooks to fetch the world atlas and city data, with styling applied through CSS classes.

Jjwlam83

91% match