Raster & Vector IV

100%

Raster & Vector IV

✓ Published0🌍 Public

Last edited Jul 25, 2019

Created on Mar 13, 2014

This example shows U.S. state capitals as red points on an interactive pan-and-zoom map of the United States, with raster map tiles from OpenStreetMap displayed beneath the vector data. Using d3-tile to load and position the image tiles, d3-zoom to handle pan and zoom gestures, and a d3.geoMercator projection with d3.geoPath to render the point locations from a CSV dataset, the map updates the tile layer and redraws the points on every zoom event, supporting scale levels from 2^11 to 2^14.

AI-generated description

Using d3-tile to display raster image tiles underneath a CSV dataset of point locations (U.S. state capitals), and d3-zoom for pan & zoom. See also the TopoJSON version and the static version.

Tiles copyright OpenStreetMap contributors.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Raster & Vector IV

This visualization combines OpenStreetMap raster tiles with vector overlay points, showing the locations of all 50 U.S. state capitals. The SVG rendering uses d3.tile to fetch and position image tiles, while a CSV dataset provides latitude/longitude coordinates for each capital, which are drawn as red points using d3.geoPath with a Mercator projection. Pan and zoom interactions are handled by d3.zoom, which dynamically updates both the tile layer and the overlaid points. The map initially centers on the contiguous United States.

CCurran Kelleher

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

89% match

Loading thumbnail…

Raster & Vector III

This example demonstrates pan and zoom interactions on a map of US counties, combining raster OpenStreetMap tile images with vector boundaries rendered as red outlines. The code uses d3-tile to load and position raster tiles, and d3.zoom to manage the user-driven transformations. A d3.geoPath with a Mercator projection draws a TopoJSON mesh of counties, while the zoom handler updates both the tile positions and the vector’s transform and stroke-width for efficient performance. The vector data is fetched from a GitHub-hosted TopoJSON file.

CCurran Kelleher

86% match

Loading thumbnail…

Raster & Vector II

This example presents a hybrid vector-raster map of the United States, seamlessly blending OpenStreetMap raster tiles with red vector state boundaries. The visualization handles interactive pan and zoom, reprojecting the TopoJSON geometry in real time to maintain alignment with the underlying tiles. The implementation leverages d3.geoMercator for projection, d3.tile for raster tile management, d3.zoom for interaction, and d3.geoPath for rendering vector paths. The raster layer is populated with images from OSM’s tile server, while the vector layer uses TopoJSON data from a gist source.

CCurran Kelleher

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

84% match

Loading thumbnail…

Raster & Vector III

This example shows how vector geographic features (U.S. counties) can be overlaid on raster map tiles from OpenStreetMap, with both layers staying aligned during pan and zoom interactions. The vector layer is rendered as a single SVG path using `d3.geoPath` and a `d3.geoMercator` projection, while raster tiles are fetched and positioned via `d3.tile` and `d3-zoom`. Instead of reprojecting, the code updates the SVG transform and stroke-width for efficiency, using `d3.zoomIdentity` and the `on("zoom")` event.

Mmbostock

84% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

79% match

Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.

IIgathi

78% match