points on atlas

100%

points on atlas

✓ Published1🌍 Public

Last edited Feb 9, 2022

Created on Feb 8, 2022

This visualization displays city population data as red circles plotted on a natural Earth projection world map. The map shows land masses in gray with white graticule lines and country borders. Circle radius encodes population using d3.scaleSqrt. The implementation uses d3-geo for the projection and path generation, topojson for world atlas data, and React for rendering SVG elements. City data comes from a CSV file loaded via d3.csv, while geographic boundaries come from the world-atlas TopoJSON dataset.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This interactive map displays global city populations as semi-transparent circles on a natural Earth projection, with country boundaries and graticules. The visualization uses d3.geoPath to render the sphere, graticules, and landmasses from the World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with circle radii scaled by d3.scaleSqrt based on population data from a CSV file. The map is built as a React application using SVG for rendering.

Ttharuta

90% match

Loading thumbnail…

Points on a Map

This visualization layers city population data onto a world map using a natural Earth projection. Semi-transparent green circles, sized with a square-root scale, represent each city’s population, with larger circles indicating more populous urban centers. The map includes geographic graticules, land masses, and country interiors rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. The React app loads TopoJSON world-atlas data and CSV city coordinates through custom hooks, with map features styled distinctly in light grays.

Ww.fukuyama@gmail.com

90% match

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

90% match

Loading thumbnail…

Points on world map

This visualization displays world cities as scaled circles on a natural Earth projection, with marker size encoding population using a square-root scale. The map renders land masses, graticules, and country borders in muted grays, while semi-transparent teal points overlay major urban centers. Built with React and D3 v7, it uses `geoNaturalEarth1` with `geoPath` for geographic projection, TopoJSON for world atlas data, and `scaleSqrt` to map population values to circle radii. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` function.

AAlex Stulov

89% match

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

89% match

Loading thumbnail…

Points on World Map

This visualization displays a Natural Earth projection world map with semi-transparent circles sized by city population. The map renders landmasses, country borders, and graticules using d3.geoPath and d3.geoNaturalEarth1, with data from World Atlas TopoJSON. City locations and populations come from a CSV file, with circle radii scaled by d3.scaleSqrt. The React component structure uses hooks to load both datasets asynchronously, and all marks are drawn as SVG elements.

Ssuserocc

89% match

Loading thumbnail…

points on a map

This example visualizes the world's most populous cities as circles on a natural Earth projection, with circle size encoding population via a square-root scale. The map displays land masses, country borders, graticules, and a sphere outline, rendered as SVG using React components. The code loads world atlas TopoJSON data for geographic features and city data from a CSV file, employing d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for map generation, while React hooks (useState, useEffect) manage asynchronous data loading.

Sseanowh

89% match

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules over a light gray sphere, with semi-transparent teal circles sized by city population. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render land, interiors, and sphere outlines from TopoJSON data. City coordinates are projected and drawn as SVG circles, with radii scaled using d3.scaleSqrt applied to population values from a CSV dataset. The React component structure manages state for both world atlas and city data.

Jj-PGi

89% match