Plot vector points on a cropped raster image with d3.js

100%

Plot vector points on a cropped raster image with d3.js

✓ Published0🌍 Public

Last edited Jul 30, 2014

Created on Jul 30, 2014

This example shows how to plot vector points from a GeoJSON file on top of a cropped raster image (map) using D3.js. A Mercator projection is aligned to the raster’s geographic bounds, then scaled and translated to fit the image dimensions. Supermarket locations are rendered as red SVG circles over the image.

AI-generated description

Similar vizzes

Loading thumbnail…

Raster & Vector I

This example overlays vector street data from a TopoJSON file onto raster map tiles from OpenStreetMap. The visualization uses d3-tile to fetch and position the image tiles, while d3.geoPath renders a black mesh of road lines over them. The map is centered on Detroit using a Mercator projection configured with d3.geoMercator. Both the raster tiles and the vector streets are drawn as SVG elements, combining the two data types in a single static view. The code also loads the TopoJSON with d3.json and converts it to a mesh using the topojson library.

CCurran Kelleher

74% match

Loading thumbnail…

Raster & Vector I

This example displays geographic vector boundaries overlaid on a raster map of Detroit. Using d3-tile to fetch and position OpenStreetMap image tiles, it renders them as a base layer within an SVG canvas. The d3.geoPath and d3.geoMercator projections draw a TopoJSON mesh of Detroit’s streets on top, creating a composite view of vector data and raster imagery.

Mmbostock

74% match

Loading thumbnail…

A D3 Map, points plotted with canvas instead of SVG

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

SShweta-tech

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

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

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

70% match

Loading thumbnail…

Plotting points backup

This example displays parking location data as red dots on a map of Dutch municipalities, sourced from the RDW open data API. The map uses a Mercator projection with `d3.geoPath` to render the TopoJSON boundaries. Parking coordinates are extracted from the API’s geometry field, filtered, and plotted as small circles on the SVG. The visualization supports zooming via d3-zoom and includes interactive hover effects on the municipality paths.

Mmbergevoet

70% match

Loading thumbnail…

Plotting points test

This example visualizes parking lot data retrieved from the RDW Open Data API, plotting geographic points onto a map of Dutch municipalities. The map uses an SVG rendering with a Mercator projection, and the geographic boundaries are drawn from a TopoJSON file using `d3.geoPath`. The parking point coordinates are extracted from the API’s geometry text fields and displayed as circles on the map. The visualization incorporates `d3.zoom` for panning and zooming the view, allowing users to explore the spatial distribution of the plotted points.

GGijs Laarman

70% match