Skip to main content
SimilarExport ZIP
100%

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

βœ“ Published0🌍 Public
Aacrasto-tibco
Last edited Jul 29, 2020
Created on Jul 29, 2020

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.

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

County Bubbles

A map of the United States uses brown circles sized by county population, with a legend for reference and hover tooltips showing the county name and population. The visualization overlays these bubbles on a gray landmass with white state borders, placing each circle at its county’s centroid. Built with D3 v3, it loads a TopoJSON file containing merged county, state, and nation geometries, projects it via `d3.geo.albersUsa`, and draws the map with `d3.geo.path` while sizing bubbles with `d3.scale.sqrt`. Population data comes from the 2012 American Community Survey.

Mmbostock
87% 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
86% 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
82% match
Loading thumbnail…

US County Populations - D3 Visualization

This interactive choropleth map visualizes 2013 U.S. county population estimates, using a logarithmic color scale with a sequential interpolateGnBu scheme to encode values. The visualization binds population data from Wikipedia-sourced CSV files to county paths from the us-10m.v1.json TopoJSON, rendered with d3.geoPath using a null projection and geoTransform scaling for performance. It features zoom/pan capabilities via d3.zoom, hover tooltips, and toggleable county borders, with a legend provided through d3.scaleSequential.

CConnorIngram
81% match
Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis
80% match
Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita
80% match