Skip to main content
100%

Gist 7f1be4fc445f5eab7738096f09be4a9c

✓ Published0🌍 Public
Aamortka
Last edited Oct 26, 2016
Created on Oct 26, 2016

This example renders a map of the United States using Mapbox tiles, clipped to the country’s land area. A d3.geo.mercator projection positions the map, while the d3.geo.tile helper computes the visible image tiles at the current zoom level. Tile images from Mapbox’s natural-earth-2 layer are placed in an SVG group clipped by a path of the US land topology, with a black stroke outline drawn over the land boundary. The tile loading adapts to the device pixel ratio, ensuring crisp raster tiles on high-density displays.

AI-generated description

Similar vizzes

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
83% match
Loading thumbnail…

Tile by Bounding Box

This example demonstrates map tiles clipped to a geographic bounding box, showing California with a vector overlay of state boundaries. It uses the d3-tile library to load OpenStreetMap raster tiles, positioning them with an adjusted Mercator projection from d3.geoMercator. The projection scale and translation are computed from the bounding box, then snapped to the nearest power of two for crisp tile rendering. The SVG overlay draws a topojson mesh of U.S. states using d3.geoPath, while the tile images are appended as absolutely-positioned img elements.

Mmbostock
81% match
Loading thumbnail…

Tile by Bounding Box

This example demonstrates how to automatically position map tiles from OpenStreetMap to fit a specified geographic bounding box, using a Mercator projection. The code calculates the necessary scale and translation to center the bounding box, adjusts the projection with `d3.geoMercator()`, and generates the appropriate tile URLs via `d3.tile()`. A vector outline of US states, rendered with `d3.geoPath()`, is overlaid on the raster tiles to show the projection's alignment.

CCurran Kelleher
80% match
Loading thumbnail…

Raster & Vector 4.0

This example shows an interactive map of the United States with OpenStreetMap raster tiles overlaid by a vector outline of US counties. It combines zooming and panning with a Mercator projection. The code uses D3 v4.0 alpha, the d3-tile library for tile loading, and d3.geoPath with TopoJSON to render county boundaries. As the user zooms, the vector path’s stroke-width adjusts to maintain a constant screen-space width, while the raster tiles dynamically load from OpenStreetMap servers.

CCurran Kelleher
80% match
Loading thumbnail…

Gist 877339b9886ef9a8b6db2fc0593bb61e

This example displays a map of the United States using the Albers USA projection, showing each state as a filled polygon. The code loads GeoJSON state boundary data from a local `us-states.json` file and renders it as SVG paths using `d3.geo.path()` with the projection. Built with D3 v3, the visualization sets a fixed canvas size and appends path elements to the SVG container for each feature in the dataset.

MMelanieSalignat
79% match
Loading thumbnail…

fresh block

This example presents an interactive map of the United States that layers OpenStreetMap raster tiles over a vector outline of the country. Users can pan and zoom, which triggers the loading of new map tiles and the redrawing of the state boundaries. The visualization is built with D3 v4, using its geographic projection and path modules alongside the d3-tile and d3-zoom libraries. The vector data originates from a local US GeoJSON file, while the background imagery is fetched from the OpenStreetMap tile server.

AAnaMal08
79% match
Loading thumbnail…

Gist a76504adb7799e4c28c6d1558bd35ce3

This example displays a map of the United States using an Albers USA projection, rendering state boundaries as SVG paths. It loads geographic data from a local `us-states.json` file containing a FeatureCollection of state polygons. The code uses d3.json to fetch the data and d3.geo.path with a d3.geo.albersUsa projection to convert GeoJSON coordinates into screen paths. The visualization presents a simple, static outline map without additional data encoding or interaction.

AAurelink
79% match
Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Mmbostock
78% match