D3 Examples - Map using GeoJSON with cartesian coordinates

Map using GeoJSON with cartesian coordinates

Small test of D3 API used to map a geojson with cartesian coordinates (instead of lat-lon's). Uses an override of standard D3 geo projection behaviour: don't perform a full projection and resampling, but only a 1st order translation and scaling to transform real-world XY-coordinates into SVG screen coordinates...

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .boundary {
        fill: #eee;
        stroke: #999;
    }
</style>
<body>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var SVGwidth = 400, SVGheight = 400;
​
// RD=RijksDriehoekstelsel=Dutch national projection system bounds:
var minx = 13600;
var miny = 306900;
var maxx = 278000;
var maxy = 619300;
// use RD limits to calculate scale and bounds needed for
// affine transformation of RD coordinates to screen coordinates
var height = maxy - miny;
var width = maxx - minx;
var scale = Math.min(SVGheight,SVGwidth)/Math.max(height,width);
​
var y_offset = (maxy * scale);
var x_offset = -(minx * scale);
​
var svg = d3.select("body").append("svg")
        .attr("id", "theMapSVG")
        .attr("width", SVGwidth)
        .attr("height", SVGheight)
        ;
        
// AffineTransformation as a basic pseudo-projection of RD coords to screen coords
// https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
function AffineTransformation(a, b, c, d, tx, ty) {
    return {
        //overrides normal D3 projection stream (to avoid adaptive sampling)
        stream: function(output) {
            return {
                point: function(x, y) { output.point(a * x + b * y + tx, c * x + d * y + ty); },
                sphere: function() { output.sphere(); },
                lineStart: function() { output.lineStart(); },
                lineEnd: function() { output.lineEnd(); },
                polygonStart: function() { output.polygonStart(); },
                polygonEnd: function() { output.polygonEnd(); }
            };
        }
    };
}
​
var path = d3.geo.path().projection(AffineTransformation(scale, 0, 0, -scale, x_offset, y_offset));
​
d3.json("test.json", function(json) {
    // test.json = small map of Netherlands (using RD coords)
    nl=json;
    svg.selectAll("path")
        .data(nl.features)
        .enter().append("path")
        .attr("class", "boundary")
        .attr("d", path)
    ;
});
​
d3.select(self.frameElement).style("height", SVGheight + "px");
​
</script>
</body>
    