World Atlas with Points

World Map with City Points Sized

A world map with city points sized by population. The visualization uses a natural Earth projection with graticules and land boundaries rendered as SVG paths. City populations are scaled using a square root scale, mapping to circle radii with a maximum of 15 pixels. The chart is built with React, D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and loads city data as CSV and world atlas topology JSON.

SSam Hege

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Aaakarsh satyam

World Map with City Points

This example displays a world map with cities plotted as points using a Natural Earth projection. The visualization renders landmasses, country borders, graticules, and a sphere outline, with semi-transparent teal circles representing city locations. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for geographic projection, TopoJSON for world atlas data, and CSV-loaded city coordinates. City points are positioned through `d3.geoPath`'s projection function, converting latitude and longitude into SVG circle positions.

SSam Hege

Points on a map

This example displays a world map with points representing cities, sized by population. The map is rendered as SVG using React, with D3's `geoNaturalEarth1` projection and `geoPath` drawing landmasses, graticules, and sphere outlines. City coordinates are projected onto the map, and circles are scaled with `scaleSqrt`. The code loads world topology from a JSON via `useWorldAtlas` and city data from a CSV using the `csv` utility, styling land areas and points with CSS.

SSai Phaltankar

world map with points

This example visualizes global population distribution using a natural Earth projection, plotting cities as semi-transparent circles sized by population. The map renders SVG paths for land, graticules, and sphere outlines via `d3.geoPath`, while React hooks load world atlas TopoJSON and city CSV data, with `d3.scaleSqrt` mapping population to circle radii.

MMohammed Banani | MbDev

Points on a Map

This example renders a world map with city populations using a natural Earth projection. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses, graticules, and country interiors, while scaled circles overlaid onto the map encode each city’s population with a square-root scale. The data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`. The React application asynchronously fetches the world atlas and city data, then renders the visualization as an SVG.

TThomas Cormican

World Map Points

A world map rendered with D3's geoNaturalEarth1 projection and geoPath displays cities as semi-transparent circles sized by population via a square-root scale. The map includes graticules, landmasses, and country borders from the world-atlas TopoJSON dataset, transformed with topojson.feature and topojson.mesh. City coordinates and populations load from an external CSV, while React manages the SVG rendering. This example demonstrates combining geographic basemaps with proportional point symbols in a single React component.

PPadoSensei

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