Polygon Clipping II

100%

Polygon Clipping II

✓ Published0🌍 Public

Last edited Jan 23, 2017

Created on Jan 23, 2017

This example shows how to clip a geographic polygon to a rectangular extent, displaying the original US nation outline in red and its clipped counterpart in black over a blue background. It uses `d3.geoIdentity` with `clipExtent` and `d3.geoProject` to precompute the clipped polygon from TopoJSON data, while `d3.geoPath` renders both the original and clipped features as SVG paths.</svg>

AI-generated description

This example demonstrates how to use d3.geoIdentity and d3.geoProject to clip a polygon to an extent. While this example clips the polygon in the browser, this would more commonly be done on the command-line using geoproject. The advantage of this approach over clipping while rendering is that you can precompute the clipped polygon for faster rendering.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Polygon Clipping I

This example shows the United States rendered twice using a red fill, with a black-and-white clipped version superimposed on top. A blue rectangle marks the clipping boundary, and a white-stroked path displays the nation clipped to that rectangular extent. The visualization uses TopoJSON data from `us-10m.v1.json` and renders with `d3.geoPath`. The clipping is performed by `d3.geoIdentity().clipExtent`, which restricts the geographic projection to pixel coordinates between [100, 100] and [860, 500], demonstrating how to constrain a polygon’s visible area in an SVG context.

Mmbostock

91% match

Loading thumbnail…

Polygon Clipping III

This example demonstrates Sutherland–Hodgman polygon clipping by clipping the exterior rings of the United States map to a convex hexagonal region. A blue hexagon serves as the clip boundary, while red paths show the original map rings and black paths display the clipped results. The implementation uses a custom `d3.polygonClip` function from the provided `d3-polygon-clip.js` file, operating on TopoJSON data loaded via `d3.json` and rendered as SVG paths.

Mmbostock

87% match

Loading thumbnail…

Clipped Map Tiles

This example clips MapBox Natural Earth II raster tiles to the outline of the United States, which is loaded as TopoJSON. Using the d3.geo.tile plug-in and a d3.geo.mercator projection, it generates a grid of image tiles and applies a clipPath referencing the land outline. The stroke class adds a black outline, and the code dynamically selects tile URLs from MapBox subdomains.

Mmbostock

78% match

Loading thumbnail…

Project to Bounding Box

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()`.

Mmbostock

71% match

Loading thumbnail…

Gist 85a75203bb9327d5704c

This example visualizes a single blue polygon with a semi-transparent fill and a bold outline, rendered from GeoJSON coordinate data. The visualization relies on a custom rendering approach, likely using d3.geoPath to project and draw the polygon onto an SVG or canvas element. The code applies explicit styling properties—fill, fill-opacity, and stroke-width—directly from the feature’s style object, demonstrating how geographic features can be styled programmatically. The rendering is static, with no animation or interaction, and the polygon’s vertices span longitude and latitude values to illustrate basic map-projection output.

CCliffordAnderson

71% match

Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Mmbostock

70% match

Loading thumbnail…

ice8abhi2

This example displays the geographic boundary of the United States as a single dark green polygon with a red stroke on an aqua background, rendered using SVG. The code loads world country data from the World Atlas TopoJSON source via `d3.json`, converts it using `topojson.feature`, filters for the United States, and projects the path with `d3.geoAlbersUsa` and `d3.geoPath()`. The `geoAlbersUsa` projection is scaled and translated to center the map within the 960 by 500 pixel viewport.

Aabhi051197

69% match

Loading thumbnail…

Dynamic Simplification III

This example demonstrates dynamic simplification of a filled polygon representing US land masses, where the level of detail adapts during zooming. The effect is subtle because the polygon fill hides most topological changes. Animated transitions repeatedly zoom between a close-up of the Chesapeake Bay and a full view of the country. The visualization uses d3.geo.path with a custom d3.geo.transform to filter points based on an area threshold, rendered on a Canvas via the context API, with d3.behavior.zoom and TopoJSON data.

Mmbostock

69% match