Blocky Counties

100%

Blocky Counties

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 2, 2013

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.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Blocky Counties

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.

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

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

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

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

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

77% match

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock

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

75% match