Skip to main content
100%

Proj4/WKT + D3 + d3-interpolate-path

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Jul 6, 2017
Created on Jun 12, 2017

This example transitions European country borders and graticules between different map projections defined by Proj4 or WKT strings. It uses Proj4js to convert projection definitions into D3 projections via `d3.geoProjection`, with geographic data from Eurostat’s GISCO program. The graticule paths animate smoothly using `d3.interpolate-path` within `attrTween`, while borders transition via standard D3 path updates. A menu lets users select from projections like Pulkovo 1942 or Irish Transverse Mercator, with SVG rendering and mousemove coordinate display.

AI-generated description

Use Proj4js to convert proj4 or WKT projection definition strings into D3 projections.

// Create Proj4js projection function
var proj4Projection = proj4(wkt);  // WGS84 to projection defined in `wkt`

// Use this to create a D3 projection
var project = function(lambda, phi) {
	return proj4Projection
		.forward([lambda, phi].map(radiansToDegrees));
};

project.invert = function(x, y) {
	return proj4Projection
		.inverse([x, y]).map(degreesToRadians);
};

var projection = d3.geoProjection(project);

Geographic data from Eurostat's GISCO program. The example projections came from Spatial Reference.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/e6371dcceed6d89312cf6a78be1a0b49'>Proj4/WKT + D3</a>


There are three ways to transition the shapes from one projection to the other:

-- Mike Bostock's and Jason Davies' <a href='https://bl.ocks.org/mbostock/3711652'>projection transitions</a> is probably the correct way to do it

-- Noah Veltman's <a href='http://bl.ocks.org/Fil/9e901b99a6835d489b70a36177e7714b'>flubber</a> interpolates shapes beautifully, but not lines (graticules) yet

-- Peter Beshai's <a href='http://bl.ocks.org/Fil/fbbccd40266014ebe0364da8975a7992'>d3-interpolate-path</a> works well with those graticules since version 2

Similar vizzes