Learn D3.js

Graticules, circles and lines

Graticules in geographic coordinate systems have the same function as axes in Cartesian coordinate systems. They add context to a map with lines representing parallels of latitude and meridians of longitude. Graticules should be discrete as to provide sufficient context for the data without getting in the way. They are usually rendered with thin semitransparent lines over or behind the data shapes.

You can generate GeoJSON shapes for graticules using the d3.graticule() function. It creates a MultiLineString with concentric parallels and meridians that can be rendered with a geoPath function. The following code draws gray, pixel-wide graticules lines on an SVG object using the projection function configured for ...