viewBox space coordinate transformation

<!DOCTYPE html>
<html>
 <head>
   <title>Aspect Ratio</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.3.0/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.3.0/d3.layout.js"></script>

</style>
 </head>
 <body>

var box_example = function(w, h)
    {
        //setup svg canvas
        var svg = d3.select("#chart")
            .append("svg:svg")
                //.attr("width", "1000")
                //.attr("height", "700")
                //Aspect ratio intentionally skewed
                .attr("width", w)
                .attr("height", h)
                .attr("viewBox", "0 0 400 400")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("id", "charts");

svg.append("svg:rect")
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("stroke", "#000")
            .attr("stroke-width", 1)
            .attr("fill", "none")

var mybox = svg.append("svg:rect")
            .attr("width", 200)
            .attr("height", 200)
            .attr("transform", "translate(100,100)")
            .attr("fill", "#00ff00")
            .attr("fill-opacity", .8)
            .attr("stroke", "#000")
            .attr("stroke-width", 5)
            .attr("stroke-opacity", .6)

var boxnode = mybox.node();
        var bbox = boxnode.getBBox();
        console.log(bbox);

var topleft = make_point(boxnode, [bbox.x, bbox.y]);
        var circle = svg.append("svg:circle")
            .attr("cx", topleft.x)
            .attr("cy", topleft.y)
            .attr("r", 20)
            .attr("stroke", "none")
            .attr("fill", "#ff0000")
            .attr("fill-opacity", .6)
    }

//1 to 1 between screen pixels and viewBox
    box_example(400, 400);
    //skewed
    box_example(500, 320);

</script>
 </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.3.0 to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js?2.3.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.3.0

https://mbostock.github.com/d3/d3.layout.js?2.3.0