Project to Bounding Box

100%

Project to Bounding Box

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Feb 4, 2013

This example shows a single state selected from a GeoJSON collection and highlights it with an outline, while displaying the full set of U.S. state boundaries in gray. It centers the highlighted state within the viewport by using the Albers projection’s `d3.geo.albers()` and adjusting its scale and translation based on the bounding box computed via `path.bounds()`. The code loads TopoJSON data, converts it to GeoJSON with `topojson.feature`, and renders both the state mesh and outline as SVG paths using `d3.geo.path()`.

AI-generated description

In response to a Stack Overflow question regarding centering a map given a GeoJSON object.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Project to Bounding Box

This example demonstrates how to center a map on a specific geographic feature and scale it to fill the viewport. It isolates Ohio from a GeoJSON dataset of US states, calculates the feature's bounding box, and applies Albers projection with custom scaling and translation to fit the map. The visualization renders the full US states in gray, state boundary mesh lines in white, and highlights the selected Ohio outline in dark gray. The code uses d3.geo.albers, d3.geo.path, and the topojson library for feature extraction and mesh generation.

FFrissAnalytics

84% match

Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, with each state drawn as a filled gray polygon with white outlines. The visualization loads GeoJSON data from a remote `us.json` file via `d3.json`, which is then converted into SVG paths using `topojson.feature` and `d3.geo.path()`. The map is rendered as a single SVG path element within a 960×500 canvas, demonstrating a basic static choropleth without additional interactivity or styling layers.

Mmbostock

81% match

Loading thumbnail…

Zoom to Bounding Box

Clicking any U.S. state zooms the Albers USA projection to that state’s bounding box, while clicking the background or the active state resets the view. The code computes the path bounds via `d3.geo.path` and uses a `g.transition()` with a computed translate and scale to animate the viewport, adjusting stroke widths inversely to the zoom. It loads TopoJSON state boundaries and uses D3 v3’s `d3.geo.albersUsa` projection, rendering SVG paths with click handlers for interactivity.

Mmbostock

81% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

81% match

Loading thumbnail…

US State Map

This example displays a static map of US states, with each state rendered as a gray path using an SVG. The code loads state boundary data from a TopoJSON file and converts it into GeoJSON features using the `feature` function from topojson. It then projects the geographic coordinates to screen space with the `geoAlbersUsa` projection and `geoPath` generator from D3, appending the resulting paths to the SVG. No additional data or interactivity is applied.

Ddanrhymes

80% match

Loading thumbnail…

US State Map

This example displays a choropleth-style map of the United States, showing state boundaries as gray filled polygons with white strokes on a blank background. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes, while the TopoJSON `feature` API extracts state geometries from the `counties-10m.json` dataset hosted via jsdelivr. The map is drawn as SVG paths appended to a fixed 960×500 canvas, with styling applied through a CSS class.

AAkhila-Battula

79% match

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Bbhargavarathod

79% match

Loading thumbnail…

Albers Projection

This example displays a map of the United States using the Albers projection, a conic equal-area projection commonly used for national-scale choropleths. It renders the geographic boundaries as gray SVG paths with white strokes, loaded from a local `states.json` GeoJSON file. The code uses the D3 v3 library, specifically the `d3.geo.albers()` projection and `d3.geo.path()` to project and draw the feature collection.

Mmbostock

79% match