Skip to main content
SimilarExport ZIP
100%

Making a world map with city points React and D3

✓ Published1🌍 Public
Bblackbottt
Last edited Jun 1, 2022
Created on May 31, 2022

This example displays a world map with city points sized by population, built using React and D3. It shows countries with interior boundaries, a graticule, and a sphere background, with city circles projected using the d3.geoNaturalEarth1 projection. The map uses d3.json to load the world-atlas TopoJSON, d3.csv for city data, and d3.geoPath with d3.geoGraticule for rendering. City radii are scaled using d3.scaleSqrt, while d3.max determines the scale domain. The visualization is rendered as an SVG within a React component, using React hooks to manage asynchronous data loading.

AI-generated description

working with time weekly_temp SA

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map - React, D3

This example displays a world map with city points, using a natural Earth projection to render country boundaries, graticules, and interior borders from World Atlas TopoJSON data. City locations are plotted as semi-transparent circles based on latitude and longitude coordinates loaded from a CSV file. The visualization is built with React for component structure and D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map geometry, rendered as SVG elements.

NNelson M
92% match
Loading thumbnail…

Fork of Making a world map with city points React and D3

This example visualizes a world map with city points using React and D3. The map displays missing migrant incidents, with circle sizes representing the “Total Dead and Missing” metric via a d3.scaleSqrt. The geoNaturalEarth1 projection renders country boundaries, graticules, and interiors using d3.geoPath, while topojson provides the world-atlas data. City coordinates are projected and plotted as circles, with data loaded from a CSV using d3.csv. The SVG-based rendering uses React components for the atlas and marks.

Bblackbottt
91% match
Loading thumbnail…

point on a Map

This example displays a world map with country boundaries, graticules, and city points sized by population. The map uses D3’s `geoNaturalEarth1` projection with `geoPath` to render land, interiors, and sphere outlines from World Atlas TopoJSON data. City coordinates from a CSV are projected onto the map, with circles scaled via `scaleSqrt` based on population. The visualization is built with React, rendering SVG elements, and uses D3 v5 for data loading and geo utilities. Styling is applied through CSS to differentiate land, graticules, and interiors.

Hhung2606
91% match
Loading thumbnail…

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
90% match
Loading thumbnail…

World Map points

A world map displays city points scaled by population, with country boundaries, graticules, and a sphere outline rendered as SVG. Using React and D3 v5, the visualization employs d3.geoNaturalEarth1 for projection, d3.geoPath for drawing land and graticule geometry, and d3.scaleSqrt for radius mapping. City data comes from a CSV of world cities, while country shapes load from World Atlas TopoJSON. Semi-transparent teal circles overlay the map, with land filled light gray and interiors shown as thin strokes.

Mmarianamartins87
90% match
Loading thumbnail…

Points on a Map

This example displays world cities as scaled circles on a natural Earth projection, with each circle’s radius proportional to its population. The map renders landmasses, graticules, and interiors using `d3.geoPath` and `d3.geoNaturalEarth1`, while the city points are drawn as SVG circles with a square-root scale for size encoding. The visualization loads geographic topology from `world-atlas` and city CSV data via `d3.csv`, using React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching and triggering re-renders.

NNikita Toropov
90% match
Loading thumbnail…

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
90% match
Loading thumbnail…

8:46 map with points

A world map rendered with D3's geoNaturalEarth1 projection displays cities as scaled circles representing population, with each country filled by a random hue derived from a preset green. The visualization uses d3.geoPath for geographic shapes, d3.geoGraticule for grid lines, and d3.scaleSqrt for circle sizing based on city population data loaded via d3.csv. React manages state and renders SVG elements, while topojson feature and mesh APIs extract country boundaries and interior borders from the world-atlas dataset.

Uumgi
90% match