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...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .boundary {
        fill: #eee;
        stroke: #999;
    }
</style>
<body>

// 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 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js