Projecting Spherical Coordinates to 2D SVG Paths

Projecting spherical map coordinates into 2D SVG canvas paths is the core technique behind modern web cartography and geographic data visualization. The process involves ingesting geographic data (latitude and longitude), applying a mathematical map projection to flatten the 3D sphere into a 2D Cartesian plane, transforming those points to match the SVG coordinate space, and encoding the resulting points into standard SVG path syntax.

1. Ingesting Geographic Coordinates

Geographic data is typically sourced in formats like GeoJSON, Shapefiles, or TopoJSON. These datasets represent geographical features—such as country borders, rivers, or points of interest—as arrays of spherical coordinates defined by longitude (\(\lambda\)) and latitude (\(\phi\)), measured in degrees or radians.

2. Applying Mathematical Projections

Because the Earth is a three-dimensional oblate spheroid, its surface cannot be flattened onto a two-dimensional plane without distortion. A map projection is a mathematical function that maps spherical coordinates \((\lambda, \phi)\) to planar Cartesian coordinates \((x, y)\):

\[(x, y) = f(\lambda, \phi)\]

Common projections include: * Mercator: Preserves angles and shapes locally, making it popular for interactive navigation tiles, though it significantly distorts area near the poles. * Equirectangular (Plate Carrée): Maps longitude directly to \(x\) and latitude directly to \(y\), providing a simple, linear conversion. * Albers Equal-Area / Lambert Conformal Conic: Used for regional maps to preserve area or shape accuracy across specific geographic extents.

During this stage, geometries that cross the antimeridian (the \(180^\circ\) meridian) or the edge of the projection boundary are clipped to prevent horizontal lines from stretching across the canvas.

3. Screen Space Transformation

The raw Cartesian coordinates produced by projection equations do not directly match an SVG viewport. Two primary adjustments must be applied: * Y-Axis Inversion: Standard mathematical Cartesian systems place \((0, 0)\) at the bottom-left with the Y-axis pointing upward. SVG viewports place \((0, 0)\) at the top-left with the Y-axis pointing downward. The Y-values must be inverted (\(y_{svg} = -y_{projected}\)). * Scale and Translation: The projected coordinates must be scaled to the dimensions of the SVG viewport (width and height) and translated so the intended center of the map aligns with the center of the canvas.

4. Generating the SVG Path String

Once the coordinates are converted to 2D screen coordinates, they are translated into the d attribute of an SVG <path> element: * A M (MoveTo) command is issued for the first coordinate pair of a polygon or line ring. * Consecutive L (LineTo) commands are appended for each following \((x, y)\) coordinate pair. * A Z (ClosePath) command is appended at the end of closed linear rings (such as country boundaries). * For complex polygons with interior rings (holes), additional M and L sub-paths are created within the same path string using the non-zero or even-odd fill rules.

5. Final Rendering

The resulting string (e.g., M 120 240 L 125 238 L 130 250 Z) is assigned to the <path d="..."> element within the SVG canvas. Libraries such as D3.js automate this pipeline through projection utilities (d3.geoProjection) and path generators (d3.geoPath), converting complex geographic geometries directly into rendered vector elements in the browser.