County Bubbles

100%

County Bubbles

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 2, 2014

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.

AI-generated description

Source: American Community Survey, 2012 5-year estimate.

gpl-3.0 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

87% 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

81% 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

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

80% match

Loading thumbnail…

country map

This visualization displays a map of the United States at the county level, using a green fill with black borders that highlight individual county boundaries. Hovering over any county changes its fill color to yellow. The map is rendered as SVG using D3 v5, with geographic projections handled by `d3.geoAlbersUsa` and `d3.geoPath`. County boundaries are generated from TopoJSON data loaded from the us-atlas package, and the code relies on `topojson.feature` to extract geographic features and `topojson.mesh` for boundary calculations.

Ddivyagunuguntla

80% 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

79% match

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

79% match

Loading thumbnail…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

MMTClass

79% match