Demo of Customizable Wagner ESP using d3-geo

Projections with equally spaced parallels (along the central meridian)

by kartenprojektionen.de

This is a demo of the Customizable Wagner, using the d3-geo scripts with
d3.geoWagnerEquallySpacedParallels().parentProjection(9).poleline(60).parallels(51.9615242271).ratio(450).xfactor(38.490017946)
Gott-Wagner

Böhm Notation of this example: ix@60-51.9615242271-450-38.490017946. Show in WVG-ESP.

For more information about Wagner’s transformation method, read this blogpost or the notes at the Wagner Variations Generator (WVG-7) or the article Das Umbeziffern – The Wagner Transformation Method.

HTML/JavaScript source code for this example

        <div id="svgs" class="svg-container"></div>
<script>
    var width = 1000,
        height = 660;

    var projection = d3.geoWagnerEquallySpacedParallels()
        .scale(150)
        .translate([width / 2, height / 2.2])
        .precision(.1)
        .parentProjection(9)
        .poleline(60)
        .parallels(51.9615242271)
        .ratio(450)
        .xfactor(38.490017946)

    var path = d3.geoPath()
        .projection(projection);

    var graticule = d3.geoGraticule()
        .step([10,10]);

    var svg = d3.select("#svgs").append("svg")
        .attr("id", "image_PID_")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 1000 660")
        .classed("svg-content", true)
        .append("g");

    svg.append("defs").append("path")
        .datum({type: "Sphere"})
        .attr("id", "sphere")
        .attr("d", path);

    svg.append("use")
        .attr("class", "stroke")
        .attr("xlink:href", "#sphere");

    svg.append("use")
        .attr("class", "fill")
        .attr("xlink:href", "#sphere");

    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

            
    d3.json("world-50m.json").then(function(json) {
        world = json;
        svg.insert("path", ".graticule")
            .datum(topojson.feature(world, world.objects.land))
            .attr("class", "land")
            .attr("d", path);
    });

    d3.select('#svg').style("height", height + "px");
</script>    
    

Source code of d3-geo-projection.umbeziffern.rfc.js

View/Download d3-geo-projection.umbeziffern.rfc.js

License

Released under the GNU General Public License, version 3.

kartenprojektionen.de: Startseite · Impressum · Datenschutz