Polygon Clipping III

100%

Polygon Clipping III

✓ Published0🌍 Public

Last edited Jan 23, 2017

Created on Jan 23, 2017

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.

AI-generated description

If your clip polygon is more complicated than an axis-aligned rectangle, projection.clipExtent as shown previously won’t be sufficient. This example implements Sutherland–Hodgman clipping, which works for any convex clip polygon. Note, however, that this implementation only clips exterior polygon rings; you’ll need to do some additional work to handle any holes.

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

88% match

Loading thumbnail…

Polygon Clipping II

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>

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

74% match

Loading thumbnail…

Ring Extraction

This example animates the extraction of individual polygon rings from the U.S. states topology. It begins with a play button that, when clicked, hides the control and sequentially extracts each ring, drawing it in red and fading it out. The animation uses D3’s `transition`, `duration`, and `remove` methods alongside TopoJSON’s `topology` and `feature` APIs. The base map is rendered as a static SVG mesh via `d3.geo.path`, while the extracted rings are appended as separate SVG paths. The underlying data is a simplified `us.json` TopoJSON file of U.S. states.

Mmbostock

74% 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…

Ring Cutting

Clicking the play button hides the control and animates the cutting of every US state polygon into its constituent rings. The animation shows red boundary segments being separated from the remaining blue paths, with cuts processed one by one and fading out over time. The visualization uses TopoJSON state data, D3’s geo path for rendering, and SVG transitions to animate the cuts.

Mmbostock

70% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney

69% match

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

69% match