Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Jan 21, 2022

Created on Jan 21, 2022

This visualization displays the world’s most populous cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The map renders landmasses, country interiors, graticules, and a sphere outline via d3.geoPath and geoNaturalEarth1. City positions are projected from latitude and longitude coordinates, with data loaded from a CSV of world cities using the d3.csv function. The SVG marks are built as React components, while the atlas topology comes from the world-atlas package.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

93% match

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

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

93% match

Loading thumbnail…

Points on a Map

This example plots the world’s most populous cities as translucent circles over a natural Earth projection, with circle size scaled by population using a square-root scale. A D3 geoPath renders country landmasses, graticules, and interior borders from World Atlas TopoJSON data, while React manages the component state and SVG rendering. City coordinates are projected via geoNaturalEarth1, and each point includes a tooltip showing city name, country, and longitude/latitude. Hovering over a country reveals its name through an SVG title element.

PPhronesis

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

93% match

Loading thumbnail…

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Jjbruzzo

93% match

Loading thumbnail…

Points on a Map (with Size)

This visualization shows world cities as semi-transparent circles on a natural Earth projection map, with circle size encoding each city's population using a square root scale. The map displays land masses, graticules, and country interiors rendered via `d3.geoPath`. City positions are projected from coordinates, while population data loads from a CSV using `d3.csv`. The React component structure uses hooks like `useState` and `useEffect` to fetch and manage both TopoJSON world atlas data and city data.

WWaseem Medhat

92% match