Proj4/WKT + D3 + d3-interpolate-path
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 descriptionUse 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