Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
Yyyaaa1
Last edited Oct 20, 2019
Created on Oct 20, 2019

A geographic visualization displays US cities as circles, with area proportional to total crimes reported. City data originates from a CSV file, while state boundaries and graticules are drawn from the us-atlas TopoJSON. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering map features, and d3.scaleSqrt to map crime counts to circle radii. React and D3 v5 manage the SVG output, with semitransparent teal points layered over a muted landmass.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with point size proportional to the number of crimes. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, rendering spheres, graticules, and land boundaries from World Atlas TopoJSON data. Circle radii are scaled using d3.scaleSqrt, with city coordinates and crime statistics loaded from a CSV file. The React component architecture leverages hooks to fetch and process data asynchronously.

Yyyaaa1
92% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city violent crime rates, using a square-root scale to encode the data. The map includes landmasses, graticules, and country borders rendered via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 v5. City coordinates are projected from longitude and latitude to SVG circle positions. The visualization is built with React, loads data via `useWorldAtlas` and `useCities` hooks, and uses TopoJSON for country boundaries and CSV crime data.

Yyyaaa1
91% match
Loading thumbnail…

Sized Points on a map

This visualization displays global cities as sized points on a natural Earth projection map, with circle radii scaled proportionally to population using d3.scaleSqrt. The map renders landmasses, graticules, and country interiors as SVG paths generated via d3.geoPath, while city positions are projected from longitude and latitude coordinates. The React component loads world atlas TopoJSON and city CSV data asynchronously, then applies semi-transparent teal circles to highlight population distribution across continents.

SSong Tao Chen
86% match
Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

MMari Roberts
85% match
Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke
84% 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
84% 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
84% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using sized points to encode population via a d3.scaleSqrt square-root scale. The visualization renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with graticules and country boundaries from World Atlas TopoJSON. City data from Simplemaps is plotted as semi-transparent circles. The React-based code loads TopoJSON and CSV data asynchronously, then applies d3.geoPath to project coordinates and d3.scaleSqrt to determine circle radii.

Aakp21
84% match