Skip to main content
SimilarExport ZIP
100%

dv2020-ep37-viz39 - points on a map, using size

✓ Published1🌍 Public
Zzach b.
Last edited Mar 27, 2023
Created on Mar 24, 2023

This visualization displays world cities as circles on an interactive map, with circle size encoding population using a square-root scale. The map uses a natural Earth projection rendered via `d3.geoPath`, with country borders, shorelines, and graticules from World Atlas TopoJSON data. City coordinates come from a Simplemaps CSV, filtered to populations above 50,000. React manages the component state, while D3 handles geographic projections, scaling, and SVG rendering.

AI-generated description

world map using world atlas, natural earth map data.

city data originally from simplemaps. filtered to cities w/ population greater than 50,000. City data from Simplemaps: World Cities Database

Episode 37

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep36-viz38 - points on a map

This visualization displays a world map with over 50,000 cities plotted as points, using the Natural Earth dataset via the `topojson` library for geographic boundaries and a CSV of global city coordinates from Simplemaps. The map uses the `geoNaturalEarth1` projection and `geoPath` from d3 v5 to render countries, borders, shorelines, and graticules as SVG paths, with city data filtered by population and drawn as small circles. The React-based app loads data asynchronously and renders the interactive SVG within a fixed canvas, styled with a dark background and semi-transparent fills.

Zzach b.
91% match
Loading thumbnail…

Dataviz 10 - Points on map with sizes

A world map displays global cities with populations over 50,000, using circle size to encode each city’s population. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, country interiors, graticules, and a sphere backdrop. City coordinates are projected onto the map, and circle radii are scaled with `scaleSqrt` based on population data from Simplemaps. Built with React and d3.v5, the SVG rendering includes styled land, sphere, and interior boundary paths for a polished cartographic appearance.

RRyAlpha
89% match
Loading thumbnail…

Dataviz 2020_Ep37 - 29. Using Size

This visualization displays global city populations using circles overlaid on a world map, with area encoding population size. The map uses natural Earth projection with graticules and land boundaries from TopoJSON. The data comes from a CSV of world cities with latitude, longitude, and population values. React manages the component state while d3.scaleSqrt maps population to circle radius, and d3.geoPath renders the geographic features. SVG circles are drawn with semi-transparent teal fill, and the rendering uses d3.json and d3.csv for data loading.

MMinwoo Pak
89% 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
88% match
Loading thumbnail…

Sized Points on a Map - Episode 37

This example displays world cities as circles on a natural Earth projection, with each circle's radius proportional to the city's population using a square-root scale. The visualization renders a land and graticule backdrop using D3's geoPath and geoNaturalEarth1, and overlays the sized points as SVG circles. City data is loaded from a CSV URL, while world map geometry comes from the world-atlas TopoJSON. The React application uses D3's `csv`, `json`, `feature`, and `mesh` functions to prepare and project the data.

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

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

FFloorNummer
88% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw
87% match