Points On a Map

100%

Points On a Map

✓ Published1🌍 Public

Last edited Mar 21, 2021

Created on Mar 21, 2021

This visualization displays a world map with cities rendered as circles, where the radius of each circle is proportional to the city's population using a square-root scale. The map uses an equal-area natural Earth projection with graticules and land masses drawn via `d3.geoPath`, while city coordinates are projected through the same projection. City population data comes from a CSV file, and the visualization is built with React and D3 v6, rendering all elements as SVG.

AI-generated description

Scatter Plot with time series data. All date and time data needs to follow (ISO 8601) time and date formatting for proper plotting. [https://en.wikipedia.org/wiki/ISO_8601].

MIT Licensed

Similar vizzes

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

96% 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

95% match

Loading thumbnail…

Points on a Map III

This visualization displays world cities as scaled circles on a natural Earth projection, with circle radius proportional to population using a sqrt scale. The map shows graticules, land masses, and country borders, with city points overlaid. Built with React and D3 v5, it uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features, while d3.csv loads city data and d3.scaleSqrt maps population values to radii.

Nnexus1058

94% match

Loading thumbnail…

points on a map redo

This visualization displays a world map with city population data rendered as proportional circles. The map uses an equal-area natural Earth projection with graticule lines and geographic boundaries. City markers are sized using a square-root scale based on population values, allowing for comparison of relative magnitudes. The example loads geospatial data from the world-atlas package and city data from a CSV file, then renders everything as SVG elements using React and D3's geoPath and geoGraticule APIs. The visualization highlights the distribution of populated cities across continents with a clean, minimalist aesthetic.

SSong Tao Chen

94% 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

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 cities on a world map, with circle area encoding each city’s population. A natural Earth projection, rendered via `d3.geoPath`, draws land, country interiors, graticules, and a sphere backdrop in SVG. City coordinates are projected using `d3.geoNaturalEarth1`, and circle radii come from a `d3.scaleSqrt` scale. The map uses world-atlas TopoJSON data, while city populations come from a cleaned CSV of world cities sourced from the UN World Population Prospects 2019.

SShanmukh

93% match

Loading thumbnail…

Points on a Map

A world map displays cities scaled by population using semi-transparent teal circles. The visualization renders geographic landmasses, graticules, and interior borders via d3.geoPath with a Natural Earth projection, while a d3.scaleSqrt maps population values to circle radii. City locations are projected from latitude and longitude coordinates, and data is loaded from a CSV using d3.csv. The React application overlays these marks on an SVG canvas.

SSerind Joshua McCue

93% match