Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Oct 10, 2021

Created on Oct 10, 2021

This example displays a world map with dots marking cities, sized proportionally to population via a square-root scale. The map uses a Natural Earth projection and includes graticules and country borders. The visualization is built with React and D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while city data comes from the Data Canvas Sense Your City dataset. Circles are positioned using the projection and styled with opacity.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Aazharahmad0

95% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Ccshm407

93% match

Loading thumbnail…

Points on a Map

A world map displays the geographic distribution of cities, with circles sized by population. The visualization uses a natural Earth projection with graticules, land masses, and country borders. Built with React and D3 v6, it employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the SVG. City data comes from a CSV of world cities, while country boundaries derive from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Ee-ines

93% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

92% match

Loading thumbnail…

Points on a map

This example displays a world map with city points scaled by population using a square-root scale. The map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, showing land masses, interiors, graticule, and sphere outlines. City circles are positioned via the projection and styled with opacity, while the component structure uses React with custom hooks to load TopoJSON world data and CSV city data. The visualization clearly communicates population distribution across the globe.

Ccynichole

92% match

Loading thumbnail…

Points on a Map

This example displays a world map with city points scaled by population, using a natural Earth projection. The visualization layers graticules, land masses, and country borders beneath translucent teal circles. React components manage the rendering, while D3 utilities handle geographic projections and data loading. The size of each circle is determined by a square root scale mapping population values to a maximum radius of 15 pixels, with city data sourced from a CSV of world cities and geographic features from a TopoJSON world atlas.

LLaura Johnson

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

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