Skip to main content
SimilarExport ZIP
100%

Blocky Counties

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 4, 2012

This example visualizes the lat-lon bounding box for each county in the United States, rendering blocky, rectangular outlines instead of the actual county shapes. The map uses the Albers USA projection and displays all county bounding boxes as steel-blue, stroked paths on an SVG canvas. The code loads US county data from a JSON file, then applies `d3.geo.bounds` to compute each county’s geographic extent, which is drawn via a single `d3.geo.path` object. It relies on the `d3.geo` module and `topojson.feature` to filter and structure the geographic features.

AI-generated description

This example uses d3.geo.bounds to draw the lat-lon bounding box for each county. Compare to the projected bounding box using path.bounds.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Blocky Counties

Blocky Counties visualizes the projected bounding boxes of every US county as square-edged outlines instead of their true shapes. The map renders each county’s axis-aligned bounding rectangle computed from its projected geometry, producing a blocky, grid-like silhouette of the nation. The code uses d3.geo.path with an Albers USA projection, iterates over counties from a TopoJSON file, and builds SVG path data with `M`, `H`, `V`, and `Z` commands based on the bounds returned by `path.bounds`. The result is a stylized, abstract representation of county positions and extents.

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

US Counties

This visualization displays the boundaries of every county in the United States, along with state lines and a stylized national outline with a drop-shadow effect. The map uses an Albers equal-area conic projection via `d3.geoAlbersUsa()` and renders GeoJSON paths with `d3.geoPath()`. It employs the TopoJSON client to convert TopoJSON data from a GitHub-hosted file into features, and uses SVG elements with blur filters for the shadow.

MMTClass
83% match
Loading thumbnail…

Fuzzy Counties

The example draws a diagonal line across the bounding box of every U.S. county, creating a dense, cross-hatched pattern over the nation. Using `d3.geo.bounds`, it computes each county’s geographic extent and maps those bounds to projected coordinates via `d3.geo.path` with an Albers USA projection. The results are rendered as a single `MultiLineString` in SVG, built from TopoJSON county data. The visualization highlights the irregular shapes and varying sizes of county boundaries through the intersecting diagonals.

Mmbostock
83% match
Loading thumbnail…

US Counties

This example shows a map of all US counties and state boundaries, rendered with a drop-shadow effect for visual depth. It displays the nation’s outline, state lines, and individual county borders using SVG paths. The code uses D3 v4’s `d3.geoAlbersUsa()` projection and `d3.geoPath` to draw the geography, while TopoJSON’s `topojson.feature`, `topojson.merge`, and `topojson.mesh` convert the county data from the provided JSON. A blurred filter and layered `use` elements create the shadow effect.

MMTClass
82% 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…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.
80% match
Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock
80% match