Skip to main content
SimilarExport ZIP
100%

Population Circles on US Map with D3.js!

✓ Published0🌍 Public
Aacrasto-tibco
Last edited Jul 29, 2020
Created on Jul 28, 2020

This interactive map of the United States visualizes county-level population data as circles. It uses the D3.js library (v5) to render an SVG graphic, employing `d3.geoPath` and a map projection sourced from a TopoJSON file. County centroids are calculated with `d3.geoCentroid` to position each circle. The visualization reads population figures from a local CSV file, and includes a zoom feature via `d3.zoom` for user interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

County Population Circles on US Map with D3.js!

This example displays COVID-19 case counts as scaled circles overlaid on a map of US counties. The visualization uses `d3.geoAlbersUsa()` for projection, `d3.geoPath` to render state boundaries from TopoJSON, and `d3.scaleSqrt` to map case counts to circle radii based on data from a CSV file. County centroids, computed with `geoPath.centroid`, position the circles, while a `d3.zoom` handler enables panning and zooming.

Aacrasto-tibco
87% match
Loading thumbnail…

County Population Bubble Map for the US with D3.js!

A county population bubble map for the US uses an SVG projection with geoAlbersUsa and d3.geoPath to render state and county boundaries from TopoJSON data. Circles positioned via pathGenerator.centroid are sized by a d3.scaleSqrt mapping COVID-19 case counts from a CSV dataset, with zoom enabled through d3.zoom for interactive exploration.

Aacrasto-tibco
86% match
Loading thumbnail…

US Map with County Centroids using D3.js

A US map displays state boundaries in light green with small red circles marking county centroids, computed via `d3.geoPath` and `d3.geoCentroid` from TopoJSON data. The visualization uses D3 v5 and the `geoAlbersUsa` projection, rendering SVG shapes. County population and COVID-19 case data from a CSV file determines circle sizing, though the visible circles have a fixed radius. Zooming is enabled through `d3.zoom`, and the map is drawn from the us-atlas counties-10m.json dataset.

Aacrasto-tibco
86% match
Loading thumbnail…

circles on a map

This map uses D3 v5 to display country populations in 2020 as circles overlaid on a geographic projection. The base map is drawn with `d3.geoPath` and a natural Earth projection, while circle radii are scaled using `d3.scaleSqrt` based on population data. Countries lacking population data are filled red. Data comes from a United Nations population CSV joined with TopoJSON world map geometry. An interactive zoom feature is implemented via the `d3.zoom` API.

Jjlongwellchc
85% match
Loading thumbnail…

Circles on a Map

This visualization displays global population by country using scaled circles positioned at each country’s geographic centroid. Circle area corresponds to population magnitude, with a square-root scale controlling radius. The map supports pan and zoom, and hovering over a country reveals its name and population. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country outlines from TopoJSON, and `d3.zoom` for interaction. Population data is loaded from a CSV file, and a custom size legend displays tick values using `d3.scaleSqrt`.

Jjiangxu1298
84% match
Loading thumbnail…

Circles on a Map

This interactive map displays global population data using proportional circles positioned over each country’s centroid, with a color-coded legend for categories and a size legend for population values. Built with D3 v5, it renders world geography via `d3.geoPath` and a Natural Earth projection, while applying `d3.zoom` for panning. Population values from a CSV are joined to TopoJSON features, and `d3.scaleSqrt` determines circle radii, with tooltips showing region names and formatted numbers. SVG elements and transitions animate legend updates.

Ggilbster
84% match
Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles positioned on a natural Earth projection map, with circle area proportional to 2018 population data loaded from CSV. The map supports panning and zooming via d3.zoom, and hovering over a country reveals its name and population in a tooltip. The visualization uses d3.geoPath and topojson for rendering country boundaries, d3.scaleSqrt for sizing circles, and d3.scaleOrdinal with schemeSpectral for a color legend, all rendered as SVG with d3 v5.

GGiovanniD_
84% match
Loading thumbnail…

Circles on a Map

This example visualizes population by country using scaled circles overlaid on a natural Earth projection map, with circle area proportional to each country’s 2018 population. Pan and zoom are enabled via d3.zoom, and hovering over a country reveals its exact population through a title tooltip. The map is rendered as SVG using d3.geoPath and topojson, while a d3.scaleSqrt maps population values to circle radii. A size legend generated with custom d3 code displays population ticks, and the data is loaded from a CSV and a TopoJSON world atlas file.

Wwaqastufail
84% match