d3.json("bonn.json", function(error, mapData) {

    if (error) return console.error(error);

    var width = 800
    var height = 800
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var bounds = d3.geoBounds(mapData)
    //var bounds = [
    //    [7.0226282622, 50.6327277725],
    //    [7.2106608053, 50.7743702078]
    //]
    document.write("BOUNDS = " + bounds)

    // -----------------------------------------------------------------------

    var bottomLeft = bounds[0]
    var topRight = bounds[1]
    var rotLong = -(topRight[0] + bottomLeft[0]) / 2
    var center = [(topRight[0] + bottomLeft[0]) / 2 +
        rotLong, (topRight[1] + bottomLeft[1]) / 2
    ]

    projection = d3.geoAlbers()
        .parallels([bottomLeft[1], topRight[1]])
        .translate([width / 2, height / 2])
        .rotate([rotLong, 0, 0])
        .center(center);

    var bottomLeftPx = projection(bottomLeft)
    var topRightPx = projection(topRight)
    var scaleFactor = 1.00 * Math.min(width / (topRightPx[0] -
        bottomLeftPx[0]), height / (-topRightPx[1] + bottomLeftPx[1]))
    projection = d3.geoAlbers()
        .parallels([bottomLeft[1], topRight[1]])
        .rotate([rotLong, 0, 0])
        .translate([width / 2, height / 2])
        .scale(scaleFactor * 0.975 * 1000)
        .center(center);

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

    console.log("-- drawing path");
    svg.selectAll("path.feature")
        .data(mapData.features)
        .enter()
        .append("path")
        .attr("d", geoPath)
        .style("fill", "yellow")
        .style("stroke", "red")
        .style("stroke-width", 0.1)

    console.log("-- done");
})