Skip to main content
SimilarExport ZIP
100%

County Population Circles on US Map with D3.js!

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
91% match
Loading thumbnail…

Population Circles on US Map with D3.js!

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.

Aacrasto-tibco
87% match
Loading thumbnail…

Circles on a map

This example visualizes COVID-19 case counts by country on a natural Earth projection map, with circles sized by total cases as of May 16, 2020. Using d3.geoNaturalEarth1 and d3.geoPath, it renders country outlines and positions proportional circles via d3.geoCentroid. A d3.scaleSqrt maps case numbers to circle radii, and a custom size legend (with d3.format) explains the scaling. The map supports zooming through d3.zoom, while country data is joined from a CSV file and TopoJSON world-atlas geometry.

Aacb30
83% match
Loading thumbnail…

COVID Visualization

This visualization displays the number of COVID-19 cases per US county using a choropleth map colored with a threshold-based scale. It loads US county boundary data from the `us-atlas` package and New York Times case data from GitHub, merging them via topojson features. The map is rendered as SVG paths using `d3.geoPath` with an Albers projection, and supports zooming via `d3.zoom`. Counties change fill opacity on hover and show case counts in tooltips.

DDennis Angelov
83% match
Loading thumbnail…

Circles on a Map

Circles on a Map visualizes COVID-19 confirmed cases by country as proportional circles overlaid on a natural Earth projection. Circle area encodes case counts via a square-root scale, and hovering highlights country boundaries with a tooltip showing the country name and case total. The visualization supports pan and zoom interactions. Built with D3 v5, it uses `d3.geoPath` with TopoJSON world data, `d3.geoCentroid` for circle placement, and a zoom behavior applied to an SVG group. Population data from the UN and case data from a CSV drive the marks.

Iinroadings
82% match
Loading thumbnail…

Circles on a map

This example visualizes confirmed COVID-19 cases as of August 30, 2020, using scaled circles positioned at country centroids on a natural Earth projection. It renders an SVG world map with d3.geoPath, applies a d3.scaleSqrt for circle radii, and includes interactive pan/zoom via d3.zoom. A color legend uses d3.scaleOrdinal with schemeSpectral, while a separate size legend displays tick marks. Data comes from a CSV time series and TopoJSON world atlas, processed with topojson.feature, with hover tooltips showing country names and case counts.

VVaggelisKlt
82% match
Loading thumbnail…

County Circles

This symbol map displays every U.S. county as a circle centered on its geographic centroid, with the circle’s radius scaled so its area matches the county’s actual land area. The visualization encodes area quantitatively through the circle size, using a stroke-only rendering in steelblue against a white background. The code loads TopoJSON county boundaries from a remote gist, converts them to GeoJSON with `topojson.feature`, and positions each circle via `d3.geo.path().centroid`. Circle radii are computed from `path.area` using the square-root formula for proportional area scaling, all rendered as SVG elements with d3.v3.

Mmbostock
81% match